diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 4acdebf..abc5a97 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "react-router-dom": "^6.27.0"
       },
       "devDependencies": {
         "@eslint/js": "^9.13.0",
@@ -1051,6 +1052,15 @@
         "node": ">=14"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz",
+      "integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.24.4",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.4.tgz",
@@ -4432,6 +4442,38 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.27.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz",
+      "integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.20.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.27.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.27.0.tgz",
+      "integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.20.0",
+        "react-router": "6.27.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 8c19ebe..25bcfb2 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.27.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index cd34a6f..8b8c3e7 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,14 +1,20 @@
-import {  } from 'react'
-
-import './App.css'
+import {} from "react";
+import "./App.css";
+import { Routes, Route, BrowserRouter } from "react-router-dom";
+import Home from "./pages/Home";
+import Header from "./components/Header/Header";
+import LoginPage from "./pages/LoginPage";
 
 function App() {
-
   return (
-    <div className="bg-slate-700">
-      Hello
-    </div>
-  )
+    <BrowserRouter>
+    <Header/>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/login" element={<LoginPage/>} />
+      </Routes>
+    </BrowserRouter>
+  );
 }
 
-export default App
+export default App;
diff --git a/frontend/src/components/Header/Header.jsx b/frontend/src/components/Header/Header.jsx
new file mode 100644
index 0000000..c0927bd
--- /dev/null
+++ b/frontend/src/components/Header/Header.jsx
@@ -0,0 +1,66 @@
+import React from 'react'
+
+function Header() {
+  return (
+    <div className="navbar bg-base-100">
+  <div className="flex-1">
+    <a className="btn btn-ghost text-xl">daisyUI</a>
+  </div>
+  <div className="flex-none">
+    <div className="dropdown dropdown-end">
+      <div tabIndex={0} role="button" className="btn btn-ghost btn-circle">
+        <div className="indicator">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-5 w-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor">
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
+          </svg>
+          <span className="badge badge-sm indicator-item">8</span>
+        </div>
+      </div>
+      <div
+        tabIndex={0}
+        className="card card-compact dropdown-content bg-base-100 z-[1] mt-3 w-52 shadow">
+        <div className="card-body">
+          <span className="text-lg font-bold">8 Items</span>
+          <span className="text-info">Subtotal: $999</span>
+          <div className="card-actions">
+            <button className="btn btn-primary btn-block">View cart</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div className="dropdown dropdown-end">
+      <div tabIndex={0} role="button" className="btn btn-ghost btn-circle avatar">
+        <div className="w-10 rounded-full">
+          <img
+            alt="Tailwind CSS Navbar component"
+            src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+        </div>
+      </div>
+      <ul
+        tabIndex={0}
+        className="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
+        <li>
+          <a className="justify-between">
+            Profile
+            <span className="badge">New</span>
+          </a>
+        </li>
+        <li><a>Settings</a></li>
+        <li><a>Logout</a></li>
+      </ul>
+    </div>
+  </div>
+</div>
+  )
+}
+
+export default Header
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
new file mode 100644
index 0000000..44d44c2
--- /dev/null
+++ b/frontend/src/pages/Home.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+function Home() {
+  return (
+    <div>
+      Home
+    </div>
+  )
+}
+
+export default Home
diff --git a/frontend/src/pages/LoginPage.jsx b/frontend/src/pages/LoginPage.jsx
new file mode 100644
index 0000000..6f63ca4
--- /dev/null
+++ b/frontend/src/pages/LoginPage.jsx
@@ -0,0 +1,66 @@
+// LoginPage.js
+import React from 'react';
+
+const LoginPage = () => {
+  return (
+    <div className="flex justify-center  p-4">
+      <div className="w-full max-w-md  rounded-lg  p-8">
+        <h2 className="text-2xl font-semibold text-center text-white mb-6">Login</h2>
+        
+        <form className="space-y-4">
+          {/* Email Input */}
+          <div className="form-control w-full">
+            <label className="label">
+              <span className="label-text text-gray-200">Email</span>
+            </label>
+            <input 
+              type="email" 
+              placeholder="Enter your email" 
+              className="input input-bordered w-full bg-gray-700 text-white focus:outline-none focus:ring focus:ring-primary" 
+              required 
+            />
+          </div>
+
+          {/* Password Input */}
+          <div className="form-control w-full">
+            <label className="label">
+              <span className="label-text text-gray-200">Password</span>
+            </label>
+            <input 
+              type="password" 
+              placeholder="Enter your password" 
+              className="input input-bordered w-full bg-gray-700 text-white focus:outline-none focus:ring focus:ring-primary" 
+              required 
+            />
+          </div>
+
+          {/* Forgot Password Link */}
+          <div className="text-right">
+            <a href="#" className="text-sm text-primary hover:underline">Forgot password?</a>
+          </div>
+
+          {/* Submit Button */}
+          <div>
+            <button 
+              type="submit" 
+              className="btn btn-primary w-full text-white"
+            >
+              Login
+            </button>
+          </div>
+        </form>
+
+        {/* Divider */}
+        <div className="divider text-gray-400">OR</div>
+
+        {/* Sign Up Link */}
+        <p className="text-center text-gray-300">
+          Don’t have an account?{' '}
+          <a href="#" className="text-primary hover:underline">Sign up</a>
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default LoginPage;