diff --git a/package-lock.json b/package-lock.json
index c0f1f72..3a33332 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,9 @@
         "framer-motion": "^12.0.6",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-router": "^7.1.3",
         "react-router-dom": "^7.1.3",
+        "react-toastify": "^11.0.3",
         "swiper": "^11.2.1",
         "tailwindcss": "^4.0.0"
       },
@@ -36,6 +38,7 @@
       "cpu": [
         "ppc64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -52,6 +55,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -68,6 +72,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -84,6 +89,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -100,6 +106,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -116,6 +123,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -132,6 +140,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -148,6 +157,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -164,6 +174,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -180,6 +191,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -196,6 +208,7 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -212,6 +225,7 @@
       "cpu": [
         "loong64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -228,6 +242,7 @@
       "cpu": [
         "mips64el"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -244,6 +259,7 @@
       "cpu": [
         "ppc64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -260,6 +276,7 @@
       "cpu": [
         "riscv64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -276,6 +293,7 @@
       "cpu": [
         "s390x"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -292,6 +310,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -308,6 +327,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -324,6 +344,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -340,6 +361,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -356,6 +378,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -372,6 +395,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -388,6 +412,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -404,6 +429,7 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -420,6 +446,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -643,6 +670,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -656,6 +684,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -669,6 +698,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -682,6 +712,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -695,6 +726,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -708,6 +740,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -721,6 +754,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -734,6 +768,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -747,6 +782,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -760,6 +796,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -773,6 +810,7 @@
       "cpu": [
         "loong64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -786,6 +824,7 @@
       "cpu": [
         "ppc64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -799,6 +838,7 @@
       "cpu": [
         "riscv64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -812,6 +852,7 @@
       "cpu": [
         "s390x"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -825,6 +866,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -838,6 +880,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -851,6 +894,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -864,6 +908,7 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -877,6 +922,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1343,6 +1389,7 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
       "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/json-schema": {
@@ -1713,6 +1760,15 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2114,6 +2170,7 @@
       "version": "0.24.2",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.2.tgz",
       "integrity": "sha512-+9egpBW8I3CD5XPe0n6BfT5fxLzxrlDzqydF3aviG+9ni1lDC/OvMHcxqEFV0+LANZG5R1bFMWfUrjVsdwxJvA==",
+      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -2492,6 +2549,7 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -3609,6 +3667,7 @@
       "version": "3.3.8",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
       "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -3849,6 +3908,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
       "license": "ISC"
     },
     "node_modules/possible-typed-array-names": {
@@ -3865,6 +3925,7 @@
       "version": "8.5.1",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.1.tgz",
       "integrity": "sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -3993,6 +4054,19 @@
         "react-dom": ">=18"
       }
     },
+    "node_modules/react-toastify": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.3.tgz",
+      "integrity": "sha512-cbPtHJPfc0sGqVwozBwaTrTu1ogB9+BLLjd4dDXd863qYLj7DGrQ2sg5RAChjFUB4yc3w8iXOtWcJqPK/6xqRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19",
+        "react-dom": "^18 || ^19"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -4069,6 +4143,7 @@
       "version": "4.32.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.32.0.tgz",
       "integrity": "sha512-JmrhfQR31Q4AuNBjjAX4s+a/Pu/Q8Q9iwjWBsjRH1q52SPFE2NqRMK6fUZKKnvKO6id+h7JIRf0oYsph53eATg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/estree": "1.0.6"
@@ -4335,6 +4410,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -4647,6 +4723,7 @@
       "version": "6.0.11",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.11.tgz",
       "integrity": "sha512-4VL9mQPKoHy4+FE0NnRE/kbY51TOfaknxAjt3fJbGJxhIpBZiqVzlZDEesWWsuREXHwNdAoOFZ9MkPEVXczHwg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.24.2",
diff --git a/package.json b/package.json
index 0c10262..4ed2595 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,9 @@
     "framer-motion": "^12.0.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router": "^7.1.3",
     "react-router-dom": "^7.1.3",
+    "react-toastify": "^11.0.3",
     "swiper": "^11.2.1",
     "tailwindcss": "^4.0.0"
   },
diff --git a/public/vite.svg b/public/vite.svg
deleted file mode 100644
index e7b8dfb..0000000
--- a/public/vite.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/public/warning.png b/public/warning.png
new file mode 100644
index 0000000..ff3d301
Binary files /dev/null and b/public/warning.png differ
diff --git a/src/App.jsx b/src/App.jsx
index 03fc602..b8367ba 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,12 +1,36 @@
+import React from "react";
 import "./App.css";
 import AdminDashboard from "./pages/AdminDashboard";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import Error from "./pages/Error";
+import Login from "./pages/Login";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 function App() {
+  const router = createBrowserRouter([
+    { 
+      errorElement: <Error />,
+      children: [
+        {
+          path: "/",
+          element: <Login />,
+        },
+        {
+          path: "/dashboard",
+          element: <AdminDashboard />,
+        },
+      ],
+    },
+  ]);
+
   return (
     <>
-      <AdminDashboard />
+      <RouterProvider router={router} />
+      <ToastContainer />
     </>
   );
 }
 
 export default App;
+  
\ No newline at end of file
diff --git a/src/components/Coach.jsx b/src/components/Coach.jsx
index 4980877..317c3bc 100644
--- a/src/components/Coach.jsx
+++ b/src/components/Coach.jsx
@@ -1,7 +1,60 @@
 import React from "react";
 
-const Coach = () => {
-  return <div></div>;
+const Coach = ({ coaches, newCoach, setNewCoach, addCoach, removeCoach }) => {
+  return (
+    <div>
+      <h2 className="text-2xl font-semibold mb-4">Manage Coaches</h2>
+      <div className="mb-6 grid grid-cols-1 gap-4 md:grid-cols-2">
+        <input
+          type="text"
+          placeholder="Coach Name"
+          value={newCoach.name}
+          onChange={(e) => setNewCoach({ ...newCoach, name: e.target.value })}
+          className="px-4 py-2 border rounded-lg bg-gray-800 text-white focus:ring focus:ring-gray-500"
+        />
+        <input
+          type="text"
+          placeholder="Coach Title"
+          value={newCoach.title}
+          onChange={(e) => setNewCoach({ ...newCoach, title: e.target.value })}
+          className="px-4 py-2 border rounded-lg bg-gray-800 text-white focus:ring focus:ring-gray-500"
+        />
+        <button
+          onClick={addCoach}
+          className="bg-white text-black px-4 py-2 rounded-lg hover:bg-gray-300 cursor-pointer"
+        >
+          Add Coach
+        </button>
+      </div>
+
+      <ul className="space-y-4">
+        {coaches.map((coach, index) => (
+          <li
+            key={index}
+            className="flex items-center justify-between bg-gray-800 p-4 rounded-lg shadow-md"
+          >
+            <div>
+              <h3 className="text-lg font-medium text-white">{coach.name}</h3>
+              <p className="text-gray-400">{coach.title}</p>
+            </div>
+            <div className="flex items-center space-x-2">
+              <button
+                className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 cursor-pointer"
+              >
+                Edit
+              </button>
+              <button
+                onClick={() => removeCoach(index)}
+                className="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 cursor-pointer"
+              >
+                Remove
+              </button>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
 };
 
 export default Coach;
diff --git a/src/components/Events.jsx b/src/components/Events.jsx
index e69de29..602e181 100644
--- a/src/components/Events.jsx
+++ b/src/components/Events.jsx
@@ -0,0 +1,61 @@
+import React from "react";
+
+const Events = ({ events, newEvent, setNewEvent, addEvent }) => {
+  return (
+    <div>
+      <h2 className="text-2xl font-semibold mb-4">Events Calendar</h2>
+      <div className="mb-6 grid grid-cols-1 gap-4 md:grid-cols-2">
+        <input
+          type="text"
+          placeholder="Event Title"
+          value={newEvent.title}
+          onChange={(e) => setNewEvent({ ...newEvent, title: e.target.value })}
+          className="px-4 py-2 border rounded-lg bg-gray-800 text-white focus:ring focus:ring-gray-500"
+        />
+        <input
+          type="date"
+          value={newEvent.date}
+          onChange={(e) => setNewEvent({ ...newEvent, date: e.target.value })}
+          className="px-4 py-2 border rounded-lg bg-gray-800 text-white focus:ring focus:ring-gray-500"
+        />
+        <textarea
+          placeholder="Description"
+          value={newEvent.description}
+          onChange={(e) =>
+            setNewEvent({ ...newEvent, description: e.target.value })
+          }
+          className="col-span-2 px-4 py-2 border rounded-lg bg-gray-800 text-white focus:ring focus:ring-gray-500"
+          rows="3"
+        />
+        <button
+          onClick={addEvent}
+          className="bg-white text-black px-4 py-2 rounded-lg hover:bg-gray-300 cursor-pointer"
+        >
+          Add Event
+        </button>
+      </div>
+
+      <ul className="space-y-4">
+        {events.map((event, index) => (
+          <li
+            key={index}
+            className="flex items-center justify-between bg-gray-800 p-4 rounded-lg shadow-md"
+          >
+            <div>
+              <h3 className="text-lg font-medium text-white">{event.title}</h3>
+              <p className="text-gray-400 text-sm">{event.date}</p>
+              <p className="text-gray-300">{event.description}</p>
+            </div>
+            <button
+              className="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600"
+            >
+              Remove
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default Events;
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index 7c132c0..589d8cf 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -1,7 +1,45 @@
 import React from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/navigation";
+import { Navigation } from "swiper/modules";
 
-const Hero = () => {
-  return <div></div>;
+const Hero = ({ images }) => {
+  return (
+    <div>
+      <Swiper
+        modules={[Navigation]}
+        navigation
+        loop={true}
+        className="rounded-xl overflow-hidden shadow-lg mb-6"
+        spaceBetween={10}
+        slidesPerView={1}
+      >
+        {images.map((image, index) => (
+          <SwiperSlide key={index} className="relative">
+            <img
+              src={image}
+              alt={`Slide ${index + 1}`}
+              className="w-full h-[600px] object-cover"
+            />
+
+            <div className="flex items-center space-x-2">
+              <button className="absolute top-4 right-4 bg-blue-500 text-white px-4 py-2 rounded-full hover:bg-blue-600 cursor-pointer">
+                Update
+              </button>
+
+              <button className="absolute top-4 right-30 bg-red-500 text-white px-4 py-2 rounded-full hover:bg-red-600 cursor-pointer">
+                Remove
+              </button>
+            </div>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+      <button className="bg-white text-black px-6 py-3 rounded-lg hover:bg-gray-300 cursor-pointer">
+        Add Image
+      </button>
+    </div>
+  );
 };
 
 export default Hero;
diff --git a/src/components/LoginForm.jsx b/src/components/LoginForm.jsx
new file mode 100644
index 0000000..d75f8cd
--- /dev/null
+++ b/src/components/LoginForm.jsx
@@ -0,0 +1,70 @@
+import React, { useState } from "react";
+import { toast } from "react-toastify";
+import { useNavigate } from "react-router-dom";
+
+const LoginForm = () => {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const navigate = useNavigate();
+
+  const handleLogin = () => {
+    const validEmail = "test";
+    const validPassword = "test@123"; 
+
+    if (email === validEmail && password === validPassword) {
+      toast.success("Login successful!");
+      navigate("/dashboard");   
+    } else {  
+      toast.error("Invalid credentials. Please try again.");
+    }
+  };  
+
+  return (
+    <div className="bg-white px-10 py-20 rounded-3xl border-2 border-gray-200 mx-2">
+      <h1 className="text-5xl font-semibold">Login</h1>
+      <p className="font-medium text-lg text-gray-500 mt-4">
+        Please enter your login credentials!
+      </p>
+      <div className="mt-8">
+        <div>
+          <label htmlFor="email" className="text-lg font-medium">
+            Email
+          </label>
+          <input
+            type="text"
+            className="w-full border-2 border-gray-100 rounded-xl p-4 mt-1 bg-transparent"
+            id="email"
+            placeholder="Enter Your Email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+          />
+        </div>
+        <div className="mt-2">
+          <label htmlFor="password" className="text-lg font-medium">
+            Password
+          </label>
+          <input
+            type="password"
+            className="w-full border-2 border-gray-100 rounded-xl p-4 mt-1 bg-transparent"
+            id="password"
+            placeholder="Enter Your Password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+        </div>
+
+        <div className="mt-8 flex flex-col gap-y-4">
+          <button
+            className="bg-violet-500 text-white text-lg font-bold py-3 rounded-xl active:scale-[0.98] transition-all active:duration-100 hover:scale-[1.01] ease-in-out cursor-pointer"
+            onClick={handleLogin}
+          >
+            Sign in
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LoginForm;
diff --git a/src/pages/AdminDashboard.jsx b/src/pages/AdminDashboard.jsx
index 0873e6c..b154123 100644
--- a/src/pages/AdminDashboard.jsx
+++ b/src/pages/AdminDashboard.jsx
@@ -1,18 +1,20 @@
 import React, { useState } from "react";
 import { motion } from "framer-motion";
-import { Swiper, SwiperSlide } from "swiper/react";
-import "swiper/css";
-import "swiper/css/navigation";
-import { Navigation } from "swiper/modules";
+import Hero from "../components/Hero";
+import Coach from "../components/Coach";
+import Events from "../components/Events";
 
 const AdminDashboard = () => {
   const [activeTab, setActiveTab] = useState("hero");
-  const [images, setImages] = useState([
+
+  // Hero state
+  const [images, setImages] = useState([  
     "https://vibra.qodeinteractive.com/wp-content/uploads/2019/02/h1-slider-3-background.jpg",
     "https://vibra.qodeinteractive.com/wp-content/uploads/2019/02/h1-slider-2-background.jpg",
     "https://vibra.qodeinteractive.com/wp-content/uploads/2019/02/h1-slider-1-background.jpg",
   ]);
 
+  // Coach state
   const [coaches, setCoaches] = useState([
     { name: "John Doe", title: "Head Coach" },
     { name: "Jane Smith", title: "Assistant Coach" },
@@ -30,15 +32,35 @@ const AdminDashboard = () => {
     setCoaches(coaches.filter((_, i) => i !== index));
   };
 
+  // Event state
+  const [events, setEvents] = useState([
+    {
+      title: "Team Meeting",
+      date: "2025-02-01",
+      description: "Monthly meeting.",
+    },
+    {
+      title: "Workshop",
+      date: "2025-02-05",
+      description: "Training workshop.",
+    },
+  ]);
+  const [newEvent, setNewEvent] = useState({
+    title: "",
+    date: "",
+    description: "",
+  });
+
+  const addEvent = () => {
+    if (newEvent.title && newEvent.date && newEvent.description) {
+      setEvents([...events, newEvent]);
+      setNewEvent({ title: "", date: "", description: "" });
+    }
+  };
+
   return (
     <div className="min-h-screen w-full bg-black text-white">
-      <motion.div
-        className="w-full"
-        initial={{ opacity: 0, y: -20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.5 }}
-      >
-        {/* Header */}
+      <motion.div className="w-full">
         <div className="bg-gray-900 p-6 shadow-lg">
           <h1 className="text-3xl font-bold tracking-wide">Admin Dashboard</h1>
         </div>
@@ -65,117 +87,28 @@ const AdminDashboard = () => {
         </div>
 
         {/* Tab Content */}
-        <motion.div
-          key={activeTab}
-          initial={{ opacity: 0, x: -50 }}
-          animate={{ opacity: 1, x: 0 }}
-          transition={{ duration: 0.4 }}
-          className="p-8"
-        >
-          {activeTab === "hero" && (
-            <div>
-              <Swiper
-                modules={[Navigation]}
-                navigation
-                loop={true}
-                className="rounded-xl overflow-hidden shadow-lg mb-6"
-                spaceBetween={10}
-                slidesPerView={1}
-              >
-                {images.map((image, index) => (
-                  <SwiperSlide key={index} className="relative">
-                    <img
-                      src={image}
-                      alt={`Slide ${index + 1}`}
-                      className="w-full h-72 object-cover"
-                    />
-                    <button
-                      className="absolute top-4 right-4 bg-red-500 text-white px-4 py-2 rounded-full hover:bg-red-600"
-                      onClick={() =>
-                        setImages(images.filter((_, i) => i !== index))
-                      }
-                    >
-                      Remove
-                    </button>
-                  </SwiperSlide>
-                ))}
-              </Swiper>
-
-              <button className="bg-white text-black px-6 py-3 rounded-lg hover:bg-gray-300">
-                Add Image
-              </button>
-
-              <p className="text-gray-400 mt-4">Manage hero section images.</p>
-            </div>
-          )}
-
+        <motion.div key={activeTab} className="p-8">
+          {/* Hero Content */}
+          {activeTab === "hero" && <Hero images={images} />}
+          {/* Coach Content */}
           {activeTab === "coach" && (
-            <div>
-              <h2 className="text-2xl font-semibold mb-4">Manage Coaches</h2>
-              <div className="mb-6 grid grid-cols-1 gap-4 md:grid-cols-2">
-                <input
-                  type="text"
-                  placeholder="Coach Name"
-                  value={newCoach.name}
-                  onChange={(e) =>
-                    setNewCoach({ ...newCoach, name: e.target.value })
-                  }
-                  className="px-4 py-3 border rounded-lg bg-gray-800 text-white focus:ring focus:ring-gray-500"
-                />
-                <input
-                  type="text"
-                  placeholder="Coach Title"
-                  value={newCoach.title}
-                  onChange={(e) =>
-                    setNewCoach({ ...newCoach, title: e.target.value })
-                  }
-                  className="px-4 py-3 border rounded-lg bg-gray-800 text-white focus:ring focus:ring-gray-500"
-                />
-
-                <button
-                  onClick={addCoach}
-                  className="bg-white text-black px-6 py-3 rounded-lg hover:bg-gray-300"
-                >
-                  Add Coach
-                </button>
-              </div>
-
-              <ul className="space-y-4">
-                {coaches.map((coach, index) => (
-                  <li
-                    key={index}
-                    className="flex items-center justify-between bg-gray-800 p-4 rounded-lg shadow-md"
-                  >
-                    <div>
-                      <h3 className="text-lg font-medium text-white">
-                        {coach.name}
-                      </h3>
-                      <p className="text-gray-400">{coach.title}</p>
-                    </div>
-                    <button
-                      onClick={() => removeCoach(index)}
-                      className="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600"
-                    >
-                      Remove
-                    </button>
-                  </li>
-                ))}
-              </ul>
-
-              <p className="text-gray-400 mt-4">Manage the coaching team.</p>
-            </div>
+            <Coach
+              coaches={coaches}
+              newCoach={newCoach}
+              setNewCoach={setNewCoach}
+              addCoach={addCoach}
+              removeCoach={removeCoach}
+            />
           )}
 
+          {/* Events Content */}
           {activeTab === "calendar" && (
-            <div>
-              <h2 className="text-2xl font-semibold mb-4">Events Calendar</h2>
-              <button className="bg-gray-700 text-white px-6 py-3 rounded-lg hover:bg-gray-600">
-                Add New Event
-              </button>
-              <p className="text-gray-400 mt-4">
-                Schedule, edit, or remove events from the calendar.
-              </p>
-            </div>
+            <Events
+              events={events}
+              newEvent={newEvent}
+              setNewEvent={setNewEvent}
+              addEvent={addEvent}
+            />
           )}
         </motion.div>
       </motion.div>
diff --git a/src/pages/Error.jsx b/src/pages/Error.jsx
new file mode 100644
index 0000000..ea31c17
--- /dev/null
+++ b/src/pages/Error.jsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { Link, useRouteError } from "react-router";
+
+const Error = () => {
+  const error = useRouteError();
+  return (
+    <div className="text-center mt-5">
+      <img
+        src="/warning.png"
+        alt=""
+        className="mb-3"
+        style={{ height: "150px", width: "180px" }}
+      />
+      <h1 className="text-lg">Oops! An error occured.</h1>
+      <p>{error.data} </p>
+
+      <Link to="/">
+        <button className="bg-black text-white px-6 py-3 rounded-lg">
+          Go Home
+        </button>
+      </Link>
+    </div>
+  );
+};
+
+export default Error;
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
new file mode 100644
index 0000000..df095d5
--- /dev/null
+++ b/src/pages/Login.jsx
@@ -0,0 +1,18 @@
+import React from "react";
+import LoginForm from "../components/LoginForm";
+
+const Login = () => {
+  return (    
+    <div className="bg-[#f1f1f1] flex w-full h-screen">
+      <div className="w-full flex items-center justify-center lg:w-1/2 ">
+        <LoginForm/>      
+      </div>
+      <div className="hidden relative lg:flex h-full w-1/2 items-center justify-center bg-gray-200">
+        <div className="w-60 h-60 bg-gradient-to-tr from-violet-500 to-blue-200 rounded-full animate-bounce shadow-2xl"/>
+        <div className="w-full absolute h-[38%] bg-white/10 backdrop-blur-3xl bottom-0"/>
+      </div>
+    </div>
+  );
+};
+
+export default Login;
\ No newline at end of file