diff --git a/src/Routers.jsx b/src/Routers.jsx
index 9828d1b..d90f661 100644
--- a/src/Routers.jsx
+++ b/src/Routers.jsx
@@ -41,6 +41,7 @@ import FamilyManagePage from "./views/FamilyManagePage";
 import MyCouponPage from "./views/MyCouponPage";
 import AuthRedirect from "./views/AuthRedirect";
 import MyPastDueJobsPage from "./views/MyPastDueJobsPage";
+import BlogPage from "./views/BlogPage";
 
 export default function Routers() {
   return (
@@ -93,6 +94,9 @@ export default function Routers() {
           <Route exact path="/manage-family"  element={<FamilyManagePage />} />
           <Route exact path="/start-job"  element={<StartJob />} />
           <Route exact path="/manage-active-job"  element={<ManageActiveJobs />} />
+          <Route exact path="/blog-page"  element={<BlogPage />} />
+
+
           <Route
             exact
             path="/my-collection/collection-item"
diff --git a/src/components/Blogs/index.jsx b/src/components/Blogs/index.jsx
new file mode 100644
index 0000000..7656650
--- /dev/null
+++ b/src/components/Blogs/index.jsx
@@ -0,0 +1,40 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import Layout from "../Partials/Layout";
+import CommonHead from "../UserHeader/CommonHead";
+
+export default function BlogItem(props) {
+    const [selectTab, setValue] = useState("today");
+    const filterHandler = (value) => {
+        setValue(value);
+    };
+    return (
+        <Layout>
+            <CommonHead
+                commonHeadData={props.commonHeadData}
+            />
+            <div className="notification-page w-full mb-10">
+                <div className="notification-wrapper w-full">
+                    {/* heading */}
+                    <div className="sm:flex justify-between items-center mb-6">
+                        <div className="mb-5 sm:mb-0">
+                            <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
+                <span
+                    className={`${selectTab === "today" ? "block" : "hidden"}`}
+                >
+                  Title of this Blog Items
+                </span>
+                            </h1>
+                        </div>
+                        <div className="slider-btns flex space-x-4">
+
+                        </div>
+                    </div>
+                   <div>
+                       Blog Items Details
+                   </div>
+                </div>
+            </div>
+        </Layout>
+    );
+}
diff --git a/src/views/BlogPage.jsx b/src/views/BlogPage.jsx
new file mode 100644
index 0000000..25d8eb2
--- /dev/null
+++ b/src/views/BlogPage.jsx
@@ -0,0 +1,15 @@
+import React, { useContext, useState, useEffect } from "react";
+import BlogItem from "../components/Blogs";
+
+export default function BlogPage() {
+    const commonHeadData = () => {
+        console.log("COMMON HEAD DATA ----------------=====---------------------");
+        return 0;
+    };
+
+    return (
+        <>
+            <BlogItem  commonHeadData={commonHeadData} />
+        </>
+    );
+}