From cd2c74a094f5ed231d3843fadd91ce28f26354d5 Mon Sep 17 00:00:00 2001
From: KenTheNoob <kc97@njit.edu>
Date: Sat, 12 Apr 2025 20:18:47 -0400
Subject: [PATCH 1/7] adding authentication and dashboard

---
 eslint.config.js                              |   28 +
 package-lock.json                             | 1278 ++++++-----------
 package.json                                  |    4 +-
 src/app/(Dashboard)/dashboard/dashboard.css   |   17 +
 src/app/(Dashboard)/dashboard/guests/page.tsx |  860 +++++++++++
 src/app/(Dashboard)/dashboard/layout.tsx      |  863 +++++++++++
 src/app/(Dashboard)/dashboard/page.tsx        |   25 +
 .../(Dashboard)/dashboard/profile/page.tsx    |  933 ++++++++++++
 .../(Dashboard)/dashboard/resources/page.tsx  |  751 ++++++++++
 src/app/(Dashboard)/dashboard/users/page.tsx  |  731 ++++++++++
 src/app/(Dashboard)/globals.css               |   17 +
 src/app/(Dashboard)/layout.tsx                |   15 +
 src/app/(Dashboard)/login/page.tsx            |    8 +
 src/app/(Dashboard)/register/page.tsx         |    8 +
 .../{ => (HomePage)}/about/[slug]/page.tsx    |    0
 .../about/living-lab/page.tsx                 |    0
 src/app/{ => (HomePage)}/about/page.tsx       |    0
 .../api/characters/chat/route.ts              |    0
 .../{ => (HomePage)}/api/characters/route.ts  |    0
 .../{ => (HomePage)}/api/chat-proxy/route.ts  |    0
 src/app/{ => (HomePage)}/api/chat/route.ts    |    0
 src/app/{ => (HomePage)}/api/contact/route.ts |    0
 src/app/{ => (HomePage)}/community/page.tsx   |    0
 src/app/{ => (HomePage)}/contact/page.tsx     |    0
 src/app/{ => (HomePage)}/error.tsx            |    0
 .../forge/ForgeClientPage.tsx                 |    0
 .../forge/ForgeProjectsList.tsx               |    0
 .../forge/character-chat/page.tsx             |    0
 src/app/{ => (HomePage)}/forge/page.tsx       |    0
 .../forge/philosopher-graph/forceWorker.ts    |    2 +-
 .../forge/philosopher-graph/metadata.ts       |    0
 .../forge/philosopher-graph/page.tsx          |    2 +-
 src/app/{ => (HomePage)}/globals.css          |    0
 .../{ => (HomePage)}/insights/[slug]/page.tsx |    0
 src/app/{ => (HomePage)}/insights/page.tsx    |    0
 src/app/{ => (HomePage)}/layout.tsx           |    4 +-
 src/app/{ => (HomePage)}/not-found.tsx        |    0
 src/app/{ => (HomePage)}/page.tsx             |   16 +-
 .../{ => (HomePage)}/services/[slug]/page.tsx |    0
 src/app/{ => (HomePage)}/services/page.tsx    |    0
 src/components/AuthForm/AuthForm.tsx          |  270 ++++
 src/components/ChatBox/ChatBox.tsx            |  971 +++++++++++++
 src/components/Dashboard/AdminDashboard.tsx   |  320 +++++
 .../Dashboard/AnalyticsDashboard.tsx          |  538 +++++++
 src/components/Dashboard/AppContext.tsx       |  172 +++
 src/components/Dashboard/KnowledgeGraph.tsx   |  433 ++++++
 .../Dashboard/KnowledgeGraphPage.tsx          |  285 ++++
 .../Dashboard/ProjectManagement.tsx           |  627 ++++++++
 .../Dashboard/RealTimeDashboard.tsx           |  912 ++++++++++++
 src/components/Dashboard/UserDashboard.tsx    |  731 ++++++++++
 .../Graph/EnterprisePhilosopherGraph.tsx      |    2 +-
 src/components/Layout/Header.tsx              |    2 +
 src/lib/guestIdentifier.ts                    |   28 +
 src/utils/axiosConfig.ts                      |   52 +
 tailwind.config.js                            |    7 +-
 55 files changed, 10082 insertions(+), 830 deletions(-)
 create mode 100644 eslint.config.js
 create mode 100644 src/app/(Dashboard)/dashboard/dashboard.css
 create mode 100644 src/app/(Dashboard)/dashboard/guests/page.tsx
 create mode 100644 src/app/(Dashboard)/dashboard/layout.tsx
 create mode 100644 src/app/(Dashboard)/dashboard/page.tsx
 create mode 100644 src/app/(Dashboard)/dashboard/profile/page.tsx
 create mode 100644 src/app/(Dashboard)/dashboard/resources/page.tsx
 create mode 100644 src/app/(Dashboard)/dashboard/users/page.tsx
 create mode 100644 src/app/(Dashboard)/globals.css
 create mode 100644 src/app/(Dashboard)/layout.tsx
 create mode 100644 src/app/(Dashboard)/login/page.tsx
 create mode 100644 src/app/(Dashboard)/register/page.tsx
 rename src/app/{ => (HomePage)}/about/[slug]/page.tsx (100%)
 rename src/app/{ => (HomePage)}/about/living-lab/page.tsx (100%)
 rename src/app/{ => (HomePage)}/about/page.tsx (100%)
 rename src/app/{ => (HomePage)}/api/characters/chat/route.ts (100%)
 rename src/app/{ => (HomePage)}/api/characters/route.ts (100%)
 rename src/app/{ => (HomePage)}/api/chat-proxy/route.ts (100%)
 rename src/app/{ => (HomePage)}/api/chat/route.ts (100%)
 rename src/app/{ => (HomePage)}/api/contact/route.ts (100%)
 rename src/app/{ => (HomePage)}/community/page.tsx (100%)
 rename src/app/{ => (HomePage)}/contact/page.tsx (100%)
 rename src/app/{ => (HomePage)}/error.tsx (100%)
 rename src/app/{ => (HomePage)}/forge/ForgeClientPage.tsx (100%)
 rename src/app/{ => (HomePage)}/forge/ForgeProjectsList.tsx (100%)
 rename src/app/{ => (HomePage)}/forge/character-chat/page.tsx (100%)
 rename src/app/{ => (HomePage)}/forge/page.tsx (100%)
 rename src/app/{ => (HomePage)}/forge/philosopher-graph/forceWorker.ts (99%)
 rename src/app/{ => (HomePage)}/forge/philosopher-graph/metadata.ts (100%)
 rename src/app/{ => (HomePage)}/forge/philosopher-graph/page.tsx (99%)
 rename src/app/{ => (HomePage)}/globals.css (100%)
 rename src/app/{ => (HomePage)}/insights/[slug]/page.tsx (100%)
 rename src/app/{ => (HomePage)}/insights/page.tsx (100%)
 rename src/app/{ => (HomePage)}/layout.tsx (95%)
 rename src/app/{ => (HomePage)}/not-found.tsx (100%)
 rename src/app/{ => (HomePage)}/page.tsx (78%)
 rename src/app/{ => (HomePage)}/services/[slug]/page.tsx (100%)
 rename src/app/{ => (HomePage)}/services/page.tsx (100%)
 create mode 100644 src/components/AuthForm/AuthForm.tsx
 create mode 100644 src/components/ChatBox/ChatBox.tsx
 create mode 100644 src/components/Dashboard/AdminDashboard.tsx
 create mode 100644 src/components/Dashboard/AnalyticsDashboard.tsx
 create mode 100644 src/components/Dashboard/AppContext.tsx
 create mode 100644 src/components/Dashboard/KnowledgeGraph.tsx
 create mode 100644 src/components/Dashboard/KnowledgeGraphPage.tsx
 create mode 100644 src/components/Dashboard/ProjectManagement.tsx
 create mode 100644 src/components/Dashboard/RealTimeDashboard.tsx
 create mode 100644 src/components/Dashboard/UserDashboard.tsx
 create mode 100644 src/lib/guestIdentifier.ts
 create mode 100644 src/utils/axiosConfig.ts

diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 0000000..82c2e20
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,28 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  }
+);
diff --git a/package-lock.json b/package-lock.json
index 6e18c31..e3081ab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,8 +12,10 @@
         "@fontsource/poppins": "^5.2.5",
         "@fontsource/public-sans": "^5.2.5",
         "@headlessui/react": "^2.2.1",
+        "@heroicons/react": "^2.1.1",
         "@langchain/core": "^0.3.44",
         "@langchain/openai": "^0.5.5",
+        "@material-tailwind/react": "^2.1.9",
         "@radix-ui/react-dialog": "^1.1.6",
         "@radix-ui/react-icons": "^1.3.2",
         "@radix-ui/react-slot": "^1.1.2",
@@ -61,7 +63,7 @@
         "@types/d3-selection": "^3.0.11",
         "@types/d3-zoom": "^3.0.8",
         "@types/node": "^20",
-        "@types/react": "^18.3.5",
+        "@types/react": "^18.2.42",
         "@types/react-dom": "^18.3.0",
         "@types/react-slick": "^0.23.13",
         "@types/react-virtualized-auto-sizer": "^1.0.4",
@@ -104,18 +106,6 @@
       "integrity": "sha512-gAmrUZSGtKc3AiBL71iNWxDsyUC5uMaKKGdvzYsBoTW/xi42JQHl7eKV2OYzCUqvc+D2RCcf7EXY2iCyFIk6og==",
       "license": "MIT"
     },
-    "node_modules/@emnapi/core": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.4.0.tgz",
-      "integrity": "sha512-H+N/FqT07NmLmt6OFFtDfwe8PNygprzBikrEMyQfgqSmT0vzE515Pz7R8izwB9q/zsH/MA64AKoul3sA6/CzVg==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "@emnapi/wasi-threads": "1.0.1",
-        "tslib": "^2.4.0"
-      }
-    },
     "node_modules/@emnapi/runtime": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.4.0.tgz",
@@ -126,17 +116,23 @@
         "tslib": "^2.4.0"
       }
     },
-    "node_modules/@emnapi/wasi-threads": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.0.1.tgz",
-      "integrity": "sha512-iIBu7mwkq4UQGeMEM8bLwNK962nXdhodeScX4slfQnRhEMMzvYivHhutCIk8uojvmASXXPC2WNEjwxFWk72Oqw==",
-      "dev": true,
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
-        "tslib": "^2.4.0"
+        "@emotion/memoize": "0.7.4"
       }
     },
+    "node_modules/@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.5.1",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.5.1.tgz",
@@ -387,6 +383,15 @@
         "react-dom": "^18 || ^19 || ^19.0.0-rc"
       }
     },
+    "node_modules/@heroicons/react": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.1.tgz",
+      "integrity": "sha512-JyyN9Lo66kirbCMuMMRPtJxtKJoIsXKS569ebHGGRKbl8s4CtUfLnyKJxteA+vIKySocO4s1SkTkGS4xtG/yEA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -453,364 +458,6 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
-    "node_modules/@img/sharp-darwin-arm64": {
-      "version": "0.34.1",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.1.tgz",
-      "integrity": "sha512-pn44xgBtgpEbZsu+lWf2KNb6OAf70X68k+yk69Ic2Xz11zHR/w24/U49XT7AeRwJ0Px+mhALhU5LPci1Aymk7A==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-darwin-arm64": "1.1.0"
-      }
-    },
-    "node_modules/@img/sharp-darwin-x64": {
-      "version": "0.34.1",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.1.tgz",
-      "integrity": "sha512-VfuYgG2r8BpYiOUN+BfYeFo69nP/MIwAtSJ7/Zpxc5QF3KS22z8Pvg3FkrSFJBPNQ7mmcUcYQFBmEQp7eu1F8Q==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-darwin-x64": "1.1.0"
-      }
-    },
-    "node_modules/@img/sharp-libvips-darwin-arm64": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.1.0.tgz",
-      "integrity": "sha512-HZ/JUmPwrJSoM4DIQPv/BfNh9yrOA8tlBbqbLz4JZ5uew2+o22Ik+tHQJcih7QJuSa0zo5coHTfD5J8inqj9DA==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-darwin-x64": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.1.0.tgz",
-      "integrity": "sha512-Xzc2ToEmHN+hfvsl9wja0RlnXEgpKNmftriQp6XzY/RaSfwD9th+MSh0WQKzUreLKKINb3afirxW7A0fz2YWuQ==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linux-arm": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.1.0.tgz",
-      "integrity": "sha512-s8BAd0lwUIvYCJyRdFqvsj+BJIpDBSxs6ivrOPm/R7piTs5UIwY5OjXrP2bqXC9/moGsyRa37eYWYCOGVXxVrA==",
-      "cpu": [
-        "arm"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linux-arm64": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.1.0.tgz",
-      "integrity": "sha512-IVfGJa7gjChDET1dK9SekxFFdflarnUB8PwW8aGwEoF3oAsSDuNUTYS+SKDOyOJxQyDC1aPFMuRYLoDInyV9Ew==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linux-ppc64": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.1.0.tgz",
-      "integrity": "sha512-tiXxFZFbhnkWE2LA8oQj7KYR+bWBkiV2nilRldT7bqoEZ4HiDOcePr9wVDAZPi/Id5fT1oY9iGnDq20cwUz8lQ==",
-      "cpu": [
-        "ppc64"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linux-s390x": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.1.0.tgz",
-      "integrity": "sha512-xukSwvhguw7COyzvmjydRb3x/09+21HykyapcZchiCUkTThEQEOMtBj9UhkaBRLuBrgLFzQ2wbxdeCCJW/jgJA==",
-      "cpu": [
-        "s390x"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linux-x64": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.1.0.tgz",
-      "integrity": "sha512-yRj2+reB8iMg9W5sULM3S74jVS7zqSzHG3Ol/twnAAkAhnGQnpjj6e4ayUz7V+FpKypwgs82xbRdYtchTTUB+Q==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.1.0.tgz",
-      "integrity": "sha512-jYZdG+whg0MDK+q2COKbYidaqW/WTz0cc1E+tMAusiDygrM4ypmSCjOJPmFTvHHJ8j/6cAGyeDWZOsK06tP33w==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.1.0.tgz",
-      "integrity": "sha512-wK7SBdwrAiycjXdkPnGCPLjYb9lD4l6Ze2gSdAGVZrEL05AOUJESWU2lhlC+Ffn5/G+VKuSm6zzbQSzFX/P65A==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-linux-arm": {
-      "version": "0.34.1",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.1.tgz",
-      "integrity": "sha512-anKiszvACti2sGy9CirTlNyk7BjjZPiML1jt2ZkTdcvpLU1YH6CXwRAZCA2UmRXnhiIftXQ7+Oh62Ji25W72jA==",
-      "cpu": [
-        "arm"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm": "1.1.0"
-      }
-    },
-    "node_modules/@img/sharp-linux-arm64": {
-      "version": "0.34.1",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.1.tgz",
-      "integrity": "sha512-kX2c+vbvaXC6vly1RDf/IWNXxrlxLNpBVWkdpRq5Ka7OOKj6nr66etKy2IENf6FtOgklkg9ZdGpEu9kwdlcwOQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm64": "1.1.0"
-      }
-    },
-    "node_modules/@img/sharp-linux-s390x": {
-      "version": "0.34.1",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.1.tgz",
-      "integrity": "sha512-7s0KX2tI9mZI2buRipKIw2X1ufdTeaRgwmRabt5bi9chYfhur+/C1OXg3TKg/eag1W+6CCWLVmSauV1owmRPxA==",
-      "cpu": [
-        "s390x"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-s390x": "1.1.0"
-      }
-    },
-    "node_modules/@img/sharp-linux-x64": {
-      "version": "0.34.1",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.1.tgz",
-      "integrity": "sha512-wExv7SH9nmoBW3Wr2gvQopX1k8q2g5V5Iag8Zk6AVENsjwd+3adjwxtp3Dcu2QhOXr8W9NusBU6XcQUohBZ5MA==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-x64": "1.1.0"
-      }
-    },
-    "node_modules/@img/sharp-linuxmusl-arm64": {
-      "version": "0.34.1",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.1.tgz",
-      "integrity": "sha512-DfvyxzHxw4WGdPiTF0SOHnm11Xv4aQexvqhRDAoD00MzHekAj9a/jADXeXYCDFH/DzYruwHbXU7uz+H+nWmSOQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-arm64": "1.1.0"
-      }
-    },
-    "node_modules/@img/sharp-linuxmusl-x64": {
-      "version": "0.34.1",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.1.tgz",
-      "integrity": "sha512-pax/kTR407vNb9qaSIiWVnQplPcGU8LRIJpDT5o8PdAx5aAA7AS3X9PS8Isw1/WfqgQorPotjrZL3Pqh6C5EBg==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-x64": "1.1.0"
-      }
-    },
-    "node_modules/@img/sharp-wasm32": {
-      "version": "0.34.1",
-      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.1.tgz",
-      "integrity": "sha512-YDybQnYrLQfEpzGOQe7OKcyLUCML4YOXl428gOOzBgN6Gw0rv8dpsJ7PqTHxBnXnwXr8S1mYFSLSa727tpz0xg==",
-      "cpu": [
-        "wasm32"
-      ],
-      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
-      "optional": true,
-      "dependencies": {
-        "@emnapi/runtime": "^1.4.0"
-      },
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-win32-ia32": {
-      "version": "0.34.1",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.1.tgz",
-      "integrity": "sha512-WKf/NAZITnonBf3U1LfdjoMgNO5JYRSlhovhRhMxXVdvWYveM4kM3L8m35onYIdh75cOMCo1BexgVQcCDzyoWw==",
-      "cpu": [
-        "ia32"
-      ],
-      "license": "Apache-2.0 AND LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
     "node_modules/@img/sharp-win32-x64": {
       "version": "0.34.1",
       "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.1.tgz",
@@ -963,179 +610,206 @@
         "@langchain/core": ">=0.2.21 <0.4.0"
       }
     },
-    "node_modules/@mediapipe/tasks-vision": {
-      "version": "0.10.17",
-      "resolved": "https://registry.npmjs.org/@mediapipe/tasks-vision/-/tasks-vision-0.10.17.tgz",
-      "integrity": "sha512-CZWV/q6TTe8ta61cZXjfnnHsfWIdFhms03M9T7Cnd5y2mdpylJM0rF1qRq+wsQVRMLz1OYPVEBU9ph2Bx8cxrg==",
-      "license": "Apache-2.0"
+    "node_modules/@material-tailwind/react": {
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/@material-tailwind/react/-/react-2.1.9.tgz",
+      "integrity": "sha512-3uPlJE9yK4JF9DEQO4I1QbjR8o05+4fysLqoZ0v38TDOLE2tvDRhTBVhn6Mp9vSsq5CoJOKgemG7kbkOFAji4A==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react": "0.19.0",
+        "classnames": "2.3.2",
+        "deepmerge": "4.2.2",
+        "framer-motion": "6.5.1",
+        "material-ripple-effects": "2.0.1",
+        "prop-types": "15.8.1",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "tailwind-merge": "1.8.1"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
     },
-    "node_modules/@monogrid/gainmap-js": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@monogrid/gainmap-js/-/gainmap-js-3.1.0.tgz",
-      "integrity": "sha512-Obb0/gEd/HReTlg8ttaYk+0m62gQJmCblMOjHSMHRrBP2zdfKMHLCRbh/6ex9fSUJMKdjjIEiohwkbGD3wj2Nw==",
+    "node_modules/@material-tailwind/react/node_modules/@floating-ui/react": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.19.0.tgz",
+      "integrity": "sha512-fgYvN4ksCi5OvmPXkyOT8o5a8PSKHMzPHt+9mR6KYWdF16IAjWRLZPAAziI2sznaWT23drRFrYw64wdvYqqaQw==",
       "license": "MIT",
       "dependencies": {
-        "promise-worker-transferable": "^1.0.4"
+        "@floating-ui/react-dom": "^1.2.2",
+        "aria-hidden": "^1.1.3",
+        "tabbable": "^6.0.1"
       },
       "peerDependencies": {
-        "three": ">= 0.159.0"
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
       }
     },
-    "node_modules/@napi-rs/wasm-runtime": {
-      "version": "0.2.8",
-      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.8.tgz",
-      "integrity": "sha512-OBlgKdX7gin7OIq4fadsjpg+cp2ZphvAIKucHsNfTdJiqdOmOEwQd/bHi0VwNrcw5xpBJyUw6cK/QilCqy1BSg==",
-      "dev": true,
+    "node_modules/@material-tailwind/react/node_modules/@floating-ui/react-dom": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-1.3.0.tgz",
+      "integrity": "sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g==",
       "license": "MIT",
-      "optional": true,
       "dependencies": {
-        "@emnapi/core": "^1.4.0",
-        "@emnapi/runtime": "^1.4.0",
-        "@tybys/wasm-util": "^0.9.0"
+        "@floating-ui/dom": "^1.2.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
       }
     },
-    "node_modules/@next/env": {
-      "version": "14.2.28",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.28.tgz",
-      "integrity": "sha512-PAmWhJfJQlP+kxZwCjrVd9QnR5x0R3u0mTXTiZDgSd4h5LdXmjxCCWbN9kq6hkZBOax8Rm3xDW5HagWyJuT37g==",
+    "node_modules/@material-tailwind/react/node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==",
       "license": "MIT"
     },
-    "node_modules/@next/eslint-plugin-next": {
-      "version": "15.2.4",
-      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-15.2.4.tgz",
-      "integrity": "sha512-O8ScvKtnxkp8kL9TpJTTKnMqlkZnS+QxwoQnJwPGBxjBbzd6OVVPEJ5/pMNrktSyXQD/chEfzfFzYLM6JANOOQ==",
-      "dev": true,
+    "node_modules/@material-tailwind/react/node_modules/deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
       "license": "MIT",
-      "dependencies": {
-        "fast-glob": "3.3.1"
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.2.28",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.28.tgz",
-      "integrity": "sha512-kzGChl9setxYWpk3H6fTZXXPFFjg7urptLq5o5ZgYezCrqlemKttwMT5iFyx/p1e/JeglTwDFRtb923gTJ3R1w==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/@material-tailwind/react/node_modules/react": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
       "engines": {
-        "node": ">= 10"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/@next/swc-darwin-x64": {
-      "version": "14.2.28",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.28.tgz",
-      "integrity": "sha512-z6FXYHDJlFOzVEOiiJ/4NG8aLCeayZdcRSMjPDysW297Up6r22xw6Ea9AOwQqbNsth8JNgIK8EkWz2IDwaLQcw==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/@material-tailwind/react/node_modules/react-dom": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.0"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0"
       }
     },
-    "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.2.28",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.28.tgz",
-      "integrity": "sha512-9ARHLEQXhAilNJ7rgQX8xs9aH3yJSj888ssSjJLeldiZKR4D7N08MfMqljk77fAwZsWwsrp8ohHsMvurvv9liQ==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/@material-tailwind/react/node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "loose-envify": "^1.1.0"
       }
     },
-    "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.2.28",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.28.tgz",
-      "integrity": "sha512-p6gvatI1nX41KCizEe6JkF0FS/cEEF0u23vKDpl+WhPe/fCTBeGkEBh7iW2cUM0rvquPVwPWdiUR6Ebr/kQWxQ==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/@material-tailwind/react/node_modules/tailwind-merge": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.8.1.tgz",
+      "integrity": "sha512-+fflfPxvHFr81hTJpQ3MIwtqgvefHZFUHFiIHpVIRXvG/nX9+gu2P7JNlFu2bfDMJ+uHhi/pUgzaYacMoXv+Ww==",
+      "license": "MIT"
+    },
+    "node_modules/@mediapipe/tasks-vision": {
+      "version": "0.10.17",
+      "resolved": "https://registry.npmjs.org/@mediapipe/tasks-vision/-/tasks-vision-0.10.17.tgz",
+      "integrity": "sha512-CZWV/q6TTe8ta61cZXjfnnHsfWIdFhms03M9T7Cnd5y2mdpylJM0rF1qRq+wsQVRMLz1OYPVEBU9ph2Bx8cxrg==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@monogrid/gainmap-js": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@monogrid/gainmap-js/-/gainmap-js-3.1.0.tgz",
+      "integrity": "sha512-Obb0/gEd/HReTlg8ttaYk+0m62gQJmCblMOjHSMHRrBP2zdfKMHLCRbh/6ex9fSUJMKdjjIEiohwkbGD3wj2Nw==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "promise-worker-transferable": "^1.0.4"
+      },
+      "peerDependencies": {
+        "three": ">= 0.159.0"
       }
     },
-    "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.2.28",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.28.tgz",
-      "integrity": "sha512-nsiSnz2wO6GwMAX2o0iucONlVL7dNgKUqt/mDTATGO2NY59EO/ZKnKEr80BJFhuA5UC1KZOMblJHWZoqIJddpA==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/@motionone/animation": {
+      "version": "10.18.0",
+      "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.18.0.tgz",
+      "integrity": "sha512-9z2p5GFGCm0gBsZbi8rVMOAJCtw1WqBTIPw3ozk06gDvZInBPIsQcHgYogEJ4yuHJ+akuW8g1SEIOpTOvYs8hw==",
+      "license": "MIT",
+      "dependencies": {
+        "@motionone/easing": "^10.18.0",
+        "@motionone/types": "^10.17.1",
+        "@motionone/utils": "^10.18.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/dom": {
+      "version": "10.12.0",
+      "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.12.0.tgz",
+      "integrity": "sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==",
+      "license": "MIT",
+      "dependencies": {
+        "@motionone/animation": "^10.12.0",
+        "@motionone/generators": "^10.12.0",
+        "@motionone/types": "^10.12.0",
+        "@motionone/utils": "^10.12.0",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/easing": {
+      "version": "10.18.0",
+      "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.18.0.tgz",
+      "integrity": "sha512-VcjByo7XpdLS4o9T8t99JtgxkdMcNWD3yHU/n6CLEz3bkmKDRZyYQ/wmSf6daum8ZXqfUAgFeCZSpJZIMxaCzg==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "@motionone/utils": "^10.18.0",
+        "tslib": "^2.3.1"
       }
     },
-    "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.2.28",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.28.tgz",
-      "integrity": "sha512-+IuGQKoI3abrXFqx7GtlvNOpeExUH1mTIqCrh1LGFf8DnlUcTmOOCApEnPJUSLrSbzOdsF2ho2KhnQoO0I1RDw==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/@motionone/generators": {
+      "version": "10.18.0",
+      "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.18.0.tgz",
+      "integrity": "sha512-+qfkC2DtkDj4tHPu+AFKVfR/C30O1vYdvsGYaR13W/1cczPrrcjdvYCj0VLFuRMN+lP1xvpNZHCRNM4fBzn1jg==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "@motionone/types": "^10.17.1",
+        "@motionone/utils": "^10.18.0",
+        "tslib": "^2.3.1"
       }
     },
-    "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.2.28",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.28.tgz",
-      "integrity": "sha512-l61WZ3nevt4BAnGksUVFKy2uJP5DPz2E0Ma/Oklvo3sGj9sw3q7vBWONFRgz+ICiHpW5mV+mBrkB3XEubMrKaA==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/@motionone/types": {
+      "version": "10.17.1",
+      "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.17.1.tgz",
+      "integrity": "sha512-KaC4kgiODDz8hswCrS0btrVrzyU2CSQKO7Ps90ibBVSQmjkrt2teqta6/sOG59v7+dPnKMAg13jyqtMKV2yJ7A==",
+      "license": "MIT"
+    },
+    "node_modules/@motionone/utils": {
+      "version": "10.18.0",
+      "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.18.0.tgz",
+      "integrity": "sha512-3XVF7sgyTSI2KWvTf6uLlBJ5iAgRgmvp3bpuOiQJvInd4nZ19ET8lX5unn30SlmRH7hXbBbH+Gxd0m0klJ3Xtw==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "@motionone/types": "^10.17.1",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
       }
     },
-    "node_modules/@next/swc-win32-ia32-msvc": {
+    "node_modules/@next/env": {
       "version": "14.2.28",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.28.tgz",
-      "integrity": "sha512-+Kcp1T3jHZnJ9v9VTJ/yf1t/xmtFAc/Sge4v7mVc1z+NYfYzisi8kJ9AsY8itbgq+WgEwMtOpiLLJsUy2qnXZw==",
-      "cpu": [
-        "ia32"
-      ],
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.28.tgz",
+      "integrity": "sha512-PAmWhJfJQlP+kxZwCjrVd9QnR5x0R3u0mTXTiZDgSd4h5LdXmjxCCWbN9kq6hkZBOax8Rm3xDW5HagWyJuT37g==",
+      "license": "MIT"
+    },
+    "node_modules/@next/eslint-plugin-next": {
+      "version": "15.2.4",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-15.2.4.tgz",
+      "integrity": "sha512-O8ScvKtnxkp8kL9TpJTTKnMqlkZnS+QxwoQnJwPGBxjBbzd6OVVPEJ5/pMNrktSyXQD/chEfzfFzYLM6JANOOQ==",
+      "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "fast-glob": "3.3.1"
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
@@ -1900,17 +1574,6 @@
       "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
       "license": "MIT"
     },
-    "node_modules/@tybys/wasm-util": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.9.0.tgz",
-      "integrity": "sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
     "node_modules/@types/d3": {
       "version": "7.4.3",
       "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
@@ -2292,12 +1955,13 @@
       "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "18.3.20",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.20.tgz",
-      "integrity": "sha512-IPaCZN7PShZK/3t6Q87pfTkRm6oLTd4vztyoj+cbHUF1g3FfVb2tFIL79uCRKEfv16AhqDMBywP2VW3KIZUvcg==",
+      "version": "18.2.42",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.42.tgz",
+      "integrity": "sha512-c1zEr96MjakLYus/wPnuWDo1/zErfdU9rNsIGmE+NV71nx88FG9Ttgo5dqorXTu/LImX2f63WBP986gJkMPNbA==",
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
+        "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
@@ -2356,6 +2020,12 @@
       "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==",
       "license": "MIT"
     },
+    "node_modules/@types/scheduler": {
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.26.0.tgz",
+      "integrity": "sha512-WFHp9YUJQ6CKshqoC37iOlHnQSmxNc795UhB26CyBBttrN9svdIrUjl/NjnNmfcwtncN0h/0PPAFWv9ovP8mLA==",
+      "license": "MIT"
+    },
     "node_modules/@types/stats.js": {
       "version": "0.17.3",
       "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.3.tgz",
@@ -2556,284 +2226,85 @@
         "micromatch": "^4.0.8"
       },
       "engines": {
-        "node": ">=8.6.0"
-      }
-    },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/@typescript-eslint/utils": {
-      "version": "8.29.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.29.1.tgz",
-      "integrity": "sha512-QAkFEbytSaB8wnmB+DflhUPz6CLbFWE2SnSCrRMEa+KnXIzDYbpsn++1HGvnfAsUY44doDXmvRkO5shlM/3UfA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@eslint-community/eslint-utils": "^4.4.0",
-        "@typescript-eslint/scope-manager": "8.29.1",
-        "@typescript-eslint/types": "8.29.1",
-        "@typescript-eslint/typescript-estree": "8.29.1"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0",
-        "typescript": ">=4.8.4 <5.9.0"
-      }
-    },
-    "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.29.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.29.1.tgz",
-      "integrity": "sha512-RGLh5CRaUEf02viP5c1Vh1cMGffQscyHe7HPAzGpfmfflFg1wUz2rYxd+OZqwpeypYvZ8UxSxuIpF++fmOzEcg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@typescript-eslint/types": "8.29.1",
-        "eslint-visitor-keys": "^4.2.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@ungap/structured-clone": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
-      "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
-      "license": "ISC"
-    },
-    "node_modules/@unrs/resolver-binding-darwin-arm64": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-arm64/-/resolver-binding-darwin-arm64-1.4.1.tgz",
-      "integrity": "sha512-8Tv+Bsd0BjGwfEedIyor4inw8atppRxM5BdUnIt+3mAm/QXUm7Dw74CHnXpfZKXkp07EXJGiA8hStqCINAWhdw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@unrs/resolver-binding-darwin-x64": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-x64/-/resolver-binding-darwin-x64-1.4.1.tgz",
-      "integrity": "sha512-X8c3PhWziEMKAzZz+YAYWfwawi5AEgzy/hmfizAB4C70gMHLKmInJcp1270yYAOs7z07YVFI220pp50z24Jk3A==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@unrs/resolver-binding-freebsd-x64": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-freebsd-x64/-/resolver-binding-freebsd-x64-1.4.1.tgz",
-      "integrity": "sha512-UUr/nREy1UdtxXQnmLaaTXFGOcGxPwNIzeJdb3KXai3TKtC1UgNOB9s8KOA4TaxOUBR/qVgL5BvBwmUjD5yuVA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ]
-    },
-    "node_modules/@unrs/resolver-binding-linux-arm-gnueabihf": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-gnueabihf/-/resolver-binding-linux-arm-gnueabihf-1.4.1.tgz",
-      "integrity": "sha512-e3pII53dEeS8inkX6A1ad2UXE0nuoWCqik4kOxaDnls0uJUq0ntdj5d9IYd+bv5TDwf9DSge/xPOvCmRYH+Tsw==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@unrs/resolver-binding-linux-arm-musleabihf": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-musleabihf/-/resolver-binding-linux-arm-musleabihf-1.4.1.tgz",
-      "integrity": "sha512-e/AKKd9gR+HNmVyDEPI/PIz2t0DrA3cyonHNhHVjrkxe8pMCiYiqhtn1+h+yIpHUtUlM6Y1FNIdivFa+r7wrEQ==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@unrs/resolver-binding-linux-arm64-gnu": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-gnu/-/resolver-binding-linux-arm64-gnu-1.4.1.tgz",
-      "integrity": "sha512-vtIu34luF1jRktlHtiwm2mjuE8oJCsFiFr8hT5+tFQdqFKjPhbJXn83LswKsOhy0GxAEevpXDI4xxEwkjuXIPA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@unrs/resolver-binding-linux-arm64-musl": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-musl/-/resolver-binding-linux-arm64-musl-1.4.1.tgz",
-      "integrity": "sha512-H3PaOuGyhFXiyJd+09uPhGl4gocmhyi1BRzvsP8Lv5AQO3p3/ZY7WjV4t2NkBksm9tMjf3YbOVHyPWi2eWsNYw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@unrs/resolver-binding-linux-ppc64-gnu": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-ppc64-gnu/-/resolver-binding-linux-ppc64-gnu-1.4.1.tgz",
-      "integrity": "sha512-4+GmJcaaFntCi1S01YByqp8wLMjV/FyQyHVGm0vedIhL1Vfx7uHkz/sZmKsidRwokBGuxi92GFmSzqT2O8KcNA==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@unrs/resolver-binding-linux-s390x-gnu": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-s390x-gnu/-/resolver-binding-linux-s390x-gnu-1.4.1.tgz",
-      "integrity": "sha512-6RDQVCmtFYTlhy89D5ixTqo9bTQqFhvNN0Ey1wJs5r+01Dq15gPHRXv2jF2bQATtMrOfYwv+R2ZR9ew1N1N3YQ==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@unrs/resolver-binding-linux-x64-gnu": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-gnu/-/resolver-binding-linux-x64-gnu-1.4.1.tgz",
-      "integrity": "sha512-XpU9uzIkD86+19NjCXxlVPISMUrVXsXo5htxtuG+uJ59p5JauSRZsIxQxzzfKzkxEjdvANPM/lS1HFoX6A6QeA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
+        "node": ">=8.6.0"
+      }
     },
-    "node_modules/@unrs/resolver-binding-linux-x64-musl": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-musl/-/resolver-binding-linux-x64-musl-1.4.1.tgz",
-      "integrity": "sha512-3CDjG/spbTKCSHl66QP2ekHSD+H34i7utuDIM5gzoNBcZ1gTO0Op09Wx5cikXnhORRf9+HyDWzm37vU1PLSM1A==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
     },
-    "node_modules/@unrs/resolver-binding-wasm32-wasi": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-wasm32-wasi/-/resolver-binding-wasm32-wasi-1.4.1.tgz",
-      "integrity": "sha512-50tYhvbCTnuzMn7vmP8IV2UKF7ITo1oihygEYq9wW2DUb/Y+QMqBHJUSCABRngATjZ4shOK6f2+s0gQX6ElENQ==",
-      "cpu": [
-        "wasm32"
-      ],
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
+      "license": "ISC",
       "dependencies": {
-        "@napi-rs/wasm-runtime": "^0.2.8"
+        "brace-expansion": "^2.0.1"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/@unrs/resolver-binding-win32-arm64-msvc": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-arm64-msvc/-/resolver-binding-win32-arm64-msvc-1.4.1.tgz",
-      "integrity": "sha512-KyJiIne/AqV4IW0wyQO34wSMuJwy3VxVQOfIXIPyQ/Up6y/zi2P/WwXb78gHsLiGRUqCA9LOoCX+6dQZde0g1g==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.29.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.29.1.tgz",
+      "integrity": "sha512-QAkFEbytSaB8wnmB+DflhUPz6CLbFWE2SnSCrRMEa+KnXIzDYbpsn++1HGvnfAsUY44doDXmvRkO5shlM/3UfA==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "@typescript-eslint/scope-manager": "8.29.1",
+        "@typescript-eslint/types": "8.29.1",
+        "@typescript-eslint/typescript-estree": "8.29.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <5.9.0"
+      }
     },
-    "node_modules/@unrs/resolver-binding-win32-ia32-msvc": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-ia32-msvc/-/resolver-binding-win32-ia32-msvc-1.4.1.tgz",
-      "integrity": "sha512-y2NUD7pygrBolN2NoXUrwVqBpKPhF8DiSNE5oB5/iFO49r2DpoYqdj5HPb3F42fPBH5qNqj6Zg63+xCEzAD2hw==",
-      "cpu": [
-        "ia32"
-      ],
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.29.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.29.1.tgz",
+      "integrity": "sha512-RGLh5CRaUEf02viP5c1Vh1cMGffQscyHe7HPAzGpfmfflFg1wUz2rYxd+OZqwpeypYvZ8UxSxuIpF++fmOzEcg==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
+      "dependencies": {
+        "@typescript-eslint/types": "8.29.1",
+        "eslint-visitor-keys": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
+      "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
+      "license": "ISC"
     },
     "node_modules/@unrs/resolver-binding-win32-x64-msvc": {
       "version": "1.4.1",
@@ -5677,18 +5148,34 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
-    "node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "hasInstallScript": true,
+    "node_modules/framer-motion": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz",
+      "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      "dependencies": {
+        "@motionone/dom": "10.12.0",
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "popmotion": "11.0.3",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8 || ^17.0.0 || ^18.0.0",
+        "react-dom": ">=16.8 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/framesync": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz",
+      "integrity": "sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.1.0"
       }
     },
     "node_modules/function-bind": {
@@ -6130,6 +5617,12 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==",
+      "license": "MIT"
+    },
     "node_modules/hls.js": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.1.tgz",
@@ -7309,6 +6802,12 @@
         "three": ">=0.134.0"
       }
     },
+    "node_modules/material-ripple-effects": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/material-ripple-effects/-/material-ripple-effects-2.0.1.tgz",
+      "integrity": "sha512-hHlUkZAuXbP94lu02VgrPidbZ3hBtgXBtjlwR8APNqOIgDZMV8MCIcsclL8FmGJQHvnORyvoQgC965vPsiyXLQ==",
+      "license": "MIT"
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -8706,6 +8205,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/popmotion": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.3.tgz",
+      "integrity": "sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==",
+      "license": "MIT",
+      "dependencies": {
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
@@ -10273,6 +9784,16 @@
         "inline-style-parser": "0.2.4"
       }
     },
+    "node_modules/style-value-types": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.0.0.tgz",
+      "integrity": "sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==",
+      "license": "MIT",
+      "dependencies": {
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
@@ -10377,33 +9898,33 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.17",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
-      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
+      "integrity": "sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==",
       "license": "MIT",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
-        "chokidar": "^3.6.0",
+        "chokidar": "^3.5.3",
         "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
-        "fast-glob": "^3.3.2",
+        "fast-glob": "^3.3.0",
         "glob-parent": "^6.0.2",
         "is-glob": "^4.0.3",
-        "jiti": "^1.21.6",
-        "lilconfig": "^3.1.3",
-        "micromatch": "^4.0.8",
+        "jiti": "^1.19.1",
+        "lilconfig": "^2.1.0",
+        "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
         "object-hash": "^3.0.0",
-        "picocolors": "^1.1.1",
-        "postcss": "^8.4.47",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.23",
         "postcss-import": "^15.1.0",
         "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.2",
-        "postcss-nested": "^6.2.0",
-        "postcss-selector-parser": "^6.1.2",
-        "resolve": "^1.22.8",
-        "sucrase": "^3.35.0"
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
       },
       "bin": {
         "tailwind": "lib/cli.js",
@@ -10459,6 +9980,15 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/tailwindcss/node_modules/lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
@@ -11496,6 +11026,126 @@
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
       }
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "14.2.28",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.28.tgz",
+      "integrity": "sha512-kzGChl9setxYWpk3H6fTZXXPFFjg7urptLq5o5ZgYezCrqlemKttwMT5iFyx/p1e/JeglTwDFRtb923gTJ3R1w==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "14.2.28",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.28.tgz",
+      "integrity": "sha512-z6FXYHDJlFOzVEOiiJ/4NG8aLCeayZdcRSMjPDysW297Up6r22xw6Ea9AOwQqbNsth8JNgIK8EkWz2IDwaLQcw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "14.2.28",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.28.tgz",
+      "integrity": "sha512-9ARHLEQXhAilNJ7rgQX8xs9aH3yJSj888ssSjJLeldiZKR4D7N08MfMqljk77fAwZsWwsrp8ohHsMvurvv9liQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "14.2.28",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.28.tgz",
+      "integrity": "sha512-p6gvatI1nX41KCizEe6JkF0FS/cEEF0u23vKDpl+WhPe/fCTBeGkEBh7iW2cUM0rvquPVwPWdiUR6Ebr/kQWxQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "14.2.28",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.28.tgz",
+      "integrity": "sha512-nsiSnz2wO6GwMAX2o0iucONlVL7dNgKUqt/mDTATGO2NY59EO/ZKnKEr80BJFhuA5UC1KZOMblJHWZoqIJddpA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "14.2.28",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.28.tgz",
+      "integrity": "sha512-+IuGQKoI3abrXFqx7GtlvNOpeExUH1mTIqCrh1LGFf8DnlUcTmOOCApEnPJUSLrSbzOdsF2ho2KhnQoO0I1RDw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "14.2.28",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.28.tgz",
+      "integrity": "sha512-l61WZ3nevt4BAnGksUVFKy2uJP5DPz2E0Ma/Oklvo3sGj9sw3q7vBWONFRgz+ICiHpW5mV+mBrkB3XEubMrKaA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.28",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.28.tgz",
+      "integrity": "sha512-+Kcp1T3jHZnJ9v9VTJ/yf1t/xmtFAc/Sge4v7mVc1z+NYfYzisi8kJ9AsY8itbgq+WgEwMtOpiLLJsUy2qnXZw==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 05e92e3..e022a80 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,10 @@
     "@fontsource/poppins": "^5.2.5",
     "@fontsource/public-sans": "^5.2.5",
     "@headlessui/react": "^2.2.1",
+    "@heroicons/react": "^2.1.1",
     "@langchain/core": "^0.3.44",
     "@langchain/openai": "^0.5.5",
+    "@material-tailwind/react": "^2.1.9",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-slot": "^1.1.2",
@@ -62,7 +64,7 @@
     "@types/d3-selection": "^3.0.11",
     "@types/d3-zoom": "^3.0.8",
     "@types/node": "^20",
-    "@types/react": "^18.3.5",
+    "@types/react": "^18.2.42",
     "@types/react-dom": "^18.3.0",
     "@types/react-slick": "^0.23.13",
     "@types/react-virtualized-auto-sizer": "^1.0.4",
diff --git a/src/app/(Dashboard)/dashboard/dashboard.css b/src/app/(Dashboard)/dashboard/dashboard.css
new file mode 100644
index 0000000..5beafc7
--- /dev/null
+++ b/src/app/(Dashboard)/dashboard/dashboard.css
@@ -0,0 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
+  }
+
+  body {
+    margin: 0;
+    min-width: 320px;
+    min-height: 100vh;
+  }
+}
\ No newline at end of file
diff --git a/src/app/(Dashboard)/dashboard/guests/page.tsx b/src/app/(Dashboard)/dashboard/guests/page.tsx
new file mode 100644
index 0000000..988b981
--- /dev/null
+++ b/src/app/(Dashboard)/dashboard/guests/page.tsx
@@ -0,0 +1,860 @@
+'use client'
+
+import React, { useState, useEffect } from 'react';
+import { ArrowPathIcon, EyeIcon, HomeIcon, MagnifyingGlassIcon, MinusIcon, PencilIcon, PlusIcon, TrashIcon } from '@heroicons/react/24/outline';
+import axios from 'axios';
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  Typography,
+  Input,
+  Chip,
+  IconButton,
+  Button,
+  Dialog,
+  DialogHeader,
+  DialogBody,
+  DialogFooter,
+  Alert,
+} from "@material-tailwind/react";
+import { API_URL } from '@/utils/axiosConfig'
+import { v4 as uuidv4 } from 'uuid';
+
+interface Interaction {
+  event: string,
+  timestamp: string,
+}
+
+interface Guest {
+  additional_notes?: string;
+  budget?: string;
+  company?: string;
+  contact_info?: string;
+  created_at?: string;
+  current_tech?: string[];
+  first_visit_timestamp?: string;
+  id?: string;
+  industry?: string;
+  interaction_events?: string[];
+  interaction_history?: Interaction[];
+  name?: string;
+  page_views?: string[];
+  pain_points?: string[];
+  project_type?: string[];
+  session_id?: string;
+  status?: 'NEW' | 'CONTACTED' | 'CONVERTED';
+  timeline?: string;
+  updated_at?: string;
+}
+
+const GuestsTable: React.FC = () => {
+  const [guests, setGuests] = useState<Guest[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [selectedGuest, setSelectedGuest] = useState<Guest | null>(null);
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [isViewModalOpen, setIsViewModalOpen] = useState(false);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [createFormData, setCreateFormData] = useState<Guest>({});
+  const [numProjectTypeFields, setNumProjectTypeFields] = useState(1);
+  const [numPainPointFields, setNumPainPointFields] = useState(1);
+  const [numCurrentTechFields, setNumCurrentTechFields] = useState(1);
+  const [editFormData, setEditFormData] = useState<Guest>({});
+  const [showError, setShowError] = useState(false);
+  const itemsPerPage = 10;
+
+  useEffect(() => {
+    fetchGuests();
+  }, []);
+
+  const fetchGuests = async () => {
+    setLoading(true);
+    try {
+      const res = await axios.get(`${API_URL}/guests/`);
+      if(!(Array.isArray(res.data) && res.data.every(guest => typeof guest === 'object'))) {
+        setShowError(true);
+        throw Error //Ensure an array of guests is returned
+      } else setShowError(false);
+      setGuests(res.data);
+    } catch {
+      setShowError(true);
+    }
+    setLoading(false);
+  };
+
+  const handleView = (guest: Guest) => {
+    setSelectedGuest(guest);
+    setIsViewModalOpen(true);
+  }
+
+  const handleCreate = () => {
+    setNumProjectTypeFields(1);
+    setNumPainPointFields(1);
+    setNumCurrentTechFields(1);
+    setIsCreateModalOpen(true);
+  };
+
+  const handleEdit = (guest: Guest) => {
+    setSelectedGuest(guest);
+    setNumProjectTypeFields(guest.project_type ? guest.project_type.length : 0);
+    setNumPainPointFields(guest.pain_points ? guest.pain_points.length : 0);
+    setNumCurrentTechFields(guest.current_tech ? guest.current_tech.length: 0);
+    setEditFormData(guest);
+    setIsEditModalOpen(true);
+  };
+
+  const handleDelete = (guest: Guest) => {
+    setSelectedGuest(guest);
+    setIsDeleteModalOpen(true);
+  };
+
+  const handleCreateSubmit = async () => {
+    if (!createFormData) return;
+
+    try {
+      createFormData.session_id = uuidv4();
+      await axios.post(`${API_URL}/guests/`, createFormData);
+
+      // Update guests
+      fetchGuests();
+      
+      setIsCreateModalOpen(false);
+      setCreateFormData({});
+    } catch (error) {
+      console.error('Error creating guest:', error);
+      // Handle error (show error message to user)
+    }
+  };
+
+  const handleEditSubmit = async () => {
+    if (!editFormData) return;
+
+    try {
+      await axios.put(`${API_URL}/guests/${editFormData.id}`, editFormData);
+
+      // Update guests
+      fetchGuests();
+      
+      setIsEditModalOpen(false);
+      setEditFormData({});
+    } catch (error) {
+      console.error('Error updating guest:', error);
+      // Handle error (show error message to user)
+    }
+  };
+
+  const handleDeleteConfirm = async () => {
+    if (!selectedGuest) return;
+
+    try {
+      await axios.delete(`${API_URL}/guests/${selectedGuest.id}`);
+      
+      // Update guests
+      fetchGuests();
+      
+      setIsDeleteModalOpen(false);
+      setSelectedGuest(null);
+    } catch (error) {
+      console.error('Error deleting guest:', error);
+      // Handle error (show error message to user)
+    }
+  };
+
+  const getStatusColor = (status: Guest['status']) => {
+    switch (status) {
+      case 'NEW':
+        return 'blue';
+      case 'CONTACTED':
+        return 'amber';
+      case 'CONVERTED':
+        return 'green';
+      default:
+        return 'gray';
+    }
+  };
+
+  const filteredGuests = guests.filter(guest =>
+    searchTerm.toLowerCase() === '' ? true :
+    (guest.name ? guest.name.toLowerCase().includes(searchTerm.toLowerCase()) : false) ||
+    (guest.company ? guest.company.toLowerCase().includes(searchTerm.toLowerCase()) : false) ||
+    (guest.industry ? guest.industry.toLowerCase().includes(searchTerm.toLowerCase()) : false) ||
+    (guest.budget ? guest.budget.toLowerCase().includes(searchTerm.toLowerCase()) : false) ||
+    (guest.contact_info ? guest.contact_info.toLowerCase().includes(searchTerm.toLowerCase()) : false) ||
+    (guest.status ? guest.status.toLowerCase().includes(searchTerm.toLowerCase()) : false)
+  );
+
+  const paginatedGuests = filteredGuests.slice(
+    (currentPage - 1) * itemsPerPage,
+    currentPage * itemsPerPage
+  );
+
+  const totalPages = Math.ceil(filteredGuests.length / itemsPerPage);
+
+  const TABLE_HEAD = ["Name", "Company", "Industry", "Budget", "Contact", "Status", "Last Interaction", "Actions"];
+
+  const viewField = (field: string, value: string | undefined) => {
+    return (
+      <div className="inline-flex flex-row gap-2 w-full">
+        <Typography variant="small" color="blue-gray" className="font-normal w-24">
+          {field}
+        </Typography>
+        <Card className={value ? value.length > 0 ? "overscroll-x-contain overflow-auto border-black border-2 h-min w-full" :
+        "overscroll-x-contain overflow-auto border-black border-2 w-full" :
+        "overscroll-x-contain overflow-auto w-full"}>
+          <Typography variant="small" color="blue-gray" className="font-normal overscroll-x-contain overflow-auto p-2">
+            {value ? value : ''}
+          </Typography>
+        </Card>
+      </div>
+    )
+  }
+  if(showError) return (
+  <Alert
+    color="red"
+    variant="outlined"
+    className="mb-6 border border-red-200"
+    icon={
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        className="h-5 w-5"
+      >
+        <path
+          fillRule="evenodd"
+          d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"
+          clipRule="evenodd"
+        />
+      </svg>
+    }
+  >
+    Failed to retrieve guests
+  </Alert>
+  )
+  return (
+    <Card className="border border-gray-100 overflow-hidden">
+      <div className="px-6 py-4 bg-gray-50 border-b border-gray-100 flex items-center justify-between">
+        <div>
+          <Typography variant="h5" color="blue-gray">
+            Guest Management
+          </Typography>
+          <Typography variant="small" color="gray">
+            View and manage guest accounts in your system
+          </Typography>
+        </div>
+        <Button 
+          color="teal" 
+          size="sm" 
+          className="flex items-center gap-1"
+          onClick={() => handleCreate()}
+        >
+          <HomeIcon className="h-4 w-4" /> Add Guest
+        </Button>
+      </div>
+    <Card className="h-full w-full">
+      <CardHeader floated={false} shadow={false} className="rounded-none">
+        <div className="flex items-center justify-between gap-8 mb-8">
+          <div>
+            <Typography variant="h5" color="blue-gray">
+              Guests list
+            </Typography>
+            <Typography color="gray" className="mt-1 font-normal">
+              See information about all guests
+            </Typography>
+          </div>
+          <div className="flex shrink-0 gap-2 sm:flex-row">
+            <div>
+              <IconButton
+                onClick={fetchGuests}
+                variant="text"
+                color="teal"
+                className="h-8 w-8 rounded-full hover:bg-white/20 transition-all"
+                size="sm"
+              >
+                <ArrowPathIcon className="h-4 w-4" />
+              </IconButton>
+            </div>
+            <div className="w-full md:w-72">
+              <Input
+                label="Search"
+                icon={<MagnifyingGlassIcon className="h-5 w-5" />}
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                crossOrigin={undefined}
+              />
+            </div>
+          </div>
+        </div>
+      </CardHeader>
+      <CardBody className="overflow-scroll px-0">
+        <table className="w-full min-w-max table-auto text-left">
+          <thead>
+            <tr>
+              {TABLE_HEAD.map((head) => (
+                <th key={head} className="border-b border-blue-gray-100 bg-blue-gray-50 p-4">
+                  <Typography
+                    variant="small"
+                    color="blue-gray"
+                    className="font-normal leading-none opacity-70"
+                  >
+                    {head}
+                  </Typography>
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              <tr>
+                <td colSpan={8} className="p-4 text-center">
+                  <Typography variant="small" color="blue-gray" className="animate-pulse">
+                    Loading...
+                  </Typography>
+                </td>
+              </tr>
+            ) : (
+              paginatedGuests.map((guest, index) => {
+                const isLast = index === paginatedGuests.length - 1;
+                const classes = isLast ? "p-4" : "p-4 border-b border-blue-gray-50";
+                return (
+                  <tr key={guest.id}>
+                    <td className={classes}>
+                      <Typography variant="small" color="blue-gray" className="font-normal overscroll-x-contain overflow-auto w-32">
+                        {guest.name ? guest.name : ''}
+                      </Typography>
+                    </td>
+                    <td className={classes}>
+                      <Typography variant="small" color="blue-gray" className="font-normal overscroll-x-contain overflow-auto w-32">
+                        {guest.company ? guest.company : ''}
+                      </Typography>
+                    </td>
+                    <td className={classes}>
+                      <Typography variant="small" color="blue-gray" className="font-normal overscroll-x-contain overflow-auto w-32">
+                        {guest.industry ? guest.industry : ''}
+                      </Typography>
+                    </td>
+                    <td className={classes}>
+                      <Typography variant="small" color="blue-gray" className="font-normal overscroll-x-contain overflow-auto w-32">
+                        {guest.budget ? guest.budget : ''}
+                      </Typography>
+                    </td>
+                    <td className={classes}>
+                      <Typography variant="small" color="blue-gray" className="font-normal overscroll-x-contain overflow-auto w-32">
+                        {guest.contact_info ? guest.contact_info : ''}
+                      </Typography>
+                    </td>
+                    <td className={classes}>
+                      <div className="w-max">
+                        <Chip
+                          size="sm"
+                          variant="ghost"
+                          value={guest.status}
+                          color={getStatusColor(guest.status)}
+                        />
+                      </div>
+                    </td>
+                    <td className={classes}>
+                      <Typography variant="small" color="blue-gray" className="font-normal">
+                        {guest.interaction_history && guest.interaction_history.length > 0 ? guest.interaction_history[guest.interaction_history.length-1].timestamp  : 'None'}
+                      </Typography>
+                    </td>
+                    <td className={classes}>
+                      <div className="flex gap-2">
+                        <IconButton
+                          variant="text"
+                          color="teal"
+                          onClick={() => handleView(guest)}
+                        >
+                          <EyeIcon className="h-4 w-4" />
+                        </IconButton>
+                        <IconButton
+                          variant="text"
+                          color="teal"
+                          onClick={() => handleEdit(guest)}
+                        >
+                          <PencilIcon className="h-4 w-4" />
+                        </IconButton>
+                        <IconButton
+                          variant="text"
+                          color="red"
+                          onClick={() => handleDelete(guest)}
+                        >
+                          <TrashIcon className="h-4 w-4" />
+                        </IconButton>
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })
+            )}
+          </tbody>
+        </table>
+      </CardBody>
+      <div className="flex items-center justify-between border-t border-blue-gray-50 p-4">
+        <Typography variant="small" color="blue-gray" className="font-normal">
+          Page {currentPage} of {totalPages}
+        </Typography>
+        <div className="flex gap-2">
+          <Button
+            variant="outlined"
+            size="sm"
+            onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
+            disabled={currentPage === 1}
+          >
+            Previous
+          </Button>
+          <Button
+            variant="outlined"
+            size="sm"
+            onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
+            disabled={currentPage === totalPages}
+          >
+            Next
+          </Button>
+        </div>
+      </div>
+
+      {/* Create Modal */}
+      <Dialog
+        size="md"
+        open={isCreateModalOpen}
+        handler={() => setIsCreateModalOpen(false)}
+      >
+        <DialogHeader>Create Guest</DialogHeader>
+        <DialogBody>
+          <div className="grid gap-6 overscroll-y-contain overflow-auto h-96">
+            <Input
+              label="Name"
+              value={createFormData.name ? createFormData.name : ''}
+              onChange={(e) => setCreateFormData({ ...createFormData, name: e.target.value })}
+              crossOrigin={undefined}
+            />
+            <Input
+              label="Company"
+              value={createFormData.company ? createFormData.company : ''}
+              onChange={(e) => setCreateFormData({ ...createFormData, company: e.target.value })}
+              crossOrigin={undefined}
+            />
+            <Input
+              label="Industry"
+              value={createFormData.industry ? createFormData.industry : ''}
+              onChange={(e) => setCreateFormData({ ...createFormData, industry: e.target.value })}
+              crossOrigin={undefined}
+            />
+            <Input
+              label="Budget"
+              value={createFormData.budget ? createFormData.budget : ''}
+              onChange={(e) => setCreateFormData({ ...createFormData, budget: e.target.value })}
+              crossOrigin={undefined}
+            />
+            <Input
+              label="Timeline"
+              value={createFormData.timeline ? createFormData.timeline : ''}
+              onChange={(e) => setCreateFormData({ ...createFormData, timeline: e.target.value })}
+              crossOrigin={undefined}
+            />
+            <Input
+              label="Contact Info"
+              value={createFormData.contact_info ? createFormData.contact_info : ''}
+              onChange={(e) => setCreateFormData({ ...createFormData, contact_info: e.target.value })}
+              crossOrigin={undefined}
+            />
+            <Input
+              label="Additional Notes"
+              value={createFormData.additional_notes ? createFormData.additional_notes : ''}
+              onChange={(e) => setCreateFormData({ ...createFormData, additional_notes: e.target.value })}
+              crossOrigin={undefined}
+            />
+            {
+              // Create project type fields based on numProjectTypeFields
+              Array.from({length: numProjectTypeFields}, (_, num) => num+1 && 
+              <Input
+                key={"Project Type "+(num+1)}
+                label={"Project Type "+(num+1)}
+                value={createFormData.project_type ? createFormData.project_type[num] : ''}
+                onChange={(e) => setCreateFormData({ ...createFormData, project_type: createFormData.project_type ? createFormData.project_type.map((value, i) => (i === num ? e.target.value : value)) : [e.target.value] })}
+                crossOrigin={undefined}
+              />)
+            }
+            <div className="inline-flex flex-row gap-6">
+              <Button
+                color="green"
+                size="sm"
+                className="w-max h-max flex items-center gap-1"
+                onClick={() => {
+                  setNumProjectTypeFields((x)=> x+1);
+                  // Add empty project type to form data
+                  setCreateFormData({ ...createFormData, project_type: createFormData.project_type ? createFormData.project_type.concat(['']) : ['']})
+                }}>
+                Add Project Type<PlusIcon className="h-4 w-4" />
+              </Button>
+              <Button
+                color="red"
+                size="sm"
+                className="w-max h-max flex items-center gap-1"
+                disabled={numProjectTypeFields === 0 ? true : false}
+                onClick={() => {
+                  // Remove last project type from form data
+                  setCreateFormData({ ...createFormData, project_type: createFormData.project_type ? (numProjectTypeFields === 1 ? undefined : createFormData.project_type.slice(0, -1)) : undefined})
+                  // There can be 0 fields, meaning project type is null
+                  setNumProjectTypeFields((x)=> Math.max(x-1, 0));
+                }}>
+                Remove Project Type<MinusIcon className="h-4 w-4" />
+              </Button>
+            </div>
+            {
+              // Create pain point fields based on numPainPointFields
+              Array.from({length: numPainPointFields}, (_, num) => num+1 && 
+              <Input
+                key={"Pain Point "+(num+1)}
+                label={"Pain Point "+(num+1)}
+                value={createFormData.pain_points ? createFormData.pain_points[num] : ''}
+                onChange={(e) => setCreateFormData({ ...createFormData, pain_points: createFormData.pain_points ? createFormData.pain_points.map((value, i) => (i === num ? e.target.value : value)) : [e.target.value] })}
+                crossOrigin={undefined}
+              />)
+            }
+            <div className="inline-flex flex-row gap-6">
+              <Button
+                color="green"
+                size="sm"
+                className="w-max h-max flex items-center gap-1"
+                onClick={() => {
+                  setNumPainPointFields((x)=> x+1);
+                  // Add empty pain point to form data
+                  setCreateFormData({ ...createFormData, pain_points: createFormData.pain_points? createFormData.pain_points.concat(['']) : ['']})
+                }}>
+                Add Pain Point<PlusIcon className="h-4 w-4" />
+              </Button>
+              <Button
+                color="red"
+                size="sm"
+                className="w-max h-max flex items-center gap-1"
+                disabled={numPainPointFields === 0 ? true : false}
+                onClick={() => {
+                  // Remove last pain point from form data
+                  setCreateFormData({ ...createFormData, pain_points: createFormData.pain_points ? (numPainPointFields === 1 ? undefined : createFormData.pain_points.slice(0, -1)) : undefined})
+                  // There can be 0 fields, meaning pain point is null
+                  setNumPainPointFields((x)=> Math.max(x-1, 0));
+                }}>
+                Remove Pain Point<MinusIcon className="h-4 w-4" />
+              </Button>
+            </div>
+            {
+              // Create current tech fields based on numCurrentTechFields
+              Array.from({length: numCurrentTechFields}, (_, num) => num+1 && 
+              <Input
+                key={"Current Tech "+(num+1)}
+                label={"Current Tech "+(num+1)}
+                value={createFormData.current_tech ? createFormData.current_tech[num] : ''}
+                onChange={(e) => setCreateFormData({ ...createFormData, current_tech: createFormData.current_tech ? createFormData.current_tech.map((value, i) => (i === num ? e.target.value : value)) : [e.target.value] })}
+                crossOrigin={undefined}
+              />)
+            }
+            <div className="inline-flex flex-row gap-6">
+              <Button
+                color="green"
+                size="sm"
+                className="w-max h-max flex items-center gap-1"
+                onClick={() => {
+                  setNumCurrentTechFields((x)=> x+1);
+                  // Add empty current tech to form data
+                  setCreateFormData({ ...createFormData, current_tech: createFormData.current_tech ? createFormData.current_tech.concat(['']) : ['']})
+                }}>
+                Add Current Tech<PlusIcon className="h-4 w-4" />
+              </Button>
+              <Button
+                color="red"
+                size="sm"
+                className="w-max h-max flex items-center gap-1"
+                disabled={numCurrentTechFields === 0 ? true : false}
+                onClick={() => {
+                  // Remove last current tech from form data
+                  setCreateFormData({ ...createFormData, current_tech: createFormData.current_tech ? (numCurrentTechFields === 1 ? undefined : createFormData.current_tech.slice(0, -1)) : undefined})
+                  // There can be 0 fields, meaning current tech is null
+                  setNumCurrentTechFields((x)=> Math.max(x-1, 0));
+                }}>
+                Remove Current Tech<MinusIcon className="h-4 w-4" />
+              </Button>
+            </div>
+            <div>
+              <Typography variant="small" color="blue-gray" className="mb-2">
+                Status
+              </Typography>
+              <select
+                value={createFormData.status}
+                onChange={(e) => setCreateFormData({ ...createFormData, status: e.target.value as 'NEW' | 'CONTACTED' | 'CONVERTED' })}
+                className="w-full p-2 border rounded-lg"
+              >
+                <option value="NEW">New</option>
+                <option value="CONTACTED">Contacted</option>
+                <option value="CONVERTED">Converted</option>
+              </select>
+            </div>
+          </div>
+        </DialogBody>
+        <DialogFooter className="space-x-2">
+          <Button variant="outlined" color="red" onClick={() => setIsCreateModalOpen(false)}>
+            Cancel
+          </Button>
+          <Button color="teal" onClick={handleCreateSubmit}>
+            Create
+          </Button>
+        </DialogFooter>
+      </Dialog>
+
+      {/* View Modal */}
+      <Dialog
+        size="lg"
+        open={isViewModalOpen}
+        handler={() => setIsViewModalOpen(false)}
+      >
+        <DialogHeader className="pb-0">View Guest</DialogHeader>
+        <DialogBody>
+          <div>{/*Fix jest detecting no children in DialogBody error*/}</div>
+          {selectedGuest && (
+            <div className="grid grid-cols-3 grid-flow-row gap-2 overscroll-y-contain overflow-auto h-96 w-full">
+              {viewField('Name:', selectedGuest.name)}
+              {viewField('Id:', String(selectedGuest.id))}
+              {viewField('Session Id:', selectedGuest.session_id)}
+              {viewField('Company:', selectedGuest.company)}
+              {viewField('Industry:', selectedGuest.industry)}
+              {viewField('Budget:', selectedGuest.budget)}
+              {viewField('Contact:', selectedGuest.contact_info)}
+              {viewField('Timeline:', selectedGuest.timeline)}
+              {viewField('Additional Notes:', selectedGuest.additional_notes)}
+              {viewField('Status:', selectedGuest.status)}
+              {viewField('Created At:', selectedGuest.created_at)}
+              {viewField('Updated At:', selectedGuest.updated_at)}
+              {viewField('First Visit Time:', selectedGuest.first_visit_timestamp)}
+              {viewField('Interaction History:', selectedGuest.interaction_history ? selectedGuest.interaction_history.map(obj => `${obj.event} at ${obj.timestamp}`).join(', ') : undefined)}
+              {viewField('Interaction Events:', selectedGuest.interaction_events ? selectedGuest.interaction_events.join(', ') : undefined)}
+              {viewField('Project Types:', selectedGuest.project_type ? selectedGuest.project_type.join(', ') : undefined)}
+              {viewField('Pain Points:', selectedGuest.pain_points? selectedGuest.pain_points.join(', ') : undefined)}
+              {viewField('Current Tech:', selectedGuest.current_tech ? selectedGuest.current_tech.join(', ') : undefined)}
+              {viewField('Page Views:', selectedGuest.page_views ? selectedGuest.page_views.join(', ') : undefined)}
+            </div>
+          )}
+        </DialogBody>
+        <DialogFooter className="space-x-2">
+          <Button variant="outlined" color="blue-gray" onClick={() => setIsViewModalOpen(false)}>
+            Exit
+          </Button>
+        </DialogFooter>
+      </Dialog>
+
+      {/* Edit Modal */}
+      <Dialog
+        size="md"
+        open={isEditModalOpen}
+        handler={() => setIsEditModalOpen(false)}
+      >
+        <DialogHeader>Edit Guest</DialogHeader>
+        <DialogBody>
+          <div className="grid gap-6 overscroll-y-contain overflow-auto h-96">
+            <Input
+              label="Name"
+              value={editFormData.name ? editFormData.name : ''}
+              onChange={(e) => setEditFormData({ ...editFormData, name: e.target.value })}
+              crossOrigin={undefined}
+            />
+            <Input
+              label="Company"
+              value={editFormData.company ? editFormData.company : ''}
+              onChange={(e) => setEditFormData({ ...editFormData, company: e.target.value })}
+              crossOrigin={undefined}
+            />
+            <Input
+              label="Industry"
+              value={editFormData.industry ? editFormData.industry : ''}
+              onChange={(e) => setEditFormData({ ...editFormData, industry: e.target.value })}
+              crossOrigin={undefined}
+            />
+            <Input
+              label="Budget"
+              value={editFormData.budget ? editFormData.budget : ''}
+              onChange={(e) => setEditFormData({ ...editFormData, budget: e.target.value })}
+              crossOrigin={undefined}
+            />
+            <Input
+              label="Timeline"
+              value={editFormData.timeline ? editFormData.timeline : ''}
+              onChange={(e) => setEditFormData({ ...editFormData, timeline: e.target.value })}
+              crossOrigin={undefined}
+            />
+            <Input
+              label="Contact Info"
+              value={editFormData.contact_info ? editFormData.contact_info : ''}
+              onChange={(e) => setEditFormData({ ...editFormData, contact_info: e.target.value })}
+              crossOrigin={undefined}
+            />
+            <Input
+              label="Additional Notes"
+              value={editFormData.additional_notes ? editFormData.additional_notes : ''}
+              onChange={(e) => setEditFormData({ ...editFormData, additional_notes: e.target.value })}
+              crossOrigin={undefined}
+            />
+            {
+              // Create project type fields based on numProjectTypeFields
+              Array.from({length: numProjectTypeFields}, (_, num) => num+1 && 
+              <Input
+                key={"Project Type "+(num+1)}
+                label={"Project Type "+(num+1)}
+                value={editFormData.project_type ? editFormData.project_type[num] : ''}
+                onChange={(e) => setEditFormData({ ...editFormData, project_type: editFormData.project_type ? editFormData.project_type.map((value, i) => (i === num ? e.target.value : value)) : [e.target.value] })}
+                crossOrigin={undefined}
+              />)
+            }
+            <div className="inline-flex flex-row gap-6">
+              <Button
+                color="green"
+                size="sm"
+                className="w-max h-max flex items-center gap-1"
+                onClick={() => {
+                  setNumProjectTypeFields((x)=> x+1);
+                  // Add empty project type to form data
+                  setEditFormData({ ...editFormData, project_type: editFormData.project_type ? editFormData.project_type.concat(['']) : ['']})
+                }}>
+                Add Project Type<PlusIcon className="h-4 w-4" />
+              </Button>
+              <Button
+                color="red"
+                size="sm"
+                className="w-max h-max flex items-center gap-1"
+                disabled={numProjectTypeFields === 0 ? true : false}
+                onClick={() => {
+                  // Remove last project type from form data
+                  setEditFormData({ ...editFormData, project_type: editFormData.project_type ? (numProjectTypeFields === 1 ? undefined : editFormData.project_type.slice(0, -1)) : undefined})
+                  // There can be 0 fields, meaning project type is null
+                  setNumProjectTypeFields((x)=> Math.max(x-1, 0));
+                }}>
+                Remove Project Type<MinusIcon className="h-4 w-4" />
+              </Button>
+            </div>
+            {
+              // Create pain point fields based on numPainPointFields
+              Array.from({length: numPainPointFields}, (_, num) => num+1 && 
+              <Input
+                key={"Pain Point "+(num+1)}
+                label={"Pain Point "+(num+1)}
+                value={editFormData.pain_points ? editFormData.pain_points[num] : ''}
+                onChange={(e) => setEditFormData({ ...editFormData, pain_points: editFormData.pain_points ? editFormData.pain_points.map((value, i) => (i === num ? e.target.value : value)) : [e.target.value] })}
+                crossOrigin={undefined}
+              />)
+            }
+            <div className="inline-flex flex-row gap-6">
+              <Button
+                color="green"
+                size="sm"
+                className="w-max h-max flex items-center gap-1"
+                onClick={() => {
+                  setNumPainPointFields((x)=> x+1);
+                  // Add empty pain point to form data
+                  setEditFormData({ ...editFormData, pain_points: editFormData.pain_points? editFormData.pain_points.concat(['']) : ['']})
+                }}>
+                Add Pain Point<PlusIcon className="h-4 w-4" />
+              </Button>
+              <Button
+                color="red"
+                size="sm"
+                className="w-max h-max flex items-center gap-1"
+                disabled={numPainPointFields === 0 ? true : false}
+                onClick={() => {
+                  // Remove last pain point from form data
+                  setEditFormData({ ...editFormData, pain_points: editFormData.pain_points ? (numPainPointFields === 1 ? undefined : editFormData.pain_points.slice(0, -1)) : undefined})
+                  // There can be 0 fields, meaning pain point is null
+                  setNumPainPointFields((x)=> Math.max(x-1, 0));
+                }}>
+                Remove Pain Point<MinusIcon className="h-4 w-4" />
+              </Button>
+            </div>
+            {
+              // Create current tech fields based on numCurrentTechFields
+              Array.from({length: numCurrentTechFields}, (_, num) => num+1 && 
+              <Input
+                key={"Current Tech "+(num+1)}
+                label={"Current Tech "+(num+1)}
+                value={editFormData.current_tech? editFormData.current_tech[num] : ''}
+                onChange={(e) => setEditFormData({ ...editFormData, current_tech: editFormData.current_tech ? editFormData.current_tech.map((value, i) => (i === num ? e.target.value : value)) : [e.target.value] })}
+                crossOrigin={undefined}
+              />)
+            }
+            <div className="inline-flex flex-row gap-6">
+              <Button
+                color="green"
+                size="sm"
+                className="w-max h-max flex items-center gap-1"
+                onClick={() => {
+                  setNumCurrentTechFields((x)=> x+1);
+                  // Add empty current tech to form data
+                  setEditFormData({ ...editFormData, current_tech: editFormData.current_tech ? editFormData.current_tech.concat(['']) : ['']})
+                }}>
+                Add Current Tech<PlusIcon className="h-4 w-4" />
+              </Button>
+              <Button
+                color="red"
+                size="sm"
+                className="w-max h-max flex items-center gap-1"
+                disabled={numCurrentTechFields === 0 ? true : false}
+                onClick={() => {
+                  // Remove last current tech from form data
+                  setEditFormData({ ...editFormData, current_tech: editFormData.current_tech ? (numCurrentTechFields === 1 ? undefined : editFormData.current_tech.slice(0, -1)) : undefined})
+                  // There can be 0 fields, meaning current tech is null
+                  setNumCurrentTechFields((x)=> Math.max(x-1, 0));
+                }}>
+                Remove Current Tech<MinusIcon className="h-4 w-4" />
+              </Button>
+            </div>
+            <div>
+              <Typography variant="small" color="blue-gray" className="mb-2">
+                Status
+              </Typography>
+              <select
+                value={editFormData.status}
+                onChange={(e) => setEditFormData({ ...editFormData, status: e.target.value as 'NEW' | 'CONTACTED' | 'CONVERTED' })}
+                className="w-full p-2 border rounded-lg"
+              >
+                <option value="NEW">New</option>
+                <option value="CONTACTED">Contacted</option>
+                <option value="CONVERTED">Converted</option>
+              </select>
+            </div>
+          </div>
+        </DialogBody>
+        <DialogFooter className="space-x-2">
+          <Button variant="outlined" color="red" onClick={() => setIsEditModalOpen(false)}>
+            Cancel
+          </Button>
+          <Button color="teal" onClick={handleEditSubmit}>
+            Save Changes
+          </Button>
+        </DialogFooter>
+      </Dialog>
+
+      {/* DeleteConfirmation Modal */}
+      <Dialog
+        size="xs"
+        open={isDeleteModalOpen}
+        handler={() => setIsDeleteModalOpen(false)}
+      >
+        <DialogHeader>Confirm Deletion</DialogHeader>
+        <DialogBody>
+          Are you sure you want to delete {selectedGuest?.name}? This action cannot be undone.
+        </DialogBody>
+        <DialogFooter className="space-x-2">
+          <Button variant="outlined" color="blue-gray" onClick={() => setIsDeleteModalOpen(false)}>
+            Cancel
+          </Button>
+          <Button color="red" onClick={handleDeleteConfirm}>
+            Delete
+          </Button>
+        </DialogFooter>
+      </Dialog>
+    </Card>
+    </Card>
+  );
+}
+
+export default GuestsTable;
\ No newline at end of file
diff --git a/src/app/(Dashboard)/dashboard/layout.tsx b/src/app/(Dashboard)/dashboard/layout.tsx
new file mode 100644
index 0000000..a6bb849
--- /dev/null
+++ b/src/app/(Dashboard)/dashboard/layout.tsx
@@ -0,0 +1,863 @@
+'use client'
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useContext, useState, useEffect } from 'react';
+import { AuthContext, PrivateRoute } from '@/components/Dashboard/AppContext';
+import {
+  UsersIcon,
+  HomeIcon,
+  ShoppingBagIcon,
+  UserCircleIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  Bars3Icon as MenuIcon,
+  ChartBarIcon,
+  BellIcon,
+  CheckCircleIcon,
+  ChatBubbleLeftRightIcon,
+  InformationCircleIcon,
+  XMarkIcon,
+  CpuChipIcon,
+  FolderIcon,
+  DocumentTextIcon,
+  BookOpenIcon,
+  ArrowRightStartOnRectangleIcon,
+} from '@heroicons/react/24/outline';
+import {
+  Card,
+  Typography,
+  ListItem,
+  ListItemPrefix,
+  Drawer,
+  IconButton,
+  Menu,
+  MenuHandler,
+  MenuList,
+  MenuItem,
+  Navbar,
+  Dialog,
+  DialogHeader,
+  DialogBody,
+  DialogFooter,
+  Button,
+  Avatar,
+  Switch,
+  Badge,
+  Textarea,
+  Alert,
+} from "@material-tailwind/react";
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import axios from 'axios';
+import { API_URL } from '@/utils/axiosConfig';
+import { cn } from '@/lib/utils';
+import { colors } from '@material-tailwind/react/types/generic';
+import './dashboard.css'
+
+interface User {
+  address: string | null;
+  card_number: string | null;
+  ccv: string | null;
+  city: string | null;
+  created_at: string;
+  email: string;
+  email_verified: boolean;
+  failed_login_attempts: number;
+  first_name: string | null;
+  hashed_password: string;
+  id: string;
+  is_locked: boolean;
+  last_name: string | null;
+  nickname: string | null;
+  phone_number: string | null;
+  role: "ADMIN" | "USER";
+  security_code: string | null;
+  state: string | null;
+  subscription_plan: "PREMIUM" | "BASIC" | "FREE";
+  updated_at: string;
+  verification_token: string | null;
+  zip_code: string | null
+}
+
+interface AccountInfo {
+  nickname: string | null;
+  email: string;
+  first_name: string | null;
+  last_name: string | null;
+}
+
+// User navigation - restricted options (no Analytics)
+const userNavigation = [
+  { 
+    name: 'Dashboard', 
+    href: '/dashboard', 
+    icon: ChartBarIcon,
+    description: 'Overview of your activity'
+  },
+  { 
+    name: 'Projects', 
+    href: '/dashboard/projects', 
+    icon: DocumentTextIcon,
+    description: 'Manage your projects'
+  },
+  { 
+    name: 'Resources', 
+    href: '/dashboard/resources', 
+    icon: FolderIcon,
+    description: 'Manage files and documents'
+  },
+  { 
+    name: 'Marketplace', 
+    href: '/dashboard/marketplace', 
+    icon: ShoppingBagIcon,
+    description: 'Browse available services'
+  },
+  { 
+    name: 'Knowledge Graph', 
+    href: '/dashboard/knowledge', 
+    icon: BookOpenIcon,
+    description: 'Explore data relationships'
+  },
+  { 
+    name: 'Real-Time Analytics', 
+    href: '/dashboard/realtime', 
+    icon: CpuChipIcon,
+    description: 'Live system metrics'
+  }
+];
+
+// Admin navigation- full options (includes Analytics)
+const adminNavigation = [
+  { 
+    name: 'Dashboard', 
+    href: '/dashboard', 
+    icon: ChartBarIcon,
+    description: 'Overview of your activity'
+  },
+  { 
+    name: 'Analytics', 
+    href: '/dashboard/analytics', 
+    icon: ChartBarIcon,
+    description: 'View performance metrics'
+  },
+  { 
+    name: 'Projects', 
+    href: '/dashboard/projects', 
+    icon: DocumentTextIcon,
+    description: 'Manage your projects'
+  },
+  { 
+    name: 'Users', 
+    href: '/dashboard/users', 
+    icon: UsersIcon,
+    description: 'Manage system users'
+  },
+  { 
+    name: 'Guests', 
+    href: '/dashboard/guests', 
+    icon: HomeIcon,
+    description: 'View guest accounts'
+  },
+  { 
+    name: 'Resources', 
+    href: '/dashboard/resources', 
+    icon: FolderIcon,
+    description: 'Manage files and documents'
+  },
+  { 
+    name: 'Marketplace', 
+    href: '/dashboard/marketplace', 
+    icon: ShoppingBagIcon,
+    description: 'Browse available services'
+  },
+  { 
+    name: 'Knowledge Graph', 
+    href: '/dashboard/knowledge', 
+    icon: BookOpenIcon,
+    description: 'Explore data relationships'
+  },
+  { 
+    name: 'Real-Time Analytics', 
+    href: '/dashboard/realtime', 
+    icon: CpuChipIcon,
+    description: 'Live system metrics'
+  }
+];
+
+// Notification structure
+interface Notification {
+  id: number;
+  title: string;
+  message: string;
+  timestamp: string;
+  read: boolean;
+  type: 'alert' | 'info' | 'success';
+}
+
+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  const { role, logout, accessToken } = useContext(AuthContext);
+  const navigate = useRouter();
+  //const location = useLocation();
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+  const [currentPage, setCurrentPage] = useState('/dashboard');
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  //const [isVisible, setIsVisible] = useState(false);
+  const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false);
+  const [isAdminView, setIsAdminView] = useState(role === "ADMIN"); // Default to admin view
+  const [isNotificationsOpen, setIsNotificationsOpen] = useState(false);
+  const [accountInfo, setAccountInfo] = useState<AccountInfo>({
+    email: '',
+    nickname: null,
+    first_name: null,
+    last_name: null,
+  });
+  const [avatarUrl, setAvatarUrl] = useState('');
+  const loadAccount = async () => {
+    try {
+      const response = await axios.get(`${API_URL}/auth/auth`, {
+        headers: { 'Authorization' : `Bearer ${accessToken}` },
+      });
+      const user: User = response.data.username;
+      if(user) {
+        const localAvatarUrl = localStorage.getItem('Avatar:'+user.email);
+        if(localAvatarUrl) setAvatarUrl(localAvatarUrl);
+        setAccountInfo({
+          email: user.email,
+          nickname: user.nickname,
+          first_name: user.first_name,
+          last_name: user.last_name
+        });
+      } else console.error("User not found");
+    } catch {
+      console.error("User not found");
+    }
+  }
+
+  useEffect(() => {
+    loadAccount();
+    addEventListener('profileChange', function(event: any) {
+      setAccountInfo({...accountInfo,
+        email: event.detail.email,
+        first_name: event.detail.first_name,
+        last_name: event.detail.last_name,
+        nickname: event.detail.nickname
+      })
+      const localAvatarUrl = localStorage.getItem('Avatar:'+event.detail.email);
+      if(localAvatarUrl) setAvatarUrl(localAvatarUrl);
+    });
+  }, []);
+  
+  // Sample notifications
+  const [notifications, setNotifications] = useState<Notification[]>([
+    {
+      id: 1,
+      title: "New User Registration",
+      message: "A new user has registered on the platform.",
+      timestamp: new Date(Date.now() - 15 * 60000).toISOString(),
+      read: false,
+      type: 'info'
+    },
+    {
+      id: 2,
+      title: "System Update",
+      message: "The system will undergo maintenance tonight at 2 AM EST.",
+      timestamp: new Date(Date.now() - 2 * 3600000).toISOString(),
+      read: false,
+      type: 'alert'
+    },
+    {
+      id: 3,
+      title: "Project Completed",
+      message: "Sales Forecasting project has been completed successfully.",
+      timestamp: new Date(Date.now() - 1 * 86400000).toISOString(),
+      read: true,
+      type: 'success'
+    }
+  ]);
+
+  // Get count of unread notifications
+  const unreadCount = notifications.filter(n => !n.read).length;
+
+  // Get current navigation based on view mode
+  const navigation = isAdminView ? adminNavigation : userNavigation;
+
+  // States for support and report modals
+  const [isSupportModalOpen, setIsSupportModalOpen] = useState(false);
+  const [showToast, setShowToast] = useState({
+    show: false,
+    message: "",
+    color: "green"
+  });
+  
+  // Function to show toast notifications
+  const showNotification = (message: string, color = "green") => {
+    setShowToast({
+      show: true,
+      message,
+      color
+    });
+    
+    setTimeout(() => {
+      setShowToast({...showToast, show: false});
+    }, 3000);
+  };
+
+  const handleLogout = () => {
+    setIsLogoutModalOpen(true);
+  };
+
+  const handleCloseLogoutModal = () => {
+    setIsLogoutModalOpen(false);
+  };
+
+  const handleConfirmLogout = () => {
+    logout();
+    navigate.push('/login');
+  };
+
+  const handleNavigation = (path: string) => {
+    // Check if the path is available in current view mode
+    const isPathAvailable = navigation.some(item => item.href === path);
+    if (!isPathAvailable) {
+      // If trying to access a restricted page in user view, stay on dashboard
+      if (!isAdminView) {
+        path = '/dashboard';
+      }
+    }
+    
+    //const page = path.split('/').pop() || 'dashboard';
+    //setCurrentPage(page);
+    setCurrentPage(path);
+    navigate.push(path);
+    setIsDrawerOpen(false); // Close drawer on navigation
+  };
+
+  const handleToggleView = () => {
+    dispatchEvent(new CustomEvent("switch", {detail: isAdminView ? 'USESR' : 'ADMIN'}));
+    setIsAdminView(!isAdminView);
+    // If switching to user view while on an admin-only page, redirect to dashboard
+    if (isAdminView) {
+      const currentPath = location.pathname;
+      const isPathAvailable = userNavigation.some(item => item.href === currentPath);
+      if (!isPathAvailable) {
+        navigate.push('/dashboard');
+        setCurrentPage('dashboard');
+      }
+    }
+  };
+
+  const markNotificationAsRead = (id: number) => {
+    setNotifications(notifications.map(notification => 
+      notification.id === id ? { ...notification, read: true } : notification
+    ));
+  };
+
+  const markAllNotificationsAsRead = () => {
+    setNotifications(notifications.map(notification => ({ ...notification, read: true })));
+  };
+
+  const deleteNotification = (id: number) => {
+    setNotifications(notifications.filter(notification => notification.id !== id));
+  };
+
+  const formatNotificationTime = (timestamp: string | number | Date) => {
+    const date = new Date(timestamp);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    
+    if (diffMins < 60) {
+      return `${diffMins} min${diffMins !== 1 ? 's' : ''} ago`;
+    }
+    
+    const diffHours = Math.floor(diffMins / 60);
+    if (diffHours < 24) {
+      return `${diffHours} hour${diffHours !== 1 ? 's' : ''} ago`;
+    }
+    
+    const diffDays = Math.floor(diffHours / 24);
+    if (diffDays < 7) {
+      return `${diffDays} day${diffDays !== 1 ? 's' : ''} ago`;
+    }
+    
+    return date.toLocaleDateString();
+  };
+
+  const getNotificationIcon = (type: string) => {
+    switch (type) {
+      case 'alert':
+        return <BellIcon className="h-5 w-5 text-red-500" />;
+      case 'success':
+        return <CheckCircleIcon className="h-5 w-5 text-green-500" />;
+      default:
+        return <InformationCircleIcon className="h-5 w-5 text-blue-500" />;
+    }
+  };
+/*
+  const breadcrumbs = location.pathname
+    .split('/')
+    .filter(Boolean)
+    .map((path, index, array) => ({
+      name: path.charAt(0).toUpperCase() + path.slice(1),
+      href: '/' + array.slice(0, index + 1).join('/'),
+      current: index === array.length - 1,
+    }));
+    */
+  // Updated Sidebar with visible toggle button when collapsed
+  const Sidebar = () => (
+    <div>
+      <div className={cn(isSidebarCollapsed ? "w-28" : "w-[20rem]")}>
+        {/* Phantom element to take up space of fixed sidebar */}
+      </div>
+      <Card className={cn(
+        "shadow-xl shadow-blue-gray-900/5 overflow-auto transition-all duration-300",
+        isSidebarCollapsed ? "w-28" : "w-full max-w-[20rem]",
+        isDrawerOpen ? "relative p-4 pr-16" : "fixed top-24 bottom-0 p-4 pr-16"
+      )}>
+        {/* Toggle button fixed position to always remain visible */}
+        <div className={isSidebarCollapsed ? "fixed top-64 left-16" : 'fixed top-64 left-64'}>
+          <IconButton
+            variant="text"
+            color="teal"
+            onClick={() => setIsSidebarCollapsed(!isSidebarCollapsed)}
+            className="mb-4"
+          >
+            {isSidebarCollapsed ? <ChevronRightIcon className="h-5 w-5" /> : <ChevronLeftIcon className="h-5 w-5" />}
+          </IconButton>
+        </div>
+        <div className="relative z-10">
+          {/* Role identifier */}
+          {!isSidebarCollapsed && (
+            <div className="mb-4 bg-gradient-to-r from-teal-50 to-blue-50 rounded-lg p-3 border border-teal-100">
+              <div className="flex items-center gap-2">
+                <div className={cn(
+                  "h-3 w-3 rounded-full",
+                  isAdminView ? "bg-red-500" : "bg-green-500"
+                )}></div>
+                <Typography variant="small" className="font-medium text-blue-gray-700">
+                  {isAdminView ? "Admin View" : "User View"}
+                </Typography>
+              </div>
+            </div>
+          )}
+          
+          <div>
+            {navigation.map((item) => {
+              const isActive = /*location.pathname*/currentPage === item.href /*|| 
+                (item.href === '/dashboard' && location.pathname === '/dashboard') || 
+                (location.pathname.includes(item.href) && item.href !== '/dashboard');*/
+              return (
+                <ListItem
+                  key={item.name}
+                  className={cn(
+                    "mb-2 hover:bg-teal-50/80 transition-all duration-200",
+                    isActive ? "bg-teal-50/80 text-teal-500 font-medium" : "",
+                    isSidebarCollapsed ? "w-12" : ""
+                  )}
+                  onClick={() => handleNavigation(item.href)}
+                >
+                  <ListItemPrefix>
+                    <item.icon className={cn(
+                      "h-4 w-4",
+                      isActive ? "text-teal-500" : "text-blue-gray-500"
+                    )} />
+                  </ListItemPrefix>
+                  {!isSidebarCollapsed && (
+                    <div>
+                      <Typography variant="small" className={isActive ? "font-medium" : ""}>
+                        {item.name}
+                      </Typography>
+                      {!isActive && (
+                        <Typography variant="small" className="text-xs text-gray-500">
+                          {item.description}
+                        </Typography>
+                      )}
+                    </div>
+                  )}
+                </ListItem>
+              );
+            })}
+          </div>
+          
+          {!isSidebarCollapsed && (
+            <div className="mt-auto pt-8">
+              <Card className="mt-6 bg-gradient-to-br from-teal-500 to-teal-700 text-white p-4 rounded-xl">
+                <Typography variant="h6" className="mb-2">Need Help?</Typography>
+                <Typography variant="small" className="mb-4 opacity-80">
+                  Contact our support team for assistance with any issues.
+                </Typography>
+                <Button 
+                  size="sm" 
+                  className="bg-white text-teal-800 flex items-center gap-2 shadow-md hover:shadow-lg"
+                  fullWidth
+                  onClick={() => setIsSupportModalOpen(true)}
+                >
+                  <ChatBubbleLeftRightIcon className="h-4 w-4" />
+                  Contact Support
+                </Button>
+              </Card>
+              
+              <Button 
+                size="sm"
+                color="red"
+                variant="text"
+                className="flex items-center gap-2 mt-4 w-full justify-center"
+                onClick={handleLogout} 
+              >
+                <ArrowRightStartOnRectangleIcon className="h-4 w-4" />
+                Sign Out
+              </Button>
+            </div>
+          )}
+        </div>
+      </Card>
+    </div>
+  );
+  return (
+    <PrivateRoute>
+      <div className="min-h-screen bg-gray-50/50">
+        {/* Add blur overlay when logout modal is open */}
+        {isLogoutModalOpen && (
+          <div className="fixed inset-0 bg-black/20 backdrop-blur-sm z-[60]"></div>
+        )}
+    
+        <Navbar className="sticky top-0 z-10 max-w-full rounded-none px-4 py-2 lg:px-8 lg:py-4 border-b border-gray-100 bg-white/95 backdrop-blur-sm shadow-sm">
+          <div className="flex items-center justify-between text-blue-gray-900">
+            <div className="flex items-center gap-2">
+              <img src="/logo.png" alt="Theoforge Logo" className="h-12 w-12" />
+              <Typography variant="h5" color="blue-gray">
+                Theoforge
+              </Typography>
+              <IconButton
+                variant="text"
+                color="teal"
+                className="lg:hidden"
+                hidden={isDrawerOpen}
+                onClick={() => setIsDrawerOpen(true)}
+              >
+                <MenuIcon className="h-6 w-6" />
+              </IconButton>
+            </div>
+            
+            <div className="flex items-center gap-4">
+              {/* Admin/User View Toggle */}
+              <div className="flex items-center gap-2">
+                <Typography variant="small" color={isAdminView ? "teal" : "gray"} className="font-medium">
+                  Admin
+                </Typography>
+                <Switch 
+                  color="teal"
+                  checked={!isAdminView}
+                  onChange={handleToggleView}
+                  label=""
+                  className="h-full"
+                  crossOrigin={undefined}
+                />
+                <Typography variant="small" color={!isAdminView ? "teal" : "gray"} className="font-medium">
+                  User
+                </Typography>
+              </div>
+              
+              {/* Notifications dropdown */}
+              <Menu
+                placement="bottom-end"
+                open={isNotificationsOpen}
+                handler={setIsNotificationsOpen}
+              >
+                <MenuHandler>
+                  <div className="relative">
+                    <IconButton variant="text" color="blue-gray" className="">
+                      <BellIcon className="h-5 w-5" />
+                    </IconButton>
+                    {unreadCount > 0 && (
+                      <Badge
+                        content={unreadCount}
+                        color="teal"
+                        className="absolute -top-1 -right-1 h-4 w-4 flex items-center justify-center p-0 text-[10px]"
+                      >{' '}</Badge>
+                    )}
+                  </div>
+                </MenuHandler>
+                <MenuList className="p-2 max-h-[400px] min-w-[300px] overflow-y-auto">
+                  <div className="flex items-center justify-between p-2 border-b border-gray-100">
+                    <Typography variant="small" className="font-bold">
+                      Notifications
+                    </Typography>
+                    {unreadCount > 0 ? (
+                      <Button variant="text" size="sm" onClick={markAllNotificationsAsRead} className="text-xs py-1">
+                        Mark all as read
+                      </Button>
+                    ) : (
+                      <Typography variant="small" className="text-gray-500 text-xs">
+                        No new notifications
+                      </Typography>
+                    )}
+                  </div>
+                  {notifications.length > 0 ? (
+                    notifications.map((notification) => (
+                      <MenuItem key={notification.id} className={cn(
+                        "flex flex-col items-start gap-1 border-b border-gray-50 hover:bg-gray-50 transition-colors",
+                        !notification.read ? "bg-teal-50/50" : ""
+                      )}>
+                        <div className="flex items-start justify-between w-full">
+                          <div className="flex gap-2">
+                            <div className="p-1.5 rounded-full bg-gray-100">
+                              {getNotificationIcon(notification.type)}
+                            </div>
+                            <div>
+                              <div className="flex items-center gap-2">
+                                <Typography variant="small" className="font-medium">
+                                  {notification.title}
+                                </Typography>
+                                {!notification.read && (
+                                  <div className="h-2 w-2 rounded-full bg-teal-500"></div>
+                                )}
+                              </div>
+                              <Typography variant="small" className="text-gray-600">
+                                {notification.message}
+                              </Typography>
+                              <Typography variant="small" className="text-gray-500 text-xs">
+                                {formatNotificationTime(notification.timestamp)}
+                              </Typography>
+                            </div>
+                          </div>
+                          <div className="flex gap-1 ml-2">
+                            {!notification.read && (
+                              <IconButton 
+                                variant="text" 
+                                size="sm" 
+                                color="teal" 
+                                className="h-6 w-6 min-w-0"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  markNotificationAsRead(notification.id);
+                                }}
+                              >
+                                <CheckCircleIcon className="h-4 w-4" />
+                              </IconButton>
+                            )}
+                            <IconButton 
+                              variant="text" 
+                              size="sm" 
+                              color="red" 
+                              className="h-6 w-6 min-w-0"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                deleteNotification(notification.id);
+                              }}
+                            >
+                              <XMarkIcon className="h-4 w-4" />
+                            </IconButton>
+                          </div>
+                        </div>
+                      </MenuItem>
+                    ))
+                  ) : (
+                    <MenuItem className="text-center text-gray-500 py-6">
+                      No notifications
+                    </MenuItem>
+                  )}
+                </MenuList>
+              </Menu>
+              
+              <Menu>
+                <MenuHandler>
+                  <Button 
+                    variant="text" 
+                    color="blue-gray" 
+                    className="flex items-center gap-2 normal-case shadow-none px-2"
+                  >
+                    <Avatar 
+                      src={avatarUrl}
+                      alt="User" 
+                      size="sm" 
+                      className="border border-gray-200" 
+                    />
+                    <div className="hidden sm:block text-left">
+                      <Typography variant="small" className="font-medium">
+                        {accountInfo.nickname ? accountInfo.nickname :
+                        (accountInfo.first_name && accountInfo.last_name) ? (accountInfo.first_name + ' ' + accountInfo.last_name) :
+                        accountInfo.email ? accountInfo.email : ''}
+                      </Typography>
+                      <Typography variant="small" className="text-xs text-gray-500">
+                        {role}
+                      </Typography>
+                    </div>
+                  </Button>
+                </MenuHandler>
+                <MenuList className="p-1">
+                  <MenuItem 
+                    className="flex items-center gap-2 rounded hover:bg-teal-50/80"
+                    onClick={() => navigate.push('/dashboard/profile')}
+                  >
+                    <UserCircleIcon className="h-4 w-4 text-teal-500" />
+                    <Typography variant="small" className="font-normal">
+                      Profile Settings
+                    </Typography>
+                  </MenuItem>
+                  <Link href="/learn-more">
+                    <MenuItem 
+                      className="flex items-center gap-2 rounded hover:bg-teal-50/80"
+                    >
+                      <InformationCircleIcon className="h-4 w-4 text-teal-500" />
+                      <Typography variant="small" className="font-normal">
+                        Learn More
+                      </Typography>
+                    </MenuItem>
+                  </Link>
+                  <MenuItem 
+                    className="flex items-center gap-2 rounded hover:bg-red-50 text-red-500"
+                    onClick={handleLogout}
+                  >
+                    <ArrowRightStartOnRectangleIcon className="h-4 w-4" />
+                    <Typography variant="small" className="font-normal">
+                      Sign Out
+                    </Typography>
+                  </MenuItem>
+                </MenuList>
+              </Menu>
+            </div>
+          </div>
+        </Navbar>
+
+        <div className="flex">
+          <div className="hidden lg:block">
+            <Sidebar />
+          </div>
+
+          <Drawer
+            open={isDrawerOpen}
+            onClose={() => setIsDrawerOpen(false)}
+            className="lg:hidden w-auto"
+          >
+            <Navbar className="sticky top-0 z-10 max-w-full rounded-none px-4 py-2 lg:px-8 lg:py-4 border-b border-gray-100 bg-white/95 backdrop-blur-sm shadow-sm">
+              <div className="flex items-center justify-between text-blue-gray-900">
+                <div className="flex items-center gap-2">
+                  <img src="/logo.png" alt="Theoforge Logo" className="h-12 w-12" />
+                  {!isSidebarCollapsed ? (<Typography variant="h5" color="blue-gray">
+                    Theoforge
+                  </Typography>) : <></>}
+                </div>
+                <div className="flex items-center">
+                  <IconButton
+                    variant="text"
+                    color="teal"
+                    className="lg:hidden"
+                    hidden={isSidebarCollapsed}
+                    onClick={() => setIsDrawerOpen(false)}
+                  >
+                    <MenuIcon className="h-6 w-6" />
+                  </IconButton>
+                </div>
+              </div>
+            </Navbar>
+            <Sidebar />
+          </Drawer>
+          <div className="flex-1 p-4 lg:p-6 max-w-full overflow-auto">
+            {children}
+          </div>
+        </div>
+        {/* Logout Modal */}
+        <Dialog
+          open={isLogoutModalOpen}
+          handler={handleCloseLogoutModal}
+          size="xs"
+          className="bg-white shadow-none z-[70]"
+        >
+          <DialogHeader>Confirm Logout</DialogHeader>
+          <DialogBody>
+            Are you sure you want to log out of your account?
+          </DialogBody>
+          <DialogFooter>
+            <Button
+              variant="text"
+              color="gray"
+              onClick={handleCloseLogoutModal}
+              className="mr-1"
+            >
+              <span>Cancel</span>
+            </Button>
+            <Button variant="gradient" color="red" onClick={handleConfirmLogout}>
+              <span>Logout</span>
+            </Button>
+          </DialogFooter>
+        </Dialog>
+
+        {/* Toast notification */}
+        {showToast.show && (
+          <Alert
+            open={showToast.show}
+            color={showToast.color as colors}
+            className="fixed top-20 right-4 z-50 max-w-md"
+            icon={<CheckCircleIcon className="h-6 w-6" />}
+            onClose={() => setShowToast({...showToast, show: false})}
+          >
+            {showToast.message}
+          </Alert>
+        )}
+
+        {/* Support Modal */}
+        <Dialog
+          open={isSupportModalOpen}
+          handler={() => setIsSupportModalOpen(false)}
+          size="md"
+        >
+          <DialogHeader>Contact Support</DialogHeader>
+          <DialogBody divider>
+            <div className="space-y-4">
+              <div>
+                <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                  Support Category
+                </Typography>
+                <select className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:border-teal-500">
+                  <option value="">Select category</option>
+                  <option value="technical">Technical Issue</option>
+                  <option value="billing">Billing Question</option>
+                  <option value="feature">Feature Request</option>
+                  <option value="other">Other</option>
+                </select>
+              </div>
+              <div>
+                <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                  Priority
+                </Typography>
+                <select className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:border-teal-500">
+                  <option value="low">Low</option>
+                  <option value="medium">Medium</option>
+                  <option value="high">High</option>
+                  <option value="critical">Critical</option>
+                </select>
+              </div>
+              <div>
+                <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                  Description
+                </Typography>
+                <Textarea label="Describe your issue" rows={4} />
+              </div>
+            </div>
+          </DialogBody>
+          <DialogFooter>
+            <Button
+              variant="text"
+              color="red"
+              onClick={() => setIsSupportModalOpen(false)}
+              className="mr-2"
+            >
+              Cancel
+            </Button>
+            <Button 
+              variant="gradient" 
+              color="purple"
+              onClick={() => {
+                setIsSupportModalOpen(false);
+                showNotification("Support ticket submitted successfully!");
+              }}
+            >
+              Submit Ticket
+            </Button>
+          </DialogFooter>
+        </Dialog>
+      </div>
+    </PrivateRoute>
+  );
+}
\ No newline at end of file
diff --git a/src/app/(Dashboard)/dashboard/page.tsx b/src/app/(Dashboard)/dashboard/page.tsx
new file mode 100644
index 0000000..14f24dd
--- /dev/null
+++ b/src/app/(Dashboard)/dashboard/page.tsx
@@ -0,0 +1,25 @@
+'use client'
+
+import React, { useContext, useEffect, useState } from 'react';
+import { AuthContext } from '@/components/Dashboard/AppContext';
+import UserDashboard from '@/components/Dashboard/UserDashboard';
+import AdminDashboard from '@/components/Dashboard/AdminDashboard';
+
+type Role = 'USER' | 'ADMIN';
+
+// Main Dashboard Component
+export default function Dashboard() {
+  const { role } = useContext(AuthContext);
+  const [switchRole, setSwitchRole] = useState<Role>(role);
+  useEffect(() => {
+    addEventListener('switch', function(event: any) {
+      setSwitchRole(event.detail);
+    });
+  }, []);
+  return (
+    <>
+    {switchRole === "ADMIN" ? <AdminDashboard /> : <UserDashboard />}
+    </>
+  )
+}
+
diff --git a/src/app/(Dashboard)/dashboard/profile/page.tsx b/src/app/(Dashboard)/dashboard/profile/page.tsx
new file mode 100644
index 0000000..6f4b38e
--- /dev/null
+++ b/src/app/(Dashboard)/dashboard/profile/page.tsx
@@ -0,0 +1,933 @@
+'use client'
+
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useState, useRef, useEffect, useContext } from 'react';
+import {
+  UserCircleIcon,
+  UserIcon,
+  PhotoIcon,
+  CheckIcon,
+  XMarkIcon,
+  CameraIcon
+} from '@heroicons/react/24/outline';
+import {
+  Typography,
+  Card,
+  CardHeader,
+  CardBody,
+  Button,
+  Input,
+  Avatar,
+  Dialog,
+  DialogHeader,
+  DialogBody,
+  DialogFooter,
+  Alert
+} from "@material-tailwind/react";
+import { API_URL } from '@/utils/axiosConfig';
+import axios from 'axios';
+import { AuthContext } from '@/components/Dashboard/AppContext';
+
+interface User {
+  address: string | null;
+  card_number: string | null;
+  ccv: string | null;
+  city: string | null;
+  created_at: string;
+  email: string;
+  email_verified: boolean;
+  failed_login_attempts: number;
+  first_name: string | null;
+  hashed_password: string;
+  id: string;
+  is_locked: boolean;
+  last_name: string | null;
+  nickname: string | null;
+  phone_number: string | null;
+  role: "ADMIN" | "USER";
+  security_code: string | null;
+  state: string | null;
+  subscription_plan: "PREMIUM" | "BASIC" | "FREE";
+  updated_at: string;
+  verification_token: string | null;
+  zip_code: string | null
+}
+interface AccountInfo {
+  nickname: string;
+  email: string;
+  first_name: string;
+  last_name: string;
+  password: string; 
+}
+interface ProfileInfo {
+  phone_number: string;
+  address: string;
+  city: string;
+  state: string;
+  zip_code: string; 
+  card_number: string;
+  ccv: string;
+  security_code: string;
+  subscription_plan: "PREMIUM" | "BASIC" | "FREE";
+}
+
+interface AdditionalInfo {
+  email_verified: boolean;
+  failed_login_attempts: number;
+  hashed_password: string;
+  id: string;
+  is_locked: boolean;
+  role: "USER" | "ADMIN";
+  updated_at: string;
+  created_at: string;
+  verification_token: string;
+}
+
+const ProfileSettings: React.FC = () => {
+  const [accountInfo, setAccountInfo] = useState<AccountInfo>({
+    email: 'Email',
+    nickname: 'Name',
+    first_name: 'First Name',
+    last_name: 'Last Name',
+    password: ''
+  });
+  const [profileInfo, setProfileInfo] = useState<ProfileInfo>({
+    phone_number: '',
+    address: '',
+    city: '',
+    state: '',
+    zip_code: '', 
+    card_number: '',
+    ccv: '',
+    security_code: '',
+    subscription_plan: "FREE"
+  });
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [additionalInfo, setAdditionalInfo] = useState<AdditionalInfo>({
+    email_verified: false,
+    failed_login_attempts: 0,
+    hashed_password: '',
+    id: '',
+    is_locked: false,
+    role: "USER",
+    updated_at: '',
+    created_at: '',
+    verification_token: ''
+  });
+  
+  const [isEditingAccount, setIsEditingAccount] = useState(false);
+  const [isEditingProfile, setIsEditingProfile] = useState(false);
+  const [isAvatarModalOpen, setIsAvatarModalOpen] = useState(false);
+  const [dragActive, setDragActive] = useState(false);
+  const [avatar, setAvatar] = useState<string>('');
+  const [editAvatar, setEditAvatar] = useState<string | null>(null);
+  const [avatarOwner, setAvatarOwner] = useState('');
+  const [showAlert, setShowAlert] = useState({ show: false, message: "", type: "success" });
+  const [isLoading, setIsLoading] = useState(false);
+  const { accessToken, role, login } = useContext(AuthContext);
+  
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const loadUser = async () => {
+    setIsLoading(true);
+    try {
+      const response = await axios.get(`${API_URL}/auth/auth`, {
+        headers: { 'Authorization' : `Bearer ${accessToken}` },
+      });
+      const user: User = response.data.username;
+      if(user) {
+        const localAvatarUrl = localStorage.getItem('Avatar:'+user.email);
+        if(localAvatarUrl) setAvatar(localAvatarUrl);
+        setAvatarOwner(user.email);
+        setShowAlert({ show: false, message: "", type: "success" });
+        setAccountInfo({
+          email: user.email,
+          nickname: user.nickname ? user.nickname : '',
+          first_name: user.first_name ? user.first_name : '',
+          last_name: user.last_name ? user.last_name : '',
+          password: ''
+        });
+        setProfileInfo({
+          phone_number: user.phone_number ? user.phone_number : '',
+          address: user.address ? user.address : '',
+          city: user.city ? user.city : '',
+          state: user.state ? user.state : '',
+          zip_code: user.zip_code ? user.zip_code : '', 
+          card_number: user.card_number ? user.card_number : '',
+          ccv: user.ccv ? user.ccv : '',
+          security_code: user.security_code ? user.security_code : '',
+          subscription_plan: user.subscription_plan
+        })
+        setAdditionalInfo({
+          email_verified: user.email_verified,
+          failed_login_attempts: user.failed_login_attempts,
+          hashed_password: user.hashed_password,
+          id: user.id ? user.id : '',
+          is_locked: user.is_locked,
+          role: user.role,
+          updated_at: user.updated_at,
+          created_at: user.created_at,
+          verification_token: user.verification_token ? user.verification_token : ''
+        })
+      } else setShowAlert({ show: true, message: "User not found", type: "error" });
+    } catch {
+      setShowAlert({ show: true, message: "User not found", type: "error" });
+    }
+    setIsLoading(false);
+  }
+
+  useEffect(() => {
+    loadUser();
+  }, []);
+
+  // Handle account edit mode toggle
+  const toggleAccountEditMode = () => {
+    if (isEditingAccount) {
+      // Save changes
+      saveAccountChanges();
+    }
+    setIsEditingAccount(!isEditingAccount);
+  };
+  
+  // Handle profile edit mode toggle
+  const toggleProfileEditMode = () => {
+    if (isEditingProfile) {
+      // Save changes
+      saveProfileChanges();
+    }
+    setIsEditingProfile(!isEditingProfile);
+  };
+
+  const saveAccountChanges = async () => {
+    setIsLoading(true);
+    // Send the update to the API
+    try {
+      let alert = ''
+      // Validate field
+      if(!accountInfo.email || !accountInfo.password) {
+        showErrorAlert('Please fill out all fields');
+        return;
+      }
+      if(!/^[\w-.]{1,64}@([\w-]{1,63}\.)+[\w-]{2,63}$/.test(accountInfo.email)) alert = 'Invalid email';
+      else if(accountInfo.nickname && !/^[a-zA-Z0-9]*$/.test(accountInfo.nickname)) alert = 'Nickname may not include special characters';
+      else if(accountInfo.password.length < 8) alert = 'Password must be at least 8 characters';
+      else if(!/[A-Z]/.test(accountInfo.password)) alert = 'Password must contain at least 1 uppercase character';
+      else if(!/[a-z]/.test(accountInfo.password)) alert = 'Password must contain at least 1 lowercase character';
+      else if(!/[0-9]/.test(accountInfo.password)) alert = 'Password must contain at least 1 number';
+      else if(!/[!@#$%^&*()_+\-=[\]{}|;:,.<>?]/.test(accountInfo.password)) alert = 'Password must contain at least 1 special character';
+      else if (accountInfo.first_name && accountInfo.first_name.length > 100) alert = 'First name must not be more than 100 characters';
+      else if (accountInfo.last_name && accountInfo.last_name.length > 100) alert = 'Last name must not be more than 100 characters';
+      else if (accountInfo.nickname && accountInfo.nickname.length > 50) alert = 'Nickname must not be more than 50 characters';
+      // Prevent sql injection by invalidating " and \
+      else if (/["\\]/.test(accountInfo.email.concat(
+        accountInfo.first_name ? accountInfo.first_name : '',
+        accountInfo.last_name ? accountInfo.last_name : '',
+        accountInfo.nickname ? accountInfo.nickname : '',
+        accountInfo.password
+      ))) alert = 'Invalid character " or \\ used';
+      if (alert !== '') {
+        showErrorAlert(alert);
+        return;
+      }
+      // Call backend API
+      await axios.put(`${API_URL}/auth/update`, 
+        {
+          "first_name": accountInfo.first_name,
+          "last_name": accountInfo.last_name,
+          "email": accountInfo.email,
+          "nickname": accountInfo.nickname,
+          "password": accountInfo.password
+        },
+        {
+          headers: { 'Authorization' : `Bearer ${accessToken}` }
+        }
+      );
+      
+      // Login to update access token
+      const response = await login(accountInfo.email, accountInfo.password);
+      if (response !== 'OK') {
+        showErrorAlert(response);
+        return;
+      }
+      
+      // Update local storage avatar owner
+      const prevAvatar = localStorage.getItem('Avatar:'+avatarOwner);
+      if (prevAvatar) {
+        localStorage.setItem('Avatar:'+accountInfo.email, prevAvatar);
+        localStorage.removeItem('Avatar:'+avatarOwner);
+        setAvatarOwner(accountInfo.email);
+      }
+      showSuccessAlert("Account information updated successfully!");
+      // Tell dashboard to update profile
+      dispatchEvent(new CustomEvent('profileChange', {detail: accountInfo}));
+    } catch (error: any) {
+      if(error.response && error.response.data && error.response.data.detail) {
+        if(error.response.data.detail === 'Invalid token'){
+          showErrorAlert('Authentication expired. Please log back in');
+        } else showErrorAlert(error.response.data.detail);
+      }
+      console.error('Error updating account settings:', error);
+      // Handle error (show error message to user)
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const saveProfileChanges = async () => {
+    setIsLoading(true);
+    try {
+      await axios.put(`${API_URL}/auth/update-profile`, 
+        {
+          "phone_number": profileInfo.phone_number,
+          "address": profileInfo.address,
+          "city": profileInfo.city,
+          "state": profileInfo.state,
+          "zip_code": profileInfo.zip_code,
+          "card_number": profileInfo.card_number,
+          "ccv": profileInfo.ccv,
+          "security_code": profileInfo.security_code,
+          "subscription_plan": profileInfo.subscription_plan
+        },
+        {
+          headers: { 'Authorization' : `Bearer ${accessToken}` }
+        }
+      );
+      showSuccessAlert("Profile information updated successfully!");
+    } catch (error: any) {
+      if(error.response && error.response.data && error.response.data.detail) {
+        if(error.response.data.detail === 'Invalid token'){
+          showErrorAlert('Authentication expired. Please log back in');
+        } else showErrorAlert(error.response.data.detail);
+      }
+      console.error('Error updating profile settings:', error);
+      // Handle error (show error message to user)
+    } finally {
+      setIsLoading(false);
+    }
+  }
+  
+  // Cancel account edit mode
+  const cancelAccountEdit = () => {
+    // Reset fields
+    loadUser();
+    setIsEditingAccount(false);
+  };
+  
+  // Cancel profile mode
+  const cancelProfileEdit = () => {
+    // Reset fields
+    loadUser();
+    setIsEditingProfile(false);
+  };
+
+  // Show success alert
+  const showSuccessAlert = (message: string) => {
+    setShowAlert({
+      show: true,
+      message,
+      type: "success"
+    });
+    
+    setTimeout(() => {
+      setShowAlert(prev => ({ ...prev, show: false }));
+    }, 3000);
+  };
+
+  // Show error alert
+  const showErrorAlert = (message: string) => {
+    setShowAlert({
+      show: true,
+      message,
+      type: "error"
+    });
+    
+    setTimeout(() => {
+      setShowAlert(prev => ({ ...prev, show: false }));
+    }, 3000);
+  };
+
+  // Handle avatar upload via input
+  const handleAvatarInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      const image = e.target.files[0];
+      const reader = new FileReader();
+      reader.addEventListener('load', () => {
+        if (reader.result) {
+          setEditAvatar(typeof reader.result === 'string' ?
+          reader.result : Buffer.from(reader.result).toString());
+        } else setEditAvatar(null);
+      });
+      if(image) {
+        reader.readAsDataURL(image)
+      }
+      setIsAvatarModalOpen(true);
+    }
+  };
+
+  // Handle avatar drop
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+    
+    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+      const image = e.dataTransfer.files[0];
+      const reader = new FileReader();
+      reader.addEventListener('load', () => {
+        if (reader.result) {
+          setEditAvatar(typeof reader.result === 'string' ?
+          reader.result : Buffer.from(reader.result).toString());
+        } else setEditAvatar(null);
+      });
+      if(image) {
+        reader.readAsDataURL(image)
+      }
+      setIsAvatarModalOpen(true);
+    }
+  };
+
+  // Apply new avatar
+  const applyNewAvatar = async () => {
+    if (editAvatar) {
+      setIsLoading(true);
+      try {
+        // Update the user avatar in localStorage
+        localStorage.setItem('Avatar:'+accountInfo.email, editAvatar);
+        setAvatar(editAvatar);
+        
+        // Close the modal and show success message
+        setIsAvatarModalOpen(false);
+        showSuccessAlert("Profile picture updated successfully!");
+      } catch (error) {
+        console.error('Error updating avatar:', error);
+        showErrorAlert("Failed to update profile picture. Please try again.");
+      } finally {
+        setIsLoading(false);
+        dispatchEvent(new CustomEvent('profileChange', {detail: accountInfo}));
+      }
+    }
+  };
+
+  // Cancel avatar update
+  const cancelAvatarUpdate = () => {
+    setEditAvatar(null);
+    setIsAvatarModalOpen(false);
+  };
+
+  return (
+    <div>
+      <Card className="border border-gray-100 overflow-hidden">
+        <div className="px-6 py-4 bg-gray-50 border-b border-gray-100 flex items-center justify-between">
+          <div>
+            <Typography variant="h5" color="blue-gray">
+              Account Settings
+            </Typography>
+            <Typography variant="small" color="gray">
+              Manage your credentials
+            </Typography>
+          </div>
+        </div>
+        <div className="p-4">
+          <div className="w-full">
+            {/* Success/Error Alert */}
+            {showAlert.show && (
+              <Alert
+                open={showAlert.show}
+                onClose={() => setShowAlert(prev => ({ ...prev, show: false }))}
+                animate={{
+                  mount: { y: 0 },
+                  unmount: { y: -100 },
+                }}
+                className="fixed top-4 right-4 z-50 max-w-md"
+                color={showAlert.type === "success" ? "green" : "red"}
+                icon={showAlert.type === "success" ? <CheckIcon className="h-6 w-6" /> : <XMarkIcon className="h-6 w-6" />}
+              >
+                {showAlert.message}
+              </Alert>
+            )}
+
+            <Card className="w-full shadow-sm border border-gray-100 mb-6">
+              <CardHeader
+                floated={false}
+                shadow={false}
+                className="flex flex-col md:flex-row justify-between items-center gap-4 bg-white"
+              >
+                <div className="flex items-center gap-4">
+                  <div className="relative group">
+                    <Avatar
+                      src={avatar ? avatar : undefined}
+                      alt="Avatar"
+                      withBorder={true}
+                      className="p-0.5 w-24 h-24"
+                      color="teal"
+                    />
+                    <div
+                      className="absolute inset-0 flex items-center justify-center bg-black/40 rounded-full opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
+                      onClick={() => setIsAvatarModalOpen(true)}
+                    >
+                      <CameraIcon className="h-8 w-8 text-white" />
+                    </div>
+                  </div>
+                  <div>
+                    <Typography variant="h4" color="blue-gray">
+                      {accountInfo.nickname}
+                    </Typography>
+                    <Typography color="teal" className="font-medium">
+                      {role}
+                    </Typography>
+                    <Typography color="gray" className="font-normal text-sm">
+                      {accountInfo.email}
+                    </Typography>
+                  </div>
+                </div>
+                <div>
+                  <Button
+                    color={isEditingAccount ? "teal" : "blue-gray"}
+                    className="flex items-center gap-2"
+                    size="sm"
+                    onClick={toggleAccountEditMode}
+                    disabled={isLoading}
+                  >
+                    {isEditingAccount ? (
+                      <>
+                        <CheckIcon className="h-4 w-4" /> Save Changes
+                      </>
+                    ) : (
+                      <>
+                        <UserCircleIcon className="h-4 w-4" /> Edit Account
+                      </>
+                    )}
+                  </Button>
+                  {isEditingAccount && (
+                    <Button
+                      color="red"
+                      variant="text"
+                      className="flex items-center gap-2 mt-2"
+                      size="sm"
+                      onClick={cancelAccountEdit}
+                      disabled={isLoading}
+                    >
+                      <XMarkIcon className="h-4 w-4" /> Cancel
+                    </Button>
+                  )}
+                </div>
+              </CardHeader>
+              <CardBody>
+                {isLoading ? (
+                  <div className="flex justify-center items-center py-8">
+                    <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-teal-500"></div>
+                  </div>
+                ) : (
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                      <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                        Nickname
+                      </Typography>
+                      {isEditingAccount ? (
+                        <Input
+                            icon={<UserIcon className="h-5 w-5 text-blue-gray-300" />}
+                            value={accountInfo.nickname}
+                            onChange={(e) => setAccountInfo({...accountInfo, nickname: e.target.value})}
+                            label="Name"
+                            crossOrigin={undefined}
+                        />
+                      ) : (
+                        <Typography>{accountInfo.nickname}</Typography>
+                      )}
+                    </div>
+                    <div>
+                      <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                        Email
+                      </Typography>
+                      {isEditingAccount ? (
+                        <Input
+                            icon={<UserIcon className="h-5 w-5 text-blue-gray-300" />}
+                            value={accountInfo.email}
+                            onChange={(e) => setAccountInfo({...accountInfo, email: e.target.value})}
+                            label="Email"
+                            crossOrigin={undefined}
+                        />
+                      ) : (
+                        <Typography>{accountInfo.email}</Typography>
+                      )}
+                    </div>
+                    <div>
+                      <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                        First Name
+                      </Typography>
+                      {isEditingAccount ? (
+                        <Input
+                            icon={<UserIcon className="h-5 w-5 text-blue-gray-300" />}
+                            value={accountInfo.first_name}
+                            onChange={(e) => setAccountInfo({...accountInfo, first_name: e.target.value})}
+                            label="First Name"
+                            crossOrigin={undefined}
+                        />
+                      ) : (
+                        <Typography>{accountInfo.first_name}</Typography>
+                      )}
+                    </div>
+                    <div>
+                      <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                        Last Name
+                      </Typography>
+                      {isEditingAccount ? (
+                        <Input
+                            icon={<UserIcon className="h-5 w-5 text-blue-gray-300" />}
+                            value={accountInfo.last_name}
+                            onChange={(e) => setAccountInfo({...accountInfo, last_name: e.target.value})}
+                            label="Last Name"
+                            crossOrigin={undefined}
+                        />
+                      ) : (
+                        <Typography>{accountInfo.last_name}</Typography>
+                      )}
+                    </div>
+                    <div>
+                      <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                        Password
+                      </Typography>
+                      {isEditingAccount ? (
+                        <Input
+                            icon={<UserIcon className="h-5 w-5 text-blue-gray-300" />}
+                            value={accountInfo.password}
+                            onChange={(e) => setAccountInfo({...accountInfo, password: e.target.value})}
+                            label="Password"
+                            crossOrigin={undefined}
+                        />
+                      ) : (
+                        <Typography>{accountInfo.password}</Typography>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </CardBody>
+            </Card>
+
+            {/* Avatar Upload Modal */}
+            <Dialog
+              open={isAvatarModalOpen}
+              handler={() => setIsAvatarModalOpen(false)}
+              size="xs"
+            >
+              <DialogHeader>Update Profile Picture</DialogHeader>
+              <DialogBody divider>
+                <div className="flex flex-col items-center">
+                  {editAvatar ? (
+                    <div className="mb-4">
+                      <Avatar
+                        src={editAvatar}
+                        alt="New profile picture"
+                        size="xxl"
+                        className="h-40 w-40"
+                      />
+                    </div>
+                  ) : (
+                    <div
+                      className={`border-2 border-dashed rounded-lg p-8 transition-colors cursor-pointer text-center w-full mb-4 ${
+                        dragActive ? "border-teal-500 bg-teal-50" : "border-blue-gray-200"
+                      }`}
+                      onDragOver={handleDragOver}
+                      onDragLeave={handleDragLeave}
+                      onDrop={handleDrop}
+                      onClick={() => fileInputRef.current?.click()}
+                    >
+                      <PhotoIcon className="h-12 w-12 text-blue-gray-300 mx-auto mb-4" />
+                      <Typography color="blue-gray" className="font-medium mb-1">
+                        Drag and drop an image here
+                      </Typography>
+                      <Typography color="gray" className="text-sm">
+                        or <span className="text-teal-500 font-medium">browse</span> to upload
+                      </Typography>
+                      <Typography color="gray" className="text-xs mt-4">
+                        Supported formats: JPEG, PNG, GIF
+                      </Typography>
+                      <input
+                        type="file"
+                        ref={fileInputRef}
+                        className="hidden"
+                        onChange={handleAvatarInputChange}
+                        accept="image/*"
+                      />
+                    </div>
+                  )}
+                </div>
+              </DialogBody>
+              <DialogFooter>
+                <Button
+                  variant="text"
+                  color="red"
+                  onClick={cancelAvatarUpdate}
+                  className="mr-2"
+                  disabled={isLoading}
+                >
+                  Cancel
+                </Button>
+                {editAvatar && (
+                  <Button
+                    color="teal"
+                    onClick={applyNewAvatar}
+                    disabled={isLoading}
+                  >
+                    {isLoading ? (
+                      <span className="flex items-center gap-2">
+                        <span className="h-4 w-4 rounded-full border-2 border-t-transparent border-teal-500 animate-spin"></span>
+                        Processing...
+                      </span>
+                    ) : (
+                      "Apply"
+                    )}
+                  </Button>
+                )}
+              </DialogFooter>
+            </Dialog>
+          </div>
+        </div>
+      </Card>
+      
+      <Card className="border border-gray-100 overflow-hidden">
+        <div className="px-6 py-4 bg-gray-50 border-b border-gray-100 flex items-center justify-between">
+          <div>
+            <Typography variant="h5" color="blue-gray">
+              Profile Settings
+            </Typography>
+            <Typography variant="small" color="gray">
+              Manage your profile information
+            </Typography>
+          </div>
+        </div>
+        <div className="p-4">
+          <div className="w-full">
+            {/* Success/Error Alert */}
+            {showAlert.show && (
+              <Alert
+                open={showAlert.show}
+                onClose={() => setShowAlert(prev => ({ ...prev, show: false }))}
+                animate={{
+                  mount: { y: 0 },
+                  unmount: { y: -100 },
+                }}
+                className="fixed top-4 right-4 z-50 max-w-md"
+                color={showAlert.type === "success" ? "green" : "red"}
+                icon={showAlert.type === "success" ? <CheckIcon className="h-6 w-6" /> : <XMarkIcon className="h-6 w-6" />}
+              >
+                {showAlert.message}
+              </Alert>
+            )}
+
+            <Card className="w-full shadow-sm border border-gray-100 mb-6">
+              <CardHeader
+                floated={false}
+                shadow={false}
+                className="flex flex-col md:flex-row justify-between items-center gap-4 bg-white"
+              >
+                <div>
+                  <Button
+                    color={isEditingProfile ? "teal" : "blue-gray"}
+                    className="flex items-center gap-2"
+                    size="sm"
+                    onClick={toggleProfileEditMode}
+                    disabled={isLoading}
+                  >
+                    {isEditingProfile ? (
+                      <>
+                        <CheckIcon className="h-4 w-4" /> Save Changes
+                      </>
+                    ) : (
+                      <>
+                        <UserCircleIcon className="h-4 w-4" /> Edit Profile
+                      </>
+                    )}
+                  </Button>
+                  {isEditingProfile && (
+                    <Button
+                      color="red"
+                      variant="text"
+                      className="flex items-center gap-2 mt-2"
+                      size="sm"
+                      onClick={cancelProfileEdit}
+                      disabled={isLoading}
+                    >
+                      <XMarkIcon className="h-4 w-4" /> Cancel
+                    </Button>
+                  )}
+                </div>
+              </CardHeader>
+              <CardBody>
+                {isLoading ? (
+                  <div className="flex justify-center items-center py-8">
+                    <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-teal-500"></div>
+                  </div>
+                ) : (
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                      <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                        Phone Number
+                      </Typography>
+                      {isEditingProfile ? (
+                        <Input
+                            icon={<UserIcon className="h-5 w-5 text-blue-gray-300" />}
+                            value={profileInfo.phone_number}
+                            onChange={(e) => setProfileInfo({...profileInfo, phone_number: e.target.value})}
+                            label="Phone Number"
+                            crossOrigin={undefined}
+                        />
+                      ) : (
+                        <Typography>{profileInfo.phone_number}</Typography>
+                      )}
+                    </div>
+                    <div>
+                      <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                        Address
+                      </Typography>
+                      {isEditingProfile ? (
+                        <Input
+                            icon={<UserIcon className="h-5 w-5 text-blue-gray-300" />}
+                            value={profileInfo.address}
+                            onChange={(e) => setProfileInfo({...profileInfo, address: e.target.value})}
+                            label="Address"
+                            crossOrigin={undefined}
+                        />
+                      ) : (
+                        <Typography>{profileInfo.address}</Typography>
+                      )}
+                    </div>
+                    <div>
+                      <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                        City
+                      </Typography>
+                      {isEditingProfile ? (
+                        <Input
+                            icon={<UserIcon className="h-5 w-5 text-blue-gray-300" />}
+                            value={profileInfo.city}
+                            onChange={(e) => setProfileInfo({...profileInfo, city: e.target.value})}
+                            label="City"
+                            crossOrigin={undefined}
+                        />
+                      ) : (
+                        <Typography>{profileInfo.city}</Typography>
+                      )}
+                    </div>
+                    <div>
+                      <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                        State
+                      </Typography>
+                      {isEditingProfile ? (
+                        <Input
+                            icon={<UserIcon className="h-5 w-5 text-blue-gray-300" />}
+                            value={profileInfo.state}
+                            onChange={(e) => setProfileInfo({...profileInfo, state: e.target.value})}
+                            label="State"
+                            crossOrigin={undefined}
+                        />
+                      ) : (
+                        <Typography>{profileInfo.state}</Typography>
+                      )}
+                    </div>
+                    <div>
+                      <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                        Zip Code
+                      </Typography>
+                      {isEditingProfile ? (
+                        <Input
+                            icon={<UserIcon className="h-5 w-5 text-blue-gray-300" />}
+                            value={profileInfo.zip_code}
+                            onChange={(e) => setProfileInfo({...profileInfo, zip_code: e.target.value})}
+                            label="Zip Code"
+                            crossOrigin={undefined}
+                        />
+                      ) : (
+                        <Typography>{profileInfo.zip_code}</Typography>
+                      )}
+                    </div>
+                    <div>
+                      <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                        Card Number
+                      </Typography>
+                      {isEditingProfile ? (
+                        <Input
+                            icon={<UserIcon className="h-5 w-5 text-blue-gray-300" />}
+                            value={profileInfo.card_number}
+                            onChange={(e) => setProfileInfo({...profileInfo, card_number: e.target.value})}
+                            label="Card Number"
+                            crossOrigin={undefined}
+                        />
+                      ) : (
+                        <Typography>{profileInfo.card_number}</Typography>
+                      )}
+                    </div>
+                    <div>
+                      <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                        CCV
+                      </Typography>
+                      {isEditingProfile ? (
+                        <Input
+                            icon={<UserIcon className="h-5 w-5 text-blue-gray-300" />}
+                            value={profileInfo.ccv}
+                            onChange={(e) => setProfileInfo({...profileInfo, ccv: e.target.value})}
+                            label="CCV"
+                            crossOrigin={undefined}
+                        />
+                      ) : (
+                        <Typography>{profileInfo.ccv}</Typography>
+                      )}
+                    </div>
+                    <div>
+                      <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                        Security Code
+                      </Typography>
+                      {isEditingProfile ? (
+                        <Input
+                            icon={<UserIcon className="h-5 w-5 text-blue-gray-300" />}
+                            value={profileInfo.security_code}
+                            onChange={(e) => setProfileInfo({...profileInfo, security_code: e.target.value})}
+                            label="Security Code"
+                            crossOrigin={undefined}
+                        />
+                      ) : (
+                        <Typography>{profileInfo.security_code}</Typography>
+                      )}
+                    </div>
+                    <div>
+                      <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                        Subscription Plan
+                      </Typography>
+                      {isEditingProfile ? (
+                        <select
+                        value={profileInfo.subscription_plan}
+                        onChange={(e) => setProfileInfo({ ...profileInfo, subscription_plan: e.target.value as 'PREMIUM' | 'BASIC' | 'FREE' })}
+                        className="w-full p-2 border rounded-lg"
+                      >
+                          <option value="PREMIUM">Premium</option>
+                          <option value="BASIC">Basic</option>
+                          <option value="FREE">Free</option>
+                        </select>
+                      ) : (
+                        <Typography>{profileInfo.phone_number}</Typography>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </CardBody>
+            </Card>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}
+
+export default ProfileSettings;
\ No newline at end of file
diff --git a/src/app/(Dashboard)/dashboard/resources/page.tsx b/src/app/(Dashboard)/dashboard/resources/page.tsx
new file mode 100644
index 0000000..3c7f525
--- /dev/null
+++ b/src/app/(Dashboard)/dashboard/resources/page.tsx
@@ -0,0 +1,751 @@
+'use client'
+
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useState, useRef, useEffect, useContext } from 'react';
+import {
+  DocumentTextIcon,
+  DocumentIcon,
+  CheckIcon,
+  CloudArrowUpIcon,
+  ExclamationCircleIcon,
+  TrashIcon,
+  FolderIcon,
+  PhotoIcon,
+  PencilIcon,
+  ArrowPathIcon
+} from '@heroicons/react/24/outline';
+import {
+  Typography,
+  Card,
+  CardHeader,
+  CardBody,
+  Button,
+  IconButton,
+  Input,
+  Tabs,
+  TabsHeader,
+  Tab,
+  TabsBody,
+  TabPanel,
+  Dialog,
+  DialogHeader,
+  DialogBody,
+  DialogFooter,
+  Chip,
+  Spinner,
+  Alert
+} from "@material-tailwind/react";
+import { API_URL } from '@/utils/axiosConfig';
+import axios from 'axios';
+import { AuthContext } from '@/components/Dashboard/AppContext';
+import { cn } from '@/lib/utils'
+
+// Define resources with the same fields as the backend
+interface Resource {
+  name: string;
+  description?: string;
+  category?: string;
+  resource_type: string;
+  tags?: string;
+  profile_picture?: string;
+  source_url?: string;
+  file_path?: string;
+  user_id: string;
+  is_public: string;
+  id: string;
+  related_resources?: string[];
+}
+
+const Resources: React.FC = () => {
+  const [activeTab, setActiveTab] = useState("all");
+  const [resources, setResources] = useState<Resource[]>([]);
+  const [isUploading, setIsUploading] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [selectedResource, setSelectedResource] = useState<Resource | null>(null);
+  const [uploadFile, setUploadFile] = useState<any>(null)
+  const [fileDescription, setFileDescription] = useState('');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [showAlert, setShowAlert] = useState({ show: false, message: "", type: "success" });
+  const { accessToken } = useContext(AuthContext);
+  
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Show success alert
+  const showSuccessAlert = (message: string) => {
+    setShowAlert({
+      show: true,
+      message,
+      type: "success"
+    });
+    
+    setTimeout(() => {
+      setShowAlert(prev => ({ ...prev, show: false }));
+    }, 3000);
+  };
+  
+  // Show error alert
+  const showErrorAlert = (message: string) => {
+    setShowAlert({
+      show: true,
+      message,
+      type: "error"
+    });
+    
+    setTimeout(() => {
+      setShowAlert(prev => ({ ...prev, show: false }));
+    }, 3000);
+  };
+  
+  const loadResources = async () => {
+    // Ideally we have a router to get only user's files instead of all files
+    try {
+      await axios.get(`${API_URL}/resources/`);
+    } catch {
+      showErrorAlert('Failed to load resources');
+    }
+    setResources(resources);
+    
+    try {
+      const res = await axios.get(`${API_URL}/resources/`);
+      if(!(Array.isArray(res.data) && res.data.every(resource => typeof resource === 'object'))) {
+        showErrorAlert("Failed to load resources");
+        return;
+      }
+      setResources(res.data);
+    } catch {
+      showErrorAlert("Failed to load resources");
+    }
+  };
+  
+  // Load resources on component mount
+  useEffect(() => {
+    loadResources();
+  }, []);
+
+  // Filter resources based on active tab and search query
+  const filteredResources = resources.filter(resource => {
+    const matchesSearch = resource.name.toLowerCase().includes(searchQuery.toLowerCase());
+    
+    if (activeTab === "all") return matchesSearch;
+    if (activeTab === "documents") return resource.resource_type === "PDF" && matchesSearch;
+    if (activeTab === "images") return resource.resource_type === "IMAGE" && matchesSearch;
+    if (activeTab === "other") return resource.resource_type === "OTHER" && matchesSearch;
+    
+    return matchesSearch;
+  });
+
+  // Upload resource
+  const handleFileUpload = async () => {
+    setIsUploading(true);
+    try {
+      const formdata = new FormData();
+      formdata.append("title", uploadFile.name);
+      if (fileDescription.length > 0) formdata.append("description", fileDescription);
+      formdata.append("file", uploadFile);
+      await axios.post(`${API_URL}/resources/`, formdata,
+        {
+          headers: { 'Authorization' : `Bearer ${accessToken}` }
+        }
+      );
+      
+      // Fetch updated resources
+      loadResources();
+      
+      showSuccessAlert("File uploaded successfully!");
+    } catch (error: any) {
+      if(error.response && error.response.data && error.response.data.detail) {
+        if(error.response.data.detail === 'Invalid token'){
+          showErrorAlert('Authentication expired. Please log back in');
+          return;
+        }
+      }
+      showErrorAlert("Failed to upload file")
+    } finally {
+      // Reset states
+      setFileDescription('');
+      setUploadFile(null);
+      setIsUploading(false);
+      setIsUploadModalOpen(false);
+    }
+  };
+
+  // Edit resource
+  const editResource = async () => {
+    setIsUploading(true);
+    if (selectedResource) {
+      try {
+        const formdata = new FormData();
+        if (uploadFile && uploadFile.name) formdata.append("title", uploadFile.name);
+        else formdata.append("title", '');
+        if (fileDescription.length > 0) formdata.append("description", fileDescription);
+        if (uploadFile) formdata.append("file", uploadFile);
+        console.log([...formdata.entries()]);
+        await axios.put(`${API_URL}/resources/${selectedResource.id}`, formdata,
+          {
+            headers: { 'Authorization' : `Bearer ${accessToken}` }
+          }
+        );
+        
+        // Fetch updated resources
+        loadResources();
+        
+        showSuccessAlert("File edited successfully!")
+      } catch (error: any) {
+        if(error.response && error.response.data && error.response.data.detail) {
+          if(error.response.data.detail === 'Invalid token'){
+            showErrorAlert('Authentication expired. Please log back in');
+            return;
+          }
+        } showErrorAlert("Failed to edit file");
+      } finally {
+        // Reset states
+        setFileDescription('');
+        setUploadFile(null);
+        setIsUploading(false);
+        setIsEditModalOpen(false);
+        setSelectedResource(null);
+      }
+    }
+  }
+  
+  // Delete resource
+  const deleteResource = async () => {
+    if (selectedResource) {
+      try {
+        await axios.delete(`${API_URL}/resources/${selectedResource.id}`,
+          {
+            headers: { 'Authorization' : `Bearer ${accessToken}` }
+          }
+        );
+        
+        // Fetch updated resources
+        loadResources();
+        
+        showSuccessAlert("File deleted successfully!");
+      } catch (error: any) {
+        if(error.response && error.response.data && error.response.data.detail) {
+          if(error.response.data.detail === 'Invalid token'){
+            showErrorAlert('Authentication expired. Please log back in');
+            return;
+          }
+        }
+        showErrorAlert("Failed to delete file")
+      } finally {
+        setIsDeleteModalOpen(false);
+        setSelectedResource(null);
+      }
+    }
+  };
+  
+  // Handle file input change
+  const handleFileInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files && event.target.files[0]) {
+      setUploadFile(event.target.files[0]);
+    }
+  };
+
+  // Cancel resource upload
+  const cancelFileUpload = () => {
+    setUploadFile(null);
+    setFileDescription('');
+    setIsUploadModalOpen(false);
+    setIsEditModalOpen(false);
+  };
+  
+  // Handle drag events
+  const handleDragOver = (e: any) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e: any) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  };
+
+  const handleDrop = (e: any) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+    
+    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+      setUploadFile(e.dataTransfer.files[0]);
+    }
+  };
+
+  // Get icon based on file type
+  const getFileIcon = (type: string) => {
+    switch (type) {
+      case 'PDF':
+        return <DocumentTextIcon className="h-6 w-6 text-red-500" />;
+      case 'IMAGE':
+        return <PhotoIcon className="h-6 w-6 text-blue-500" />;
+      default:
+        return <DocumentIcon className="h-6 w-6 text-gray-500" />;
+    }
+  };
+
+  // Get icon based on file name
+  const getFileNameIcon = (name: string) => {
+    const extention = name.split(".").pop()?.toLowerCase();
+    if (extention === 'pdf') return <DocumentTextIcon className="h-6 w-6 text-red-500" />;
+    if (extention && ["jpg", "jpeg", "png", "gif"].includes(extention)) return <PhotoIcon className="h-6 w-6 text-blue-500" />;
+    return <DocumentIcon className="h-6 w-6 text-gray-500" />;
+  }
+  
+  // Get color based on file type
+  const getTypeColor = (type: string) => {
+    switch (type) {
+      case 'PDF':
+        return 'red';
+      case 'IMAGE':
+        return 'blue';
+      default:
+        return 'blue-gray';
+    }
+  };
+
+  return (
+    <div className="w-full">
+      {/* Success/Error Alert */}
+      {showAlert.show && (
+        <Alert
+          open={showAlert.show}
+          onClose={() => setShowAlert(prev => ({ ...prev, show: false }))}
+          animate={{
+            mount: { y: 0 },
+            unmount: { y: -100 },
+          }}
+          className="fixed top-4 right-4 z-50 max-w-md"
+          color={showAlert.type === "success" ? "green" : "red"}
+          icon={
+            showAlert.type === "success" ? (
+              <CheckIcon className="h-6 w-6" />
+            ) : (
+              <ExclamationCircleIcon className="h-6 w-6" />
+            )
+          }
+        >
+          {showAlert.message}
+        </Alert>
+      )}
+
+      {/* Resources Header */}
+      <Card className="w-full shadow-sm border border-gray-100 mb-6">
+        <CardBody>
+          <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+            <div>
+              <Typography variant="h4" color="blue-gray" className="mb-1">
+                Resources
+              </Typography>
+              <Typography color="gray" className="font-normal">
+                Manage your files and documents
+              </Typography>
+            </div>
+            <div className="flex flex-wrap items-center gap-3">
+              <div>
+                <IconButton
+                  onClick={loadResources}
+                  variant="text"
+                  color="teal"
+                  className="h-8 w-8 rounded-full hover:bg-white/20 transition-all"
+                  size="sm"
+                >
+                  <ArrowPathIcon className="h-4 w-4" />
+                </IconButton>
+              </div>
+              <div className="w-full md:w-auto">
+                <Input
+                  label="Search files"
+                  icon={<DocumentIcon className="h-5 w-5 text-blue-gray-300" />}
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="min-w-[250px]" crossOrigin={undefined}                />
+              </div>
+              <Button
+                className="flex items-center gap-2"
+                color="teal"
+                onClick={() => setIsUploadModalOpen(true)}
+              >
+                <CloudArrowUpIcon className="h-4 w-4" /> Upload File
+              </Button>
+            </div>
+          </div>
+        </CardBody>
+      </Card>
+
+      {/* Resources Content */}
+      <Card className="w-full shadow-sm border border-gray-100">
+        <CardHeader floated={false} shadow={false} className="rounded-none pt-4 pb-0">
+          <Tabs value={activeTab}>
+            <TabsHeader className="bg-gray-100 rounded-lg p-1">
+              <Tab 
+                value="all" 
+                onClick={() => setActiveTab("all")}
+                className={activeTab === "all" ? "font-medium" : ""}
+              >
+                All Files
+              </Tab>
+              <Tab 
+                value="documents" 
+                onClick={() => setActiveTab("documents")}
+                className={activeTab === "documents" ? "font-medium" : ""}
+              >
+                Documents
+              </Tab>
+              <Tab 
+                value="images" 
+                onClick={() => setActiveTab("images")}
+                className={activeTab === "images" ? "font-medium" : ""}
+              >
+                Images
+              </Tab>
+              <Tab 
+                value="other" 
+                onClick={() => setActiveTab("other")}
+                className={activeTab === "other" ? "font-medium" : ""}
+              >
+                Other
+              </Tab>
+            </TabsHeader>
+            <TabsBody animate={{ initial: { y: 250 }, mount: { y: 0 }, unmount: { y: 250 } }}>
+              {["all", "documents", "images", "other"].map((value) => (
+                <TabPanel key={value} value={value} className="p-0">
+                  {filteredResources.length > 0 ? (
+                    <div className="overflow-x-auto">
+                      <table className="w-full min-w-max table-auto text-left">
+                        <thead>
+                          <tr>
+                            <th className="border-b border-blue-gray-100 bg-blue-gray-50/50 p-4">
+                              <Typography
+                                variant="small"
+                                color="blue-gray"
+                                className="font-normal leading-none opacity-70"
+                              >
+                                Name
+                              </Typography>
+                            </th>
+                            <th className="border-b border-blue-gray-100 bg-blue-gray-50/50 p-4">
+                              <Typography
+                                variant="small"
+                                color="blue-gray"
+                                className="font-normal leading-none opacity-70"
+                              >
+                                Type
+                              </Typography>
+                            </th>
+                            <th className="border-b border-blue-gray-100 bg-blue-gray-50/50 p-4">
+                              <Typography
+                                variant="small"
+                                color="blue-gray"
+                                className="font-normal leading-none opacity-70"
+                              >
+                                Description
+                              </Typography>
+                            </th>
+                            <th className="border-b border-blue-gray-100 bg-blue-gray-50/50 p-4">
+                              <Typography
+                                variant="small"
+                                color="blue-gray"
+                                className="font-normal leading-none opacity-70"
+                              >
+                                Actions
+                              </Typography>
+                            </th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {filteredResources.map((resource, index) => {
+                            const isLast = index === filteredResources.length - 1;
+                            const classes = isLast ? "p-4" : "p-4 border-b border-blue-gray-50";
+
+                            return (
+                              <tr key={resource.id} className="hover:bg-blue-gray-50/30">
+                                <td className={classes}>
+                                  <div className="flex items-center gap-3">
+                                    {getFileIcon(resource.resource_type)}
+                                    <div>
+                                      <Typography variant="small" color="blue-gray" className="font-medium w-32 overscroll-x-contain overflow-auto">
+                                        {resource.name}
+                                      </Typography>
+                                    </div>
+                                  </div>
+                                </td>
+                                <td className={classes}>
+                                  <Chip
+                                    size="sm"
+                                    variant="ghost"
+                                    value={resource.resource_type.toUpperCase()}
+                                    color={getTypeColor(resource.resource_type)}
+                                  />
+                                </td>
+                                <td className={classes}>
+                                  <Typography variant="small" color="blue-gray" className="font-medium w-32 overscroll-x-contain overflow-auto">
+                                    {resource.description ? resource.description : ''}
+                                  </Typography>
+                                </td>
+                                <td className={classes}>
+                                  <div className="flex items-center gap-2">
+                                    {/* Edit button */}
+                                    <IconButton
+                                      variant="text"
+                                      color="blue-gray"
+                                      onClick={() => {
+                                        setSelectedResource(resource);
+                                        setIsEditModalOpen(true);
+                                      }}
+                                    >
+                                      <PencilIcon className="h-4 w-4" />
+                                    </IconButton>
+                                    
+                                    {/* Delete button */}
+                                    <IconButton
+                                      variant="text"
+                                      color="red"
+                                      onClick={() => {
+                                        setSelectedResource(resource);
+                                        setIsDeleteModalOpen(true);
+                                      }}
+                                    >
+                                      <TrashIcon className="h-4 w-4" />
+                                    </IconButton>
+                                  </div>
+                                </td>
+                              </tr>
+                            );
+                          })}
+                        </tbody>
+                      </table>
+                    </div>
+                  ) : (
+                    <div className="flex flex-col items-center justify-center py-12">
+                      <FolderIcon className="h-16 w-16 text-blue-gray-200 mb-4" />
+                      <Typography color="blue-gray" className="mb-2 font-medium">
+                        No files found
+                      </Typography>
+                      <Typography color="gray" className="text-center max-w-xs">
+                        {searchQuery
+                          ? `No files matching "${searchQuery}" were found. Try a different search term.`
+                          : activeTab === "all"
+                          ? "You haven't uploaded any files yet. Click the 'Upload File' button to get started."
+                          : activeTab === "documents"
+                          ? "You haven't uploaded any documents yet. Click the 'Upload File' button to get started."
+                          : activeTab === "images"
+                          ? "You haven't uploaded any images yet. Click the 'Upload File' button to get started."
+                          : ""}
+                      </Typography>
+                      <Button
+                        variant="text"
+                        color="teal"
+                        className="mt-4 flex items-center gap-2"
+                        onClick={() => setIsUploadModalOpen(true)}
+                      >
+                        <CloudArrowUpIcon className="h-4 w-4" /> Upload File
+                      </Button>
+                    </div>
+                  )}
+                </TabPanel>
+              ))}
+            </TabsBody>
+          </Tabs>
+        </CardHeader>
+      </Card>
+
+      {/* Upload Modal */}
+      <Dialog
+        open={isUploadModalOpen}
+        handler={() => !isUploading && cancelFileUpload()}
+        size="md"
+      >
+        <DialogHeader>Upload Files</DialogHeader>
+        <DialogBody divider>
+          <div
+            className={cn(
+              uploadFile ? "border-black" : "border-dashed",
+              "border-2 rounded-lg p-8 transition-colors cursor-pointer text-center",
+              isDragging
+                ? "border-teal-500 bg-teal-50"
+                : "border-blue-gray-200 hover:border-teal-500 hover:bg-teal-50/30"
+            )}
+            onDragLeave={handleDragLeave}
+            onDragOver={handleDragOver}
+            onDrop={handleDrop}
+            onClick={() => fileInputRef.current?.click()}
+          >
+            {isUploading ? (
+              <div className="flex flex-col items-center justify-center gap-4">
+                <Spinner className="h-12 w-12 text-teal-500" />
+                <Typography color="teal" className="font-medium">
+                  Uploading...
+                </Typography>
+              </div>
+            ) : uploadFile ? (
+              <div className="flex items-center gap-3">
+                  <div>{getFileNameIcon(uploadFile.name)}</div>
+                  <Typography variant="small" color="blue-gray" className="font-medium overscroll-x-contain overflow-auto">
+                    {uploadFile.name}
+                  </Typography>
+              </div>
+            ) : (
+              <>
+                <CloudArrowUpIcon className="h-12 w-12 text-blue-gray-300 mx-auto mb-4" />
+                <Typography color="blue-gray" className="font-medium mb-1">
+                  Drag and drop a file here
+                </Typography>
+                <Typography color="gray" className="text-sm">
+                  or <span className="text-teal-500 font-medium">browse</span> to upload
+                </Typography>
+                <Typography color="gray" className="text-xs mt-4">
+                  Supported formats: PDF, JPG, JPEG, PNG, GIF
+                </Typography>
+              </>
+            )}
+            <input
+              type="file"
+              ref={fileInputRef}
+              className="hidden"
+              onChange={handleFileInputChange}
+              accept=".pdf,.jpg,.jpeg,.png,.gif"
+              disabled={isUploading}
+            />
+          </div>
+          <div className='mt-4'>
+            <Input
+              label="Description"
+              value={fileDescription}
+              onChange={(e) => {setFileDescription(e.target.value);}}
+              crossOrigin={undefined}
+            />
+          </div>
+        </DialogBody>
+        <DialogFooter>
+          <Button
+            variant="text"
+            color="red"
+            onClick={() => !isUploading && cancelFileUpload()}
+            disabled={isUploading}
+          >
+            Cancel
+          </Button>
+          {uploadFile && (
+            <Button
+              color="teal"
+              onClick={handleFileUpload}
+            >Upload</Button>
+          )}
+        </DialogFooter>
+      </Dialog>
+      
+      {/* Edit Modal */}
+      <Dialog
+        open={isEditModalOpen}
+        handler={() => !isUploading && cancelFileUpload()}
+        size="md"
+      >
+        <DialogHeader>Edit Files</DialogHeader>
+        <DialogBody divider>
+          <div
+            className={cn(
+              "border-2 border-black rounded-lg p-8 transition-colors cursor-pointer text-center",
+              isDragging
+                ? "border-teal-500 bg-teal-50"
+                : "border-blue-gray-200 hover:border-teal-500 hover:bg-teal-50/30"
+            )}
+            onDragLeave={handleDragLeave}
+            onDragOver={handleDragOver}
+            onDrop={handleDrop}
+            onClick={() => fileInputRef.current?.click()}
+          >
+            {isUploading ? (
+              <div className="flex flex-col items-center justify-center gap-4">
+                <Spinner className="h-12 w-12 text-teal-500" />
+                <Typography color="teal" className="font-medium">
+                  Uploading...
+                </Typography>
+              </div>
+            ) : uploadFile ? (
+              <div className="flex items-center gap-3">
+                  <div>{getFileNameIcon(uploadFile.name)}</div>
+                  <Typography variant="small" color="blue-gray" className="font-medium overscroll-x-contain overflow-auto">
+                    {uploadFile.name}
+                  </Typography>
+              </div>
+            ) : (
+              <div className="flex items-center gap-3">
+                  <div>{getFileIcon(selectedResource ? selectedResource.resource_type : '')}</div>
+                  <Typography variant="small" color="blue-gray" className="font-medium overscroll-x-contain overflow-auto">
+                    {selectedResource ? selectedResource.name : ''}
+                  </Typography>
+              </div>
+            )}
+            <input
+              type="file"
+              ref={fileInputRef}
+              className="hidden"
+              onChange={handleFileInputChange}
+              accept=".pdf,.jpg,.jpeg,.png,.gif"
+              disabled={isUploading}
+            />
+          </div>
+          <div className='mt-4'>
+            <Input
+              label="Description"
+              value={fileDescription}
+              onChange={(e) => {setFileDescription(e.target.value);}}
+              crossOrigin={undefined}
+            />
+          </div>
+        </DialogBody>
+        <DialogFooter>
+          <Button
+            variant="text"
+            color="red"
+            onClick={() => !isUploading && cancelFileUpload()}
+            disabled={isUploading}
+          >
+            Cancel
+          </Button>
+          <Button
+            color="teal"
+            onClick={editResource}
+          >
+            Edit
+          </Button>
+        </DialogFooter>
+      </Dialog>
+
+      {/* DeleteConfirmation Modal */}
+      <Dialog
+        open={isDeleteModalOpen}
+        handler={() => setIsDeleteModalOpen(false)}
+        size="xs"
+      >
+        <DialogHeader>Confirm Deletion</DialogHeader>
+        <DialogBody divider>
+          Are you sure you want to delete{" "}
+          <span className="font-medium">{selectedResource?.name}</span>? This action cannot be undone.
+        </DialogBody>
+        <DialogFooter>
+          <Button
+            variant="text"
+            color="blue-gray"
+            onClick={() => setIsDeleteModalOpen(false)}
+          >
+            Cancel
+          </Button>
+          <Button color="red" onClick={deleteResource}>
+            Delete
+          </Button>
+        </DialogFooter>
+      </Dialog>
+    </div>
+  );
+}
+
+export default Resources;
\ No newline at end of file
diff --git a/src/app/(Dashboard)/dashboard/users/page.tsx b/src/app/(Dashboard)/dashboard/users/page.tsx
new file mode 100644
index 0000000..859ae62
--- /dev/null
+++ b/src/app/(Dashboard)/dashboard/users/page.tsx
@@ -0,0 +1,731 @@
+'use client'
+
+import React, { useState, useEffect, useContext } from 'react';
+import { ArrowPathIcon, EyeIcon, MagnifyingGlassIcon, PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
+import axios from 'axios';
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  Typography,
+  Input,
+  IconButton,
+  Button,
+  Dialog,
+  DialogHeader,
+  DialogBody,
+  DialogFooter,
+  Alert,
+} from "@material-tailwind/react";
+import { API_URL } from '@/utils/axiosConfig'
+import { AuthContext } from '@/components/Dashboard/AppContext';
+
+interface User {
+  email: string;
+  nickname?: string;
+  first_name?: string;
+  last_name?: string;
+  role: "ADMIN" | "USER";
+  id: number;
+  email_verified: boolean;
+  created_at: string;
+  updated_at: string;
+}
+
+interface UserForm {
+  token?: string;
+  first_name?: string;
+  last_name?: string;
+  email?: string;
+  nickname?: string;
+  password?: string;
+  phone_number?: string;
+  address?: string;
+  city?: string;
+  state?: string;
+  zip_code?: string; 
+  card_number?: string;
+  ccv?: string;
+  security_code?: string;
+  subscription_plan?: "PREMIUM" | "BASIC" | "FREE";
+}
+
+const UsersTable: React.FC = () => {
+  const [users, setUsers] = useState<User[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [selectedUser, setSelectedUser] = useState<User | null>(null);
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [isViewModalOpen, setIsViewModalOpen] = useState(false);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [editFormData, setEditFormData] = useState<UserForm>({});
+  const [createFormData, setCreateFormData] = useState<UserForm>({});
+  const [showError, setShowError] = useState(false);
+  const { register } = useContext(AuthContext);
+  const itemsPerPage = 10;
+
+  useEffect(() => {
+    fetchUsers();
+  }, []);
+
+  
+  const fetchUsers = async () => {
+    setLoading(true);
+    try {
+      const response = await axios.get(`${API_URL}/auth/users`); // URL as per backend configuration
+      if(!(Array.isArray(response.data) && response.data.every(user => typeof user === 'object'))) {
+        setShowError(true);
+        throw Error //Ensure an array of users is returned
+      } else setShowError(false);
+      setUsers(response.data); // Assuming the API returns a list of users
+    } catch {
+      setShowError(true);
+    }
+    setLoading(false);
+  };
+  
+  const handleEdit = async(user: User) => {
+    setSelectedUser(user);
+    setEditFormData(user);
+    setIsEditModalOpen(true);
+  };
+
+  const handleCreate = () => {
+    setIsCreateModalOpen(true);
+  };
+
+  const viewField = (field: string | boolean, value: string | undefined) => {
+      return (
+        <div className="inline-flex flex-row gap-2 w-full">
+          <Typography variant="small" color="blue-gray" className="font-normal w-24">
+            {field}
+          </Typography>
+          <Card className={value ? value.length > 0 ? "overscroll-x-contain overflow-auto border-black border-2 h-min w-full" :
+          "overscroll-x-contain overflow-auto border-black border-2 w-full" :
+          "overscroll-x-contain overflow-auto w-full"}>
+            <Typography variant="small" color="blue-gray" className="font-normal overscroll-x-contain overflow-auto p-2">
+              {value ? value : ''}
+            </Typography>
+          </Card>
+        </div>
+      )
+    }
+
+  const handleView = (user: User) => {
+    setSelectedUser(user);
+    setIsViewModalOpen(true);
+  }
+
+  const Authorize = async(): Promise<boolean> => {
+    let result = true;
+    await axios.get(`${API_URL}/auth/auth`, {
+      headers: { 'Authorization' : `Bearer ${editFormData.token}` },
+    }).catch((err) => {
+      console.log(err);
+      if (err.response && err.response.data && err.response.data.detail) {
+        window.alert('Invalid token');
+      }
+      result = false;
+    });
+    return result;
+  }
+
+  const handleDelete = (user: User) => {
+    setSelectedUser(user);
+    setIsDeleteModalOpen(true);
+  };
+
+  const handleEditSubmit = async () => {
+    if (!editFormData) return;
+    try{
+      let alert = '';
+      if(!await Authorize()) return;
+      // Validate fields
+      if(!editFormData.email || !editFormData.password) {
+        window.alert('Please fill out all required fields');
+        return;
+      }
+      if(!/^[\w-.]{1,64}@([\w-]{1,63}\.)+[\w-]{2,63}$/.test(editFormData.email)) alert = 'Invalid email';
+      else if(editFormData.nickname && !/^[a-zA-Z0-9]*$/.test(editFormData.nickname)) alert = 'Nickname may not include special characters';
+      else if(editFormData.password.length < 8) alert = 'Password must be at least 8 characters';
+      else if(!/[A-Z]/.test(editFormData.password)) alert = 'Password must contain at least 1 uppercase character';
+      else if(!/[a-z]/.test(editFormData.password)) alert = 'Password must contain at least 1 lowercase character';
+      else if(!/[0-9]/.test(editFormData.password)) alert = 'Password must contain at least 1 number';
+      else if(!/[!@#$%^&*()_+\-=[\]{}|;:,.<>?]/.test(editFormData.password)) alert = 'Password must contain at least 1 special character';
+      else if (editFormData.first_name && editFormData.first_name.length > 100) alert = 'First name must not be more than 100 characters';
+      else if (editFormData.last_name && editFormData.last_name.length > 100) alert = 'Last name must not be more than 100 characters';
+      else if (editFormData.nickname && editFormData.nickname.length > 50) alert = 'Nickname must not be more than 50 characters';
+      // Prevent sql injection by invalidating " and \
+      else if (/["\\]/.test(editFormData.email.concat(
+        editFormData.first_name ? editFormData.first_name : '',
+        editFormData.last_name ? editFormData.last_name : '',
+        editFormData.nickname ? editFormData.nickname : '',
+        editFormData.password
+      ))) alert = 'Invalid character " or \\ used';
+      if (alert !== '') {
+        window.alert(alert);
+        return;
+      }
+      // Call backend API
+      await axios.put(`${API_URL}/auth/update`, 
+        {
+          "first_name": editFormData.first_name,
+          "last_name": editFormData.last_name,
+          "email": editFormData.email,
+          "nickname": editFormData.nickname,
+          "password": editFormData.password
+        },
+        {
+          headers: { 'Authorization' : `Bearer ${editFormData.token}` }
+        }
+      );
+      
+      // Make sure user credentials updated and get new access token
+      const params = new URLSearchParams();
+      params.append('username', editFormData.email);
+      params.append('password', editFormData.password);
+      const res = await axios.post(`${API_URL}/auth/login`, params);
+      if(!res.data || !res.data.access_token) {
+        window.alert('Failed to update profile');
+        return;
+      }
+      
+      await axios.put(`${API_URL}/auth/update-profile`, 
+        {
+          "phone_number": editFormData.phone_number,
+          "address": editFormData.address,
+          "city": editFormData.city,
+          "state": editFormData.state,
+          "zip_code": editFormData.zip_code,
+          "card_number": editFormData.card_number,
+          "ccv": editFormData.ccv,
+          "security_code": editFormData.security_code,
+          "subscription_plan": editFormData.subscription_plan
+        },
+        {
+          headers: { 'Authorization' : `Bearer ${res.data.access_token}` }
+        }
+      );
+      // Update users
+      fetchUsers();
+      
+      setIsEditModalOpen(false);
+      setEditFormData({});
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (error: any) {
+      if(error.response && error.response.data && error.response.data.detail) {
+        window.alert(error.response.data.detail);
+      }
+      console.error('Error updating user:', error);
+      // Handle error (show error message to user)
+    }
+  };
+
+  const handleDeleteConfirm = async () => {
+    if (!selectedUser) return;
+
+    try {
+      if(!await Authorize()) return;
+      await axios.delete(`${API_URL}/auth/delete`, {
+        headers: {'Authorization' : `Bearer ${editFormData.token}`},
+      });
+      
+      // Update guests
+      fetchUsers();
+      
+      setIsDeleteModalOpen(false);
+      setSelectedUser(null);
+    } catch (error) {
+      console.error('Error deleting user:', error);
+      // Handle error (show error message to user)
+    }
+  };
+
+  const handleCreateSubmit = async () => {
+    if (!createFormData) return;
+
+    try {
+      if(!createFormData.email || !createFormData.password) {
+        window.alert('Please fill out all required fields');
+        return;
+      }
+      const res = await register(createFormData.email, createFormData.password,
+        createFormData.first_name ? createFormData.first_name : undefined,
+        createFormData.last_name ? createFormData.last_name : undefined,
+        createFormData.nickname ? createFormData.nickname : undefined);
+      if (res !== 'OK') window.alert(res);
+
+      // Update users
+      fetchUsers()
+      
+      setIsCreateModalOpen(false);
+      setCreateFormData({});
+    } catch (error) {
+      console.error('Error creating user:', error);
+      // Handle error (show error message to user)
+    }
+  };
+
+  const filteredUsers = users.filter(user =>
+    searchTerm.toLowerCase() === '' ? true :
+    (user.nickname ? user.nickname.toLowerCase().includes(searchTerm.toLowerCase()) : false) ||
+    (user.first_name ? user.first_name.toLowerCase().includes(searchTerm.toLowerCase()) : false) ||
+    (user.last_name ? user.last_name.toLowerCase().includes(searchTerm.toLowerCase()) : false) ||
+    (user.email ? user.email.toLowerCase().includes(searchTerm.toLowerCase()) : false) ||
+    (user.role ? user.role.toLowerCase().includes(searchTerm.toLowerCase()) : false)
+  );
+
+  const paginatedUsers = filteredUsers.slice(
+    (currentPage - 1) * itemsPerPage,
+    currentPage * itemsPerPage
+  );
+
+  const totalPages = Math.ceil(filteredUsers.length / itemsPerPage);
+
+  //This I think should be changed to the api call key's such as email, nickname, etc..
+  const TABLE_HEAD = ["Nick Name", "Email", "First Name", "Last Name", "Role", "Actions"];
+  
+  if(showError) return (
+  <Alert
+    color="red"
+    variant="outlined"
+    className="mb-6 border border-red-200"
+    icon={
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        className="h-5 w-5"
+      >
+        <path
+          fillRule="evenodd"
+          d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"
+          clipRule="evenodd"
+        />
+      </svg>
+    }
+  >
+    Failed to retrieve users
+  </Alert>
+  )
+  return (
+    <Card className="border border-gray-100 overflow-hidden">
+      <div className="px-6 py-4 bg-gray-50 border-b border-gray-100 flex items-center justify-between">
+        <div>
+          <Typography variant="h5" color="blue-gray">
+            User Management
+          </Typography>
+          <Typography variant="small" color="gray">
+            View and manage user accounts in your system
+          </Typography>
+        </div>
+        <Button 
+          color="teal" 
+          size="sm" 
+          className="flex items-center gap-1"
+          onClick={() => handleCreate()}
+        >
+          <PencilIcon className="h-4 w-4" /> Add User
+        </Button>
+      </div> 
+    
+
+    <Card className="h-full w-full">
+      <CardHeader floated={false} shadow={false} className="rounded-none">
+        <div className="flex items-center justify-between gap-8 mb-8">
+          <div>
+            <Typography variant="h5" color="blue-gray">
+              Users list
+            </Typography>
+            <Typography color="gray" className="mt-1 font-normal">
+              See information about all users
+            </Typography>
+          </div>
+          <div className="flex shrink-0 gap-2 sm:flex-row">
+            <div>
+              <IconButton
+                onClick={fetchUsers}
+                variant="text"
+                color="teal"
+                className="h-8 w-8 rounded-full hover:bg-white/20 transition-all"
+                size="sm"
+              >
+                <ArrowPathIcon className="h-4 w-4" />
+              </IconButton>
+            </div>
+            <div className="w-full md:w-72">
+              <Input
+                label="Search"
+                icon={<MagnifyingGlassIcon className="h-5 w-5" />}
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                crossOrigin={undefined}
+              />
+            </div>
+          </div>
+        </div>
+      </CardHeader>
+      <CardBody className="overflow-scroll px-0">
+        <table className="w-full min-w-max table-auto text-left">
+          <thead>
+            <tr>
+              {TABLE_HEAD.map((head) => (
+                <th key={head} className="border-b border-blue-gray-100 bg-blue-gray-50 p-4">
+                  <Typography
+                    variant="small"
+                    color="blue-gray"
+                    className="font-normal leading-none opacity-70"
+                  >
+                    {head}
+                  </Typography>
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              <tr>
+                <td colSpan={6} className="p-4 text-center">
+                  <Typography variant="small" color="blue-gray" className="animate-pulse">
+                    Loading...
+                  </Typography>
+                </td>
+              </tr>
+            ) : (
+              paginatedUsers.map((user, index) => {
+                const isLast = index === paginatedUsers.length - 1;
+                const classes = isLast ? "p-4" : "p-4 border-b border-blue-gray-50";
+
+                return (
+                  <tr key={user.id}>
+                    <td className={classes}>
+                      <Typography variant="small" color="blue-gray" className="font-normal">
+                        {user.nickname ? user.nickname : ''}
+                      </Typography>
+                    </td>
+                    <td className={classes}>
+                      <Typography variant="small" color="blue-gray" className="font-normal">
+                        {user.email}
+                      </Typography>
+                    </td>
+
+                    <td className={classes}>
+                      <Typography variant="small" color="blue-gray" className="font-normal">
+                        {user.first_name ? user.first_name : ''}
+                      </Typography>
+                    </td>
+
+                    <td className={classes}>
+                      <Typography variant="small" color="blue-gray" className="font-normal">
+                        {user.last_name ? user.last_name : ''}
+                      </Typography>
+                    </td>
+
+                    <td className={classes}>
+                      <Typography variant="small" color="blue-gray" className="font-normal">
+                        {user.role}
+                      </Typography>
+                    </td>
+
+                    <td className={classes}>
+                      <div className="flex gap-2">
+                        <IconButton
+                          variant="text"
+                          color="teal"
+                          onClick={() => handleEdit( user )}
+                        >
+                          <PencilIcon className="h-4 w-4" />
+                        </IconButton>
+                        
+                        <IconButton
+                          variant="text"
+                          color="teal"
+                          onClick={() => handleView(user)}
+                        >
+                          <EyeIcon className="h-4 w-4" />
+                        </IconButton>
+
+                        <IconButton
+                          variant="text"
+                          color="red"
+                          onClick={() => handleDelete(user)}
+                        >
+                          <TrashIcon className="h-4 w-4" />
+                        </IconButton>
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })
+            )}
+          </tbody>
+        </table>
+      </CardBody>
+      <div className="flex items-center justify-between border-t border-blue-gray-50 p-4">
+        <Typography variant="small" color="blue-gray" className="font-normal">
+          Page {currentPage} of {totalPages}
+        </Typography>
+        <div className="flex gap-2">
+          <Button
+            variant="outlined"
+            size="sm"
+            onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
+            disabled={currentPage === 1}
+          >
+            Previous
+          </Button>
+          <Button
+            variant="outlined"
+            size="sm"
+            onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
+            disabled={currentPage === totalPages}
+          >
+            Next
+          </Button>
+        </div>
+      </div>
+
+
+      {/* View Modal */}
+            <Dialog
+              size="lg"
+              open={isViewModalOpen}
+              handler={() => setIsViewModalOpen(false)}
+            >
+              <DialogHeader className="pb-0">View User</DialogHeader>
+              <DialogBody>
+                <div>{/*Fix jest detecting no children in DialogBody error*/}</div>
+                {selectedUser && (
+                  <div className="grid grid-cols-3 grid-flow-row gap-2 overscroll-y-contain overflow-auto h-96 w-full">
+                    {viewField('Id:', String(selectedUser.id))}
+                    {viewField('Nickname:', selectedUser.nickname)}
+                    {viewField('First Name:', selectedUser.first_name)}
+                    {viewField('Last Name:', selectedUser.last_name)}
+                    {viewField('Email:', selectedUser.email)}
+                    {viewField('Email Verified:', selectedUser.email_verified ? "true" : "false")}
+                    {viewField('Created At:', selectedUser.created_at)}
+                    {viewField('Updated At:', selectedUser.updated_at)}
+                    {viewField('Role:', selectedUser.role)}
+                  </div>
+                )}
+              </DialogBody>
+              <DialogFooter className="space-x-2">
+                <Button variant="outlined" color="blue-gray" onClick={() => setIsViewModalOpen(false)}>
+                  Exit
+                </Button>
+              </DialogFooter>
+            </Dialog>
+
+      {/* Edit Modal */}
+      <Dialog
+        size="md"
+        open={isEditModalOpen}
+        handler={() => setIsEditModalOpen(false)}
+      >
+        <DialogHeader>Edit User</DialogHeader>
+        <DialogBody>
+          <div className="grid gap-6 overscroll-y-contain overflow-auto h-96">
+            <Input
+              label="Access Token"
+              value={editFormData.token ? editFormData.token : ''}
+              onChange={(e) => setEditFormData({ ...editFormData, token: e.target.value })}
+              crossOrigin={undefined}
+              required
+            />
+            <Input
+              label="Nick Name"
+              value={editFormData.nickname ? editFormData.nickname : ''}
+              onChange={(e) => setEditFormData({ ...editFormData, nickname: e.target.value })}
+              crossOrigin={undefined}
+            />
+            <Input
+              label="First Name"
+              value={editFormData.first_name ? editFormData.first_name : ''}
+              onChange={(e) => setEditFormData({ ...editFormData, first_name: e.target.value })}
+              crossOrigin={undefined}
+            />
+            <Input
+              label="Last Name"
+              value={editFormData.last_name ? editFormData.last_name : ''}
+              onChange={(e) => setEditFormData({ ...editFormData, last_name: e.target.value })}
+              crossOrigin={undefined}
+            />
+            <Input
+              label="Email"
+              value={editFormData.email ? editFormData.email : ''}
+              onChange={(e) => setEditFormData({ ...editFormData, email: e.target.value })}
+              crossOrigin={undefined}
+              required
+            />
+            <Input
+              label="Password"
+              onChange={(e) => setEditFormData({ ...editFormData, password: e.target.value })}
+              crossOrigin={undefined}
+              required
+            />
+            <Input
+              label="Phone Number"
+              onChange={(e) => setEditFormData({ ...editFormData, phone_number: e.target.value })}
+              crossOrigin={undefined}
+            />
+            <Input
+              label="Address"
+              onChange={(e) => setEditFormData({ ...editFormData, address: e.target.value })}
+              crossOrigin={undefined}
+            />
+            <Input
+              label="City"
+              onChange={(e) => setEditFormData({ ...editFormData, city: e.target.value })}
+              crossOrigin={undefined}
+            />
+            <Input
+              label="State"
+              onChange={(e) => setEditFormData({ ...editFormData, state: e.target.value })}
+              crossOrigin={undefined}
+            />
+            <Input
+              label="Zip Code"
+              onChange={(e) => setEditFormData({ ...editFormData, zip_code: e.target.value })}
+              crossOrigin={undefined}
+            />
+            <Input
+              label="Card Number"
+              onChange={(e) => setEditFormData({ ...editFormData, card_number: e.target.value })}
+              crossOrigin={undefined}
+            />
+            <Input
+              label="CCV"
+              onChange={(e) => setEditFormData({ ...editFormData, ccv: e.target.value })}
+              crossOrigin={undefined}
+            />
+            <Input
+              label="Security Code"
+              onChange={(e) => setEditFormData({ ...editFormData, security_code: e.target.value })}
+              crossOrigin={undefined}
+            />
+            <div>
+              <Typography variant="small" color="blue-gray" className="mb-2">
+                Subscription Plan
+              </Typography>
+              <select
+                value={editFormData.subscription_plan}
+                onChange={(e) => setEditFormData({ ...editFormData, subscription_plan: e.target.value as 'PREMIUM' | 'BASIC' | 'FREE' })}
+                className="w-full p-2 border rounded-lg"
+              >
+                <option value="PREMIUM">Premium</option>
+                <option value="BASIC">Basic</option>
+                <option value="FREE">Free</option>
+              </select>
+            </div>
+          </div>
+        </DialogBody>
+        <DialogFooter className="space-x-2">
+          <Button variant="outlined" color="red" onClick={() => setIsEditModalOpen(false)}>
+            Cancel
+          </Button>
+          <Button color="teal" onClick={handleEditSubmit}>
+            Save Changes
+          </Button>
+          
+        </DialogFooter>
+      </Dialog>
+
+      {/* Delete Confirmation Modal */}
+      <Dialog
+        size="xs"
+        open={isDeleteModalOpen}
+        handler={() => setIsDeleteModalOpen(false)}
+      >
+        <DialogHeader>Confirm Deletion</DialogHeader>
+        <DialogBody>
+          Are you sure you want to delete {selectedUser?.nickname}? This action cannot be undone.
+          {editFormData.token ? (
+            <Input
+              label="Access Token"
+              value={editFormData.token}
+              onChange={(e) => setEditFormData({ ...editFormData, token: e.target.value })}
+              crossOrigin={undefined}
+              required
+            />
+          ) : (
+            <Input
+              label="Access Token"
+              value=""
+              onChange={(e) => setEditFormData({ ...editFormData, token: e.target.value })}
+              crossOrigin={undefined}
+              required
+            />
+          )}
+        </DialogBody>
+        <DialogFooter className="space-x-2">
+          <Button variant="outlined" color="blue-gray" onClick={() => setIsDeleteModalOpen(false)}>
+            Cancel
+          </Button>
+          <Button color="red" onClick={handleDeleteConfirm}>
+            Delete
+          </Button>
+        </DialogFooter>
+      </Dialog>
+
+      {/* Create Modal */}
+      <Dialog
+        size="md"
+        open={isCreateModalOpen}
+        handler={() => setIsCreateModalOpen(false)}
+      >
+        <DialogHeader>Create User</DialogHeader>
+
+        <DialogBody>
+          <div className="grid gap-6 overscroll-y-contain overflow-auto h-96">
+            <Input
+              label="Nick Name"
+              value={createFormData.nickname ? createFormData.nickname : ''}
+              onChange={(e) => setCreateFormData({ ...createFormData, nickname: e.target.value })}
+              crossOrigin={undefined}
+            />
+            <Input
+              label="Email"
+              value={createFormData.email ? createFormData.email : ''}
+              onChange={(e) => setCreateFormData({ ...createFormData, email: e.target.value })}
+              crossOrigin={undefined}
+              required
+            />
+            <Input
+              label="Password"
+              value={createFormData.password ? createFormData.password : ''}
+              onChange={(e) => setCreateFormData({ ...createFormData, password: e.target.value })}
+              crossOrigin={undefined}
+              required
+            />
+            <Input
+              label="First Name"
+              value={createFormData.first_name ? createFormData.first_name : ''}
+              onChange={(e) => setCreateFormData({ ...createFormData, first_name: e.target.value })}
+              crossOrigin={undefined}
+            />
+            <Input
+              label="Last Name"
+              value={createFormData.last_name ? createFormData.last_name : ''}
+              onChange={(e) => setCreateFormData({ ...createFormData, last_name: e.target.value })}
+              crossOrigin={undefined}
+            />
+          </div>
+        </DialogBody>
+
+        <DialogFooter className="space-x-2">
+          <Button variant="outlined" color="red" onClick={() => setIsCreateModalOpen(false)}>
+            Cancel
+          </Button>
+          <Button color="teal" onClick={handleCreateSubmit}>
+            Create
+          </Button>
+        </DialogFooter>
+      </Dialog> 
+      </Card>
+     </Card>
+  );
+}
+
+export default UsersTable;
\ No newline at end of file
diff --git a/src/app/(Dashboard)/globals.css b/src/app/(Dashboard)/globals.css
new file mode 100644
index 0000000..5beafc7
--- /dev/null
+++ b/src/app/(Dashboard)/globals.css
@@ -0,0 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
+  }
+
+  body {
+    margin: 0;
+    min-width: 320px;
+    min-height: 100vh;
+  }
+}
\ No newline at end of file
diff --git a/src/app/(Dashboard)/layout.tsx b/src/app/(Dashboard)/layout.tsx
new file mode 100644
index 0000000..de45946
--- /dev/null
+++ b/src/app/(Dashboard)/layout.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import "./globals.css";
+import { AuthProvider } from '@/components/Dashboard/AppContext';
+
+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html>
+      <body>
+        <AuthProvider>
+          {children}
+        </AuthProvider>
+      </body>
+    </html>
+  );
+}
\ No newline at end of file
diff --git a/src/app/(Dashboard)/login/page.tsx b/src/app/(Dashboard)/login/page.tsx
new file mode 100644
index 0000000..7462e9d
--- /dev/null
+++ b/src/app/(Dashboard)/login/page.tsx
@@ -0,0 +1,8 @@
+import { AuthForm } from '@/components/AuthForm/AuthForm'
+import React from 'react'
+
+export default function LoginPage() {
+  return (
+    <AuthForm type="login"/>
+  )
+}
diff --git a/src/app/(Dashboard)/register/page.tsx b/src/app/(Dashboard)/register/page.tsx
new file mode 100644
index 0000000..e67d163
--- /dev/null
+++ b/src/app/(Dashboard)/register/page.tsx
@@ -0,0 +1,8 @@
+import { AuthForm } from '@/components/AuthForm/AuthForm'
+import React from 'react'
+
+export default function LoginPage() {
+  return (
+    <AuthForm type="register"/>
+  )
+}
diff --git a/src/app/about/[slug]/page.tsx b/src/app/(HomePage)/about/[slug]/page.tsx
similarity index 100%
rename from src/app/about/[slug]/page.tsx
rename to src/app/(HomePage)/about/[slug]/page.tsx
diff --git a/src/app/about/living-lab/page.tsx b/src/app/(HomePage)/about/living-lab/page.tsx
similarity index 100%
rename from src/app/about/living-lab/page.tsx
rename to src/app/(HomePage)/about/living-lab/page.tsx
diff --git a/src/app/about/page.tsx b/src/app/(HomePage)/about/page.tsx
similarity index 100%
rename from src/app/about/page.tsx
rename to src/app/(HomePage)/about/page.tsx
diff --git a/src/app/api/characters/chat/route.ts b/src/app/(HomePage)/api/characters/chat/route.ts
similarity index 100%
rename from src/app/api/characters/chat/route.ts
rename to src/app/(HomePage)/api/characters/chat/route.ts
diff --git a/src/app/api/characters/route.ts b/src/app/(HomePage)/api/characters/route.ts
similarity index 100%
rename from src/app/api/characters/route.ts
rename to src/app/(HomePage)/api/characters/route.ts
diff --git a/src/app/api/chat-proxy/route.ts b/src/app/(HomePage)/api/chat-proxy/route.ts
similarity index 100%
rename from src/app/api/chat-proxy/route.ts
rename to src/app/(HomePage)/api/chat-proxy/route.ts
diff --git a/src/app/api/chat/route.ts b/src/app/(HomePage)/api/chat/route.ts
similarity index 100%
rename from src/app/api/chat/route.ts
rename to src/app/(HomePage)/api/chat/route.ts
diff --git a/src/app/api/contact/route.ts b/src/app/(HomePage)/api/contact/route.ts
similarity index 100%
rename from src/app/api/contact/route.ts
rename to src/app/(HomePage)/api/contact/route.ts
diff --git a/src/app/community/page.tsx b/src/app/(HomePage)/community/page.tsx
similarity index 100%
rename from src/app/community/page.tsx
rename to src/app/(HomePage)/community/page.tsx
diff --git a/src/app/contact/page.tsx b/src/app/(HomePage)/contact/page.tsx
similarity index 100%
rename from src/app/contact/page.tsx
rename to src/app/(HomePage)/contact/page.tsx
diff --git a/src/app/error.tsx b/src/app/(HomePage)/error.tsx
similarity index 100%
rename from src/app/error.tsx
rename to src/app/(HomePage)/error.tsx
diff --git a/src/app/forge/ForgeClientPage.tsx b/src/app/(HomePage)/forge/ForgeClientPage.tsx
similarity index 100%
rename from src/app/forge/ForgeClientPage.tsx
rename to src/app/(HomePage)/forge/ForgeClientPage.tsx
diff --git a/src/app/forge/ForgeProjectsList.tsx b/src/app/(HomePage)/forge/ForgeProjectsList.tsx
similarity index 100%
rename from src/app/forge/ForgeProjectsList.tsx
rename to src/app/(HomePage)/forge/ForgeProjectsList.tsx
diff --git a/src/app/forge/character-chat/page.tsx b/src/app/(HomePage)/forge/character-chat/page.tsx
similarity index 100%
rename from src/app/forge/character-chat/page.tsx
rename to src/app/(HomePage)/forge/character-chat/page.tsx
diff --git a/src/app/forge/page.tsx b/src/app/(HomePage)/forge/page.tsx
similarity index 100%
rename from src/app/forge/page.tsx
rename to src/app/(HomePage)/forge/page.tsx
diff --git a/src/app/forge/philosopher-graph/forceWorker.ts b/src/app/(HomePage)/forge/philosopher-graph/forceWorker.ts
similarity index 99%
rename from src/app/forge/philosopher-graph/forceWorker.ts
rename to src/app/(HomePage)/forge/philosopher-graph/forceWorker.ts
index 845ffc5..914c228 100644
--- a/src/app/forge/philosopher-graph/forceWorker.ts
+++ b/src/app/(HomePage)/forge/philosopher-graph/forceWorker.ts
@@ -1,6 +1,6 @@
 // forceWorker.ts - Web Worker for D3 Force Simulation Calculations
 import * as d3 from 'd3-force';
-import { PhilosopherNode, PhilosopherLink } from '../../../types/graphTypes';
+import { PhilosopherNode, PhilosopherLink } from '@/types/graphTypes';
 
 // Define an interface for the message data received by the worker
 interface WorkerMessage {
diff --git a/src/app/forge/philosopher-graph/metadata.ts b/src/app/(HomePage)/forge/philosopher-graph/metadata.ts
similarity index 100%
rename from src/app/forge/philosopher-graph/metadata.ts
rename to src/app/(HomePage)/forge/philosopher-graph/metadata.ts
diff --git a/src/app/forge/philosopher-graph/page.tsx b/src/app/(HomePage)/forge/philosopher-graph/page.tsx
similarity index 99%
rename from src/app/forge/philosopher-graph/page.tsx
rename to src/app/(HomePage)/forge/philosopher-graph/page.tsx
index 15afd98..3670018 100644
--- a/src/app/forge/philosopher-graph/page.tsx
+++ b/src/app/(HomePage)/forge/philosopher-graph/page.tsx
@@ -10,7 +10,7 @@ import AnalyticsModal from '@/components/Graph/analytics/AnalyticsModal';
 import { NodeDetailPanel } from '@/components/Graph/panels/NodeDetailPanel'; 
 import PageContainer from '@/components/Layout/PageContainer'; 
 import resolveConfig from 'tailwindcss/resolveConfig'; 
-import tailwindConfig from '../../../../tailwind.config.js'; 
+import tailwindConfig from '../../../../../tailwind.config.js'; 
 
 // Dynamically import the graph component to avoid SSR issues
 const DynamicPhilosopherGraph = dynamic(
diff --git a/src/app/globals.css b/src/app/(HomePage)/globals.css
similarity index 100%
rename from src/app/globals.css
rename to src/app/(HomePage)/globals.css
diff --git a/src/app/insights/[slug]/page.tsx b/src/app/(HomePage)/insights/[slug]/page.tsx
similarity index 100%
rename from src/app/insights/[slug]/page.tsx
rename to src/app/(HomePage)/insights/[slug]/page.tsx
diff --git a/src/app/insights/page.tsx b/src/app/(HomePage)/insights/page.tsx
similarity index 100%
rename from src/app/insights/page.tsx
rename to src/app/(HomePage)/insights/page.tsx
diff --git a/src/app/layout.tsx b/src/app/(HomePage)/layout.tsx
similarity index 95%
rename from src/app/layout.tsx
rename to src/app/(HomePage)/layout.tsx
index 666ba66..fb31403 100644
--- a/src/app/layout.tsx
+++ b/src/app/(HomePage)/layout.tsx
@@ -20,8 +20,8 @@ const publicSans = Public_Sans({
   weight: ['400', '500', '600', '700'] 
 });
 
-import Header from '../components/Layout/Header'; 
-import Footer from '../components/Layout/Footer'; 
+import Header from '@/components/Layout/Header'; 
+import Footer from '@/components/Layout/Footer'; 
 
 import type { Metadata } from "next";
 
diff --git a/src/app/not-found.tsx b/src/app/(HomePage)/not-found.tsx
similarity index 100%
rename from src/app/not-found.tsx
rename to src/app/(HomePage)/not-found.tsx
diff --git a/src/app/page.tsx b/src/app/(HomePage)/page.tsx
similarity index 78%
rename from src/app/page.tsx
rename to src/app/(HomePage)/page.tsx
index 3f6ba32..9b2b16d 100644
--- a/src/app/page.tsx
+++ b/src/app/(HomePage)/page.tsx
@@ -1,15 +1,15 @@
 import * as React from 'react';
-import SectionContainer from '../components/Layout/SectionContainer';
+import SectionContainer from '@/components/Layout/SectionContainer';
 import { Metadata } from 'next';
 import { createMetadataGenerator } from '@/lib/metadataUtils';
 
-import HeroSection from '../components/Home/HeroSection';
-import ServicesSection from '../components/Home/ServicesSection';
-import AboutSection from '../components/Home/AboutSection';
-import TestimonialsSection from '../components/Home/TestimonialsSection';
-import BlogSnippetsSection from '../components/Home/BlogSnippetsSection';
-import ForgeSection from '../components/Home/ForgeSection';
-import CallToActionSection from '../components/Home/CallToActionSection';
+import HeroSection from '@/components/Home/HeroSection';
+import ServicesSection from '@/components/Home/ServicesSection';
+import AboutSection from '@/components/Home/AboutSection';
+import TestimonialsSection from '@/components/Home/TestimonialsSection';
+import BlogSnippetsSection from '@/components/Home/BlogSnippetsSection';
+import ForgeSection from '@/components/Home/ForgeSection';
+import CallToActionSection from '@/components/Home/CallToActionSection';
 
 // Import data fetching functions and types
 import { getSortedPostsData } from '@/lib/posts';
diff --git a/src/app/services/[slug]/page.tsx b/src/app/(HomePage)/services/[slug]/page.tsx
similarity index 100%
rename from src/app/services/[slug]/page.tsx
rename to src/app/(HomePage)/services/[slug]/page.tsx
diff --git a/src/app/services/page.tsx b/src/app/(HomePage)/services/page.tsx
similarity index 100%
rename from src/app/services/page.tsx
rename to src/app/(HomePage)/services/page.tsx
diff --git a/src/components/AuthForm/AuthForm.tsx b/src/components/AuthForm/AuthForm.tsx
new file mode 100644
index 0000000..31b7eda
--- /dev/null
+++ b/src/components/AuthForm/AuthForm.tsx
@@ -0,0 +1,270 @@
+// src/components/AuthForm/AuthForm.tsx
+"use client";
+
+import React, { useState, useContext, useEffect } from 'react';
+import { ArrowLeftIcon, EnvelopeIcon, LockClosedIcon, SparklesIcon, UserIcon, IdentificationIcon, CheckIcon, ExclamationCircleIcon } from '@heroicons/react/24/outline';
+import { AuthContext } from '../Dashboard/AppContext';
+import { Typography, Alert, Button } from "@material-tailwind/react";
+import { useRouter } from 'next/navigation';
+
+interface AuthFormProps {
+  type: 'login' | 'register';
+}
+
+export function AuthForm({ type }: AuthFormProps) {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [nickname, setNickname] = useState('');
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [showAlert, setShowAlert] = useState({ show: false, message: "", type: "success" });
+  const navigate = useRouter();
+  const { login, isAuthenticated, register, accessTokenLogin } = useContext(AuthContext);
+
+  useEffect(() => {
+    if (isAuthenticated) navigate.push('/dashboard');
+  }, [isAuthenticated, navigate]);
+
+  // Show success alert
+  const showSuccessAlert = (message: string) => {
+    setShowAlert({
+      show: true,
+      message,
+      type: "success"
+    });
+    
+    setTimeout(() => {
+      setShowAlert(prev => ({ ...prev, show: false }));
+    }, 3000);
+  };
+
+  // Show error alert
+  const showErrorAlert = (message: string) => {
+    setShowAlert({
+      show: true,
+      message,
+      type: "error"
+    });
+    
+    setTimeout(() => {
+      setShowAlert(prev => ({ ...prev, show: false }));
+    }, 3000);
+  };
+  
+  useEffect(() => {
+    // If the user's cookie contains a valid access token, redirect to dashboard
+    const authenticate = async (accessToken: string) => {
+      if(await accessTokenLogin(accessToken)) navigate.push('/dashboard');
+    }
+    // Get the access token from the cookie
+    const field = "accessToken=";
+    let token = "";
+    const pairs = decodeURIComponent(document.cookie).split(';');
+    for(let i = 0; i <pairs.length; i++) {
+      let c = pairs[i];
+      // Remove leading whitespace
+      while (c.charAt(0) == ' ') {
+        c = c.substring(1);
+      }
+      if (c.indexOf(field) == 0) {
+        token = c.substring(field.length, c.length);
+      }
+    }
+    if (token.length > 0) authenticate(token);
+  }, [accessTokenLogin, navigate]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if(!email || !password) {
+      showErrorAlert('Please fill out all fields');
+      return;
+    }
+    if (type === 'login') {
+      const response = await login(email, password);
+      if (response === 'OK') navigate.push('/dashboard');
+      else showErrorAlert(response);
+    } else {//type === 'register'
+      const response = await register(email, password,
+        firstName.length > 0 ? firstName : undefined,
+        lastName.length > 0 ? lastName : undefined,
+        nickname.length > 0 ? nickname : undefined);
+      if (response === 'OK') {
+        // Add email verification here
+        showSuccessAlert('Account created');
+        navigate.push('/login');
+      } else showErrorAlert(response);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-gray-50 to-gray-100">
+      <div className="w-full max-w-md">
+        <div className="mb-6">
+          <button 
+            onClick={() => navigate.push('/')} 
+            className="flex items-center text-gray-700 hover:text-teal-600 transition-colors duration-300 font-medium"
+          >
+            <ArrowLeftIcon className="h-5 w-5 mr-2" /> Back to home
+          </button>
+        </div>
+
+        <div className="bg-white rounded-xl shadow-xl border border-gray-100 overflow-hidden transform hover:scale-[1.01] transition-transform duration-300">
+          <div className="h-2 bg-gradient-to-r from-teal-400 to-teal-600"></div>
+          <div className="p-8">
+            <div className="flex justify-center mb-8">
+              <div className="h-16 w-16 rounded-full bg-teal-50 flex items-center justify-center">
+                {type === 'login' ? (
+                  <LockClosedIcon className="h-8 w-8 text-teal-500" />
+                ) : (
+                  <UserIcon className="h-8 w-8 text-teal-500" />
+                )}
+              </div>
+            </div>
+            
+            <Typography variant="h3" className="text-center text-gray-800 font-bold text-2xl mb-2">
+              {type === 'login' ? 'Welcome Back' : 'Create Account'}
+            </Typography>
+            
+            <Typography className="text-center text-gray-500 mb-8">
+              {type === 'login' 
+                ? 'Sign in to access your account' 
+                : 'Join us and start your journey'}
+            </Typography>
+            
+            {showAlert.show && (
+              <Alert
+                open={showAlert.show}
+                onClose={() => setShowAlert(prev => ({ ...prev, show: false }))}
+                animate={{
+                  mount: { y: 0 },
+                  unmount: { y: -100 },
+                }}
+                className={showAlert.type === "success" ? "mb-6 bg-green-50 border-l-4 border-green-500 text-green-700 p-4" : "mb-6 bg-red-50 border-l-4 border-red-500 text-red-700 p-4"}
+                icon={showAlert.type === "success" ? <CheckIcon className="h-6 w-6" /> : <ExclamationCircleIcon className="h-6 w-6" />}
+              >
+                {showAlert.message}
+              </Alert>
+            )}
+
+            <form onSubmit={handleSubmit} className="space-y-5">
+              <div className="relative">
+                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <EnvelopeIcon className="h-5 w-5 text-gray-400" />
+                </div>
+                <input
+                  type="email"
+                  placeholder="Email"
+                  className="w-full p-3 pl-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-all duration-300"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  required
+                />
+              </div>
+              
+              <div className="relative">
+                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <LockClosedIcon className="h-5 w-5 text-gray-400" />
+                </div>
+                <input
+                  type="password"
+                  placeholder="Password"
+                  className="w-full p-3 pl-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-all duration-300"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                />
+              </div>
+
+              {type === 'register' && (
+                <>
+                  <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                      <UserIcon className="h-5 w-5 text-gray-400" />
+                    </div>
+                    <input
+                      type="text"
+                      placeholder="Nickname"
+                      className="w-full p-3 pl-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-all duration-300"
+                      value={nickname}
+                      onChange={(e) => setNickname(e.target.value)}
+                    />
+                  </div>
+                  
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="relative">
+                      <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                        <IdentificationIcon className="h-5 w-5 text-gray-400" />
+                      </div>
+                      <input
+                        type="text"
+                        placeholder="First Name"
+                        className="w-full p-3 pl-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-all duration-300"
+                        value={firstName}
+                        onChange={(e) => setFirstName(e.target.value)}
+                      />
+                    </div>
+                    <div className="relative">
+                      <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                        <IdentificationIcon className="h-5 w-5 text-gray-400" />
+                      </div>
+                      <input
+                        type="text"
+                        placeholder="Last Name"
+                        className="w-full p-3 pl-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-all duration-300"
+                        value={lastName}
+                        onChange={(e) => setLastName(e.target.value)}
+                      />
+                    </div>
+                  </div>
+                </>
+              )}
+
+              <Button 
+                type="submit" 
+                color="teal" 
+                className="mt-6 py-3 font-medium tracking-wide shadow-md hover:shadow-lg transition-all duration-300"
+                fullWidth
+              >
+                {type === 'login' ? 'Login' : 'Register'}
+              </Button>
+            </form>
+
+            {type === 'login' && (
+              <>
+                <div className="flex items-center my-6">
+                  <div className="flex-1 border-t border-gray-200"></div>
+                  <span className="px-3 text-gray-500 text-sm">Or continue with</span>
+                  <div className="flex-1 border-t border-gray-200"></div>
+                </div>
+                
+                <Button
+                  variant="outlined"
+                  color="teal"
+                  onClick={async () => {
+                    const success = await login('test@test.com', 'test123');
+                    if (success) navigate.push('/dashboard');
+                  }}
+                  fullWidth
+                  className="flex items-center justify-center py-3 border-teal-500 text-teal-600 hover:bg-teal-50 transition-colors duration-300"
+                >
+                  <SparklesIcon className="h-5 w-5 mr-2" /> Test Account
+                </Button>
+              </>
+            )}
+
+            <div className="text-center mt-8 text-gray-600">
+              {type === 'login' ? "Don't have an account?" : "Already have an account?"}{' '}
+              <button
+                type="button"
+                className="text-teal-600 font-medium hover:underline transition-all duration-300"
+                onClick={() => navigate.push(type === 'login' ? '/register' : '/login')}
+              >
+                {type === 'login' ? 'Sign Up' : 'Sign In'}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/ChatBox/ChatBox.tsx b/src/components/ChatBox/ChatBox.tsx
new file mode 100644
index 0000000..c2c9aa9
--- /dev/null
+++ b/src/components/ChatBox/ChatBox.tsx
@@ -0,0 +1,971 @@
+'use client'
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useState, useEffect, useRef, KeyboardEvent } from 'react';
+import {
+  PaperAirplaneIcon,
+  XMarkIcon,
+  MinusIcon,
+  ArrowsPointingOutIcon,
+  ArrowsPointingInIcon,
+  ChatBubbleLeftRightIcon,
+  SparklesIcon,
+  TrashIcon,
+  UserCircleIcon,
+  LockClosedIcon,
+  ChevronDoubleRightIcon,
+  LightBulbIcon
+} from '@heroicons/react/24/outline';
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  CardFooter,
+  Typography,
+  IconButton,
+  Button,
+  Tooltip,
+  Chip,
+  Badge
+} from "@material-tailwind/react";
+import { getGuestId } from '@/lib/guestIdentifier';
+import { API_URL } from '@/utils/axiosConfig';
+import axios from 'axios';
+
+interface Question {
+  id: string;
+  question: string;
+}
+
+// Guest info collected
+interface GuestInfo {
+  id: string | null;
+  name?: string;
+  company?: string;
+  industry?: string;
+  project_type?: string[];
+  budget?: string;
+  timeline?: string;
+  contact_info?: string;
+  pain_points?: string[];
+  current_tech?: string[];
+  additional_notes?: string;
+  // Additional info not in database
+  sessionCount: number,
+  questionsAnswered: Question[]
+}
+
+interface Interaction {
+  event: string,
+  timestamp: string,
+}
+
+// Guest stored in database
+interface Guest {
+  additional_notes?: string;
+  budget?: string;
+  company?: string;
+  contact_info?: string;
+  created_at?: string;
+  current_tech?: string[];
+  first_visit_timestamp?: string;
+  id: string | null;
+  industry?: string;
+  interaction_events?: string[];
+  interaction_history?: Interaction[];
+  name?: string;
+  page_views?: string[];
+  pain_points?: string[];
+  project_type?: string[];
+  session_id?: string;
+  status?: 'NEW' | 'CONTACTED' | 'CONVERTED';
+  timeline?: string;
+  updated_at?: string;
+}
+
+interface Message {
+  id: string;
+  role: 'user' | 'assistant' | 'system';
+  content: string;
+  timestamp: string;
+  isQuestion?: boolean;
+  questionId?: string;
+}
+
+type Theme = 'light' | 'dark';
+
+interface ChatBoxProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+// AI setup
+const AI_ENDPOINT = "https://api.openai.com/v1/chat/completions";
+const SYSTEM_PROMPT = "You are a helpful, friendly AI assistant for Theoforge, a company that specializes in ETL Solutions, Knowledge Graphs, and Custom LLM Training. Your goal is to be helpful, gather information about the guest to better assist them, and ultimately help convert them to customers. Ask questions one at a time to learn about their needs. Be concise but friendly.";
+const apiKey = process.env.VITE_OPENAI_API_KEY || '';
+
+// Questions to ask guests
+const GUEST_QUESTIONS: Question[] = [
+  { id: 'intro', question: "Hello! I'm your AI assistant from Theoforge. Before we get started, could you tell me about you and your company?"},
+  { id: 'name', question: "Before we continue, may I know your name?" },
+  { id: 'company', question: "Could you tell me what company are you with?" },
+  { id: 'industry', question: "What industry are you in?"},
+  { id: 'project_type', question: "What type of projects are you interested in?"},
+  { id: 'budget', question: "What is your current budget?"},
+  { id: 'timeline', question: "Please tell me more about the timeline of your project."},
+  { id: 'contact_info', question: "May I get your contact info?"},
+  { id: 'pain_points', question: "What specific data or AI challenges is your company facing that brought you here today?" },
+  { id: 'current_tech', question: "What tech is your company into?" },
+  { id: 'additional_notes', question: "Is there any additional info that might be helpful to know about you or your company?"}
+];
+
+// Generate a unique ID for messages
+function generateId(): string {
+  if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+    return crypto.randomUUID();
+  }
+  return `id-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+}
+
+// Initial welcome message
+const INITIAL_MESSAGES: Message[] = [
+  {
+    id: generateId(),
+    role: 'system',
+    content: SYSTEM_PROMPT,
+    timestamp: new Date().toISOString()
+  },
+  {
+    id: generateId(),
+    role: 'assistant',
+    content: GUEST_QUESTIONS[0].question,
+    timestamp: new Date().toISOString()
+  }
+];
+
+export function ChatBox({ 
+  isOpen, 
+  onClose,
+}: ChatBoxProps) {
+  // Guest identification
+  const guestId = useRef<string | null>(null);
+  const CHAT_STORAGE_KEY = useRef<string | null>(null);
+  const GUEST_INFO_KEY = useRef<string | null>(null);
+  const initialized = useRef(false);
+  const [isStorageLoaded, setIsStorageLoaded] = useState(false);
+  
+  // Guest info state
+  const [guestInfo, setGuestInfo] = useState<GuestInfo>({id: '', sessionCount: 0, questionsAnswered: []});
+
+  // Chat state management
+  const [messages, setMessages] = useState<Message[]>(INITIAL_MESSAGES);
+  const [visibleMessages, setVisibleMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState('');
+  const [isThinking, setIsThinking] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [showIntroduction, setShowIntroduction] = useState(true);
+  const [theme, setTheme] = useState<Theme>('light');
+
+  // UI state for resizing and minimization
+  const [isMinimized, setIsMinimized] = useState(false);
+  const [chatSize, setChatSize] = useState({ width: 380, height: 580 });
+  const [isResizing, setIsResizing] = useState(false);
+  const chatContainerRef = useRef<HTMLDivElement>(null);
+  const resizeRef = useRef<HTMLDivElement>(null);
+  const startPosRef = useRef({ x: 0, y: 0 });
+  const startSizeRef = useRef({ width: 0, height: 0 });
+  const messageEndRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Auto-scroll to the latest message
+  useEffect(() => {
+    messageEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [visibleMessages, isOpen, isMinimized]);
+
+  // Focus input when chat opens
+  useEffect(() => {
+    if (isOpen && !isMinimized) {
+      setTimeout(() => {
+        inputRef.current?.focus();
+      }, 300);
+    }
+  }, [isOpen, isMinimized]);
+
+  // Filter out system messages for display
+  useEffect(() => {
+    setVisibleMessages(messages.filter(msg => msg.role !== 'system'));
+  }, [messages]);
+
+  const loadGuest = async() => {
+    // Create guest if new user
+    guestId.current = await getGuestId();
+    if(guestId.current) {
+      try {
+        // Load guest info
+        const res = await axios.get(`${API_URL}/guests/${guestId.current}`);
+        const guest: Guest = res.data;
+        // Make sure guest exists on backend(sync)
+        if(guest && guest.id === guestId.current){
+          CHAT_STORAGE_KEY.current = 'chat_'+guest.id;
+          GUEST_INFO_KEY.current = 'guest_'+guest.id;
+          const storedGuestInfo = localStorage.getItem(GUEST_INFO_KEY.current);
+          const remoteGuestInfo = {
+            id: guest.id,
+            name: guest.name,
+            company: guest.company,
+            industry: guest.industry,
+            project_type: guest.project_type,
+            budget: guest.budget,
+            timeline: guest.timeline,
+            contact_info: guest.contact_info,
+            pain_points: guest.pain_points,
+            current_tech: guest.current_tech,
+            additional_notes: guest.additional_notes
+          }
+          // Load guest info
+          if (storedGuestInfo) {
+            try {
+              const data: GuestInfo = JSON.parse(storedGuestInfo);
+              setGuestInfo({
+                ...remoteGuestInfo,
+                sessionCount: data.sessionCount + 1,
+                questionsAnswered: data.questionsAnswered
+              });
+            } catch (error) {
+              console.error("Failed to parse guest info:", error);
+            }
+          } else {
+            localStorage.setItem(GUEST_INFO_KEY.current, JSON.stringify({
+              ...remoteGuestInfo,
+              sessionCount: guestInfo.sessionCount + 1,
+              questionsAnswered: guestInfo.questionsAnswered
+            }));
+          }
+          // Load chat history
+          const stored = localStorage.getItem(CHAT_STORAGE_KEY.current);
+          if (stored) {
+            try {
+              const data = JSON.parse(stored);
+              if (Array.isArray(data) && data.length > 0) {
+                // Ensure we have a system prompt
+                if (!data.some(msg => msg.role === 'system')) {
+                  data.unshift({
+                    id: generateId(),
+                    role: 'system',
+                    content: SYSTEM_PROMPT,
+                    timestamp: new Date().toISOString()
+                  });
+                }
+                setMessages(data);
+                if(data.length > 2) setShowIntroduction(false);
+              }
+            } catch (error) {
+              console.error("Failed to parse chat history:", error);
+            }
+          } else {
+            localStorage.setItem(CHAT_STORAGE_KEY.current, JSON.stringify(messages));
+          }
+          setIsStorageLoaded(true);
+        } else {
+          throw Error('Out of sync with backend');
+        }
+      } catch {
+        console.error('Failed to retrieve guest');
+        // If out of sync, remove guest and recreate when guest returns
+        if(guestId.current) {
+          localStorage.removeItem('theoforge_guest_id');
+          localStorage.removeItem('chat_'+guestId.current);
+          localStorage.removeItem('guest_'+guestId.current);
+        }
+      }
+    }
+  }
+  
+  // Load chat history and guest info on mount
+  useEffect(() => {
+    // Prevent react strict mode remount from making API call twice in development
+    if(!initialized.current){
+      initialized.current = true;
+      loadGuest();
+    }
+  }, []);
+
+  // Persist chat history on every update
+  useEffect(() => {
+    if (isStorageLoaded) {
+      try {
+        if (CHAT_STORAGE_KEY.current) localStorage.setItem(CHAT_STORAGE_KEY.current, JSON.stringify(messages));
+        else console.warn('Could not load messages');
+      } catch (e) {
+        console.warn("Could not save to localStorage:", e);
+      }
+    }
+  }, [messages]);
+  
+  // Persist and sync guest info with backend with every update
+  useEffect(() => {
+    if (isStorageLoaded) {
+      try {
+        axios.put(`${API_URL}/guests/${guestId.current}`, guestInfo);
+        if(GUEST_INFO_KEY.current) localStorage.setItem(GUEST_INFO_KEY.current, JSON.stringify(guestInfo));
+        else console.warn('No guest info key');
+      } catch (e) {
+        console.warn("Could not save guest info:", e);
+      }
+    }
+  }, [guestInfo]);
+
+  // RESIZING HANDLERS
+  const handleResizeStart = (e: React.MouseEvent) => {
+    e.preventDefault();
+    setIsResizing(true);
+    startPosRef.current = { x: e.clientX, y: e.clientY };
+    startSizeRef.current = { ...chatSize };
+    
+    // Add event listeners
+    const handleMouseMove = (e: MouseEvent) => handleResize(e);
+    const handleMouseUp = () => {
+      setIsResizing(false);
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+    
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  };
+
+  const handleResize = (e: MouseEvent) => {
+    if (!isResizing) return;
+    const deltaW = e.clientX - startPosRef.current.x;
+    const deltaH = e.clientY - startPosRef.current.y;
+    setChatSize({
+      width: Math.max(320, startSizeRef.current.width + deltaW),
+      height: Math.max(400, startSizeRef.current.height + deltaH)
+    });
+  };
+
+  // Toggle minimization of the chatbox
+  const toggleMinimize = () => {
+    setIsMinimized(prev => !prev);
+  };
+
+  // Get AI response using sendMessage
+  const getAIResponse = async (context: Message[], updatedMessages: Message[]): Promise<string> => {
+    setIsThinking(true);
+    setError(null);
+    
+    try {      
+      // Prepare messages for the API
+      const apiMessages = context.map(m => ({ 
+        role: m.role, 
+        content: m.content 
+      }));
+      
+      // COLLECT GUEST INFO
+      // Add this context to the first system message
+      apiMessages[0].content = `You are an AI assistant that collects information about guests and generates JSON.
+      The following info has already been filled out.
+      info: """${JSON.stringify(guestInfo)}"""
+      Examine the messages for information about the guest and correct the info if needed.`;
+      apiMessages[0].role = 'system';
+      
+      const response = await fetch(AI_ENDPOINT, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": `Bearer ${apiKey}`
+        },
+        body: JSON.stringify({
+          model: "gpt-4o",
+          messages: apiMessages,
+          max_tokens: 500,
+          temperature: 0.7,
+          response_format: {
+            "type": "json_schema",
+            "json_schema": {
+              "name": "guestInfo",
+              "strict": true,
+              "schema": {
+                "type": "object",
+                "properties":{
+                  "name": {
+                    "description": "Guest's full name",
+                    "type": ["string", "null"]
+                  },
+                  "company": {
+                    "description": "Company associated with the guest",
+                    "type": ["string", "null"]
+                  },
+                  "industry": {
+                    "description": "Industry of the guest",
+                    "type": ["string", "null"]
+                  },
+                  "project_type": {
+                    "description": "Type of project guest is interested in",
+                    "type": "array",
+                    "items": {
+                      "type": "string"
+                    }
+                  },
+                  "budget": {
+                    "description": "Estimated budget for the project",
+                    "type": ["string", "null"]
+                  },
+                  "timeline": {
+                    "description": "Project timeline",
+                    "type": ["string", "null"]
+                  },
+                  "contact_info": {
+                    "description": "Guest's contact information",
+                    "type": ["string", "null"]
+                  },
+                  "pain_points": {
+                    "description": "Challenges or problems the guest is facing",
+                    "type": "array",
+                    "items": {
+                      "type": "string"
+                    }
+                  },
+                  "current_tech": {
+                    "description": "Guest's current technology stack",
+                    "type": "array",
+                    "items": {
+                      "type": "string"
+                    }
+                  },
+                  "additional_notes": {
+                    "description": "Any additional notes",
+                    "type": ["string", "null"]
+                  }
+                },
+                "required": ["name", "company", "industry", "project_type", "budget", "timeline", "contact_info", "pain_points", "current_tech", "additional_notes"],
+                "additionalProperties": false
+              }
+            }
+          }
+        })
+      });
+      
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => null);
+        throw new Error(errorData?.error?.message || `API Error: ${response.statusText}`);
+      }
+      
+      const data = await response.json();
+      setGuestInfo(JSON.parse(data.choices[0].message.content));
+      
+      // Create response
+      // Add system prompt and context to the first system message
+      apiMessages[0].content = `${SYSTEM_PROMPT}
+      The following guest info has been collected.
+      info: """${JSON.stringify(guestInfo)}"""`;
+      apiMessages[0].role = 'system';
+      // Use openai streaming api
+      const streamResponse = await fetch(AI_ENDPOINT, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": `Bearer ${apiKey}`
+        },
+        body: JSON.stringify({
+          model: "gpt-4o",
+          messages: apiMessages,
+          max_tokens: 500,
+          temperature: 0.7,
+          stream: true
+        })
+      });
+      if (!streamResponse.body){
+        throw new Error('Failed to get response body');
+      }
+      const reader = streamResponse.body.getReader();
+      const decoder = new TextDecoder("utf-8");
+      let aiResponse = "";
+      // Read until stream is done
+      while(true) {
+        const {done, value} = await reader.read();
+        if(done) {
+          break;
+        }
+        // While streaming, decode the stream
+        const decodedChunk = decoder.decode(value);
+        const lines = decodedChunk.split("\n");
+        // Parse the result
+        const parsedLines = lines.map(
+          (line) => line.replace(/^data: /, "").trim()
+        ).filter(
+          (line) => line !== "" && line !== "[DONE]"
+        ).map((line) => JSON.parse(line));
+        for (const parsedLine of parsedLines) {
+          // Extract the content
+          const content = parsedLine.choices[0].delta.content;
+          if (content) {
+            setMessages([...updatedMessages, {
+              id: generateId(),
+              role: 'assistant',
+              content: aiResponse+content,
+              timestamp: new Date().toISOString()
+            }]);
+            aiResponse+=content;
+          }
+        }
+      }
+      return 'Done'
+    } catch (error: any) {
+      console.error("Error generating AI response:", error);
+      setError(error.message || "Failed to get response from AI service");
+      return "I'm sorry, I encountered an error while processing your request. Please try again later.";
+    } finally {
+      setIsThinking(false);
+    }
+  };
+
+  // Clear the chat history
+  const clearChat = () => {
+    if (window.confirm("Are you sure you want to clear the chat history?")) {
+      setMessages(INITIAL_MESSAGES);
+      setShowIntroduction(true);
+      try {
+        if(CHAT_STORAGE_KEY.current) localStorage.removeItem(CHAT_STORAGE_KEY.current);
+      } catch (e) {
+        console.warn("Could not access localStorage:", e);
+      }
+    }
+  };
+
+  // Handler for sending text messages
+  const handleSend = async (manualInput?: string) => {
+    const textToSend = manualInput || input.trim();
+    if (!textToSend) return;
+    
+    // Hide introduction once user starts chatting
+    if (showIntroduction) {
+      setShowIntroduction(false);
+    }
+    
+    setInput('');
+    
+    // Create a new user message
+    const userMessage: Message = {
+      id: generateId(),
+      role: 'user',
+      content: textToSend,
+      timestamp: new Date().toISOString()
+    };
+    
+    // Update messages state with user message
+    const updatedMessages = [...messages, userMessage];
+    setMessages(updatedMessages);
+    
+    // Context limitation - use last 15 messages for context (including system prompt)
+    const context = updatedMessages.slice(-15);
+    
+    // Ensure system prompt is included
+    if (!context.some(msg => msg.role === 'system')) {
+      context.unshift({
+        id: generateId(),
+        role: 'system',
+        content: SYSTEM_PROMPT,
+        timestamp: new Date().toISOString()
+      });
+    }
+    
+    // Get AI response
+    await getAIResponse(context, updatedMessages);
+  };
+
+  // Allow sending message with Enter key (without Shift)
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  // Quick replies/suggestions
+  const handleQuickReply = (text: string) => {
+    setInput(text);
+    setTimeout(() => handleSend(text), 100);
+  };
+
+  // Render the minimized chat button
+  if (!isOpen) return null;
+
+  if (isMinimized) {
+    return (
+      <div className="fixed bottom-4 right-4 z-50">
+        <button 
+          onClick={toggleMinimize}
+          className={`bg-teal-500 text-white p-4 rounded-full shadow-lg hover:bg-teal-600 transition transform hover:scale-105 flex items-center justify-center`}
+          aria-label="Open chat"
+        >
+          <Badge content={visibleMessages.length > 2 ? "1" : "0"} color="red">
+            <ChatBubbleLeftRightIcon className="h-6 w-6" />
+          </Badge>
+          <span className="sr-only">Open chat</span>
+        </button>
+      </div>
+    );
+  }
+
+  // Determine theme-based classes
+  const themeClasses = theme === 'dark' 
+    ? {
+        card: "bg-gray-900 border-gray-800",
+        header: `bg-gradient-to-r from-teal-800 to-teal-900`,
+        body: "bg-gray-900",
+        message: {
+          user: `bg-teal-600 text-white`,
+          assistant: "bg-gray-800 text-gray-100",
+          question: "bg-indigo-700 text-white border border-indigo-400",
+          timestamp: {
+            user: `text-teal-200`,
+            assistant: "text-gray-400",
+            question: "text-indigo-200"
+          }
+        },
+        input: "bg-gray-800 border-gray-700 text-white placeholder:text-gray-400",
+        buttons: "text-gray-300 hover:bg-gray-700",
+        quickReplies: "bg-gray-800 border-gray-700 text-white",
+        footer: "border-gray-800"
+      }
+    : {
+        card: "bg-white border-gray-200",
+        header: `bg-gradient-to-r from-teal-500 to-teal-600`,
+        body: "bg-white",
+        message: {
+          user: `bg-teal-500 text-white`,
+          assistant: "bg-gray-100 text-gray-800",
+          question: "bg-indigo-500 text-white border border-indigo-300",
+          timestamp: {
+            user: `text-teal-100`,
+            assistant: "text-gray-500",
+            question: "text-indigo-100"
+          }
+        },
+        input: "bg-gray-50 border-gray-200 text-gray-900 placeholder:text-gray-500",
+        buttons: "text-gray-700 hover:bg-gray-100",
+        quickReplies: "bg-gray-50 border-gray-200 text-gray-700",
+        footer: "border-gray-200"
+      };
+
+  // Quick reply suggestions based on context
+  const getSuggestions = () => {
+    if (visibleMessages.length <= 1) {
+      return [
+        `Tell me about Theoforge`,
+        "What services do you offer?",
+        "How can I schedule a demo?"
+      ];
+    }
+    
+    if (guestInfo.pain_points?.length) {
+      return [
+        `How do you handle ${guestInfo.pain_points[0]}?`,
+        "What are your pricing options?",
+        "Can you share some case studies?"
+      ];
+    }
+    
+    return [
+      "Tell me about your Knowledge Graph solutions",
+      "What makes your ETL solutions unique?",
+      "Do you offer custom LLM training?"
+    ];
+  };
+
+  return (
+    <div
+      ref={resizeRef}
+      className="fixed bottom-4 right-4 z-50 shadow-xl rounded-xl overflow-hidden transition-all duration-300"
+      style={{ width: `${chatSize.width}px`, height: `${chatSize.height}px` }}
+    >
+      <Card className={`w-full h-full flex flex-col border rounded-xl ${themeClasses.card}`}>
+        {/* Header */}
+        <CardHeader 
+          floated={false}
+          className={`sticky top-0 z-20 px-6 pt-4 pb-6 m-0 rounded-b-none shadow-md ${themeClasses.header}`}
+        >
+          <div className="flex justify-between items-center">
+            <div className="flex items-center">
+              <div className="relative mr-3">
+                <img 
+                  src={"/logo.png"} 
+                  alt={`Theoforge Logo`} 
+                  className="h-9 w-9 rounded-full border-2 border-white shadow-sm" 
+                />
+                {guestInfo.name && (
+                  <div className="absolute -bottom-1 -right-1 w-3 h-3 bg-green-400 rounded-full border-2 border-white animate-pulse"></div>
+                )}
+              </div>
+              <div>
+                <Typography className="text-white text-lg font-bold flex items-center">
+                  Theoforge AI
+                </Typography>
+              </div>
+            </div>
+            <div className="flex gap-1">
+              <Tooltip content="Change theme">
+                <IconButton
+                  onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+                  variant="text"
+                  color="white"
+                  className="h-8 w-8 rounded-full hover:bg-white/20 transition-all"
+                  size="sm"
+                >
+                  <LightBulbIcon className="h-4 w-4" />
+                </IconButton>
+              </Tooltip>
+              <Tooltip content="Clear chat history">
+                <IconButton
+                  onClick={clearChat}
+                  variant="text"
+                  color="white"
+                  className="h-8 w-8 rounded-full hover:bg-white/20 transition-all"
+                  size="sm"
+                >
+                  <TrashIcon className="h-4 w-4" />
+                </IconButton>
+              </Tooltip>
+              <Tooltip content="Minimize">
+                <IconButton
+                  onClick={toggleMinimize}
+                  variant="text"
+                  color="white"
+                  className="h-8 w-8 rounded-full hover:bg-white/20 transition-all" size="sm"
+                >
+                  <MinusIcon className="h-4 w-4" />
+                </IconButton>
+                </Tooltip>
+              <Tooltip content={chatSize.width > 400 ? "Smaller size" : "Larger size"}>
+                <IconButton
+                  onClick={() => setChatSize(
+                    chatSize.width > 400 
+                      ? { width: 380, height: 520 } 
+                      : { width: 480, height: 600 }
+                  )}
+                  variant="text"
+                  color="white"
+                  className="h-8 w-8 rounded-full hover:bg-white/20 transition-all"
+                  size="sm"
+                >
+                  {chatSize.width > 400 ? (
+                    <ArrowsPointingInIcon className="h-4 w-4" />
+                  ) : (
+                    <ArrowsPointingOutIcon className="h-4 w-4" />
+                  )}
+                </IconButton>
+              </Tooltip>
+              <Tooltip content="Close">
+                <IconButton
+                  onClick={onClose}
+                  variant="text"
+                  color="white"
+                  className="h-8 w-8 rounded-full hover:bg-white/20 transition-all"
+                  size="sm"
+                >
+                  <XMarkIcon className="h-4 w-4" />
+                </IconButton>
+              </Tooltip>
+            </div>
+          </div>
+        </CardHeader>
+        
+        {/* Message Container */}
+        <CardBody 
+          ref={chatContainerRef} 
+          className={`h-full flex-grow overflow-y-auto p-6 space-y-4 ${themeClasses.body}`}
+        >
+          {/* Introduction Panel - only shown at first */}
+          {showIntroduction && (
+            <div className={`mb-6 p-4 rounded-lg border border-teal-100 bg-teal-50 text-teal-900 dark:border-teal-800 dark:bg-teal-900/20 dark:text-teal-100`}>
+              <div className="flex items-center mb-3">
+                <SparklesIcon className={`h-5 w-5 text-teal-500 mr-2`} />
+                <Typography variant="h6" className="font-semibold">Welcome to Theoforge AI Assistant</Typography>
+              </div>
+              <Typography variant="small" className="mb-3">
+                I'm here to help answer your questions about our services and solutions. Feel free to ask about:
+              </Typography>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 mb-3">
+                <div className={`p-2 rounded border border-teal-200 bg-white/80 dark:bg-gray-800/80 flex items-center`}>
+                  <div className={`mr-2 p-1 rounded-full bg-teal-100 dark:bg-teal-900`}>
+                    <ChevronDoubleRightIcon className={`h-3 w-3 text-teal-500`} />
+                  </div>
+                  <Typography variant="small" className="font-medium">ETL Solutions</Typography>
+                </div>
+                <div className={`p-2 rounded border border-teal-200 bg-white/80 dark:bg-gray-800/80 flex items-center`}>
+                  <div className={`mr-2 p-1 rounded-full bg-teal-100 dark:bg-teal-900`}>
+                    <ChevronDoubleRightIcon className={`h-3 w-3 text-teal-500`} />
+                  </div>
+                  <Typography variant="small" className="font-medium">Knowledge Graphs</Typography>
+                </div>
+                <div className={`p-2 rounded border border-teal-200 bg-white/80 dark:bg-gray-800/80 flex items-center`}>
+                  <div className={`mr-2 p-1 rounded-full bg-teal-100 dark:bg-teal-900`}>
+                    <ChevronDoubleRightIcon className={`h-3 w-3 text-teal-500`} />
+                  </div>
+                  <Typography variant="small" className="font-medium">Custom LLM Training</Typography>
+                </div>
+                <div className={`p-2 rounded border border-teal-200 bg-white/80 dark:bg-gray-800/80 flex items-center`}>
+                  <div className={`mr-2 p-1 rounded-full bg-teal-100 dark:bg-teal-900`}>
+                    <ChevronDoubleRightIcon className={`h-3 w-3 text-teal-500`} />
+                  </div>
+                  <Typography variant="small" className="font-medium">Case Studies & Pricing</Typography>
+                </div>
+              </div>
+              <div className="flex items-center mt-2">
+                <LockClosedIcon className="h-3 w-3 mr-1 text-gray-400" />
+                <Typography variant="small" className="text-xs text-gray-500">
+                  Your conversations are stored locally on your device only
+                </Typography>
+              </div>
+            </div>
+          )}
+          
+          {/* Guest info chip - only show once info is collected */}
+          {guestInfo.name && (
+            <div className="flex justify-center mb-4">
+              <Chip
+                value={
+                  <div className="flex items-center gap-2">
+                    <UserCircleIcon className="h-4 w-4" />
+                    <span>{guestInfo.name+(guestInfo.company ? " from "+guestInfo.company : "")}</span>
+                  </div>
+                }
+                color="teal"
+                variant="ghost"
+                className="px-3 py-1.5"
+              />
+            </div>
+          )}
+          
+          {visibleMessages.map((msg) => (
+            <div key={msg.id} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
+              <div 
+                className={`max-w-[85%] p-4 rounded-xl shadow-md ${
+                  msg.role === 'user' 
+                    ? themeClasses.message.user 
+                    : msg.isQuestion
+                      ? themeClasses.message.question
+                      : themeClasses.message.assistant
+                }`}
+              >
+                {msg === visibleMessages[visibleMessages.length - 1] && isThinking 
+                  ? <Typography className="text-sm whitespace-pre-wrap">{msg.content}<span className="animate-pulse">▌</span></Typography>
+                  : <Typography className="text-sm whitespace-pre-wrap">{msg.content}</Typography>
+                }
+                <Typography 
+                  variant="small" 
+                  className={`mt-1 text-xs ${
+                    msg.role === 'user' 
+                      ? themeClasses.message.timestamp.user 
+                      : msg.isQuestion
+                        ? themeClasses.message.timestamp.question
+                        : themeClasses.message.timestamp.assistant
+                  }`}
+                >
+                  {new Date(msg.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                </Typography>
+              </div>
+            </div>
+          ))}
+          
+          {error && (
+            <div className="flex justify-center">
+              <div className="max-w-[90%] p-3 rounded-lg bg-red-50 text-red-600 border border-red-200 dark:bg-red-900/20 dark:border-red-800 dark:text-red-300">
+                <div className="flex items-start gap-2">
+                  <div className="flex-shrink-0 mt-0.5">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-5 h-5">
+                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clipRule="evenodd" />
+                    </svg>
+                  </div>
+                  <div>
+                    <Typography variant="small" className="font-medium">{error}</Typography>
+                    <Button 
+                      variant="text" 
+                      size="sm" 
+                      color="red" 
+                      className="p-0 mt-1" 
+                      onClick={() => setError(null)}
+                    >
+                      Dismiss
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+          
+          {/* Quick Replies */}
+          {!isThinking && (
+            <div className="pt-2 flex flex-wrap gap-2 justify-center">
+              {getSuggestions().map((suggestion, index) => (
+                <Button
+                  key={index}
+                  variant="outlined"
+                  size="sm"
+                  color="teal"
+                  className={`px-3 py-1.5 cursor-pointer hover:bg-teal-50 dark:hover:bg-teal-900/20 transition-colors`}
+                  onClick={() => handleQuickReply(suggestion)}
+                >{suggestion}</Button>
+              ))}
+            </div>
+          )}
+          
+          <div ref={messageEndRef} />
+        </CardBody>
+        
+        {/* Footer / Input */}
+        <CardFooter className={`p-4 border-t ${themeClasses.footer}`}>
+          <div className="flex items-center gap-2">
+            <input
+              ref={inputRef}
+              type="text"
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder={"Type your message..."}
+              className={`flex-grow border rounded-lg p-3 pr-10 focus:outline-none focus:ring-2 focus:ring-teal-500 ${themeClasses.input}`}
+              disabled={isThinking}
+            />
+            
+            <Button 
+              onClick={() => handleSend()} 
+              color="teal"
+              variant="gradient"
+              className="p-2 rounded-full shadow-md"
+              disabled={isThinking || !input.trim()}
+            >
+              <PaperAirplaneIcon className="h-5 w-5" />
+            </Button>
+          </div>
+          
+          {visibleMessages.length > 1 && (
+            <div className="mt-2 text-center">
+              <Typography variant="small" className="text-gray-500 dark:text-gray-400 text-xs flex items-center justify-center gap-1">
+                <LockClosedIcon className="h-3 w-3" />
+                Messages are saved locally on this device
+              </Typography>
+            </div>
+          )}
+        </CardFooter>
+      </Card>
+      
+      {/* Resize Handle */}
+      <div
+        onMouseDown={handleResizeStart}
+        className="absolute bottom-0 right-0 w-8 h-8 cursor-se-resize bg-transparent flex items-center justify-center opacity-30 hover:opacity-100 transition-opacity"
+        aria-label="Resize chat window"
+      >
+        <svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor">
+          <rect x="0" y="8" width="2" height="2" />
+          <rect x="4" y="8" width="2" height="2" />
+          <rect x="8" y="8" width="2" height="2" />
+          <rect x="4" y="4" width="2" height="2" />
+          <rect x="8" y="4" width="2" height="2" />
+          <rect x="8" y="0" width="2" height="2" />
+        </svg>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Dashboard/AdminDashboard.tsx b/src/components/Dashboard/AdminDashboard.tsx
new file mode 100644
index 0000000..3912bd7
--- /dev/null
+++ b/src/components/Dashboard/AdminDashboard.tsx
@@ -0,0 +1,320 @@
+'use client'
+
+import React, { useContext, useState } from 'react';
+import { AuthContext } from '@/components/Dashboard/AppContext';
+import {
+  UsersIcon,
+  HomeIcon,
+  ShoppingBagIcon,
+  UserCircleIcon,
+  ChartBarIcon,
+  SparklesIcon,
+  DocumentTextIcon,
+  CheckCircleIcon,
+} from '@heroicons/react/24/outline';
+import {
+  Card,
+  Typography,
+  Button,
+  DialogBody,
+  DialogFooter,
+  Dialog,
+  Alert,
+  DialogHeader,
+  Input,
+} from "@material-tailwind/react";
+import { useRouter } from 'next/navigation';
+import { colors } from '@material-tailwind/react/types/generic';
+
+interface AccountInfo {
+  nickname: string | null;
+  email: string;
+  first_name: string | null;
+  last_name: string | null;
+}
+
+// Admin Dashboard Content Component
+const AdminDashboard: React.FC = () => {
+  const navigate = useRouter();
+  const [isReportModalOpen, setIsReportModalOpen] = useState(false);
+  const [showToast, setShowToast] = useState({
+    show: false,
+    message: "",
+    color: "green"
+  });
+  
+  // Function to show toast notifications
+  const showNotification = (message: string, color = "green") => {
+    setShowToast({
+      show: true,
+      message,
+      color
+    });
+    
+    setTimeout(() => {
+      setShowToast({...showToast, show: false});
+    }, 3000);
+  };
+  return (
+    // Admin Dashboard Content
+    <div className="space-y-6">
+      {/* Welcome Header */}
+      <Card className="p-6 border border-gray-100 relative overflow-hidden">
+        <div className="relative z-10">
+          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+            <div>
+              <div className="inline-flex items-center px-3 py-1 rounded-full bg-teal-50 text-teal-500 mb-4">
+                <SparklesIcon className="h-4 w-4 mr-2" />
+                <span className="text-sm font-medium">Admin Dashboard</span>
+              </div>
+              <Typography variant="h3" color="blue-gray" className="mb-2">
+                Welcome back!
+              </Typography>
+              <Typography color="gray">
+                Here&apos;s what&apos;s happening with your projects today.
+              </Typography>
+            </div>
+            <Button 
+              color="teal" 
+              className="flex items-center gap-2"
+              size="sm"
+              onClick={() => setIsReportModalOpen(true)}
+            >
+              <SparklesIcon className="h-4 w-4" /> 
+              Generate Report
+            </Button>
+          </div>
+        </div>
+        {/* Decorative elements */}
+        <div className="absolute top-0 right-0 w-64 h-64 bg-teal-50 rounded-full blur-3xl opacity-50 -z-10"></div>
+        <div className="absolute bottom-0 left-0 w-64 h-64 bg-blue-50 rounded-full blur-3xl opacity-50 -z-10"></div>
+      </Card>
+
+      {/* Admin Metrics */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        <Card className="p-4 border border-gray-100 transition-all duration-300 hover:shadow-md">
+          <div className="flex items-start justify-between">
+            <div>
+              <Typography variant="small" color="gray" className="mb-2">
+                Total Users
+              </Typography>
+              <Typography variant="h4">
+                1,204
+              </Typography>
+              <div className="flex items-center mt-1">
+                <Typography variant="small" color="teal" className="font-medium">
+                  +12%
+                </Typography>
+                <Typography variant="small" color="gray" className="ml-1">
+                  vs. last month
+                </Typography>
+              </div>
+            </div>
+            <div className="p-2 rounded-lg bg-blue-50 text-blue-500">
+              <UsersIcon className="h-6 w-6" />
+            </div>
+          </div>
+        </Card>
+        <Card className="p-4 border border-gray-100 transition-all duration-300 hover:shadow-md">
+          <div className="flex items-start justify-between">
+            <div>
+              <Typography variant="small" color="gray" className="mb-2">
+                Active Guests
+              </Typography>
+              <Typography variant="h4">
+                423
+              </Typography>
+              <div className="flex items-center mt-1">
+                <Typography variant="small" color="teal" className="font-medium">
+                  +5%
+                </Typography>
+                <Typography variant="small" color="gray" className="ml-1">
+                  vs. last month
+                </Typography>
+              </div>
+            </div>
+            <div className="p-2 rounded-lg bg-teal-50 text-teal-500">
+              <HomeIcon className="h-6 w-6" />
+            </div>
+          </div>
+        </Card>
+        <Card className="p-4 border border-gray-100 transition-all duration-300 hover:shadow-md">
+          <div className="flex items-start justify-between">
+            <div>
+              <Typography variant="small" color="gray" className="mb-2">
+                New Sign-ups
+              </Typography>
+              <Typography variant="h4">
+                48
+              </Typography>
+              <div className="flex items-center mt-1">
+                <Typography variant="small" color="teal" className="font-medium">
+                  +18%
+                </Typography>
+                <Typography variant="small" color="gray" className="ml-1">
+                  vs. last month
+                </Typography>
+              </div>
+            </div>
+            <div className="p-2 rounded-lg bg-purple-50 text-purple-500">
+              <UserCircleIcon className="h-6 w-6" />
+            </div>
+          </div>
+        </Card>
+        <Card className="p-4 border border-gray-100 transition-all duration-300 hover:shadow-md">
+          <div className="flex items-start justify-between">
+            <div>
+              <Typography variant="small" color="gray" className="mb-2">
+                Marketplace Items
+              </Typography>
+              <Typography variant="h4">
+                152
+              </Typography>
+              <div className="flex items-center mt-1">
+                <Typography variant="small" color="teal" className="font-medium">
+                  +7%
+                </Typography>
+                <Typography variant="small" color="gray" className="ml-1">
+                  vs. last month
+                </Typography>
+              </div>
+            </div>
+            <div className="p-2 rounded-lg bg-amber-50 text-amber-500">
+              <ShoppingBagIcon className="h-6 w-6" />
+            </div>
+          </div>
+        </Card>
+      </div>
+
+      {/* Quick Navigation Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <Card className="p-4 border border-gray-100 flex flex-col items-center text-center cursor-pointer hover:shadow-md transition-shadow"
+          onClick={() => navigate.push('/dashboard/users')}>
+          <div className="p-3 bg-blue-50 rounded-full mb-3">
+            <UsersIcon className="h-6 w-6 text-blue-500" />
+          </div>
+          <Typography variant="h6">User Management</Typography>
+          <Typography variant="small" color="gray" className="mt-1">
+            Manage user access and permissions
+          </Typography>
+        </Card>
+        <Card className="p-4 border border-gray-100 flex flex-col items-center text-center cursor-pointer hover:shadow-md transition-shadow"
+          onClick={() => navigate.push('/dashboard/projects')}>
+          <div className="p-3 bg-teal-50 rounded-full mb-3">
+            <DocumentTextIcon className="h-6 w-6 text-teal-500" />
+          </div>
+          <Typography variant="h6">Projects</Typography>
+          <Typography variant="small" color="gray" className="mt-1">
+            Track ongoing projects and tasks
+          </Typography>
+        </Card>
+        <Card className="p-4 border border-gray-100 flex flex-col items-center text-center cursor-pointer hover:shadow-md transition-shadow"
+          onClick={() => navigate.push('/dashboard/analytics')}>
+          <div className="p-3 bg-purple-50 rounded-full mb-3">
+            <ChartBarIcon className="h-6 w-6 text-purple-500" />
+          </div>
+          <Typography variant="h6">Analytics</Typography>
+          <Typography variant="small" color="gray" className="mt-1">
+            View detailed performance metrics
+          </Typography>
+        </Card>
+        <Card className="p-4 border border-gray-100 flex flex-col items-center text-center cursor-pointer hover:shadow-md transition-shadow"
+          onClick={() => navigate.push('/dashboard/marketplace')}>
+          <div className="p-3 bg-amber-50 rounded-full mb-3">
+            <ShoppingBagIcon className="h-6 w-6 text-amber-500" />
+          </div>
+          <Typography variant="h6">Marketplace</Typography>
+          <Typography variant="small" color="gray" className="mt-1">
+            Browse available services and add-ons
+          </Typography>
+        </Card>
+      </div>
+      {/* Report Generation Modal */}
+      <Dialog
+        open={isReportModalOpen}
+        handler={() => setIsReportModalOpen(false)}
+        size="md"
+      >
+        <DialogHeader>Generate Report</DialogHeader>
+        <DialogBody divider>
+          <div className="space-y-4">
+            <div>
+              <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                Report Type
+              </Typography>
+              <select className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:border-teal-500">
+                <option value="">Select report type</option>
+                <option value="performance">Performance Analysis</option>
+                <option value="financial">Financial Summary</option>
+                <option value="user">User Activity</option>
+                <option value="custom">Custom Report</option>
+              </select>
+            </div>
+            <div>
+              <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                Date Range
+              </Typography>
+              <div className="grid grid-cols-2 gap-4">
+                <Input type="date" label="Start Date" crossOrigin={undefined} />
+                <Input type="date" label="End Date" crossOrigin={undefined} />
+              </div>
+            </div>
+            <div>
+              <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                Format
+              </Typography>
+              <div className="flex gap-4">
+                <label className="flex items-center gap-2 cursor-pointer">
+                  <input type="radio" name="format" value="pdf" defaultChecked className="h-4 w-4" />
+                  <span>PDF</span>
+                </label>
+                <label className="flex items-center gap-2 cursor-pointer">
+                  <input type="radio" name="format" value="excel" className="h-4 w-4" />
+                  <span>Excel</span>
+                </label>
+                <label className="flex items-center gap-2 cursor-pointer">
+                  <input type="radio" name="format" value="csv" className="h-4 w-4" />
+                  <span>CSV</span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </DialogBody>
+        <DialogFooter>
+          <Button
+            variant="text"
+            color="red"
+            onClick={() => setIsReportModalOpen(false)}
+            className="mr-2"
+          >
+            Cancel
+          </Button>
+          <Button 
+            variant="gradient" 
+            color="teal"
+            onClick={() => {
+              setIsReportModalOpen(false);
+              showNotification("Report generation started! You'll be notified when it's ready.");
+            }}
+          >
+            Generate Report
+          </Button>
+        </DialogFooter>
+      </Dialog>
+      {/* Toast notification */}
+      {showToast.show && (
+        <Alert
+          open={showToast.show}
+          color={showToast.color as colors}
+          className="fixed top-20 right-4 z-50 max-w-md"
+          icon={<CheckCircleIcon className="h-6 w-6" />}
+          onClose={() => setShowToast({...showToast, show: false})}
+        >
+          {showToast.message}
+        </Alert>
+      )}
+    </div>
+  );
+}
+
+export default AdminDashboard;
\ No newline at end of file
diff --git a/src/components/Dashboard/AnalyticsDashboard.tsx b/src/components/Dashboard/AnalyticsDashboard.tsx
new file mode 100644
index 0000000..9441197
--- /dev/null
+++ b/src/components/Dashboard/AnalyticsDashboard.tsx
@@ -0,0 +1,538 @@
+'use client'
+
+import React, { useState } from 'react';
+import {
+  UsersIcon,
+  CreditCardIcon,
+  ChartBarIcon,
+  CheckCircleIcon,
+  ClipboardDocumentCheckIcon,
+  ArrowRightIcon,
+  DocumentTextIcon,
+  DocumentDuplicateIcon,
+} from '@heroicons/react/24/outline';
+import {
+  Card,
+  Typography,
+  Dialog,
+  DialogHeader,
+  DialogBody,
+  DialogFooter,
+  Tabs,
+  TabsHeader,
+  TabsBody,
+  Tab,
+  TabPanel,
+  Button,
+  Alert,
+} from "@material-tailwind/react";
+
+// Analytics Dashboard component for data visualization
+const Analytics: React.FC = () => {
+  const [activeTab, setActiveTab] = useState("daily");
+  const [showModal, setShowModal] = useState(false);
+  const [modalType, setModalType] = useState('');
+  const [showAlert, setShowAlert] = useState(false);
+  
+  // Sample data for analytics
+  const dailyData = [
+    { date: 'Mon', users: 120, revenue: 1250, tasks: 45 },
+    { date: 'Tue', users: 132, revenue: 1480, tasks: 52 },
+    { date: 'Wed', users: 101, revenue: 1120, tasks: 38 },
+    { date: 'Thu', users: 134, revenue: 1460, tasks: 57 },
+    { date: 'Fri', users: 150, revenue: 1700, tasks: 62 },
+    { date: 'Sat', users: 120, revenue: 1380, tasks: 48 },
+    { date: 'Sun', users: 95, revenue: 990, tasks: 36 }
+  ];
+  
+  const weeklyData = [
+    { date: 'Week 1', users: 820, revenue: 8450, tasks: 312 },
+    { date: 'Week 2', users: 932, revenue: 9280, tasks: 352 },
+    { date: 'Week 3', users: 901, revenue: 9020, tasks: 338 },
+    { date: 'Week 4', users: 934, revenue: 9660, tasks: 357 }
+  ];
+  
+  const monthlyData = [
+    { date: 'Jan', users: 3220, revenue: 34250, tasks: 1245 },
+    { date: 'Feb', users: 3932, revenue: 42280, tasks: 1352 },
+    { date: 'Mar', users: 3901, revenue: 41020, tasks: 1338 },
+    { date: 'Apr', users: 4134, revenue: 43660, tasks: 1457 },
+    { date: 'May', users: 4432, revenue: 46280, tasks: 1542 },
+    { date: 'Jun', users: 4401, revenue: 45020, tasks: 1498 }
+  ];
+  
+  const showSuccessAlert = () => {
+    setShowAlert(true);
+    setTimeout(() => setShowAlert(false), 3000);
+  };
+  
+  const openModal = (type: string) => {
+    setModalType(type);
+    setShowModal(true);
+  };
+  
+  return (
+    <div className="space-y-6">
+      {showAlert && (
+        <Alert
+          open={showAlert}
+          color="green"
+          className="fixed top-20 right-4 z-50 max-w-md"
+          icon={<CheckCircleIcon className="h-6 w-6" />}
+          onClose={() => setShowAlert(false)}
+        >
+          Report generated successfully! Check your email inbox.
+        </Alert>
+      )}
+      
+      {/* Header Card */}
+      <Card className="p-6 border border-gray-100 relative overflow-hidden">
+        <div className="relative z-10">
+          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+            <div>
+              <div className="inline-flex items-center px-3 py-1 rounded-full bg-purple-50 text-purple-500 mb-4">
+                <ChartBarIcon className="h-4 w-4 mr-2" />
+                <span className="text-sm font-medium">Analytics Dashboard</span>
+              </div>
+              <Typography variant="h3" color="blue-gray" className="mb-2">
+                Performance Metrics
+              </Typography>
+              <Typography color="gray">
+                Track your business performance with real-time analytics
+              </Typography>
+            </div>
+            <div className="flex gap-2">
+              <Button 
+                color="blue" 
+                className="flex items-center gap-2"
+                size="sm"
+                onClick={() => openModal('export')}
+              >
+                <DocumentDuplicateIcon className="h-4 w-4" /> 
+                Export Data
+              </Button>
+              <Button 
+                color="purple" 
+                className="flex items-center gap-2"
+                size="sm"
+                onClick={() => {
+                  showSuccessAlert();
+                }}
+              >
+                <DocumentTextIcon className="h-4 w-4" /> 
+                Generate Report
+              </Button>
+            </div>
+          </div>
+        </div>
+        {/* Decorative elements */}
+        <div className="absolute top-0 right-0 w-64 h-64 bg-purple-50 rounded-full blur-3xl opacity-50 -z-10"></div>
+        <div className="absolute bottom-0 left-0 w-64 h-64 bg-blue-50 rounded-full blur-3xl opacity-50 -z-10"></div>
+      </Card>
+      
+      {/* Analytics Time Period Tabs */}
+      <Card className="p-4 border border-gray-100">
+        <Tabs value={activeTab} className="w-full">
+          <TabsHeader>
+            <Tab value="daily" onClick={() => setActiveTab("daily")}>
+              Daily
+            </Tab>
+            <Tab value="weekly" onClick={() => setActiveTab("weekly")}>
+              Weekly
+            </Tab>
+            <Tab value="monthly" onClick={() => setActiveTab("monthly")}>
+              Monthly
+            </Tab>
+          </TabsHeader>
+          <TabsBody>
+            <TabPanel value="daily">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-5">
+                <Card className="p-4 border border-gray-100">
+                  <div className="flex items-center gap-4">
+                    <div className="rounded-full p-3 bg-blue-50">
+                      <UsersIcon className="h-6 w-6 text-blue-500" />
+                    </div>
+                    <div>
+                      <Typography variant="small" color="gray">Daily Users</Typography>
+                      <Typography variant="h4">{dailyData.reduce((sum, item) => sum + item.users, 0) / dailyData.length}</Typography>
+                      <Typography variant="small" color="green">+5.2% vs last week</Typography>
+                    </div>
+                  </div>
+                </Card>
+                <Card className="p-4 border border-gray-100">
+                  <div className="flex items-center gap-4">
+                    <div className="rounded-full p-3 bg-green-50">
+                      <CreditCardIcon className="h-6 w-6 text-green-500" />
+                    </div>
+                    <div>
+                      <Typography variant="small" color="gray">Daily Revenue</Typography>
+                      <Typography variant="h4">${dailyData.reduce((sum, item) => sum + item.revenue, 0) / dailyData.length}</Typography>
+                      <Typography variant="small" color="green">+8.4% vs last week</Typography>
+                    </div>
+                  </div>
+                </Card>
+                <Card className="p-4 border border-gray-100">
+                  <div className="flex items-center gap-4">
+                    <div className="rounded-full p-3 bg-amber-50">
+                      <ClipboardDocumentCheckIcon className="h-6 w-6 text-amber-500" />
+                    </div>
+                    <div>
+                      <Typography variant="small" color="gray">Tasks Completed</Typography>
+                      <Typography variant="h4">{dailyData.reduce((sum, item) => sum + item.tasks, 0) / dailyData.length}</Typography>
+                      <Typography variant="small" color="green">+3.8% vs last week</Typography>
+                    </div>
+                  </div>
+                </Card>
+              </div>
+              
+              {/* Chart Placeholder */}
+              <Card className="border border-gray-100 p-4 h-80 flex items-center justify-center bg-gray-50">
+                <div className="text-center">
+                  <ChartBarIcon className="h-12 w-12 text-gray-400 mx-auto mb-3" />
+                  <Typography variant="h6" color="gray">Daily Performance Chart</Typography>
+                  <Typography variant="small" color="gray">
+                    Shows user activity, revenue, and task completion for the past 7 days
+                  </Typography>
+                  <Button 
+                    variant="text" 
+                    color="blue" 
+                    className="mt-3"
+                    onClick={() => openModal('chart')}
+                  >
+                    View Detailed Chart
+                  </Button>
+                </div>
+              </Card>
+            </TabPanel>
+            
+            <TabPanel value="weekly">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-5">
+                <Card className="p-4 border border-gray-100">
+                  <div className="flex items-center gap-4">
+                    <div className="rounded-full p-3 bg-blue-50">
+                      <UsersIcon className="h-6 w-6 text-blue-500" />
+                    </div>
+                    <div>
+                      <Typography variant="small" color="gray">Weekly Users</Typography>
+                      <Typography variant="h4">{weeklyData.reduce((sum, item) => sum + item.users, 0) / weeklyData.length}</Typography>
+                      <Typography variant="small" color="green">+12.1% vs last month</Typography>
+                    </div>
+                  </div>
+                </Card>
+                <Card className="p-4 border border-gray-100">
+                  <div className="flex items-center gap-4">
+                    <div className="rounded-full p-3 bg-green-50">
+                      <CreditCardIcon className="h-6 w-6 text-green-500" />
+                    </div>
+                    <div>
+                      <Typography variant="small" color="gray">Weekly Revenue</Typography>
+                      <Typography variant="h4">${weeklyData.reduce((sum, item) => sum + item.revenue, 0) / weeklyData.length}</Typography>
+                      <Typography variant="small" color="green">+15.4% vs last month</Typography>
+                    </div>
+                  </div>
+                </Card>
+                <Card className="p-4 border border-gray-100">
+                  <div className="flex items-center gap-4">
+                    <div className="rounded-full p-3 bg-amber-50">
+                      <ClipboardDocumentCheckIcon className="h-6 w-6 text-amber-500" />
+                    </div>
+                    <div>
+                      <Typography variant="small" color="gray">Tasks Completed</Typography>
+                      <Typography variant="h4">{weeklyData.reduce((sum, item) => sum + item.tasks, 0) / weeklyData.length}</Typography>
+                      <Typography variant="small" color="green">+9.7% vs last month</Typography>
+                    </div>
+                  </div>
+                </Card>
+              </div>
+              
+              {/* Chart Placeholder */}
+              <Card className="border border-gray-100 p-4 h-80 flex items-center justify-center bg-gray-50">
+                <div className="text-center">
+                  <ChartBarIcon className="h-12 w-12 text-gray-400 mx-auto mb-3" />
+                  <Typography variant="h6" color="gray">Weekly Performance Chart</Typography>
+                  <Typography variant="small" color="gray">
+                    Shows user activity, revenue, and task completion for the past 4 weeks
+                  </Typography>
+                  <Button 
+                    variant="text" 
+                    color="blue" 
+                    className="mt-3"
+                    onClick={() => openModal('chart')}
+                  >
+                    View Detailed Chart
+                  </Button>
+                </div>
+              </Card>
+            </TabPanel>
+            <TabPanel value="monthly">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-5">
+                <Card className="p-4 border border-gray-100">
+                  <div className="flex items-center gap-4">
+                    <div className="rounded-full p-3 bg-blue-50">
+                      <UsersIcon className="h-6 w-6 text-blue-500" />
+                    </div>
+                    <div>
+                      <Typography variant="small" color="gray">Monthly Users</Typography>
+                      <Typography variant="h4">{monthlyData.reduce((sum, item) => sum + item.users, 0) / monthlyData.length}</Typography>
+                      <Typography variant="small" color="green">+18.3% vs last quarter</Typography>
+                    </div>
+                  </div>
+                </Card>
+                <Card className="p-4 border border-gray-100">
+                  <div className="flex items-center gap-4">
+                    <div className="rounded-full p-3 bg-green-50">
+                      <CreditCardIcon className="h-6 w-6 text-green-500" />
+                    </div>
+                    <div>
+                      <Typography variant="small" color="gray">Monthly Revenue</Typography>
+                      <Typography variant="h4">${monthlyData.reduce((sum, item) => sum + item.revenue, 0) / monthlyData.length}</Typography>
+                      <Typography variant="small" color="green">+21.7% vs last quarter</Typography>
+                    </div>
+                  </div>
+                </Card>
+                <Card className="p-4 border border-gray-100">
+                  <div className="flex items-center gap-4">
+                    <div className="rounded-full p-3 bg-amber-50">
+                      <ClipboardDocumentCheckIcon className="h-6 w-6 text-amber-500" />
+                    </div>
+                    <div>
+                      <Typography variant="small" color="gray">Tasks Completed</Typography>
+                      <Typography variant="h4">{monthlyData.reduce((sum, item) => sum + item.tasks, 0) / monthlyData.length}</Typography>
+                      <Typography variant="small" color="green">+14.2% vs last quarter</Typography>
+                    </div>
+                  </div>
+                </Card>
+              </div>
+{/* Chart Placeholder */}
+<Card className="border border-gray-100 p-4 h-80 flex items-center justify-center bg-gray-50">
+                <div className="text-center">
+                  <ChartBarIcon className="h-12 w-12 text-gray-400 mx-auto mb-3" />
+                  <Typography variant="h6" color="gray">Monthly Performance Chart</Typography>
+                  <Typography variant="small" color="gray">
+                    Shows user activity, revenue, and task completion for the past 6 months
+                  </Typography>
+                  <Button 
+                    variant="text" 
+                    color="blue" 
+                    className="mt-3"
+                    onClick={() => openModal('chart')}
+                  >
+                    View Detailed Chart
+                  </Button>
+                </div>
+              </Card>
+            </TabPanel>
+          </TabsBody>
+        </Tabs>
+      </Card>
+      
+      {/* Recent Activity */}
+      <Card className="p-6 border border-gray-100">
+        <Typography variant="h5" color="blue-gray" className="mb-4">
+          Recent Activity
+        </Typography>
+        <div className="space-y-4">
+          <div className="flex items-start gap-4 p-3 border border-gray-100 rounded-lg">
+            <div className="rounded-full p-2 bg-purple-50">
+              <UsersIcon className="h-5 w-5 text-purple-500" />
+            </div>
+            <div>
+              <Typography variant="small" className="font-medium">New user registration</Typography>
+              <Typography variant="small" color="gray">User "john.smith@example.com" has registered</Typography>
+              <Typography variant="small" color="gray">2 hours ago</Typography>
+            </div>
+          </div>
+          
+          <div className="flex items-start gap-4 p-3 border border-gray-100 rounded-lg">
+            <div className="rounded-full p-2 bg-green-50">
+              <CreditCardIcon className="h-5 w-5 text-green-500" />
+            </div>
+            <div>
+              <Typography variant="small" className="font-medium">New subscription</Typography>
+              <Typography variant="small" color="gray">User "acme-corp" purchased Enterprise plan</Typography>
+              <Typography variant="small" color="gray">4 hours ago</Typography>
+            </div>
+          </div>
+          
+          <div className="flex items-start gap-4 p-3 border border-gray-100 rounded-lg">
+            <div className="rounded-full p-2 bg-blue-50">
+              <ChartBarIcon className="h-5 w-5 text-blue-500" />
+            </div>
+            <div>
+              <Typography variant="small" className="font-medium">Analytics report generated</Typography>
+              <Typography variant="small" color="gray">Monthly report for February 2025 is ready</Typography>
+              <Typography variant="small" color="gray">8 hours ago</Typography>
+            </div>
+          </div>
+        </div>
+        
+        <Button 
+          variant="text" 
+          color="blue" 
+          className="mt-4 flex items-center gap-1"
+          onClick={() => openModal('activity')}
+        >
+          View All Activity <ArrowRightIcon className="h-3 w-3" />
+        </Button>
+      </Card>
+      
+      {/* Modals */}
+      <Dialog
+        open={showModal}
+        handler={() => setShowModal(false)}
+        size="md"
+      >
+        <DialogHeader>
+          {modalType === 'export' && 'Export Data'}
+          {modalType === 'chart' && 'Detailed Analytics Chart'}
+          {modalType === 'activity' && 'All Activity Log'}
+        </DialogHeader>
+        <DialogBody divider>
+          {modalType === 'export' && (
+            <div className="space-y-4">
+              <div>
+                <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                  Select Data Range
+                </Typography>
+                <select className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500">
+                  <option value="daily">Daily (Last 7 Days)</option>
+                  <option value="weekly">Weekly (Last 4 Weeks)</option>
+                  <option value="monthly">Monthly (Last 6 Months)</option>
+                  <option value="custom">Custom Range</option>
+                </select>
+              </div>
+              
+              <div>
+                <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                  Data Format
+                </Typography>
+                <div className="flex gap-4">
+                  <label className="flex items-center gap-2 cursor-pointer">
+                    <input type="radio" name="format" value="csv" defaultChecked className="h-4 w-4" />
+                    <span>CSV</span>
+                  </label>
+                  <label className="flex items-center gap-2 cursor-pointer">
+                    <input type="radio" name="format" value="excel" className="h-4 w-4" />
+                    <span>Excel</span>
+                  </label>
+                  <label className="flex items-center gap-2 cursor-pointer">
+                    <input type="radio" name="format" value="pdf" className="h-4 w-4" />
+                    <span>PDF</span>
+                  </label>
+                </div>
+              </div>
+              
+              <div>
+                <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                  Include Metrics
+                </Typography>
+                <div className="grid grid-cols-2 gap-2">
+                  <label className="flex items-center gap-2 cursor-pointer">
+                    <input type="checkbox" defaultChecked className="h-4 w-4" />
+                    <span>User Statistics</span>
+                  </label>
+                  <label className="flex items-center gap-2 cursor-pointer">
+                    <input type="checkbox" defaultChecked className="h-4 w-4" />
+                    <span>Revenue Data</span>
+                  </label>
+                  <label className="flex items-center gap-2 cursor-pointer">
+                    <input type="checkbox" defaultChecked className="h-4 w-4" />
+                    <span>Task Completion</span>
+                  </label>
+                  <label className="flex items-center gap-2 cursor-pointer">
+                    <input type="checkbox" defaultChecked className="h-4 w-4" />
+                    <span>Activity Log</span>
+                  </label>
+                </div>
+              </div>
+            </div>
+          )}
+          
+          {modalType === 'chart' && (
+            <div className="space-y-4">
+              <div className="aspect-video bg-gray-100 rounded-lg p-6 flex items-center justify-center">
+                <div className="text-center">
+                  <ChartBarIcon className="h-16 w-16 text-gray-400 mx-auto mb-3" />
+                  <Typography variant="h6" color="gray">Interactive Chart Visualization</Typography>
+                  <Typography variant="small" color="gray" className="max-w-sm mx-auto">
+                    In a production environment, this would display an interactive chart showing detailed analytics data based on the selected time period
+                  </Typography>
+                </div>
+              </div>
+              
+              <div className="grid grid-cols-3 gap-4">
+                <div className="p-3 border border-gray-200 rounded-lg">
+                  <Typography variant="small" color="gray">Total Users</Typography>
+                  <Typography variant="h6" className="font-bold">24,892</Typography>
+                  <Typography variant="small" color="green">+12.3%</Typography>
+                </div>
+                
+                <div className="p-3 border border-gray-200 rounded-lg">
+                  <Typography variant="small" color="gray">Revenue</Typography>
+                  <Typography variant="h6" className="font-bold">$198,453</Typography>
+                  <Typography variant="small" color="green">+15.7%</Typography>
+                </div>
+                
+                <div className="p-3 border border-gray-200 rounded-lg">
+                  <Typography variant="small" color="gray">Avg. Conversion</Typography>
+                  <Typography variant="h6" className="font-bold">3.8%</Typography>
+                  <Typography variant="small" color="green">+0.5%</Typography>
+                </div>
+              </div>
+            </div>
+          )}
+          
+          {modalType === 'activity' && (
+            <div className="space-y-4 max-h-96 overflow-y-auto">
+              {Array.from({ length: 10 }).map((_, index) => (
+                <div key={index} className="flex items-start gap-4 p-3 border border-gray-100 rounded-lg">
+                  <div className="rounded-full p-2 bg-blue-50">
+                    {index % 3 === 0 && <UsersIcon className="h-5 w-5 text-blue-500" />}
+                    {index % 3 === 1 && <CreditCardIcon className="h-5 w-5 text-green-500" />}
+                    {index % 3 === 2 && <ChartBarIcon className="h-5 w-5 text-purple-500" />}
+                  </div>
+                  <div>
+                    <Typography variant="small" className="font-medium">
+                      {index % 3 === 0 && 'User Activity'}
+                      {index % 3 === 1 && 'Billing Event'}
+                      {index % 3 === 2 && 'System Event'}
+                    </Typography>
+                    <Typography variant="small" color="gray">
+                      {index % 3 === 0 && `User "${['john', 'mary', 'alex', 'sarah', 'mike'][index % 5]}@example.com" performed an action`}
+                      {index % 3 === 1 && 'Subscription plan change or payment processed'}
+                      {index % 3 === 2 && 'System maintenance or report generation'}
+                    </Typography>
+                    <Typography variant="small" color="gray">{index + 1} hour{index !== 0 ? 's' : ''} ago</Typography>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </DialogBody>
+        <DialogFooter>
+          <Button
+            variant="text"
+            color="red"
+            onClick={() => setShowModal(false)}
+            className="mr-2"
+          >
+            Cancel
+          </Button>
+          <Button 
+            color={modalType === 'export' ? 'blue' : 'gray'}
+            onClick={() => {
+              setShowModal(false);
+              if (modalType === 'export') {
+                showSuccessAlert();
+              }
+            }}
+          >
+            {modalType === 'export' ? 'Export Data' : 'Close'}
+          </Button>
+        </DialogFooter>
+      </Dialog>
+    </div>
+  );
+};
+
+export default Analytics;
\ No newline at end of file
diff --git a/src/components/Dashboard/AppContext.tsx b/src/components/Dashboard/AppContext.tsx
new file mode 100644
index 0000000..09e5110
--- /dev/null
+++ b/src/components/Dashboard/AppContext.tsx
@@ -0,0 +1,172 @@
+'use client'
+
+import React, { useState } from 'react';
+import axios from 'axios';
+import { API_URL } from '@/utils/axiosConfig'
+import { useRouter } from 'next/navigation';
+
+type Role = 'USER' | 'ADMIN';
+
+export const AuthContext = React.createContext<{
+  isAuthenticated: boolean;
+  accessToken: string | null;
+  role: Role;
+  login: (email: string, password: string) => Promise<string>;
+  register: (email: string, passsword: string, firstName?: string, lastName?: string, nickname?: string) => Promise<string>;
+  logout: () => void;
+  accessTokenLogin: (accessToken: string) => Promise<boolean>;
+}>({
+  isAuthenticated: false,
+  accessToken: null,
+  role: 'USER',
+  login: async () => '',
+  register: async () => '',
+  logout: () => {},
+  accessTokenLogin: async () => false
+});
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [accessToken, setAccessToken] = useState<string | null>(null);
+  const [role, setRole] = useState('USER' as Role);
+
+  const login = async (email: string, password: string) => {
+    // Remove once backend API is released
+    if (email === 'test@test.com' && password === 'test123') {
+      setRole("ADMIN");
+      setIsAuthenticated(true);
+      return 'OK';
+    }
+    // Reduce backend calls by validating fields first
+    if(
+      !/^[\w-.]{1,64}@([\w-]{1,63}\.)+[\w-]{2,63}$/.test(email) || 
+      password.length < 8 || !/[A-Z]/.test(password) || !/[a-z]/.test(password) ||
+      !/[0-9]/.test(password) || !/[!@#$%^&*()_+\-=[\]{}|;:,.<>?]/.test(password) ||
+      /["\\]/.test(email.concat(password))
+    ) return 'Invalid credentials';
+    // Call backend API
+    let response = '';
+    const params = new URLSearchParams();
+    params.append('username', email);
+    params.append('password', password);
+    await axios.post(`${API_URL}/auth/login`, params).then(res => {
+      try {
+        // Decode jwt token into json
+        const json = JSON.parse(decodeURIComponent(window.atob(res.data.access_token.split('.')[1].replace(/-/g, '+').replace(/_/g, '/')).split('').map(function(c) {
+          return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+        }).join('')));
+        // Set cookie for 15 minutes(same time access token lasts)
+        const d = new Date();
+        d.setTime(d.getTime() + (15*60*1000));
+        document.cookie = "accessToken=" + res.data.access_token + ";" + "expires="+ d.toUTCString() + ";path=/";
+        // Authenticate 
+        setAccessToken(res.data.access_token);
+        setRole(json.role);
+        setIsAuthenticated(true);
+        response = 'OK';
+      } catch {
+        response = 'Invalid credentials';
+      }
+    }).catch (err => {
+      if (err.response && err.response.data && err.response.data.detail) {
+        response = 'Invalid credentials';
+      } else {
+        response = 'Failed to contact server. Please try again later.';
+      }
+    });
+    return response;
+  };
+
+  const register = async (email: string, password: string, firstName?: string, lastName?: string, nickname?: string) => {
+    // Reduce backend calls by validating fields first
+    if(!/^[\w-.]{1,64}@([\w-]{1,63}\.)+[\w-]{2,63}$/.test(email)) return 'Invalid email';
+    else if(nickname && !/^[a-zA-Z0-9]*$/.test(nickname)) return 'Nickname may not include special characters';
+    else if(password.length < 8) return 'Password must be at least 8 characters';
+    else if(!/[A-Z]/.test(password)) return 'Password must contain at least 1 uppercase character';
+    else if(!/[a-z]/.test(password)) return 'Password must contain at least 1 lowercase character';
+    else if(!/[0-9]/.test(password)) return 'Password must contain at least 1 number';
+    else if(!/[!@#$%^&*()_+\-=[\]{}|;:,.<>?]/.test(password)) return 'Password must contain at least 1 special character';
+    else if (firstName && firstName.length > 100) return 'First name must not be more than 100 characters';
+    else if (lastName && lastName.length > 100) return 'Last name must not be more than 100 characters';
+    else if (nickname && nickname.length > 50) return 'Nickname must not be more than 50 characters';
+    // Prevent sql injection by invalidating " and \
+    else if (/["\\]/.test(email.concat(
+      firstName ? firstName : '',
+      lastName ? lastName : '',
+      nickname ? nickname : '',
+      password
+    ))) return 'Invalid character " or \\ used';
+    // Call backend API
+    let response = '';
+    const params: {email: string, password: string, first_name?: string, last_name?: string, nickname?: string} = {
+      "email": email,
+      "password": password
+    }
+    if (firstName) params["first_name"] = firstName;
+    if (lastName) params["last_name"] = lastName;
+    if (nickname) params["nickname"] = nickname
+    await axios.post(`${API_URL}/auth/register`, params).then(() => {
+      response = 'OK';
+    }).catch(err => {
+      if (err.response && err.response.data && err.response.data.detail) {
+        if (/User with email [\w-.]{1,64}@([\w-]{1,63}\.)+[\w-]{2,63} already exists/.test(err.response.data.detail)) {
+          response = 'Email already taken';
+        } else if (err.response.data.detail === 'Not Found') {
+          response = 'The server has encountered an error. Please try again later.';
+        } else if (/Key \(nickname\)=\([a-zA-Z0-9]+\) already exists/.test(err.response.data.detail)) {
+          response = 'Nickname already taken';
+        } else {
+          response = 'An unknown error encountered. Please try again later.';
+        }
+      } else {
+        response = 'Failed to contact server. Please try again later.';
+      }
+    });
+    return response;
+  };
+
+  const logout = () => {
+    document.cookie = "accessToken=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
+    setAccessToken(null);
+    setIsAuthenticated(false);
+    setRole('USER');
+  };
+
+  const accessTokenLogin = async (token: string) => {
+    let success = false;
+    await axios.get(`${API_URL}/auth/auth`, {
+      headers: {'Authorization': `Bearer ${token}`},
+    }).then(res => {
+      try {
+        if (res.status === 200 && res.data.username.role) {
+          setAccessToken(token);
+          setRole(res.data.username.role);
+          setIsAuthenticated(true);
+          success = true;
+        };
+      } catch {
+        setAccessToken(null);
+        setRole("USER");
+        setIsAuthenticated(false);
+        success = false;
+      }
+    }).catch(() => {success = false});
+    return success;
+  }
+  
+  return (
+    <AuthContext.Provider value={{ isAuthenticated, accessToken, role, login, register, logout, accessTokenLogin }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function PrivateRoute({ children }: { children: React.ReactNode }) {
+  const { isAuthenticated } = React.useContext(AuthContext);
+  const navigate = useRouter();
+  if (isAuthenticated) {
+    return (<>{children}</>);
+  } else {
+    navigate.push("/login")
+  };
+}
\ No newline at end of file
diff --git a/src/components/Dashboard/KnowledgeGraph.tsx b/src/components/Dashboard/KnowledgeGraph.tsx
new file mode 100644
index 0000000..a5c13b3
--- /dev/null
+++ b/src/components/Dashboard/KnowledgeGraph.tsx
@@ -0,0 +1,433 @@
+'use client'
+
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useState, useEffect } from 'react';
+
+interface PositionedNode {
+  x: number;
+  y: number;
+  id: number;
+  label: string;
+  type: string;
+  desc: string;
+}
+
+// Graph node types and their colors
+const NODE_TYPES: {[label: string] : {label: string, color: string}} = {
+  "CONCEPT": { label: 'Concept', color: 'teal' },
+  "ENTITY": { label: 'Entity', color: 'blue' },
+  "PERSON": { label: 'Person', color: 'purple' },
+  "DOCUMENT": { label: 'Document', color: 'amber' },
+  "PROCESS": { label: 'Process', color: 'green' }
+};
+
+// Sample knowledge graph data
+const sampleGraphData = {
+  nodes: [
+    { id: 1, label: 'Machine Learning', type: 'CONCEPT', desc: 'Field of AI focused on creating systems that learn from data' },
+    { id: 2, label: 'Neural Networks', type: 'CONCEPT', desc: 'Computing systems inspired by biological neural networks' },
+    { id: 3, label: 'Data Analysis', type: 'PROCESS', desc: 'Process of inspecting and modeling data' },
+    { id: 4, label: 'Python', type: 'ENTITY', desc: 'Programming language commonly used in AI' },
+    { id: 5, label: 'TensorFlow', type: 'ENTITY', desc: 'Open-source machine learning framework' },
+    { id: 6, label: 'Deep Learning', type: 'CONCEPT', desc: 'Subset of ML using multi-layered neural networks' },
+    { id: 7, label: 'Andrew Ng', type: 'PERSON', desc: 'Computer scientist and AI researcher' },
+    { id: 8, label: 'Supervised Learning', type: 'CONCEPT', desc: 'Training with labeled data' },
+    { id: 9, label: 'AI Ethics', type: 'CONCEPT', desc: 'Ethical considerations in AI development' },
+    { id: 10, label: 'ML Research Paper', type: 'DOCUMENT', desc: 'Academic document on ML advancements' }
+  ],
+  edges: [
+    { source: 1, target: 2, label: 'includes' },
+    { source: 1, target: 3, label: 'requires' },
+    { source: 1, target: 8, label: 'contains' },
+    { source: 2, target: 6, label: 'enables' },
+    { source: 4, target: 3, label: 'used for' },
+    { source: 4, target: 5, label: 'supports' },
+    { source: 5, target: 2, label: 'implements' },
+    { source: 6, target: 9, label: 'raises' },
+    { source: 7, target: 1, label: 'researches' },
+    { source: 7, target: 10, label: 'authored' },
+    { source: 10, target: 1, label: 'about' },
+    { source: 8, target: 3, label: 'type of' }
+  ]
+};
+
+const KnowledgeGraph = () => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [graphData, setGraphData] = useState(sampleGraphData);
+  const [searchText, setSearchText] = useState('');
+  const [selectedNode, setSelectedNode] = useState<PositionedNode | null>(null);
+  const [zoom, setZoom] = useState(100);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [showNodeInfo, setShowNodeInfo] = useState(false);
+  const [filteredNodes, setFilteredNodes] = useState<PositionedNode[]>([]);
+  const [activeFilter, setActiveFilter] = useState<string | null>(null);
+
+  // Calculate positions for nodes (simple circular layout)
+  const calculateNodePositions = () => {
+    const centerX = 300;
+    const centerY = 200;
+    const radius = 150;
+    const nodes = graphData.nodes.map((node, index) => {
+      const angle = (index / graphData.nodes.length) * 2 * Math.PI;
+      const x = centerX + radius * Math.cos(angle);
+      const y = centerY + radius * Math.sin(angle);
+      return { ...node, x, y };
+    });
+    return nodes;
+  };
+
+  const positionedNodes = calculateNodePositions();
+
+  // Filter nodes based on search or type filter
+  useEffect(() => {
+    let filtered = positionedNodes;
+    
+    if (searchText) {
+      filtered = filtered.filter(node => 
+        node.label.toLowerCase().includes(searchText.toLowerCase()) ||
+        node.desc.toLowerCase().includes(searchText.toLowerCase())
+      );
+    }
+    
+    if (activeFilter) {
+      filtered = filtered.filter(node => node.type === activeFilter);
+    }
+    
+    setFilteredNodes(filtered);
+  }, [searchText, activeFilter, graphData]);
+
+  // Reset to initial state when no filters are active
+  useEffect(() => {
+    if (!searchText && !activeFilter) {
+      setFilteredNodes(positionedNodes);
+    }
+  }, [searchText, activeFilter]);
+
+  // Set initial nodes on component mount
+  useEffect(() => {
+    setFilteredNodes(positionedNodes);
+  }, []);
+
+  const handleNodeClick = (node: PositionedNode) => {
+    setSelectedNode(node);
+    setShowNodeInfo(true);
+  };
+
+  const handleZoomIn = () => {
+    setZoom(prev => Math.min(prev + 20, 200));
+  };
+
+  const handleZoomOut = () => {
+    setZoom(prev => Math.max(prev - 20, 40));
+  };
+
+  const handleResetView = () => {
+    setZoom(100);
+    setSearchText('');
+    setActiveFilter(null);
+    setSelectedNode(null);
+    setShowNodeInfo(false);
+  };
+
+  const toggleFullscreen = () => {
+    setIsFullscreen(!isFullscreen);
+  };
+
+  const handleFilterByType = (type: string) => {
+    if (activeFilter === type) {
+      setActiveFilter(null);
+    } else {
+      setActiveFilter(type);
+    }
+  };
+
+  // Get color for nodes based on type
+  const getNodeColors = (type: string) => {
+    const colorMap: {[color: string] : {bg: string, border: string, text: string}} = {
+      'teal': { bg: 'bg-teal-100', border: 'border-teal-500', text: 'text-teal-600' },
+      'blue': { bg: 'bg-blue-100', border: 'border-blue-500', text: 'text-blue-600' },
+      'purple': { bg: 'bg-purple-100', border: 'border-purple-500', text: 'text-purple-600' },
+      'amber': { bg: 'bg-amber-100', border: 'border-amber-500', text: 'text-amber-600' },
+      'green': { bg: 'bg-green-100', border: 'border-green-500', text: 'text-green-600' },
+      'gray': { bg: 'bg-gray-100', border: 'border-gray-500', text: 'text-gray-600' }
+    };
+
+    const nodeColor = NODE_TYPES[type]?.color || 'gray';
+    return colorMap[nodeColor];
+  };
+
+  // Generate a simple SVG visualization of the knowledge graph
+  return (
+    <div className={`relative border border-gray-100 overflow-hidden transition-all rounded-xl bg-white ${isFullscreen ? 'fixed inset-0 z-50 h-screen w-screen' : 'h-full'}`}>
+      {/* Header */}
+      <div className="flex items-center justify-between bg-white px-4 py-3 border-b border-gray-100">
+        <h5 className="text-lg font-medium text-gray-800">
+          Knowledge Graph
+        </h5>
+        <div className="flex gap-2">
+          <button 
+            onClick={toggleFullscreen}
+            className="p-1 rounded-md text-gray-600 hover:bg-gray-100"
+          >
+            {isFullscreen ? (
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5M15 15l5.25 5.25" />
+              </svg>
+            ) : (
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
+              </svg>
+            )}
+          </button>
+        </div>
+      </div>
+
+      <div className="p-4">
+        <div className="flex flex-wrap gap-2 mb-4">
+          <div className="flex-grow">
+            {/* Search input */}
+            <div className="relative">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4 text-gray-400">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+                </svg>
+              </div>
+              <input
+                type="text"
+                className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-teal-500 focus:border-teal-500"
+                placeholder="Search nodes"
+                value={searchText}
+                onChange={(e) => setSearchText(e.target.value)}
+              />
+            </div>
+          </div>
+          
+          <div className="flex gap-2 items-center">
+            {/* Zoom controls */}
+            <button 
+              onClick={handleZoomOut}
+              className="p-1 border border-gray-300 rounded-md hover:bg-gray-50"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M5 12h14" />
+              </svg>
+            </button>
+            <span className="w-12 text-center text-sm">
+              {zoom}%
+            </span>
+            <button 
+              onClick={handleZoomIn}
+              className="p-1 border border-gray-300 rounded-md hover:bg-gray-50"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+              </svg>
+            </button>
+            <button 
+              onClick={handleResetView}
+              className="p-1 border border-gray-300 rounded-md hover:bg-gray-50"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        {/* Type filters */}
+        <div className="flex gap-2 mb-4 overflow-x-auto py-1">
+          {Object.entries(NODE_TYPES).map(([key, { label, color }]) => {
+            const colors = getNodeColors(color);
+            return (
+              <button 
+                key={key}
+                onClick={() => handleFilterByType(key)}
+                className={`px-3 py-1 rounded-full text-sm font-medium border ${
+                  activeFilter === key 
+                    ? `${colors.bg} ${colors.border} ${colors.text}` 
+                    : 'border-gray-300 text-gray-700 hover:bg-gray-50'
+                }`}
+              >
+                {label}
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Graph visualization */}
+        <div className="relative border rounded-xl overflow-hidden bg-gray-50 p-2" style={{ height: isFullscreen ? 'calc(100vh - 220px)' : '400px' }}>
+          <svg 
+            width="100%" 
+            height="100%" 
+            viewBox="0 0 600 400" 
+            preserveAspectRatio="xMidYMid meet"
+            style={{ 
+              transform: `scale(${zoom/100})`,
+              transformOrigin: 'center',
+              transition: 'transform 0.3s ease'
+            }}
+          >
+            {/* Draw edges */}
+            {graphData.edges.map((edge) => {
+              const sourceNode = positionedNodes.find(n => n.id === edge.source);
+              const targetNode = positionedNodes.find(n => n.id === edge.target);
+              
+              // Skip edges for filtered-out nodes
+              if (!filteredNodes.some(n => n.id === edge.source) || 
+                  !filteredNodes.some(n => n.id === edge.target)) {
+                return null;
+              }
+              
+              if (sourceNode && targetNode) {
+                // Calculate midpoint for label
+                const midX = (sourceNode.x + targetNode.x) / 2;
+                const midY = (sourceNode.y + targetNode.y) / 2;
+                
+                return (
+                  <g key={`${edge.source}-${edge.target}`}>
+                    <line
+                      x1={sourceNode.x}
+                      y1={sourceNode.y}
+                      x2={targetNode.x}
+                      y2={targetNode.y}
+                      stroke="#94a3b8"
+                      strokeWidth="1.5"
+                      strokeDasharray="5,5"
+                    />
+                    {/* Edge label */}
+                    <text
+                      x={midX}
+                      y={midY}
+                      fontSize="10"
+                      fill="#64748b"
+                      textAnchor="middle"
+                      dominantBaseline="middle"
+                      className="select-none"
+                    >
+                      <tspan dy="-0.5em" className="bg-white px-1">{edge.label}</tspan>
+                    </text>
+                  </g>
+                );
+              }
+              return null;
+            })}
+            
+            {/* Draw nodes */}
+            {filteredNodes.map((node) => {
+              const nodeColor = NODE_TYPES[node.type]?.color || 'gray';
+              const isSelected = selectedNode && selectedNode.id === node.id;
+              
+              const fillColor = {
+                'teal': '#99f6e4',
+                'blue': '#bae6fd',
+                'purple': '#ddd6fe',
+                'amber': '#fef3c7',
+                'green': '#bbf7d0',
+                'gray': '#e5e7eb'
+              }[nodeColor];
+              
+              const strokeColor = {
+                'teal': '#14b8a6',
+                'blue': '#0ea5e9',
+                'purple': '#a855f7',
+                'amber': '#f59e0b',
+                'green': '#22c55e',
+                'gray': '#9ca3af'
+              }[nodeColor];
+              
+              return (
+                <g 
+                  key={node.id} 
+                  onClick={() => handleNodeClick(node)}
+                  style={{ cursor: 'pointer' }}
+                >
+                  <circle
+                    cx={node.x}
+                    cy={node.y}
+                    r={isSelected ? 25 : 20}
+                    fill={fillColor}
+                    stroke={strokeColor}
+                    strokeWidth={isSelected ? 3 : 2}
+                    className="transition-all duration-200"
+                  />
+                  <text
+                    x={node.x}
+                    y={node.y}
+                    fontSize="11"
+                    fontWeight={isSelected ? "bold" : "normal"}
+                    fill="#334155"
+                    textAnchor="middle"
+                    dominantBaseline="middle"
+                    className="select-none pointer-events-none"
+                  >
+                    {node.label.length > 12 ? node.label.substring(0, 10) + '...' : node.label}
+                  </text>
+                </g>
+              );
+            })}
+          </svg>
+        </div>
+        
+        {/* Node info panel */}
+        {showNodeInfo && selectedNode && (
+          <div className="absolute bottom-4 right-4 bg-white rounded-lg shadow-lg border border-gray-200 p-4 w-64">
+            <div className="flex justify-between items-start mb-2">
+              <h6 className="text-base font-medium text-gray-800">
+                {selectedNode.label}
+              </h6>
+              <button 
+                onClick={() => setShowNodeInfo(false)}
+                className="text-gray-500 hover:text-gray-700"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="w-4 h-4">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <div className="mb-2">
+              {selectedNode.type && (
+                <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getNodeColors(NODE_TYPES[selectedNode.type]?.color || 'gray').bg} ${getNodeColors(NODE_TYPES[selectedNode.type]?.color || 'gray').text}`}>
+                  {NODE_TYPES[selectedNode.type]?.label || 'Unknown'}
+                </span>
+              )}
+            </div>
+            <p className="text-sm text-gray-600">
+              {selectedNode.desc}
+            </p>
+            <div className="mt-3">
+              <button className="text-sm flex items-center gap-1 text-blue-600 hover:text-blue-800">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+                </svg>
+                View Details
+              </button>
+            </div>
+          </div>
+        )}
+        
+        {/* Empty state if no nodes match filter */}
+        {filteredNodes.length === 0 && (
+          <div className="absolute inset-0 flex flex-col items-center justify-center bg-white bg-opacity-80">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-12 h-12 text-gray-400 mb-2">
+              <path strokeLinecap="round" strokeLinejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+            </svg>
+            <h6 className="text-base font-medium text-gray-800">
+              No matching nodes found
+            </h6>
+            <p className="text-sm text-gray-500 mt-2">
+              Try adjusting your search or filters
+            </p>
+            <button 
+              className="mt-2 px-4 py-2 text-sm font-medium text-teal-600 hover:bg-teal-50 rounded-md"
+              onClick={handleResetView}
+            >
+              Reset View
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default KnowledgeGraph;
\ No newline at end of file
diff --git a/src/components/Dashboard/KnowledgeGraphPage.tsx b/src/components/Dashboard/KnowledgeGraphPage.tsx
new file mode 100644
index 0000000..f8b3646
--- /dev/null
+++ b/src/components/Dashboard/KnowledgeGraphPage.tsx
@@ -0,0 +1,285 @@
+'use client'
+
+import React, { useState } from 'react';
+import { 
+  PlusIcon, 
+  MagnifyingGlassIcon, 
+  ArrowDownOnSquareIcon,
+  ChevronDownIcon
+} from '@heroicons/react/24/outline';
+import {
+  Typography,
+  Card,
+  CardBody,
+  Button,
+  Menu,
+  MenuHandler,
+  MenuList,
+  MenuItem,
+  Input,
+  Dialog,
+  DialogHeader,
+  DialogBody,
+  DialogFooter,
+  Tabs,
+  TabsHeader,
+  Tab,
+  Select,
+  Option,
+  Textarea
+} from "@material-tailwind/react";
+import KnowledgeGraph from './KnowledgeGraph';
+
+export function KnowledgeGraphPage() {
+  const [isAddNodeModalOpen, setIsAddNodeModalOpen] = useState(false);
+  const [isAddRelationModalOpen, setIsAddRelationModalOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState("visualization");
+  
+  const handleExport = (format: string) => {
+    console.log(`Exporting in ${format} format`);
+    // Implementationwould go here
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Header Section */}
+      <Card className="p-6 border border-gray-100 relative overflow-hidden">
+        <div className="relative z-10">
+          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+            <div>
+              <Typography variant="h3" color="blue-gray" className="mb-2">
+                Knowledge Graph
+              </Typography>
+              <Typography color="gray">
+                Visual representation of concepts, entities, and their relationships
+              </Typography>
+            </div>
+            <div className="flex gap-2 flex-wrap">
+              <Button 
+                color="teal" 
+                className="flex items-center gap-2"
+                size="sm"
+                onClick={() => setIsAddNodeModalOpen(true)}
+              >
+                <PlusIcon className="h-4 w-4" /> 
+                Add Node
+              </Button>
+              
+              <Button 
+                color="blue" 
+                className="flex items-center gap-2"
+                size="sm"
+                onClick={() => setIsAddRelationModalOpen(true)}
+              >
+                <PlusIcon className="h-4 w-4" /> 
+                Add Relation
+              </Button>
+              
+              <Menu>
+                <MenuHandler>
+                  <Button 
+                    color="blue-gray" 
+                    variant="outlined"
+                    className="flex items-center gap-2"
+                    size="sm"
+                  >
+                    <ArrowDownOnSquareIcon className="h-4 w-4" /> 
+                    Export
+                    <ChevronDownIcon className="h-3 w-3" />
+                  </Button>
+                </MenuHandler>
+                <MenuList>
+                  <MenuItem onClick={() => handleExport('json')}>JSON</MenuItem>
+                  <MenuItem onClick={() => handleExport('csv')}>CSV</MenuItem>
+                  <MenuItem onClick={() => handleExport('pdf')}>PDF</MenuItem>
+                  <MenuItem onClick={() => handleExport('png')}>PNG Image</MenuItem>
+                </MenuList>
+              </Menu>
+            </div>
+          </div>
+        </div>
+        {/* Decorative elements */}
+        <div className="absolute top-0 right-0 w-64 h-64 bg-teal-50 rounded-full blur-3xl opacity-50 -z-10"></div>
+        <div className="absolute bottom-0 left-0 w-64 h-64 bg-blue-50 rounded-full blur-3xl opacity-50 -z-10"></div>
+      </Card>
+
+      {/* Tabs */}
+      <Tabs value={activeTab} className="overflow-visible">
+        <TabsHeader className="bg-white border border-gray-200">
+          <Tab value="visualization" onClick={() => setActiveTab("visualization")}>
+            Visualization
+          </Tab>
+          <Tab value="list" onClick={() => setActiveTab("list")}>
+            List View
+          </Tab>
+          <Tab value="analytics" onClick={() => setActiveTab("analytics")}>
+            Analytics
+          </Tab>
+        </TabsHeader>
+      </Tabs>
+
+      {/* Main Content */}
+      <div className="h-[600px]">
+        {activeTab === "visualization" && (
+          <KnowledgeGraph />
+        )}
+        
+        {activeTab === "list" && (
+          <Card className="border border-gray-100 h-full">
+            <CardBody>
+              <div className="mb-4 flex gap-2">
+                <div className="flex-grow">
+                  <Input 
+                    icon={<MagnifyingGlassIcon className="h-4 w-4" />} 
+                    label="Search nodes and relationships" 
+                    crossOrigin={undefined}
+                  />
+                </div>
+              </div>
+              
+              <div className="text-center py-16">
+                <Typography variant="h6" color="blue-gray">
+                  List View Coming Soon
+                </Typography>
+                <Typography color="gray" className="mt-2">
+                  This feature is currently under development
+                </Typography>
+              </div>
+            </CardBody>
+          </Card>
+        )}
+        
+        {activeTab === "analytics" && (
+          <Card className="border border-gray-100 h-full">
+            <CardBody>
+              <div className="text-center py-16">
+                <Typography variant="h6" color="blue-gray">
+                  Analytics View Coming Soon
+                </Typography>
+                <Typography color="gray" className="mt-2">
+                  This feature is currently under development
+                </Typography>
+              </div>
+            </CardBody>
+          </Card>
+        )}
+      </div>
+
+      {/* Add Node Modal */}
+      <Dialog
+        open={isAddNodeModalOpen}
+        handler={() => setIsAddNodeModalOpen(false)}
+        size="md"
+      >
+        <DialogHeader>Add New Node</DialogHeader>
+        <DialogBody divider>
+          <div className="space-y-4">
+            <div>
+              <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                Node Label
+              </Typography>
+              <Input label="Enter node label" crossOrigin={undefined} />
+            </div>
+            <div>
+              <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                Node Type
+              </Typography>
+              <Select label="Select node type">
+                <Option value="CONCEPT">Concept</Option>
+                <Option value="ENTITY">Entity</Option>
+                <Option value="PERSON">Person</Option>
+                <Option value="DOCUMENT">Document</Option>
+                <Option value="PROCESS">Process</Option>
+              </Select>
+            </div>
+            <div>
+              <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                Description
+              </Typography>
+              <Textarea label="Node description" />
+            </div>
+          </div>
+        </DialogBody>
+        <DialogFooter>
+          <Button
+            variant="text"
+            color="red"
+            onClick={() => setIsAddNodeModalOpen(false)}
+            className="mr-2"
+          >
+            Cancel
+          </Button>
+          <Button 
+            variant="gradient" 
+            color="teal"
+            onClick={() => {
+              setIsAddNodeModalOpen(false);
+            }}
+          >
+            Add Node
+          </Button>
+        </DialogFooter>
+      </Dialog>
+
+      {/* Add Relation Modal */}
+      <Dialog
+        open={isAddRelationModalOpen}
+        handler={() => setIsAddRelationModalOpen(false)}
+        size="md"
+      >
+        <DialogHeader>Add New Relation</DialogHeader>
+        <DialogBody divider>
+          <div className="space-y-4">
+            <div>
+              <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                Source Node
+              </Typography>
+              <Select label="Select source node">
+                <Option value="1">Machine Learning</Option>
+                <Option value="2">Neural Networks</Option>
+                <Option value="7">Andrew Ng</Option>
+              </Select>
+            </div>
+            <div>
+              <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                Relation Type
+              </Typography>
+              <Input label="Enter relation type (e.g. 'includes', 'created by')" crossOrigin={undefined} />
+            </div>
+            <div>
+              <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                Target Node
+              </Typography>
+              <Select label="Select target node">
+                <Option value="3">Data Analysis</Option>
+                <Option value="4">Python</Option>
+                <Option value="10">ML Research Paper</Option>
+              </Select>
+            </div>
+          </div>
+        </DialogBody>
+        <DialogFooter>
+          <Button
+            variant="text"
+            color="red"
+            onClick={() => setIsAddRelationModalOpen(false)}
+            className="mr-2"
+          >
+            Cancel
+          </Button>
+          <Button 
+            variant="gradient" 
+            color="blue"
+            onClick={() => {
+              setIsAddRelationModalOpen(false);
+            }}
+          >
+            Add Relation
+          </Button>
+        </DialogFooter>
+      </Dialog>
+    </div>
+  );
+}
+
+export default KnowledgeGraphPage;
\ No newline at end of file
diff --git a/src/components/Dashboard/ProjectManagement.tsx b/src/components/Dashboard/ProjectManagement.tsx
new file mode 100644
index 0000000..3623257
--- /dev/null
+++ b/src/components/Dashboard/ProjectManagement.tsx
@@ -0,0 +1,627 @@
+'use client'
+
+import React, { useState } from 'react';
+import {
+  CheckCircleIcon,
+  CalendarIcon,
+  DocumentTextIcon,
+} from '@heroicons/react/24/outline';
+import {
+  Card,
+  Typography,
+  Menu,
+  MenuHandler,
+  MenuList,
+  MenuItem,
+  Dialog,
+  DialogHeader,
+  DialogBody,
+  DialogFooter,
+  Input,
+  Button,
+  Progress,
+  Chip,
+  Textarea,
+  Alert,
+} from "@material-tailwind/react";
+
+interface Project {
+  id: number,
+  name: string,
+  description: string,
+  progress?: number,
+  deadline: string,
+  status: string,
+  team: string[],
+  priority: string
+}
+
+// Project Management Component
+const ProjectManagement: React.FC = () => {
+  const [projects, setProjects] = useState<Project[]>([
+    {
+    id: 1,
+    name: 'AI Customer Service Bot',
+    description: 'Implementing conversational AI for customer support',
+    progress: 75,
+    deadline: '2025-04-15',
+    status: 'active',
+    team: ['John D.', 'Sarah M.', 'Mike R.'],
+    priority: 'high'
+    },
+    {
+    id: 2,
+    name: 'Data Warehouse Migration',
+    description: 'Moving from legacy system to cloud data warehouse',
+    progress: 45,
+    deadline: '2025-05-20',
+    status: 'active',
+    team: ['Lisa K.', 'Tom B.'],
+    priority: 'medium'
+    },
+    {
+    id: 3,
+    name: 'Mobile App Redesign',
+    description: 'UX/UI overhaul of the mobile application',
+    progress: 90,
+    deadline: '2025-03-30',
+    status: 'active',
+    team: ['Alex J.', 'Maria S.', 'David L.', 'Emma W.'],
+    priority: 'high'
+    },
+    {
+    id: 4,
+    name: 'CRM Integration',
+    description: 'Connect sales platform with customer database',
+    progress: 15,
+    deadline: '2025-06-10',
+    status: 'planned',
+    team: ['Robert C.', 'Nina P.'],
+    priority: 'medium'
+    },
+    {
+    id: 5,
+    name: 'Security Audit',
+    description: 'Annual security review and compliance check',
+    progress: 60,
+    deadline: '2025-04-30',
+    status: 'active',
+    team: ['Daniel F.', 'Olivia M.'],
+    priority: 'high'
+    }
+  ]);
+    
+  const [showModal, setShowModal] = useState(false);
+  const [currentProject, setCurrentProject] = useState<Project | null>(null);
+  const [modalType, setModalType] = useState('');
+  const [showAlert, setShowAlert] = useState({ show: false, message: '', color: 'green' });
+  const [projectForm, setProjectForm] = useState({
+    name: '',
+    description: '',
+    deadline: '',
+    status: 'planned',
+    priority: 'medium',
+    team: ''
+  });
+    
+  const openModal = (type: string, project: Project | null = null) => {
+    setModalType(type);
+    setCurrentProject(project);
+    
+    if (type === 'new') {
+    setProjectForm({
+      name: '',
+      description: '',
+      deadline: new Date().toISOString().split('T')[0],
+      status: 'planned',
+      priority: 'medium',
+      team: ''
+    });
+    } else if (type === 'edit' && project) {
+    setProjectForm({
+      name: project.name,
+      description: project.description,
+      deadline: project.deadline,
+      status: project.status,
+      priority: project.priority,
+      team: project.team.join(', ')
+    });
+    }
+    
+    setShowModal(true);
+  };
+    
+  const handleStatusChange = (projectId: number, newStatus: string) => {
+    const updatedProjects = projects.map(project => 
+      project.id === projectId ? { ...project, status: newStatus } : project
+    );
+    setProjects(updatedProjects);
+    
+    showStatusAlert('Project status updated successfully!');
+  };
+    
+  const handleFormChange = (field: string, value: string) => {
+    setProjectForm({
+    ...projectForm,
+    [field]: value
+    });
+  };
+    
+  const handleSubmitProject = () => {
+    if (modalType === 'new') {
+    // Create new project
+    const newProject = {
+      id: projects.length + 1,
+      name: projectForm.name,
+      description: projectForm.description,
+      progress: 0,
+      deadline: projectForm.deadline,
+      status: projectForm.status,
+      team: typeof projectForm.team === 'string' ? projectForm.team.split(',').map(t => t.trim()) : projectForm.team,
+      priority: projectForm.priority
+    };
+    
+    setProjects([...projects, newProject]);
+    showStatusAlert('New project created successfully!');
+    } else if (modalType === 'edit' && currentProject) {
+    // Update existing project
+    const updatedProjects = projects.map(project => 
+      project.id === currentProject.id 
+      ? { 
+        ...project,
+        name: projectForm.name,
+        description: projectForm.description,
+        deadline: projectForm.deadline,
+        status: projectForm.status,
+        team: typeof projectForm.team === 'string' ? projectForm.team.split(',').map(t => t.trim()) : projectForm.team,
+        priority: projectForm.priority
+        } 
+      : project
+    );
+    
+    setProjects(updatedProjects);
+    showStatusAlert('Project updated successfully!');
+    }
+    
+    setShowModal(false);
+  };
+    
+  const deleteProject = () => {
+    if (currentProject) {
+    const updatedProjects = projects.filter(project => project.id !== currentProject.id);
+    setProjects(updatedProjects);
+    setShowModal(false);
+    showStatusAlert('Project deleted successfully!', 'red');
+    }
+  };
+    
+  const showStatusAlert = (message: string, color = 'green') => {
+    setShowAlert({ show: true, message, color });
+    setTimeout(() => setShowAlert({ ...showAlert, show: false }), 3000);
+  };
+    
+  // Get status color
+  const getStatusColor = (status: string) => {
+    switch (status) {
+    case 'active':
+      return 'green';
+    case 'planned':
+      return 'blue';
+    case 'completed':
+      return 'purple';
+    case 'paused':
+      return 'amber';
+    default:
+      return 'gray';
+    }
+  };
+  // Get priority color
+  const getPriorityColor = (priority: string) => {
+    switch (priority) {
+    case 'high':
+      return 'red';
+    case 'medium':
+      return 'amber';
+    case 'low':
+      return 'blue';
+    default:
+      return 'gray';
+    }
+  };
+
+  // Format deadline date
+  const formatDeadline = (deadline: string | number | Date) => {
+    const date = new Date(deadline);
+    return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
+  };
+
+  // Is deadline close or overdue
+  const isDeadlineClose = (deadline: string | number | Date) => {
+    const deadlineDate = new Date(deadline);
+    const today = new Date();
+    const diffTime = deadlineDate.getTime() - today.getTime();
+    const diffDays = Math.ceil(diffTime / (1000 * 3600 * 24));
+    
+    return diffDays <= 7;
+  };
+
+  const isDeadlinePassed = (deadline: string | number | Date) => {
+    const deadlineDate = new Date(deadline);
+    const today = new Date();
+    return deadlineDate < today;
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Success/Error Alert */}
+      {showAlert.show && (
+        <Alert
+          open={showAlert.show}
+          color={showAlert.color as colors}
+          className="fixed top-20 right-4 z-50 max-w-md"
+          icon={<CheckCircleIcon className="h-6 w-6" />}
+          onClose={() => setShowAlert({...showAlert, show: false})}
+        >
+        {showAlert.message}
+        </Alert>
+      )}
+      
+      {/* Header Card */}
+      <Card className="p-6 border border-gray-100 relative overflow-hidden">
+        <div className="relative z-10">
+          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+            <div>
+              <div className="inline-flex items-center px-3 py-1 rounded-full bg-blue-50 text-blue-500 mb-4">
+                <DocumentTextIcon className="h-4 w-4 mr-2" />
+                <span className="text-sm font-medium">Project Management</span>
+              </div>
+              <Typography variant="h3" color="blue-gray" className="mb-2">
+                Your Projects
+              </Typography>
+              <Typography color="gray">
+                Track and manage your active and upcoming projects
+              </Typography>
+            </div>
+            <Button 
+              color="blue" 
+              className="flex items-center gap-2"
+              size="sm"
+              onClick={() => openModal('new')}
+            >
+              <DocumentTextIcon className="h-4 w-4" /> 
+              New Project
+            </Button>
+          </div>
+        </div>
+        {/* Decorative elements */}
+        <div className="absolute top-0 right-0 w-64 h-64 bg-blue-50 rounded-full blur-3xl opacity-50 -z-10"></div>
+        <div className="absolute bottom-0 left-0 w-64 h-64 bg-green-50 rounded-full blur-3xl opacity-50 -z-10"></div>
+      </Card>
+      
+      {/* Projects Container */}
+      <div className="grid grid-cols-1 gap-4">
+        {projects.map((project) => (
+        <Card key={project.id} className="border border-gray-100 hover:shadow-md transition-shadow">
+          <div className="p-6">
+            <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+              <div className="flex-grow">
+                <div className="flex items-center gap-3 mb-3">
+                  <div className={`p-2 rounded-full bg-${getStatusColor(project.status)}-50`}>
+                    <DocumentTextIcon className={`h-5 w-5 text-${getStatusColor(project.status)}-500`} />
+                  </div>
+                  <div>
+                    <Typography variant="h6">{project.name}</Typography>
+                    <div className="flex items-center gap-2">
+                      <Chip
+                        size="sm"
+                        variant="ghost"
+                        value={project.status}
+                        color={getStatusColor(project.status)}
+                        className="capitalize"
+                      />
+                      <Chip
+                        size="sm"
+                        variant="outlined"
+                        value={project.priority}
+                        color={getPriorityColor(project.priority)}
+                        className="capitalize"
+                      />
+                        <Typography variant="small" color={isDeadlinePassed(project.deadline) ? "red" : isDeadlineClose(project.deadline) ? "amber" : "gray"} className="flex items-center gap-1">
+                        <CalendarIcon className="h-3 w-3" />
+                        {formatDeadline(project.deadline)}
+                        </Typography>
+                    </div>
+                  </div>
+                </div>
+                <Typography variant="small" color="gray" className="mb-3">
+                  {project.description}
+                </Typography>
+                <Progress value={project.progress} color={getStatusColor(project.status)} className="h-1" />
+                <div className="mt-4 flex flex-wrap gap-2">
+                  {project.team.map((member, index) => (
+                    <Chip
+                      key={index}
+                      value={member}
+                      variant="outlined"
+                      size="sm"
+                      className="bg-gray-50"
+                    />
+                  ))}
+                </div>
+              </div>
+              <div className="flex gap-2 justify-start md:justify-end">
+                <Menu placement="bottom-end">
+                  <MenuHandler>
+                    <Button color="gray" variant="outlined" size="sm">
+                      Change Status
+                    </Button>
+                  </MenuHandler>
+                  <MenuList>
+                    <MenuItem onClick={() => handleStatusChange(project.id, 'planned')}>Planned</MenuItem>
+                    <MenuItem onClick={() => handleStatusChange(project.id, 'active')}>Active</MenuItem>
+                    <MenuItem onClick={() => handleStatusChange(project.id, 'paused')}>Paused</MenuItem>
+                    <MenuItem onClick={() => handleStatusChange(project.id, 'completed')}>Completed</MenuItem>
+                  </MenuList>
+                </Menu>
+                  <Button color="blue" variant="outlined" size="sm" onClick={() => openModal('view', project)}>
+                    View
+                  </Button>
+              </div>
+            </div>
+          </div>
+        </Card>
+        ))}
+      </div>
+      
+      {/* Modals */}
+      <Dialog
+        open={showModal}
+        handler={() => setShowModal(false)}
+        size="md"
+      >
+        <DialogHeader>
+          {modalType === 'new' && 'Create New Project'}
+          {modalType === 'edit' && 'Edit Project'}
+          {modalType === 'view' && 'Project Details'}
+          {modalType === 'delete' && 'Confirm Delete'}
+        </DialogHeader>
+        <DialogBody divider>
+          {(modalType === 'new' || modalType === 'edit') && (
+            <div className="space-y-4">
+              <div>
+                <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                  Project Name
+                </Typography>
+                <Input
+                  value={projectForm.name}
+                  onChange={(e) => handleFormChange('name', e.target.value)}
+                  label="Enter project name" crossOrigin={undefined}
+                />
+              </div>
+              <div>
+                <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                  Description
+                </Typography>
+                <Textarea
+                  value={projectForm.description}
+                  onChange={(e) => handleFormChange('description', e.target.value)}
+                  label="Project description"
+                />
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                    Deadline
+                  </Typography>
+                  <Input
+                    type="date"
+                    value={projectForm.deadline}
+                    onChange={(e) => handleFormChange('deadline', e.target.value)} crossOrigin={undefined}                  />
+                </div>
+                <div>
+                  <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                    Status
+                  </Typography>
+                  <select 
+                    className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
+                    value={projectForm.status}
+                    onChange={(e) => handleFormChange('status', e.target.value)}
+                  >
+                    <option value="planned">Planned</option>
+                    <option value="active">Active</option>
+                    <option value="paused">Paused</option>
+                    <option value="completed">Completed</option>
+                  </select>
+                </div>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                    Priority
+                  </Typography>
+                  <select 
+                    className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
+                    value={projectForm.priority}
+                    onChange={(e) => handleFormChange('priority', e.target.value)}
+                  >
+                    <option value="low">Low</option>
+                    <option value="medium">Medium</option>
+                    <option value="high">High</option>
+                  </select>
+                </div>
+                <div>
+                <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                  Team Members
+                </Typography>
+                <Input
+                  value={projectForm.team}
+                  onChange={(e) => handleFormChange('team', e.target.value)}
+                  label="Comma-separated list of members" crossOrigin={undefined}
+                />
+                </div>
+              </div>
+            </div>
+          )}
+          
+          {modalType === 'view' && currentProject && (
+            <div className="space-y-4">
+              <div className="flex items-center gap-2 mb-4">
+                <Chip
+                  value={currentProject.status}
+                  color={getStatusColor(currentProject.status)}
+                  className="capitalize"
+                />
+                <Chip
+                  variant="outlined"
+                  value={currentProject.priority}
+                  color={getPriorityColor(currentProject.priority)}
+                  className="capitalize"
+                />
+                <Typography variant="small" color={isDeadlinePassed(currentProject.deadline) ? "red" : isDeadlineClose(currentProject.deadline) ? "amber" : "gray"} className="flex items-center gap-1">
+                <CalendarIcon className="h-3 w-3" />
+                {formatDeadline(currentProject.deadline)}
+                </Typography>
+              </div>
+              
+              <div>
+                <Typography variant="small" color="blue-gray" className="font-medium">
+                  Description
+                </Typography>
+                <Typography className="mt-1">
+                  {currentProject.description}
+                </Typography>
+              </div>
+              
+              <div>
+                <Typography variant="small" color="blue-gray" className="font-medium">
+                  Progress
+                </Typography>
+                <div className="mt-1">
+                  <Progress value={currentProject.progress} color={getStatusColor(currentProject.status)} className="h-2" />
+                  <Typography variant="small" className="mt-1 text-right">
+                    {currentProject.progress}%
+                  </Typography>
+                </div>
+              </div>
+              
+              <div>
+                <Typography variant="small" color="blue-gray" className="font-medium">
+                  Team
+                </Typography>
+                <div className="mt-2 flex flex-wrap gap-2">
+                  {currentProject.team.map((member, index) => (
+                    <Chip
+                      key={index}
+                      value={member}
+                      className="bg-gray-50"
+                    />
+                  ))}
+                </div>
+              </div>
+              
+              <div className="border-t border-gray-200 pt-4 mt-4">
+                <Typography variant="small" color="blue-gray" className="font-medium">
+                  Project Tasks
+                </Typography>
+                <div className="mt-2 space-y-2">
+                  <div className="p-3 border border-gray-100 rounded-lg flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <div className="h-4 w-4 rounded-full bg-green-500"></div>
+                      <Typography variant="small">Initial requirements gathering</Typography>
+                    </div>
+                    <Chip value="Completed" color="green" size="sm" />
+                  </div>
+                  
+                  <div className="p-3 border border-gray-100 rounded-lg flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                    <div className="h-4 w-4 rounded-full bg-blue-500"></div>
+                      <Typography variant="small">Design system architecture</Typography>
+                    </div>
+                    <Chip value="In Progress" color="blue" size="sm" />
+                  </div>
+                  
+                  <div className="p-3 border border-gray-100 rounded-lg flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <div className="h-4 w-4 rounded-full bg-gray-300"></div>
+                      <Typography variant="small">Develop core functionality</Typography>
+                    </div>
+                    <Chip value="Pending" color="gray" size="sm" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+          
+          {modalType === 'delete' && currentProject && (
+            <div>
+              <Typography color="red" className="font-medium mb-2">
+                Are you sure you want to delete this project?
+              </Typography>
+              <Typography variant="small" color="gray">
+                This action cannot be undone. This will permanently delete the project "{currentProject.name}" and all associated data.
+              </Typography>
+            </div>
+          )}
+        </DialogBody>
+        <DialogFooter>
+          <div className="flex justify-between w-full">
+            <div>
+              {modalType === 'view' && (
+                <Button
+                  variant="text"
+                  color="red"
+                  onClick={() => {
+                      openModal('delete', currentProject);
+                  }}
+                >
+                  Delete
+                </Button>
+              )}
+            </div>
+            <div className="flex gap-2">
+              <Button
+                variant="text"
+                color="gray"
+                onClick={() => setShowModal(false)}
+              >
+                {modalType === 'view' ? 'Close' : 'Cancel'}
+              </Button>
+              
+              {modalType === 'view' && (
+                <Button
+                  color="blue"
+                  onClick={() => {
+                      setShowModal(false);
+                      openModal('edit', currentProject);
+                  }}
+                >
+                  Edit Project
+                </Button>
+              )}
+              
+              {(modalType === 'new' || modalType === 'edit') && (
+                <Button
+                  color="blue"
+                  onClick={handleSubmitProject}
+                >
+                  {modalType === 'new' ? 'Create Project' : 'Save Changes'}
+                </Button>
+              )}
+              
+              {modalType === 'delete' && (
+                <Button
+                  color="red"
+                  onClick={deleteProject}
+                >
+                  Delete Project
+                </Button>
+              )}
+            </div>
+          </div>
+        </DialogFooter>
+      </Dialog>
+    </div>
+  );
+};
+  
+export default ProjectManagement;
\ No newline at end of file
diff --git a/src/components/Dashboard/RealTimeDashboard.tsx b/src/components/Dashboard/RealTimeDashboard.tsx
new file mode 100644
index 0000000..c89325d
--- /dev/null
+++ b/src/components/Dashboard/RealTimeDashboard.tsx
@@ -0,0 +1,912 @@
+'use client'
+
+import React, { useState, useEffect } from 'react';
+import { LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, PieChart, Pie, Cell, AreaChart, Area } from 'recharts';
+import {
+  ArrowUpIcon,
+  ArrowDownIcon,
+  ClockIcon,
+  ServerIcon,
+  CpuChipIcon,
+  UserGroupIcon,
+  DocumentChartBarIcon,
+  CloudIcon,
+  ShieldCheckIcon,
+  BoltIcon,
+  ArrowPathIcon
+} from '@heroicons/react/24/outline';
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  Typography,
+  Button,
+  Tabs,
+  TabsHeader,
+  Tab,
+  Progress,
+  Tooltip as MTTooltip
+} from "@material-tailwind/react";
+
+interface TimeSeriesData {
+  time: string,
+  cpu: number,
+  memory: number,
+  requests: number,
+  errors: number
+}
+
+export function RealTimeDashboard() {
+  // State for active tab
+  const [activeTab, setActiveTab] = useState("system-metrics");
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [lastUpdated, setLastUpdated] = useState(new Date());
+  const [metrics, setMetrics] = useState({
+    cpuUsage: 42,
+    memoryUsage: 68,
+    diskUsage: 51,
+    networkIn: 24.5,
+    networkOut: 18.2,
+    activeUsers: 127,
+    activeJobs: 8,
+    responseTime: 120, // in ms
+    uptime: 99.98,
+    errorRate: 0.05,
+    requestRate: 125 //requests per minute
+  });
+  
+  // Sample time series data
+  const [timeSeriesData, setTimeSeriesData] = useState<TimeSeriesData[]>([]);
+  const [modelPerformance, setModelPerformance] = useState([
+    { name: 'ETL Pipeline', accuracy: 99.2, latency: 45, throughput: 850 },
+    { name: 'NLP Model', accuracy: 94.7, latency: 120, throughput: 320 },
+    { name: 'Vision Model', accuracy: 96.8, latency: 220, throughput: 150 },
+    { name: 'Recommendation', accuracy: 92.5, latency: 85, throughput: 540 },
+    { name: 'Classification', accuracy: 97.3, latency: 65, throughput: 620 }
+  ]);
+  
+  // Generate initial time series data
+  useEffect(() => {
+    const initialData = [];
+    const now = new Date();
+    
+    for (let i = 30; i >= 0; i--) {
+      const time = new Date(now.getTime() - i * 60000);
+      initialData.push({
+        time: time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+        cpu: 30 + Math.random() * 25,
+        memory: 55 + Math.random() * 25,
+        requests: 80 + Math.random() * 90,
+        errors: Math.random() * 2
+      });
+    }
+    
+    setTimeSeriesData(initialData);
+    
+    // Setup interval for real-time updates
+    const interval = setInterval(() => {
+      updateMetrics();
+      updateTimeSeriesData();
+      setLastUpdated(new Date());
+    }, 5000);
+    
+    return () => clearInterval(interval);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  
+  // Refresh data manually
+  const handleRefresh = () => {
+    setIsRefreshing(true);
+    
+    // Simulate data fetching delay
+    setTimeout(() => {
+      updateMetrics();
+      updateTimeSeriesData();
+      setLastUpdated(new Date());
+      setIsRefreshing(false);
+    }, 1000);
+  };
+  
+  // Update metrics with slight random variations
+  const updateMetrics = () => {
+    setMetrics(prev => ({
+      cpuUsage: Math.max(0, Math.min(100, prev.cpuUsage + (Math.random() * 10 - 5))),
+      memoryUsage: Math.max(0, Math.min(100, prev.memoryUsage + (Math.random() * 8 - 4))),
+      diskUsage: Math.max(0, Math.min(100, prev.diskUsage + (Math.random() * 2 - 1))),
+      networkIn: Math.max(0, prev.networkIn + (Math.random() * 5 - 2.5)),
+      networkOut: Math.max(0, prev.networkOut + (Math.random() * 4 - 2)),
+      activeUsers: Math.max(0, prev.activeUsers + Math.floor(Math.random() * 11 - 5)),
+      activeJobs: Math.max(0, prev.activeJobs + Math.floor(Math.random() * 3 - 1)),
+      responseTime: Math.max(50, prev.responseTime + (Math.random() * 30 - 15)),
+      uptime: Math.min(100, prev.uptime + 0.001),
+      errorRate: Math.max(0, prev.errorRate + (Math.random() * 0.02 - 0.01)),
+      requestRate: Math.max(0, prev.requestRate + (Math.random() * 20 - 10))
+    }));
+    
+    // Update model performance occasionally
+    if (Math.random() > 0.7) {
+      setModelPerformance(prev => 
+        prev.map(model => ({
+          ...model,
+          accuracy: Math.max(90, Math.min(99.9, model.accuracy + (Math.random() * 0.6 - 0.3))),
+          latency: Math.max(10, model.latency + (Math.random() * 10 - 5)),
+          throughput: Math.max(50, model.throughput + (Math.random() * 30 - 15))
+        }))
+      );
+    }
+  };
+  
+  // Add new data point to time series
+  const updateTimeSeriesData = () => {
+    const now = new Date();
+    const newDataPoint = {
+      time: now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+      cpu: metrics.cpuUsage,
+      memory: metrics.memoryUsage,
+      requests: metrics.requestRate,
+      errors: metrics.errorRate * 100
+    };
+    
+    setTimeSeriesData(prev => {
+      const newData = [...prev, newDataPoint];
+      // Keep only the last 30 data points
+      if (newData.length > 30) {
+        return newData.slice(-30);
+      }
+      return newData;
+    });
+  };
+  
+  // Format for percentages
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const formatPercent = (value: number) => `${value.toFixed(1)}%`;
+  
+  // Format for data transfer
+  const formatDataTransfer = (value: number) => `${value.toFixed(1)} MB/s`;
+  
+  // Get status color based on value thresholds
+  const getStatusColor = (value: number, thresholds = { warning: 70, critical: 90 }) => {
+    if (value >= thresholds.critical) return "red";
+    if (value >= thresholds.warning) return "amber";
+    return "green";
+  };
+  
+  // Chart colors
+  const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884D8'];
+  
+  // Calculate trend indicators
+  const calculateTrend = (current: number, previous: number) => {
+    if (!previous || current === previous) return { direction: 'neutral', value: 0 };
+    
+    const diff = current - previous;
+    const percentChange = (diff / previous) * 100;
+    
+    return {
+      direction: diff > 0 ? 'up' : 'down',
+      value: Math.abs(percentChange).toFixed(1)
+    };
+  };
+  
+  // Get CPU trend from time series data
+  const cpuTrend = timeSeriesData.length > 1 
+    ? calculateTrend(
+        timeSeriesData[timeSeriesData.length - 1].cpu,
+        timeSeriesData[timeSeriesData.length - 2].cpu
+      )
+    : { direction: 'neutral', value: 0 };
+  
+  return (
+    <div className="space-y-6">
+      {/* Status bar with refresh control */}
+      <div className="bg-gray-100 p-3 rounded-lg flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <div className="h-2 w-2 rounded-full bg-green-500 animate-pulse"></div>
+          <Typography variant="small" className="font-medium text-gray-700">
+            Live System Metrics
+          </Typography>
+        </div>
+        <div className="flex items-center gap-3">
+          <Typography variant="small" color="gray" className="flex items-center gap-1">
+            <ClockIcon className="h-4 w-4" /> 
+            Last updated: {lastUpdated.toLocaleTimeString()}
+          </Typography>
+          <Button 
+            variant="text" 
+            size="sm" 
+            className="flex items-center gap-1"
+            onClick={handleRefresh}
+            disabled={isRefreshing}
+          >
+            <ArrowPathIcon className={`h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`} />
+            Refresh
+          </Button>
+        </div>
+      </div>
+      
+      {/* Dashboard Tabs */}
+      <Tabs value={activeTab}>
+        <TabsHeader>
+          <Tab value="system-metrics" onClick={() => setActiveTab("system-metrics")}>
+            <div className="flex items-center gap-2">
+              <ServerIcon className="h-4 w-4" />
+              System Metrics
+            </div>
+          </Tab>
+          <Tab value="user-activity" onClick={() => setActiveTab("user-activity")}>
+            <div className="flex items-center gap-2">
+              <UserGroupIcon className="h-4 w-4" />
+              User Activity
+            </div>
+          </Tab>
+          <Tab value="ai-performance" onClick={() => setActiveTab("ai-performance")}>
+            <div className="flex items-center gap-2">
+              <CpuChipIcon className="h-4 w-4" />
+              AI Performance
+            </div>
+          </Tab>
+        </TabsHeader>
+      </Tabs>
+      
+      {/* System Metrics Tab */}
+      {activeTab === "system-metrics" && (
+        <div className="space-y-6">
+          {/* Key System Metrics */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+            {/* CPU Usage Card */}
+            <Card className="hover:shadow-md transition-shadow">
+              <CardBody className="p-4">
+                <div className="flex justify-between items-start">
+                  <div>
+                    <Typography variant="small" color="blue-gray" className="font-medium mb-1">
+                      CPU Usage
+                    </Typography>
+                    <div className="flex items-center gap-2">
+                      <Typography variant="h4" className="font-bold">
+                        {metrics.cpuUsage.toFixed(1)}%
+                      </Typography>
+                      {cpuTrend.direction !== 'neutral' && (
+                        <div className={`flex items-center text-xs ${cpuTrend.direction === 'up' ? 'text-red-500' : 'text-green-500'}`}>
+                          {cpuTrend.direction === 'up' ? (
+                            <ArrowUpIcon className="h-3 w-3 mr-1" />
+                          ) : (
+                            <ArrowDownIcon className="h-3 w-3 mr-1" />
+                          )}
+                          {cpuTrend.value}%
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                  <div className={`p-2 rounded-full bg-${getStatusColor(metrics.cpuUsage)}-50`}>
+                    <CpuChipIcon className={`h-5 w-5 text-${getStatusColor(metrics.cpuUsage)}-500`} />
+                  </div>
+                </div>
+                <div className="mt-3">
+                  <Progress 
+                    value={metrics.cpuUsage} 
+                    color={getStatusColor(metrics.cpuUsage)} 
+                    size="lg"
+                  />
+                </div>
+              </CardBody>
+            </Card>
+            
+            {/* Memory Usage Card */}
+            <Card className="hover:shadow-md transition-shadow">
+              <CardBody className="p-4">
+                <div className="flex justify-between items-start">
+                  <div>
+                    <Typography variant="small" color="blue-gray" className="font-medium mb-1">
+                      Memory Usage
+                    </Typography>
+                    <Typography variant="h4" className="font-bold">
+                      {metrics.memoryUsage.toFixed(1)}%
+                    </Typography>
+                  </div>
+                  <div className={`p-2 rounded-full bg-${getStatusColor(metrics.memoryUsage)}-50`}>
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" 
+                      className={`h-5 w-5 text-${getStatusColor(metrics.memoryUsage)}-500`}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 002.25-2.25V6.75a2.25 2.25 0 00-2.25-2.25H6.75A2.25 2.25 0 004.5 6.75v10.5a2.25 2.25 0 002.25 2.25zm.75-12h9v9h-9v-9z" />
+                    </svg>
+                  </div>
+                </div>
+                <div className="mt-3">
+                  <Progress 
+                    value={metrics.memoryUsage} 
+                    color={getStatusColor(metrics.memoryUsage)} 
+                    size="lg"
+                  />
+                </div>
+              </CardBody>
+            </Card>
+            
+            {/* Disk Usage Card */}
+            <Card className="hover:shadow-md transition-shadow">
+              <CardBody className="p-4">
+                <div className="flex justify-between items-start">
+                  <div>
+                    <Typography variant="small" color="blue-gray" className="font-medium mb-1">
+                      Storage Usage
+                    </Typography>
+                    <Typography variant="h4" className="font-bold">
+                      {metrics.diskUsage.toFixed(1)}%
+                    </Typography>
+                  </div>
+                  <div className="p-2 rounded-full bg-blue-50">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" 
+                      className="h-5 w-5 text-blue-500">
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" />
+                    </svg>
+                  </div>
+                </div>
+                <div className="mt-3">
+                  <Progress 
+                    value={metrics.diskUsage} 
+                    color={getStatusColor(metrics.diskUsage, { warning: 80, critical: 95 })} 
+                    size="lg"
+                  />
+                </div>
+              </CardBody>
+            </Card>
+            
+            {/* Network Usage Card */}
+            <Card className="hover:shadow-md transition-shadow">
+              <CardBody className="p-4">
+                <div className="flex justify-between items-start">
+                  <div>
+                    <Typography variant="small" color="blue-gray" className="font-medium mb-1">
+                      Network Traffic
+                    </Typography>
+                    <div className="space-y-1">
+                      <div className="flex items-center gap-1">
+                        <ArrowUpIcon className="h-3 w-3 text-blue-500" />
+                        <Typography variant="small">
+                          Out: {formatDataTransfer(metrics.networkOut)}
+                        </Typography>
+                      </div>
+                      <div className="flex items-center gap-1">
+                        <ArrowDownIcon className="h-3 w-3 text-green-500" />
+                        <Typography variant="small">
+                          In: {formatDataTransfer(metrics.networkIn)}
+                        </Typography>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="p-2 rounded-full bg-purple-50">
+                    <CloudIcon className="h-5 w-5 text-purple-500" />
+                  </div>
+                </div>
+                <div className="mt-3 space-y-1">
+                  <div className="h-2 w-full bg-gray-200 rounded-full">
+                    <div className="h-2 bg-blue-500 rounded-full" style={{ width: `${(metrics.networkOut / 50) * 100}%` }}></div>
+                  </div>
+                  <div className="h-2 w-full bg-gray-200 rounded-full">
+                    <div className="h-2 bg-green-500 rounded-full" style={{ width: `${(metrics.networkIn / 50) * 100}%` }}></div>
+                  </div>
+                </div>
+              </CardBody>
+            </Card>
+          </div>
+          
+          {/* System Performance Chart */}
+          <Card>
+            <CardHeader className="p-4">
+              <Typography variant="h6">System Performance Trends</Typography>
+            </CardHeader>
+            <CardBody className="p-4">
+              <div className="h-80">
+                <ResponsiveContainer width="100%" height="100%">
+                  <AreaChart
+                    data={timeSeriesData}
+                    margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
+                  >
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="time" />
+                    <YAxis />
+                    <Tooltip />
+                    <Legend />
+                    <Area type="monotone" dataKey="cpu" stackId="1" stroke="#8884d8" fill="#8884d8" name="CPU (%)" />
+                    <Area type="monotone" dataKey="memory" stackId="2" stroke="#82ca9d" fill="#82ca9d" name="Memory (%)" />
+                    <Area type="monotone" dataKey="requests" stackId="3" stroke="#ffc658" fill="#ffc658" name="Requests/min" />
+                  </AreaChart>
+                </ResponsiveContainer>
+              </div>
+            </CardBody>
+          </Card>
+          
+          {/* Additional System Metrics */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            {/* Response Time Card */}
+            <Card className="hover:shadow-md transition-shadow">
+              <CardBody className="p-4">
+                <div className="flex items-center justify-between mb-2">
+                  <Typography variant="small" color="blue-gray" className="font-medium">
+                    Avg. Response Time
+                  </Typography>
+                  <div className="p-2 rounded-full bg-amber-50">
+                    <BoltIcon className="h-4 w-4 text-amber-500" />
+                  </div>
+                </div>
+                <Typography variant="h4" className="font-bold mb-1">
+                  {metrics.responseTime.toFixed(0)} ms
+                </Typography>
+                <Typography variant="small" color="gray">
+                  Target: &lt;100ms
+                </Typography>
+                <div className="mt-2">
+                  <Progress 
+                    value={(metrics.responseTime / 2)} 
+                    color={metrics.responseTime > 200 ? "red" : metrics.responseTime > 100 ? "amber" : "green"} 
+                    size="sm"
+                  />
+                </div>
+              </CardBody>
+            </Card>
+            
+            {/* Uptime Card */}
+            <Card className="hover:shadow-md transition-shadow">
+              <CardBody className="p-4">
+                <div className="flex items-center justify-between mb-2">
+                  <Typography variant="small" color="blue-gray" className="font-medium">
+                    System Uptime
+                  </Typography>
+                  <div className="p-2 rounded-full bg-green-50">
+                    <ShieldCheckIcon className="h-4 w-4 text-green-500" />
+                  </div>
+                </div>
+                <Typography variant="h4" className="font-bold mb-1">
+                  {metrics.uptime.toFixed(2)}%
+                </Typography>
+                <Typography variant="small" color="gray">
+                  Last 30 days
+                </Typography>
+                <div className="mt-2">
+                  <Progress 
+                    value={metrics.uptime} 
+                    color="green" 
+                    size="sm"
+                  />
+                </div>
+              </CardBody>
+            </Card>
+            
+            {/* Error Rate Card */}
+            <Card className="hover:shadow-md transition-shadow">
+              <CardBody className="p-4">
+                <div className="flex items-center justify-between mb-2">
+                  <Typography variant="small" color="blue-gray" className="font-medium">
+                    Error Rate
+                  </Typography>
+                  <div className="p-2 rounded-full bg-red-50">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" 
+                      className="h-4 w-4 text-red-500">
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+                    </svg>
+                  </div>
+                </div>
+                <Typography variant="h4" className="font-bold mb-1">
+                  {(metrics.errorRate * 100).toFixed(2)}%
+                </Typography>
+                <Typography variant="small" color="gray">
+                  Target: &lt;0.1%
+                </Typography>
+                <div className="mt-2">
+                  <Progress 
+                    value={(metrics.errorRate * 1000)} 
+                    color={metrics.errorRate > 0.1 ? "red" : metrics.errorRate > 0.05 ? "amber" : "green"} 
+                    size="sm"
+                  />
+                </div>
+              </CardBody>
+            </Card>
+          </div>
+        </div>
+      )}
+      
+      {/* User Activity Tab */}
+      {activeTab === "user-activity" && (
+        <div className="space-y-6">
+          {/* Active User Stats */}
+          <Card>
+            <CardHeader className="p-4">
+              <Typography variant="h6">Active User Metrics</Typography>
+            </CardHeader>
+            <CardBody className="p-4">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+                <div className="p-3 bg-gray-50 rounded-lg">
+                  <div className="flex justify-between items-center">
+                    <div>
+                      <Typography variant="small" color="gray">Current Active Users</Typography>
+                      <Typography variant="h4" className="font-bold">
+                        {metrics.activeUsers}
+                      </Typography>
+                    </div>
+                    <div className="p-2 rounded-full bg-blue-50">
+                      <UserGroupIcon className="h-5 w-5 text-blue-500" />
+                    </div>
+                  </div>
+                </div>
+                
+                <div className="p-3 bg-gray-50 rounded-lg">
+                  <div className="flex justify-between items-center">
+                    <div>
+                      <Typography variant="small" color="gray">Request Rate</Typography>
+                      <Typography variant="h4" className="font-bold">
+                        {metrics.requestRate.toFixed(0)}/min
+                      </Typography>
+                    </div>
+                    <div className="p-2 rounded-full bg-teal-50">
+                      <BoltIcon className="h-5 w-5 text-teal-500" />
+                    </div>
+                  </div>
+                </div>
+                
+                <div className="p-3 bg-gray-50 rounded-lg">
+                  <div className="flex justify-between items-center">
+                    <div>
+                      <Typography variant="small" color="gray">Active Jobs</Typography>
+                      <Typography variant="h4" className="font-bold">
+                        {metrics.activeJobs}
+                      </Typography>
+                    </div>
+                    <div className="p-2 rounded-full bg-purple-50">
+                      <DocumentChartBarIcon className="h-5 w-5 text-purple-500" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              
+              <div className="h-72">
+                <ResponsiveContainer width="100%" height="100%">
+                  <LineChart data={timeSeriesData}>
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="time" />
+                    <YAxis yAxisId="left" />
+                    <YAxis yAxisId="right" orientation="right" />
+                    <Tooltip />
+                    <Legend />
+                    <Line yAxisId="left" type="monotone" dataKey="requests" stroke="#8884d8" name="Requests/min" />
+                    <Line yAxisId="right" type="monotone" dataKey="errors" stroke="#ff7d7d" name="Error Rate (%)" />
+                  </LineChart>
+                </ResponsiveContainer>
+              </div>
+            </CardBody>
+          </Card>
+          
+          {/* User Distribution */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <Card>
+              <CardHeader className="p-4">
+                <Typography variant="h6">User Distribution</Typography>
+              </CardHeader>
+              <CardBody className="p-4">
+                <div className="h-64">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <PieChart>
+                      <Pie
+                        data={[
+                          { name: 'Admin', value: 5 },
+                          { name: 'Data Scientists', value: 18 },
+                          { name: 'Analysts', value: 42 },
+                          { name: 'Viewers', value: 62 }
+                        ]}
+                        cx="50%"
+                        cy="50%"
+                        labelLine={false}
+                        outerRadius={80}
+                        fill="#8884d8"
+                        dataKey="value"
+                        label={({name, percent}) => `${name} ${(percent * 100).toFixed(0)}%`}
+                      >
+                        {COLORS.map((color, index) => (
+                          <Cell key={`cell-${index}`} fill={color} />
+                        ))}
+                      </Pie>
+                      <Tooltip />
+                      <Legend />
+                    </PieChart>
+                  </ResponsiveContainer>
+                </div>
+              </CardBody>
+            </Card>
+            
+            <Card>
+              <CardHeader className="p-4">
+                <Typography variant="h6">Feature Usage</Typography>
+              </CardHeader>
+              <CardBody className="p-4">
+                <div className="h-64">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <BarChart
+                      data={[
+                        { name: 'Knowledge Graph', value: 42 },
+                        { name: 'AI Analytics', value: 68 },
+                        { name: 'ETL Pipeline', value: 53 },
+                        { name: 'NLP Services', value: 35 },
+                        { name: 'Data Visualization', value: 71 }
+                      ]}
+                    >
+                      <CartesianGrid strokeDasharray="3 3" />
+                      <XAxis dataKey="name" />
+                      <YAxis />
+                      <Tooltip />
+                      <Bar dataKey="value" fill="#82ca9d" name="Usage Count" />
+                    </BarChart>
+                  </ResponsiveContainer>
+                </div>
+              </CardBody>
+            </Card>
+          </div>
+          
+          {/* Active Sessions Table */}
+          <Card>
+            <CardHeader className="p-4 border-b border-gray-100">
+              <Typography variant="h6">Active Sessions</Typography>
+            </CardHeader>
+            <CardBody className="p-4">
+              <div className="overflow-x-auto">
+                <table className="min-w-full divide-y divide-gray-200">
+                  <thead className="bg-gray-50">
+                    <tr>
+                      <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        User
+                      </th>
+                      <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Role
+                      </th>
+                      <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Status
+                      </th>
+                      <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Location
+                      </th>
+                      <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Duration
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody className="bg-white divide-y divide-gray-200">
+                    {[
+                      { id: 1, name: "John Smith", role: "Data Scientist", status: "Active", location: "New York", duration: "1h 24m" },
+                      { id: 2, name: "Alice Chen", role: "Admin", status: "Active", location: "San Francisco", duration: "45m" },
+                      { id: 3, name: "Robert Kim", role: "Analyst", status: "Idle", location: "Chicago", duration: "2h 10m" },
+                      { id: 4, name: "Emily Davis", role: "Data Scientist", status: "Active", location: "Miami", duration: "33m" },
+                      { id: 5, name: "Michael Johnson", role: "Viewer", status: "Active", location: "Seattle", duration: "1h 05m" },
+                    ].map((user) => (
+                      <tr key={user.id}>
+                        <td className="px-6 py-4 whitespace-nowrap">
+                          <div className="text-sm font-medium text-gray-900">{user.name}</div>
+                        </td>
+                        <td className="px-6 py-4 whitespace-nowrap">
+                          <div className="text-sm text-gray-500">{user.role}</div>
+                        </td>
+                        <td className="px-6 py-4 whitespace-nowrap">
+                          <span className={`px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${
+                            user.status === 'Active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
+                          }`}>
+                            {user.status}
+                          </span>
+                        </td>
+                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                          {user.location}
+                        </td>
+                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                          {user.duration}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </CardBody>
+          </Card>
+        </div>
+      )}
+      
+      {/* AI Performance Tab */}
+      {activeTab === "ai-performance" && (
+        <div className="space-y-6">
+          {/* Model Performance Metrics */}
+          <Card>
+            <CardHeader className="p-4">
+              <Typography variant="h6">AI Model Performance</Typography>
+            </CardHeader>
+            <CardBody className="p-4">
+              <div className="overflow-x-auto">
+                <table className="min-w-full divide-y divide-gray-200">
+                  <thead className="bg-gray-50">
+                    <tr>
+                      <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Model
+                      </th>
+                      <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Accuracy
+                      </th>
+                      <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Latency (ms)
+                      </th>
+                      <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Throughput (req/min)
+                      </th>
+                      <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Status
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody className="bg-white divide-y divide-gray-200">
+                    {modelPerformance.map((model, index) => (
+                      <tr key={index}>
+                        <td className="px-6 py-4 whitespace-nowrap">
+                          <div className="text-sm font-medium text-gray-900">{model.name}</div>
+                        </td>
+                        <td className="px-6 py-4 whitespace-nowrap">
+                          <div className="flex items-center">
+                            <span className={`text-sm font-medium ${
+                              model.accuracy > 95 ? 'text-green-600' : 
+                              model.accuracy > 90 ? 'text-amber-600' : 'text-red-600'
+                            }`}>
+                              {model.accuracy.toFixed(1)}%
+                            </span>
+                          </div>
+                        </td>
+                        <td className="px-6 py-4 whitespace-nowrap">
+                          <div className="flex items-center">
+                            <span className={`text-sm ${
+                              model.latency < 100 ? 'text-green-600' : 
+                              model.latency < 200 ? 'text-amber-600' : 'text-red-600'
+                            }`}>
+                              {model.latency.toFixed(0)} ms
+                            </span>
+                          </div>
+                        </td>
+                        <td className="px-6 py-4 whitespace-nowrap">
+                          <div className="text-sm text-gray-900">{model.throughput.toFixed(0)}</div>
+                        </td>
+                        <td className="px-6 py-4 whitespace-nowrap">
+                          <span className="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
+                            Healthy
+                          </span>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </CardBody>
+          </Card>
+          
+          {/* AI Performance Visualizations */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <Card>
+              <CardHeader className="p-4">
+                <Typography variant="h6">Model Accuracy Comparison</Typography>
+              </CardHeader>
+              <CardBody className="p-4">
+                <div className="h-72">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <BarChart
+                      data={modelPerformance}
+                      margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
+                    >
+                      <CartesianGrid strokeDasharray="3 3" />
+                      <XAxis dataKey="name" />
+                      <YAxis domain={[85, 100]} />
+                      <Tooltip formatter={(value) => `${(value as number).toFixed(1)}%`} />
+                      <Legend />
+                      <Bar dataKey="accuracy" name="Accuracy (%)" fill="#8884d8" />
+                    </BarChart>
+                  </ResponsiveContainer>
+                </div>
+              </CardBody>
+            </Card>
+            
+            <Card>
+              <CardHeader className="p-4">
+                <Typography variant="h6">Model Latency vs Throughput</Typography>
+              </CardHeader>
+              <CardBody className="p-4">
+                <div className="h-72">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <BarChart
+                      data={modelPerformance}
+                      margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
+                    >
+                      <CartesianGrid strokeDasharray="3 3" />
+                      <XAxis dataKey="name" />
+                      <YAxis yAxisId="left" orientation="left" stroke="#8884d8" />
+                      <YAxis yAxisId="right" orientation="right" stroke="#82ca9d" />
+                      <Tooltip />
+                      <Legend />
+                      <Bar yAxisId="left" dataKey="latency" name="Latency (ms)" fill="#8884d8" />
+                      <Bar yAxisId="right" dataKey="throughput" name="Throughput (req/min)" fill="#82ca9d" />
+                    </BarChart>
+                  </ResponsiveContainer>
+                </div>
+              </CardBody>
+            </Card>
+          </div>
+          
+          {/* AI System Health */}
+          <Card>
+            <CardHeader className="p-4">
+              <Typography variant="h6">AI System Health</Typography>
+            </CardHeader>
+            <CardBody className="p-4">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div className="bg-gray-50 rounded-lg p-4">
+                  <div className="flex justify-between items-center mb-2">
+                    <Typography color="blue-gray" className="font-medium">GPU Utilization</Typography>
+                    <MTTooltip content="Current GPU resource usage across all AI models">
+                      <div className="h-5 w-5 text-gray-400 cursor-help">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                          <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
+                        </svg>
+                      </div>
+                    </MTTooltip>
+                  </div>
+                  <div className="flex justify-between items-end">
+                    <Typography variant="h4" className="font-bold">78%</Typography>
+                    <div className="text-xs text-green-500 flex items-center">
+                      <ArrowUpIcon className="h-3 w-3 mr-1" />
+                      5.2%
+                    </div>
+                  </div>
+                  <div className="mt-2">
+                    <Progress value={78} color="blue" size="sm" />
+                  </div>
+                </div>
+                
+                <div className="bg-gray-50 rounded-lg p-4">
+                  <div className="flex justify-between items-center mb-2">
+                    <Typography color="blue-gray" className="font-medium">Inference Queue</Typography>
+                    <MTTooltip content="Number of requests waiting for AI model processing">
+                      <div className="h-5 w-5 text-gray-400 cursor-help">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                          <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
+                        </svg>
+                      </div>
+                    </MTTooltip>
+                  </div>
+                  <div className="flex justify-between items-end">
+                    <Typography variant="h4" className="font-bold">12</Typography>
+                    <div className="text-xs text-red-500 flex items-center">
+                      <ArrowUpIcon className="h-3 w-3 mr-1" />
+                      2.1%
+                    </div>
+                  </div>
+                  <div className="mt-2">
+                    <Progress value={24} color="amber" size="sm" />
+                  </div>
+                </div>
+                
+                <div className="bg-gray-50 rounded-lg p-4">
+                  <div className="flex justify-between items-center mb-2">
+                    <Typography color="blue-gray" className="font-medium">Cache Hit Rate</Typography>
+                    <MTTooltip content="Percentage of AI requests served from cache">
+                      <div className="h-5 w-5 text-gray-400 cursor-help">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                          <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
+                        </svg>
+                      </div>
+                    </MTTooltip>
+                  </div>
+                  <div className="flex justify-between items-end">
+                    <Typography variant="h4" className="font-bold">68.4%</Typography>
+                    <div className="text-xs text-green-500 flex items-center">
+                      <ArrowUpIcon className="h-3 w-3 mr-1" />
+                      3.2%
+                    </div>
+                  </div>
+                  <div className="mt-2">
+                    <Progress value={68.4} color="green" size="sm" />
+                  </div>
+                </div>
+              </div>
+            </CardBody>
+          </Card>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default RealTimeDashboard;
\ No newline at end of file
diff --git a/src/components/Dashboard/UserDashboard.tsx b/src/components/Dashboard/UserDashboard.tsx
new file mode 100644
index 0000000..d53db15
--- /dev/null
+++ b/src/components/Dashboard/UserDashboard.tsx
@@ -0,0 +1,731 @@
+'use client'
+
+import React, { useState } from 'react';
+import {
+  UsersIcon,
+  CreditCardIcon,
+  ChartBarIcon,
+  CheckCircleIcon,
+  SparklesIcon,
+  ChatBubbleLeftRightIcon,
+  ArrowRightIcon,
+  CpuChipIcon,
+} from '@heroicons/react/24/outline';
+import {
+  Card,
+  Typography,
+  Dialog,
+  DialogHeader,
+  DialogBody,
+  DialogFooter,
+  Input,
+  Button,
+  Progress,
+  Switch,
+  Textarea,
+  Tooltip,
+  Alert,
+} from "@material-tailwind/react";
+import { useRouter } from 'next/navigation';
+import { colors } from '@material-tailwind/react/types/generic';
+import { ChatBox } from '../ChatBox/ChatBox';
+
+// User Dashboard Content Component
+const UserDashboard: React.FC = () => {
+  const navigate = useRouter();
+  const [showServiceModal, setShowServiceModal] = useState(false);
+  const [selectedService, setSelectedService] = useState<string | null>(null);
+  const [showProjectModal, setShowProjectModal] = useState(false);
+  const [showAnalysisModal, setShowAnalysisModal] = useState(false);
+  const [showSupportModal, setShowSupportModal] = useState(false);
+  const [showSettingsModal, setShowSettingsModal] = useState(false);
+  const [isChatOpen, setIsChatOpen] = useState(false);
+  const [showAlert, setShowAlert] = useState({
+    show: false,
+    message: "",
+    color: "green"
+  });
+
+  const handleExploreServices = () => {
+    navigate.push('/dashboard/marketplace');
+  };
+
+  const handleNavigateToProjects = () => {
+    navigate.push('/dashboard/projects');
+  };
+
+  const handleNavigateToAnalytics = () => {
+    navigate.push('/dashboard/analytics');
+  };
+
+  const handleServiceClick = (service: string) => {
+    setSelectedService(service);
+    setShowServiceModal(true);
+  };
+
+  const showSuccessAlert = (message: string) => {
+    setShowAlert({
+      show: true,
+      message: message,
+      color: "green"
+    });
+    
+    setTimeout(() => {
+      setShowAlert({...showAlert, show: false});
+    }, 3000);
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Success Alert */}
+      {showAlert.show && (
+        <Alert
+          open={showAlert.show}
+          color={showAlert.color as colors}
+          className="fixed top-20 right-4 z-50 max-w-md"
+          icon={<CheckCircleIcon className="h-6 w-6" />}
+          onClose={() => setShowAlert({...showAlert, show: false})}
+        >
+          {showAlert.message}
+        </Alert>
+      )}
+
+      {/* Welcome Card */}
+      <Card className="p-6 border border-gray-100 relative overflow-hidden">
+        <div className="relative z-10">
+          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+            <div>
+              <div className="inline-flex items-center px-3 py-1 rounded-full bg-teal-50 text-teal-500 mb-4">
+                <SparklesIcon className="h-4 w-4 mr-2" />
+                <span className="text-sm font-medium">User Dashboard</span>
+              </div>
+              <Typography variant="h3" color="blue-gray" className="mb-2">
+                Welcome to Theoforge
+              </Typography>
+              <Typography color="gray">
+                Access your AI services and explore new capabilities for your business
+              </Typography>
+            </div>
+            <div className="flex gap-2">
+              <Button 
+                color="teal" 
+                className="flex items-center gap-2"
+                size="sm"
+                onClick={handleExploreServices}
+              >
+                <SparklesIcon className="h-4 w-4" /> 
+                Explore Services
+              </Button>
+              <Button 
+                color="blue" 
+                className="flex items-center gap-2"
+                size="sm"
+                onClick={() => setIsChatOpen(true)}
+              >
+                <ChatBubbleLeftRightIcon className="h-4 w-4" /> 
+                Chat with AI
+              </Button>
+            </div>
+          </div>
+        </div>
+        {/* Decorative elements */}
+        <div className="absolute top-0 right-0 w-64 h-64 bg-teal-50 rounded-full blur-3xl opacity-50 -z-10"></div>
+        <div className="absolute bottom-0 left-0 w-64 h-64 bg-blue-50 rounded-full blur-3xl opacity-50 -z-10"></div>
+      </Card>
+      
+      {/* User Services */}
+      <Card className="p-6 border border-gray-100">
+        <Typography variant="h5" color="blue-gray" className="mb-4">
+          Your Services
+        </Typography>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <Card className="border border-gray-100 hover:shadow-md transition-shadow">
+            <div className="p-4">
+              <div className="flex items-center gap-3 mb-3">
+                <div className="p-2 rounded-full bg-teal-50">
+                  <SparklesIcon className="h-5 w-5 text-teal-500" />
+                </div>
+                <Typography variant="h6">AI Assistants</Typography>
+              </div>
+              <Typography variant="small" color="gray">
+                Leverage our AI assistants to automate tasks and enhance productivity.
+              </Typography>
+              <Button 
+                variant="text" 
+                color="teal" 
+                className="mt-4 flex items-center gap-1"
+                onClick={() => handleServiceClick("AI Assistants")}
+              >
+                Explore <ArrowRightIcon className="h-3 w-3" />
+              </Button>
+            </div>
+          </Card>
+          <Card className="border border-gray-100 hover:shadow-md transition-shadow">
+            <div className="p-4">
+              <div className="flex items-center gap-3 mb-3">
+                <div className="p-2 rounded-full bg-blue-50">
+                  <ChartBarIcon className="h-5 w-5 text-blue-500" />
+                </div>
+                <Typography variant="h6">Data Analytics</Typography>
+              </div>
+              <Typography variant="small" color="gray">
+                Access powerful analytics tools to derive insights from your data.
+              </Typography>
+              <Button 
+                variant="text" 
+                color="blue" 
+                className="mt-4 flex items-center gap-1"
+                onClick={() => handleServiceClick("Data Analytics")}
+              >
+                Explore <ArrowRightIcon className="h-3 w-3" />
+              </Button>
+            </div>
+          </Card>
+          <Card className="border border-gray-100 hover:shadow-md transition-shadow">
+            <div className="p-4">
+              <div className="flex items-center gap-3 mb-3">
+                <div className="p-2 rounded-full bg-purple-50">
+                  <CpuChipIcon className="h-5 w-5 text-purple-500" />
+                </div>
+                <Typography variant="h6">Machine Learning</Typography>
+              </div>
+              <Typography variant="small" color="gray">
+                Implement custom ML models tailored to your business needs.
+              </Typography>
+              <Button 
+                variant="text" 
+                color="purple" 
+                className="mt-4 flex items-center gap-1"
+                onClick={() => handleServiceClick("Machine Learning")}
+              >
+                Explore <ArrowRightIcon className="h-3 w-3" />
+              </Button>
+            </div>
+          </Card>
+        </div>
+      </Card>
+
+      {/* Recent Projects */}
+      <Card className="p-6 border border-gray-100">
+        <div className="flex justify-between items-center mb-4">
+          <Typography variant="h5" color="blue-gray">
+            Recent Projects
+          </Typography>
+          <Button 
+            variant="text" 
+            color="blue" 
+            className="flex items-center gap-1"
+            onClick={handleNavigateToProjects}
+          >
+            View All <ArrowRightIcon className="h-3 w-3" />
+          </Button>
+        </div>
+        <div className="space-y-4">
+          <Card className="border border-gray-100 p-4">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <div className="p-2 rounded-full bg-teal-50">
+                  <SparklesIcon className="h-5 w-5 text-teal-500" />
+                </div>
+                <div>
+                  <Typography variant="h6">Sales Forecasting</Typography>
+                  <Typography variant="small" color="gray">Last updated: 2 days ago</Typography>
+                </div>
+              </div>
+              <Tooltip content="Active project">
+                <Button 
+                  size="sm" 
+                  color="teal" 
+                  className="rounded-full cursor-pointer"
+                  onClick={() => showSuccessAlert("Opened Sales Forecasting project")}
+                >Active</Button>
+              </Tooltip>
+            </div>
+            <Typography variant="small" className="mt-3 text-gray-600">
+              AI-powered sales forecasting model for quarterly projections.
+            </Typography>
+            <Progress value={75} color="teal" className="h-1 mt-3" />
+          </Card>
+          
+          <Card className="border border-gray-100 p-4">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <div className="p-2 rounded-full bg-blue-50">
+                  <ChartBarIcon className="h-5 w-5 text-blue-500" />
+                </div>
+                <div>
+                  <Typography variant="h6">Customer Segmentation</Typography>
+                  <Typography variant="small" color="gray">Last updated: 1 week ago</Typography>
+                </div>
+              </div>
+              <Tooltip content="In progress">
+                <Button 
+                  size="sm"
+                  color="blue" 
+                  className="rounded-full cursor-pointer"
+                  onClick={() => showSuccessAlert("Opened Customer Segmentation project")}
+                >In Progress</Button>
+              </Tooltip>
+            </div>
+            <Typography variant="small" className="mt-3 text-gray-600">
+              Analyzing customer data to identify key market segments.
+            </Typography>
+            <Progress value={45} color="blue" className="h-1 mt-3" />
+          </Card>
+        </div>
+      </Card>
+      
+      {/* Quick Actions */}
+      <Card className="p-6 border border-gray-100">
+        <Typography variant="h5" color="blue-gray" className="mb-4">
+          Quick Actions
+        </Typography>
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+          <Button 
+            color="teal" 
+            variant="outlined" 
+            className="flex flex-col items-center justify-center h-24 normal-case"
+            onClick={() => setShowProjectModal(true)}
+          >
+            <SparklesIcon className="h-6 w-6 mb-2" />
+            <span>New Project</span>
+          </Button>
+          <Button 
+            color="blue" 
+            variant="outlined" 
+            className="flex flex-col items-center justify-center h-24 normal-case"
+            onClick={() => setShowAnalysisModal(true)}
+          >
+            <ChartBarIcon className="h-6 w-6 mb-2" />
+            <span>Run Analysis</span>
+          </Button>
+          <Button 
+            color="purple" 
+            variant="outlined" 
+            className="flex flex-col items-center justify-center h-24 normal-case"
+            onClick={() => setShowSupportModal(true)}
+          >
+            <ChatBubbleLeftRightIcon className="h-6 w-6 mb-2" />
+            <span>Contact Support</span>
+          </Button>
+          <Button 
+            color="amber" 
+            variant="outlined" 
+            className="flex flex-col items-center justify-center h-24 normal-case"
+            onClick={() => setShowSettingsModal(true)}
+          >
+            <CpuChipIcon className="h-6 w-6 mb-2" />
+            <span>AI Settings</span>
+          </Button>
+        </div>
+      </Card>
+
+      {/* Metrics at a Glance */}
+      <Card className="p-6 border border-gray-100">
+        <div className="flex justify-between items-center mb-4">
+          <Typography variant="h5" color="blue-gray">
+            Metrics at a Glance
+          </Typography>
+          <Button 
+            variant="text" 
+            color="blue" 
+            className="flex items-center gap-1"
+            onClick={handleNavigateToAnalytics}
+          >
+            View Analytics <ArrowRightIcon className="h-3 w-3" />
+          </Button>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <Card className="p-4 border border-gray-100">
+            <div className="flex items-center gap-4">
+              <div className="rounded-full p-3 bg-blue-50">
+                <UsersIcon className="h-6 w-6 text-blue-500" />
+              </div>
+              <div>
+                <Typography variant="small" color="gray">Active Users</Typography>
+                <Typography variant="h4">1,234</Typography>
+                <Typography variant="small" color="green">+12.3% vs last week</Typography>
+              </div>
+            </div>
+          </Card>
+          <Card className="p-4 border border-gray-100">
+            <div className="flex items-center gap-4">
+              <div className="rounded-full p-3 bg-green-50">
+                <CreditCardIcon className="h-6 w-6 text-green-500" />
+              </div>
+              <div>
+                <Typography variant="small" color="gray">Revenue</Typography>
+                <Typography variant="h4">$12,345</Typography>
+                <Typography variant="small" color="green">+8.7% vs last week</Typography>
+              </div>
+            </div>
+          </Card>
+          <Card className="p-4 border border-gray-100">
+            <div className="flex items-center gap-4">
+              <div className="rounded-full p-3 bg-purple-50">
+                <ChartBarIcon className="h-6 w-6 text-purple-500" />
+              </div>
+              <div>
+                <Typography variant="small" color="gray">Conversion Rate</Typography>
+                <Typography variant="h4">3.45%</Typography>
+                <Typography variant="small" color="green">+0.8% vs last week</Typography>
+              </div>
+            </div>
+          </Card>
+        </div>
+      </Card>
+{/* Service Modal */}
+<Dialog
+        open={showServiceModal}
+        handler={() => setShowServiceModal(false)}
+        size="lg"
+      >
+        <DialogHeader className="flex items-center gap-2">
+          {selectedService === "AI Assistants" && (
+            <SparklesIcon className="h-6 w-6 text-teal-500" />
+          )}
+          {selectedService === "Data Analytics" && (
+            <ChartBarIcon className="h-6 w-6 text-blue-500" />
+          )}
+          {selectedService === "Machine Learning" && (
+            <CpuChipIcon className="h-6 w-6 text-purple-500" />
+          )}
+          {selectedService}
+        </DialogHeader>
+        <DialogBody divider>
+          {selectedService === "AI Assistants" && (
+            <div className="space-y-4">
+              <Typography>
+                Our AI Assistant service provides cutting-edge conversational AI solutions to automate customer interactions, support internal processes, and enhance productivity.
+              </Typography>
+              <Typography variant="h6">Key Features:</Typography>
+              <ul className="list-disc pl-6 space-y-2">
+                <li>Natural language processing for human-like conversations</li>
+                <li>Customizable workflows and knowledge base</li>
+                <li>Multi-platform integration (website, mobile, messaging apps)</li>
+                <li>Analytics dashboard for performance tracking</li>
+                <li>24/7 automated support capability</li>
+              </ul>
+            </div>
+          )}
+          {selectedService === "Data Analytics" && (
+            <div className="space-y-4">
+              <Typography>
+                Our Data Analytics platform empowers your team to transform raw data into actionable insights with powerful visualization and analysis tools.
+              </Typography>
+              <Typography variant="h6">Key Features:</Typography>
+              <ul className="list-disc pl-6 space-y-2">
+                <li>Real-time data processing and visualization</li>
+                <li>Interactive dashboards with customizable widgets</li>
+                <li>Advanced statistical modeling and trend analysis</li>
+                <li>Automated reporting and export capabilities</li>
+                <li>Integration with major data sources and warehouses</li>
+              </ul>
+            </div>
+          )}
+          {selectedService === "Machine Learning" && (
+            <div className="space-y-4">
+              <Typography>
+                Our Machine Learning solutions allow you to harness the power of AI for predictive modeling, pattern recognition, and automation of complex tasks.
+              </Typography>
+              <Typography variant="h6">Key Features:</Typography>
+              <ul className="list-disc pl-6 space-y-2">
+                <li>Custom model development for your specific business needs</li>
+                <li>Automated model training and optimization</li>
+                <li>Deployment options for cloud, edge, or on-premises</li>
+                <li>Model monitoring and performance tuning</li>
+                <li>Integration with existing systems and workflows</li>
+              </ul>
+            </div>
+          )}
+        </DialogBody>
+        <DialogFooter>
+          <Button
+            variant="text"
+            color="red"
+            onClick={() => setShowServiceModal(false)}
+            className="mr-2"
+          >
+            Cancel
+          </Button>
+          <Button 
+            variant="gradient" 
+            color="teal"
+            onClick={() => {
+              setShowServiceModal(false);
+              showSuccessAlert(`${selectedService} service activated successfully!`);
+            }}
+          >
+            Activate Service
+          </Button>
+        </DialogFooter>
+      </Dialog>
+
+      {/* New Project Modal */}
+      <Dialog
+        open={showProjectModal}
+        handler={() => setShowProjectModal(false)}
+        size="md"
+      >
+        <DialogHeader>Create New Project</DialogHeader>
+        <DialogBody divider>
+          <div className="space-y-4">
+            <div>
+              <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                Project Name
+              </Typography>
+              <Input label="Enter project name" crossOrigin={undefined} />
+            </div>
+            <div>
+              <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                Project Type
+              </Typography>
+              <select className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:border-teal-500">
+                <option value="">Select project type</option>
+                <option value="ai_assistant">AI Assistant</option>
+                <option value="data_analytics">Data Analytics</option>
+                <option value="machine_learning">Machine Learning</option>
+                <option value="custom">Custom Project</option>
+              </select>
+            </div>
+            <div>
+              <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                Description
+              </Typography>
+              <Textarea label="Project description" />
+            </div>
+          </div>
+        </DialogBody>
+        <DialogFooter>
+          <Button
+            variant="text"
+            color="red"
+            onClick={() => setShowProjectModal(false)}
+            className="mr-2"
+          >
+            Cancel
+          </Button>
+          <Button 
+            variant="gradient" 
+            color="teal"
+            onClick={() => {
+              setShowProjectModal(false);
+              navigate.push('/dashboard/projects');
+              showSuccessAlert("New project created successfully!");
+            }}
+          >
+            Create Project
+          </Button>
+        </DialogFooter>
+      </Dialog>
+      
+      {/* Run Analysis Modal */}
+      <Dialog
+        open={showAnalysisModal}
+        handler={() => setShowAnalysisModal(false)}
+        size="md"
+      >
+        <DialogHeader>Run Analysis</DialogHeader>
+        <DialogBody divider>
+          <div className="space-y-4">
+            <div>
+              <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                Analysis Type
+              </Typography>
+              <select className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:border-teal-500">
+                <option value="">Select analysis type</option>
+                <option value="predictive">Predictive Analysis</option>
+                <option value="descriptive">Descriptive Statistics</option>
+                <option value="sentiment">Sentiment Analysis</option>
+                <option value="anomaly">Anomaly Detection</option>
+              </select>
+            </div>
+            <div>
+              <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                Data Source
+              </Typography>
+              <select className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:border-teal-500">
+                <option value="">Select data source</option>
+                <option value="sales_data">Sales Data</option>
+                <option value="customer_data">Customer Data</option>
+                <option value="marketing_data">Marketing Data</option>
+                <option value="custom">Custom Data Source</option>
+              </select>
+            </div>
+            <div>
+              <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                Parameters
+              </Typography>
+              <Textarea label="Analysis parameters" />
+            </div>
+          </div>
+        </DialogBody>
+        <DialogFooter>
+          <Button
+            variant="text"
+            color="red"
+            onClick={() => setShowAnalysisModal(false)}
+            className="mr-2"
+          >
+            Cancel
+          </Button>
+          <Button 
+            variant="gradient" 
+            color="blue"
+            onClick={() => {
+              setShowAnalysisModal(false);
+              navigate.push('/dashboard/analytics');
+              showSuccessAlert("Analysis started successfully!");
+            }}
+          >
+            Run Analysis
+          </Button>
+        </DialogFooter>
+      </Dialog>
+
+      {/* Contact Support Modal */}
+      <Dialog
+        open={showSupportModal}
+        handler={() => setShowSupportModal(false)}
+        size="md"
+      >
+        <DialogHeader>Contact Support</DialogHeader>
+        <DialogBody divider>
+          <div className="space-y-4">
+            <div>
+              <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                Support Category
+              </Typography>
+              <select className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:border-teal-500">
+                <option value="">Select category</option>
+                <option value="technical">Technical Issue</option>
+                <option value="billing">Billing Question</option>
+                <option value="feature">Feature Request</option>
+                <option value="other">Other</option>
+              </select>
+            </div>
+            <div>
+              <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                Priority
+              </Typography>
+              <select className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:border-teal-500">
+                <option value="low">Low</option>
+                <option value="medium">Medium</option>
+                <option value="high">High</option>
+                <option value="critical">Critical</option>
+              </select>
+            </div>
+            <div>
+              <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                Description
+              </Typography>
+              <Textarea label="Describe your issue" rows={4} />
+            </div>
+          </div>
+        </DialogBody>
+        <DialogFooter>
+          <Button
+            variant="text"
+            color="red"
+            onClick={() => setShowSupportModal(false)}
+            className="mr-2"
+          >
+            Cancel
+          </Button>
+          <Button 
+            variant="gradient" 
+            color="purple"
+            onClick={() => {
+              setShowSupportModal(false);
+              showSuccessAlert("Support ticket submitted successfully!");
+            }}
+          >
+            Submit Ticket
+          </Button>
+        </DialogFooter>
+      </Dialog>
+
+      {/* AI Settings Modal */}
+      <Dialog
+        open={showSettingsModal}
+        handler={() => setShowSettingsModal(false)}
+        size="md"
+      >
+        <DialogHeader>AI Settings</DialogHeader>
+        <DialogBody divider>
+          <div className="space-y-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <Typography variant="h6">Enable AI Suggestions</Typography>
+                <Typography variant="small" color="gray">
+                  Receive AI-powered recommendations based on your activity
+                </Typography>
+              </div>
+              <Switch color="amber" defaultChecked crossOrigin={undefined} />
+            </div>
+            
+            <div className="flex items-center justify-between">
+              <div>
+                <Typography variant="h6">Automated Reporting</Typography>
+                <Typography variant="small" color="gray">
+                  Generate and send reports automatically on schedule
+                </Typography>
+              </div>
+              <Switch color="amber" crossOrigin={undefined} />
+            </div>
+            
+            <div className="flex items-center justify-between">
+              <div>
+                <Typography variant="h6">Data Collection</Typography>
+                <Typography variant="small" color="gray">
+                  Allow anonymous usage data to improve our services
+                </Typography>
+              </div>
+              <Switch color="amber" defaultChecked crossOrigin={undefined} />
+            </div>
+            
+            <div>
+              <Typography variant="h6" className="mb-2">Model Preference</Typography>
+              <select className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:border-amber-500">
+                <option value="balanced">Balanced (Default)</option>
+                <option value="speed">Optimize for Speed</option>
+                <option value="accuracy">Optimize for Accuracy</option>
+                <option value="efficiency">Optimize for Efficiency</option>
+              </select>
+            </div>
+          </div>
+        </DialogBody>
+        <DialogFooter>
+          <Button
+            variant="text"
+            color="red"
+            onClick={() => setShowSettingsModal(false)}
+            className="mr-2"
+          >
+            Cancel
+          </Button>
+          <Button 
+            variant="gradient" 
+            color="amber"
+            onClick={() => {
+              setShowSettingsModal(false);
+              showSuccessAlert("AI settings updated successfully!");
+            }}
+          >
+            Save Settings
+          </Button>
+        </DialogFooter>
+      </Dialog>
+
+      {/* ChatBox */}
+      {isChatOpen && (
+        <ChatBox 
+          isOpen={isChatOpen} 
+          onClose={() => setIsChatOpen(false)} 
+        />
+      )}
+    </div>
+  );
+};
+
+export default UserDashboard;
\ No newline at end of file
diff --git a/src/components/Graph/EnterprisePhilosopherGraph.tsx b/src/components/Graph/EnterprisePhilosopherGraph.tsx
index fb0de89..59c73d9 100644
--- a/src/components/Graph/EnterprisePhilosopherGraph.tsx
+++ b/src/components/Graph/EnterprisePhilosopherGraph.tsx
@@ -307,7 +307,7 @@ const EnterprisePhilosopherGraph = forwardRef<ForceGraphMethods, EnterprisePhilo
     } as ForceGraphMethods), []);
 
     useEffect(() => {
-      const worker = new Worker(new URL('../../app/forge/philosopher-graph/forceWorker.ts', import.meta.url));
+      const worker = new Worker(new URL('../../app/(HomePage)/forge/philosopher-graph/forceWorker.ts', import.meta.url));
       workerRef.current = worker;
 
       worker.onmessage = (event: MessageEvent) => {
diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
index 8f343cb..d897ff4 100644
--- a/src/components/Layout/Header.tsx
+++ b/src/components/Layout/Header.tsx
@@ -27,6 +27,8 @@ const Header: React.FC = () => {
     { label: "The Forge", path: "/forge" }, 
     { label: "Community", path: "/community" },
     { label: "Contact", path: "/contact" },
+    { label: "Sign In", path: "/login" },
+    { label: "Register", path: "/register" },
   ];
 
   return (
diff --git a/src/lib/guestIdentifier.ts b/src/lib/guestIdentifier.ts
new file mode 100644
index 0000000..05f290e
--- /dev/null
+++ b/src/lib/guestIdentifier.ts
@@ -0,0 +1,28 @@
+// lib/guestIdentifier.ts
+import axios from 'axios';
+import { v4 as uuidv4 } from 'uuid';
+import { API_URL } from '../utils/axiosConfig';
+
+const GUEST_ID_KEY = 'theoforge_guest_id';
+
+export async function getGuestId(): Promise<string | null> {
+  let guestId = localStorage.getItem(GUEST_ID_KEY);
+  
+  if (!guestId) {
+    try {
+      // Create guest in backend and get id
+      const res = await axios.post(`${API_URL}/guests`, {session_id: uuidv4()});
+      guestId = res.data.id;
+      if(guestId) localStorage.setItem(GUEST_ID_KEY, guestId);
+      else {
+        console.error('Error creating guest');
+        return null; // Null if database failed to respond
+      }
+    } catch (error) {
+      console.error('Error creating guest:', error);
+      return null;
+    }
+  }
+  
+  return guestId;
+}
\ No newline at end of file
diff --git a/src/utils/axiosConfig.ts b/src/utils/axiosConfig.ts
new file mode 100644
index 0000000..aac3435
--- /dev/null
+++ b/src/utils/axiosConfig.ts
@@ -0,0 +1,52 @@
+// src/utils/axiosConfig.ts
+import axios from 'axios';
+const useLocalhost = false;
+export const API_URL = useLocalhost ? "http://localhost:8000" : "https://dev.theoforge.com/API"
+
+// Create axios instance with base URL
+const axiosInstance = axios.create({
+  baseURL: API_URL,
+  headers: {
+    'Content-Type': 'application/json'
+  }
+});
+
+// Request interceptor to add auth token to all requests
+axiosInstance.interceptors.request.use(
+  (config) => {
+    // Get token from localStorage
+    const token = localStorage.getItem('token');
+    
+    // If token exists, add to request headers
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+// Response interceptor to handle auth errors
+axiosInstance.interceptors.response.use(
+  (response) => {
+    return response;
+  },
+  (error) => {
+    // Handle 401 Unauthorized errors (e.g., token expired)
+    if (error.response && error.response.status === 401) {
+      // Clear user auth state
+      localStorage.removeItem('token');
+      localStorage.removeItem('user');
+      
+      // Redirect to login page
+      window.location.href = '/login';
+    }
+    
+    return Promise.reject(error);
+  }
+);
+
+export default axiosInstance;
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 43da346..47226b5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,8 +1,9 @@
 const { fontFamily } = require('tailwindcss/defaultTheme');
 const defaultTheme = require('tailwindcss/defaultTheme');
+const withMT = require("@material-tailwind/react/utils/withMT");
 
 /** @type {import('tailwindcss').Config} */
-module.exports = {
+module.exports = withMT({
   darkMode: ["class"], 
   content: [
     './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
@@ -84,9 +85,11 @@ module.exports = {
         },
       },
       borderRadius: {
+        /* this gets rid of all rounded borders
         lg: "var(--radius)",
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
+        */
       },
       fontFamily: {
         // Use CSS variable names defined in app/layout.tsx (or similar)
@@ -121,6 +124,6 @@ module.exports = {
     },
   },
   plugins: [require("tailwindcss-animate")], 
-}
+});
 
 // Removed the corePlugins section to re-enable Tailwind's Preflight base styles.

From 54d4dbed72b579021e078f1ef4891fc1217ac82a Mon Sep 17 00:00:00 2001
From: KenTheNoob <kc97@njit.edu>
Date: Sat, 12 Apr 2025 21:15:23 -0400
Subject: [PATCH 2/7] adding all dashboard tabs

---
 .../(Dashboard)/dashboard/analytics/page.tsx} |   0
 .../(Dashboard)/dashboard/knowledge/page.tsx} |   2 +-
 .../dashboard/marketplace/page.tsx            | 149 +++
 .../(Dashboard)/dashboard/projects/page.tsx}  |   1 +
 .../(Dashboard)/dashboard/realtime/page.tsx   | 931 ++++++++++++++++++
 .../(Dashboard)/dashboard/resources/page.tsx  | 850 ++++++++--------
 .../Dashboard/RealTimeDashboard.tsx           | 912 -----------------
 7 files changed, 1514 insertions(+), 1331 deletions(-)
 rename src/{components/Dashboard/AnalyticsDashboard.tsx => app/(Dashboard)/dashboard/analytics/page.tsx} (100%)
 rename src/{components/Dashboard/KnowledgeGraphPage.tsx => app/(Dashboard)/dashboard/knowledge/page.tsx} (99%)
 create mode 100644 src/app/(Dashboard)/dashboard/marketplace/page.tsx
 rename src/{components/Dashboard/ProjectManagement.tsx => app/(Dashboard)/dashboard/projects/page.tsx} (99%)
 create mode 100644 src/app/(Dashboard)/dashboard/realtime/page.tsx
 delete mode 100644 src/components/Dashboard/RealTimeDashboard.tsx

diff --git a/src/components/Dashboard/AnalyticsDashboard.tsx b/src/app/(Dashboard)/dashboard/analytics/page.tsx
similarity index 100%
rename from src/components/Dashboard/AnalyticsDashboard.tsx
rename to src/app/(Dashboard)/dashboard/analytics/page.tsx
diff --git a/src/components/Dashboard/KnowledgeGraphPage.tsx b/src/app/(Dashboard)/dashboard/knowledge/page.tsx
similarity index 99%
rename from src/components/Dashboard/KnowledgeGraphPage.tsx
rename to src/app/(Dashboard)/dashboard/knowledge/page.tsx
index f8b3646..2e357fc 100644
--- a/src/components/Dashboard/KnowledgeGraphPage.tsx
+++ b/src/app/(Dashboard)/dashboard/knowledge/page.tsx
@@ -28,7 +28,7 @@ import {
   Option,
   Textarea
 } from "@material-tailwind/react";
-import KnowledgeGraph from './KnowledgeGraph';
+import KnowledgeGraph from '@/components/Dashboard/KnowledgeGraph';
 
 export function KnowledgeGraphPage() {
   const [isAddNodeModalOpen, setIsAddNodeModalOpen] = useState(false);
diff --git a/src/app/(Dashboard)/dashboard/marketplace/page.tsx b/src/app/(Dashboard)/dashboard/marketplace/page.tsx
new file mode 100644
index 0000000..fe55211
--- /dev/null
+++ b/src/app/(Dashboard)/dashboard/marketplace/page.tsx
@@ -0,0 +1,149 @@
+'use client'
+
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useState } from 'react';
+import {
+  CpuChipIcon,
+  ChartBarIcon,
+  SparklesIcon,
+  ShoppingBagIcon,
+  CheckCircleIcon
+} from '@heroicons/react/24/outline';
+import {
+  Typography,
+  Card,
+  Button,
+  Chip,
+  Alert,
+} from "@material-tailwind/react";
+import { colors } from '@material-tailwind/react/types/generic';
+
+const Marketplace: React.FC = () => {
+  const [showToast, setShowToast] = useState({
+    show: false,
+    message: "",
+    color: "green"
+  });
+  // Function to show toast notifications
+  const showNotification = (message: string, color = "green") => {
+    setShowToast({
+      show: true,
+      message,
+      color
+    });
+    
+    setTimeout(() => {
+      setShowToast({...showToast, show: false});
+    }, 3000);
+  };
+  return (
+    <div className="space-y-6">
+      <Card className="p-6 border border-gray-100 bg-gradient-to-r from-teal-600 to-blue-500 text-white">
+        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+          <div>
+            <Typography variant="h3" className="mb-2">
+              AI Solution Marketplace
+            </Typography>
+            <Typography className="opacity-90 max-w-2xl">
+              Browse and purchase AI solutions to enhance your business capabilities. Integrate seamlessly with your existing systems.
+            </Typography>
+          </div>
+          <Button 
+            color="white" 
+            className="flex items-center gap-2 text-teal-800"
+            size="lg"
+          >
+            <ShoppingBagIcon className="h-4 w-4" /> 
+            Browse Solutions
+          </Button>
+        </div>
+      </Card>
+      
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <Card className="border border-gray-100 hover:shadow-lg transition-shadow">
+          <div className="p-6">
+            <div className="flex items-center gap-3 mb-3">
+              <div className="p-2 rounded-full bg-teal-50 text-teal-500">
+                <SparklesIcon className="h-6 w-6" />
+              </div>
+              <Typography variant="h5">AI Chatbot Builder</Typography>
+            </div>
+            <div className="mb-4">
+              <Chip color="teal" value="Best Seller" className="mb-3" />
+              <Typography color="blue-gray" className="mb-3">
+                Build custom AI chatbots trained on your business data. Enhance customer support and automate common inquiries.
+              </Typography>
+              <Typography variant="h6" color="blue-gray" className="font-medium">
+                $249/month
+              </Typography>
+            </div>
+            <Button color="teal" fullWidth onClick={() => showNotification("AI Chatbot Builder added to your account!")}>
+              Add to Account
+            </Button>
+          </div>
+        </Card>
+        
+        <Card className="border border-gray-100 hover:shadow-lg transition-shadow">
+          <div className="p-6">
+            <div className="flex items-center gap-3 mb-3">
+              <div className="p-2 rounded-full bg-blue-50 text-blue-500">
+                <ChartBarIcon className="h-6 w-6" />
+              </div>
+              <Typography variant="h5">Predictive Analytics</Typography>
+            </div>
+            <div className="mb-4">
+              <Chip color="blue" value="Popular" className="mb-3" />
+              <Typography color="blue-gray" className="mb-3">
+                Leverage machine learning to predict business trends and customer behavior based on historical data.
+              </Typography>
+              <Typography variant="h6" color="blue-gray" className="font-medium">
+                $349/month
+              </Typography>
+            </div>
+            <Button color="blue" fullWidth onClick={() => showNotification("Predictive Analytics added to your account!")}>
+              Add to Account
+            </Button>
+          </div>
+        </Card>
+        
+        <Card className="border border-gray-100 hover:shadow-lg transition-shadow">
+          <div className="p-6">
+            <div className="flex items-center gap-3 mb-3">
+              <div className="p-2 rounded-full bg-purple-50 text-purple-500">
+                <CpuChipIcon className="h-6 w-6" />
+              </div>
+              <Typography variant="h5">Document Intelligence</Typography>
+            </div>
+            <div className="mb-4">
+              <Chip color="purple" value="New" className="mb-3" />
+              <Typography color="blue-gray" className="mb-3">
+                Automatically extract, classify, and process information from documents, forms, and receipts.
+              </Typography>
+              <Typography variant="h6" color="blue-gray" className="font-medium">
+                $199/month
+              </Typography>
+            </div>
+            <Button color="purple" fullWidth onClick={() => showNotification("Document Intelligence added to your account!")}>
+              Add to Account
+            </Button>
+          </div>
+        </Card>
+      </div>
+      {/* Toast notification */}
+      {showToast.show && (
+        <Alert
+          open={showToast.show}
+          color={showToast.color as colors}
+          className="fixed top-20 right-4 z-50 max-w-md"
+          icon={<CheckCircleIcon className="h-6 w-6" />}
+          onClose={() => setShowToast({...showToast, show: false})}
+        >
+          {showToast.message}
+        </Alert>
+      )}
+    </div>
+  );
+}
+
+export default Marketplace;
\ No newline at end of file
diff --git a/src/components/Dashboard/ProjectManagement.tsx b/src/app/(Dashboard)/dashboard/projects/page.tsx
similarity index 99%
rename from src/components/Dashboard/ProjectManagement.tsx
rename to src/app/(Dashboard)/dashboard/projects/page.tsx
index 3623257..a5b2878 100644
--- a/src/components/Dashboard/ProjectManagement.tsx
+++ b/src/app/(Dashboard)/dashboard/projects/page.tsx
@@ -24,6 +24,7 @@ import {
   Textarea,
   Alert,
 } from "@material-tailwind/react";
+import { colors } from '@material-tailwind/react/types/generic';
 
 interface Project {
   id: number,
diff --git a/src/app/(Dashboard)/dashboard/realtime/page.tsx b/src/app/(Dashboard)/dashboard/realtime/page.tsx
new file mode 100644
index 0000000..5df98bd
--- /dev/null
+++ b/src/app/(Dashboard)/dashboard/realtime/page.tsx
@@ -0,0 +1,931 @@
+'use client'
+
+import React, { useState, useEffect } from 'react';
+import { LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, PieChart, Pie, Cell, AreaChart, Area } from 'recharts';
+import {
+  ArrowUpIcon,
+  ArrowDownIcon,
+  ClockIcon,
+  ServerIcon,
+  CpuChipIcon,
+  UserGroupIcon,
+  DocumentChartBarIcon,
+  CloudIcon,
+  ShieldCheckIcon,
+  BoltIcon,
+  ArrowPathIcon
+} from '@heroicons/react/24/outline';
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  Typography,
+  Button,
+  Tabs,
+  TabsHeader,
+  Tab,
+  Progress,
+  Tooltip as MTTooltip
+} from "@material-tailwind/react";
+
+interface TimeSeriesData {
+  time: string,
+  cpu: number,
+  memory: number,
+  requests: number,
+  errors: number
+}
+
+const RealTimeDashboard: React.FC = () => {
+  // State for active tab
+  const [activeTab, setActiveTab] = useState("system-metrics");
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [lastUpdated, setLastUpdated] = useState(new Date());
+  const [metrics, setMetrics] = useState({
+    cpuUsage: 42,
+    memoryUsage: 68,
+    diskUsage: 51,
+    networkIn: 24.5,
+    networkOut: 18.2,
+    activeUsers: 127,
+    activeJobs: 8,
+    responseTime: 120, // in ms
+    uptime: 99.98,
+    errorRate: 0.05,
+    requestRate: 125 //requests per minute
+  });
+  
+  // Sample time series data
+  const [timeSeriesData, setTimeSeriesData] = useState<TimeSeriesData[]>([]);
+  const [modelPerformance, setModelPerformance] = useState([
+    { name: 'ETL Pipeline', accuracy: 99.2, latency: 45, throughput: 850 },
+    { name: 'NLP Model', accuracy: 94.7, latency: 120, throughput: 320 },
+    { name: 'Vision Model', accuracy: 96.8, latency: 220, throughput: 150 },
+    { name: 'Recommendation', accuracy: 92.5, latency: 85, throughput: 540 },
+    { name: 'Classification', accuracy: 97.3, latency: 65, throughput: 620 }
+  ]);
+  
+  // Generate initial time series data
+  useEffect(() => {
+    const initialData = [];
+    const now = new Date();
+    
+    for (let i = 30; i >= 0; i--) {
+      const time = new Date(now.getTime() - i * 60000);
+      initialData.push({
+        time: time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+        cpu: 30 + Math.random() * 25,
+        memory: 55 + Math.random() * 25,
+        requests: 80 + Math.random() * 90,
+        errors: Math.random() * 2
+      });
+    }
+    
+    setTimeSeriesData(initialData);
+    
+    // Setup interval for real-time updates
+    const interval = setInterval(() => {
+      updateMetrics();
+      updateTimeSeriesData();
+      setLastUpdated(new Date());
+    }, 5000);
+    
+    return () => clearInterval(interval);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  
+  // Refresh data manually
+  const handleRefresh = () => {
+    setIsRefreshing(true);
+    
+    // Simulate data fetching delay
+    setTimeout(() => {
+      updateMetrics();
+      updateTimeSeriesData();
+      setLastUpdated(new Date());
+      setIsRefreshing(false);
+    }, 1000);
+  };
+  
+  // Update metrics with slight random variations
+  const updateMetrics = () => {
+    setMetrics(prev => ({
+      cpuUsage: Math.max(0, Math.min(100, prev.cpuUsage + (Math.random() * 10 - 5))),
+      memoryUsage: Math.max(0, Math.min(100, prev.memoryUsage + (Math.random() * 8 - 4))),
+      diskUsage: Math.max(0, Math.min(100, prev.diskUsage + (Math.random() * 2 - 1))),
+      networkIn: Math.max(0, prev.networkIn + (Math.random() * 5 - 2.5)),
+      networkOut: Math.max(0, prev.networkOut + (Math.random() * 4 - 2)),
+      activeUsers: Math.max(0, prev.activeUsers + Math.floor(Math.random() * 11 - 5)),
+      activeJobs: Math.max(0, prev.activeJobs + Math.floor(Math.random() * 3 - 1)),
+      responseTime: Math.max(50, prev.responseTime + (Math.random() * 30 - 15)),
+      uptime: Math.min(100, prev.uptime + 0.001),
+      errorRate: Math.max(0, prev.errorRate + (Math.random() * 0.02 - 0.01)),
+      requestRate: Math.max(0, prev.requestRate + (Math.random() * 20 - 10))
+    }));
+    
+    // Update model performance occasionally
+    if (Math.random() > 0.7) {
+      setModelPerformance(prev => 
+        prev.map(model => ({
+          ...model,
+          accuracy: Math.max(90, Math.min(99.9, model.accuracy + (Math.random() * 0.6 - 0.3))),
+          latency: Math.max(10, model.latency + (Math.random() * 10 - 5)),
+          throughput: Math.max(50, model.throughput + (Math.random() * 30 - 15))
+        }))
+      );
+    }
+  };
+  
+  // Add new data point to time series
+  const updateTimeSeriesData = () => {
+    const now = new Date();
+    const newDataPoint = {
+      time: now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+      cpu: metrics.cpuUsage,
+      memory: metrics.memoryUsage,
+      requests: metrics.requestRate,
+      errors: metrics.errorRate * 100
+    };
+    
+    setTimeSeriesData(prev => {
+      const newData = [...prev, newDataPoint];
+      // Keep only the last 30 data points
+      if (newData.length > 30) {
+        return newData.slice(-30);
+      }
+      return newData;
+    });
+  };
+  
+  // Format for percentages
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const formatPercent = (value: number) => `${value.toFixed(1)}%`;
+  
+  // Format for data transfer
+  const formatDataTransfer = (value: number) => `${value.toFixed(1)} MB/s`;
+  
+  // Get status color based on value thresholds
+  const getStatusColor = (value: number, thresholds = { warning: 70, critical: 90 }) => {
+    if (value >= thresholds.critical) return "red";
+    if (value >= thresholds.warning) return "amber";
+    return "green";
+  };
+  
+  // Chart colors
+  const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884D8'];
+  
+  // Calculate trend indicators
+  const calculateTrend = (current: number, previous: number) => {
+    if (!previous || current === previous) return { direction: 'neutral', value: 0 };
+    
+    const diff = current - previous;
+    const percentChange = (diff / previous) * 100;
+    
+    return {
+      direction: diff > 0 ? 'up' : 'down',
+      value: Math.abs(percentChange).toFixed(1)
+    };
+  };
+  
+  // Get CPU trend from time series data
+  const cpuTrend = timeSeriesData.length > 1 
+    ? calculateTrend(
+        timeSeriesData[timeSeriesData.length - 1].cpu,
+        timeSeriesData[timeSeriesData.length - 2].cpu
+      )
+    : { direction: 'neutral', value: 0 };
+  
+  return (
+    <div className="space-y-6">
+      <Card className="p-6 border border-gray-100 relative overflow-hidden">
+        <div className="relative z-10">
+          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+            <div>
+              <Typography variant="h3" color="blue-gray" className="mb-2">
+                Real-Time Analytics Dashboard
+              </Typography>
+              <Typography color="gray">
+                Monitor system performance and user activity in real-time
+              </Typography>
+            </div>
+          </div>
+        </div>
+        {/* Decorative elements */}
+        <div className="absolute top-0 right-0 w-64 h-64 bg-teal-50 rounded-full blur-3xl opacity-50 -z-10"></div>
+        <div className="absolute bottom-0 left-0 w-64 h-64 bg-blue-50 rounded-full blur-3xl opacity-50 -z-10"></div>
+      </Card>
+      <div className="space-y-6">
+        {/* Status bar with refresh control */}
+        <div className="bg-gray-100 p-3 rounded-lg flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <div className="h-2 w-2 rounded-full bg-green-500 animate-pulse"></div>
+            <Typography variant="small" className="font-medium text-gray-700">
+              Live System Metrics
+            </Typography>
+          </div>
+          <div className="flex items-center gap-3">
+            <Typography variant="small" color="gray" className="flex items-center gap-1">
+              <ClockIcon className="h-4 w-4" /> 
+              Last updated: {lastUpdated.toLocaleTimeString()}
+            </Typography>
+            <Button 
+              variant="text" 
+              size="sm" 
+              className="flex items-center gap-1"
+              onClick={handleRefresh}
+              disabled={isRefreshing}
+            >
+              <ArrowPathIcon className={`h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`} />
+              Refresh
+            </Button>
+          </div>
+        </div>
+        
+        {/* Dashboard Tabs */}
+        <Tabs value={activeTab}>
+          <TabsHeader>
+            <Tab value="system-metrics" onClick={() => setActiveTab("system-metrics")}>
+              <div className="flex items-center gap-2">
+                <ServerIcon className="h-4 w-4" />
+                System Metrics
+              </div>
+            </Tab>
+            <Tab value="user-activity" onClick={() => setActiveTab("user-activity")}>
+              <div className="flex items-center gap-2">
+                <UserGroupIcon className="h-4 w-4" />
+                User Activity
+              </div>
+            </Tab>
+            <Tab value="ai-performance" onClick={() => setActiveTab("ai-performance")}>
+              <div className="flex items-center gap-2">
+                <CpuChipIcon className="h-4 w-4" />
+                AI Performance
+              </div>
+            </Tab>
+          </TabsHeader>
+        </Tabs>
+        
+        {/* System Metrics Tab */}
+        {activeTab === "system-metrics" && (
+          <div className="space-y-6">
+            {/* Key System Metrics */}
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+              {/* CPU Usage Card */}
+              <Card className="hover:shadow-md transition-shadow">
+                <CardBody className="p-4">
+                  <div className="flex justify-between items-start">
+                    <div>
+                      <Typography variant="small" color="blue-gray" className="font-medium mb-1">
+                        CPU Usage
+                      </Typography>
+                      <div className="flex items-center gap-2">
+                        <Typography variant="h4" className="font-bold">
+                          {metrics.cpuUsage.toFixed(1)}%
+                        </Typography>
+                        {cpuTrend.direction !== 'neutral' && (
+                          <div className={`flex items-center text-xs ${cpuTrend.direction === 'up' ? 'text-red-500' : 'text-green-500'}`}>
+                            {cpuTrend.direction === 'up' ? (
+                              <ArrowUpIcon className="h-3 w-3 mr-1" />
+                            ) : (
+                              <ArrowDownIcon className="h-3 w-3 mr-1" />
+                            )}
+                            {cpuTrend.value}%
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                    <div className={`p-2 rounded-full bg-${getStatusColor(metrics.cpuUsage)}-50`}>
+                      <CpuChipIcon className={`h-5 w-5 text-${getStatusColor(metrics.cpuUsage)}-500`} />
+                    </div>
+                  </div>
+                  <div className="mt-3">
+                    <Progress 
+                      value={metrics.cpuUsage} 
+                      color={getStatusColor(metrics.cpuUsage)} 
+                      size="lg"
+                    />
+                  </div>
+                </CardBody>
+              </Card>
+              
+              {/* Memory Usage Card */}
+              <Card className="hover:shadow-md transition-shadow">
+                <CardBody className="p-4">
+                  <div className="flex justify-between items-start">
+                    <div>
+                      <Typography variant="small" color="blue-gray" className="font-medium mb-1">
+                        Memory Usage
+                      </Typography>
+                      <Typography variant="h4" className="font-bold">
+                        {metrics.memoryUsage.toFixed(1)}%
+                      </Typography>
+                    </div>
+                    <div className={`p-2 rounded-full bg-${getStatusColor(metrics.memoryUsage)}-50`}>
+                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" 
+                        className={`h-5 w-5 text-${getStatusColor(metrics.memoryUsage)}-500`}>
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 002.25-2.25V6.75a2.25 2.25 0 00-2.25-2.25H6.75A2.25 2.25 0 004.5 6.75v10.5a2.25 2.25 0 002.25 2.25zm.75-12h9v9h-9v-9z" />
+                      </svg>
+                    </div>
+                  </div>
+                  <div className="mt-3">
+                    <Progress 
+                      value={metrics.memoryUsage} 
+                      color={getStatusColor(metrics.memoryUsage)} 
+                      size="lg"
+                    />
+                  </div>
+                </CardBody>
+              </Card>
+              
+              {/* Disk Usage Card */}
+              <Card className="hover:shadow-md transition-shadow">
+                <CardBody className="p-4">
+                  <div className="flex justify-between items-start">
+                    <div>
+                      <Typography variant="small" color="blue-gray" className="font-medium mb-1">
+                        Storage Usage
+                      </Typography>
+                      <Typography variant="h4" className="font-bold">
+                        {metrics.diskUsage.toFixed(1)}%
+                      </Typography>
+                    </div>
+                    <div className="p-2 rounded-full bg-blue-50">
+                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" 
+                        className="h-5 w-5 text-blue-500">
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" />
+                      </svg>
+                    </div>
+                  </div>
+                  <div className="mt-3">
+                    <Progress 
+                      value={metrics.diskUsage} 
+                      color={getStatusColor(metrics.diskUsage, { warning: 80, critical: 95 })} 
+                      size="lg"
+                    />
+                  </div>
+                </CardBody>
+              </Card>
+              
+              {/* Network Usage Card */}
+              <Card className="hover:shadow-md transition-shadow">
+                <CardBody className="p-4">
+                  <div className="flex justify-between items-start">
+                    <div>
+                      <Typography variant="small" color="blue-gray" className="font-medium mb-1">
+                        Network Traffic
+                      </Typography>
+                      <div className="space-y-1">
+                        <div className="flex items-center gap-1">
+                          <ArrowUpIcon className="h-3 w-3 text-blue-500" />
+                          <Typography variant="small">
+                            Out: {formatDataTransfer(metrics.networkOut)}
+                          </Typography>
+                        </div>
+                        <div className="flex items-center gap-1">
+                          <ArrowDownIcon className="h-3 w-3 text-green-500" />
+                          <Typography variant="small">
+                            In: {formatDataTransfer(metrics.networkIn)}
+                          </Typography>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="p-2 rounded-full bg-purple-50">
+                      <CloudIcon className="h-5 w-5 text-purple-500" />
+                    </div>
+                  </div>
+                  <div className="mt-3 space-y-1">
+                    <div className="h-2 w-full bg-gray-200 rounded-full">
+                      <div className="h-2 bg-blue-500 rounded-full" style={{ width: `${(metrics.networkOut / 50) * 100}%` }}></div>
+                    </div>
+                    <div className="h-2 w-full bg-gray-200 rounded-full">
+                      <div className="h-2 bg-green-500 rounded-full" style={{ width: `${(metrics.networkIn / 50) * 100}%` }}></div>
+                    </div>
+                  </div>
+                </CardBody>
+              </Card>
+            </div>
+            
+            {/* System Performance Chart */}
+            <Card>
+              <CardHeader className="p-4">
+                <Typography variant="h6">System Performance Trends</Typography>
+              </CardHeader>
+              <CardBody className="p-4">
+                <div className="h-80">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <AreaChart
+                      data={timeSeriesData}
+                      margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
+                    >
+                      <CartesianGrid strokeDasharray="3 3" />
+                      <XAxis dataKey="time" />
+                      <YAxis />
+                      <Tooltip />
+                      <Legend />
+                      <Area type="monotone" dataKey="cpu" stackId="1" stroke="#8884d8" fill="#8884d8" name="CPU (%)" />
+                      <Area type="monotone" dataKey="memory" stackId="2" stroke="#82ca9d" fill="#82ca9d" name="Memory (%)" />
+                      <Area type="monotone" dataKey="requests" stackId="3" stroke="#ffc658" fill="#ffc658" name="Requests/min" />
+                    </AreaChart>
+                  </ResponsiveContainer>
+                </div>
+              </CardBody>
+            </Card>
+            
+            {/* Additional System Metrics */}
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              {/* Response Time Card */}
+              <Card className="hover:shadow-md transition-shadow">
+                <CardBody className="p-4">
+                  <div className="flex items-center justify-between mb-2">
+                    <Typography variant="small" color="blue-gray" className="font-medium">
+                      Avg. Response Time
+                    </Typography>
+                    <div className="p-2 rounded-full bg-amber-50">
+                      <BoltIcon className="h-4 w-4 text-amber-500" />
+                    </div>
+                  </div>
+                  <Typography variant="h4" className="font-bold mb-1">
+                    {metrics.responseTime.toFixed(0)} ms
+                  </Typography>
+                  <Typography variant="small" color="gray">
+                    Target: &lt;100ms
+                  </Typography>
+                  <div className="mt-2">
+                    <Progress 
+                      value={(metrics.responseTime / 2)} 
+                      color={metrics.responseTime > 200 ? "red" : metrics.responseTime > 100 ? "amber" : "green"} 
+                      size="sm"
+                    />
+                  </div>
+                </CardBody>
+              </Card>
+              
+              {/* Uptime Card */}
+              <Card className="hover:shadow-md transition-shadow">
+                <CardBody className="p-4">
+                  <div className="flex items-center justify-between mb-2">
+                    <Typography variant="small" color="blue-gray" className="font-medium">
+                      System Uptime
+                    </Typography>
+                    <div className="p-2 rounded-full bg-green-50">
+                      <ShieldCheckIcon className="h-4 w-4 text-green-500" />
+                    </div>
+                  </div>
+                  <Typography variant="h4" className="font-bold mb-1">
+                    {metrics.uptime.toFixed(2)}%
+                  </Typography>
+                  <Typography variant="small" color="gray">
+                    Last 30 days
+                  </Typography>
+                  <div className="mt-2">
+                    <Progress 
+                      value={metrics.uptime} 
+                      color="green" 
+                      size="sm"
+                    />
+                  </div>
+                </CardBody>
+              </Card>
+              
+              {/* Error Rate Card */}
+              <Card className="hover:shadow-md transition-shadow">
+                <CardBody className="p-4">
+                  <div className="flex items-center justify-between mb-2">
+                    <Typography variant="small" color="blue-gray" className="font-medium">
+                      Error Rate
+                    </Typography>
+                    <div className="p-2 rounded-full bg-red-50">
+                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" 
+                        className="h-4 w-4 text-red-500">
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+                      </svg>
+                    </div>
+                  </div>
+                  <Typography variant="h4" className="font-bold mb-1">
+                    {(metrics.errorRate * 100).toFixed(2)}%
+                  </Typography>
+                  <Typography variant="small" color="gray">
+                    Target: &lt;0.1%
+                  </Typography>
+                  <div className="mt-2">
+                    <Progress 
+                      value={(metrics.errorRate * 1000)} 
+                      color={metrics.errorRate > 0.1 ? "red" : metrics.errorRate > 0.05 ? "amber" : "green"} 
+                      size="sm"
+                    />
+                  </div>
+                </CardBody>
+              </Card>
+            </div>
+          </div>
+        )}
+        
+        {/* User Activity Tab */}
+        {activeTab === "user-activity" && (
+          <div className="space-y-6">
+            {/* Active User Stats */}
+            <Card>
+              <CardHeader className="p-4">
+                <Typography variant="h6">Active User Metrics</Typography>
+              </CardHeader>
+              <CardBody className="p-4">
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+                  <div className="p-3 bg-gray-50 rounded-lg">
+                    <div className="flex justify-between items-center">
+                      <div>
+                        <Typography variant="small" color="gray">Current Active Users</Typography>
+                        <Typography variant="h4" className="font-bold">
+                          {metrics.activeUsers}
+                        </Typography>
+                      </div>
+                      <div className="p-2 rounded-full bg-blue-50">
+                        <UserGroupIcon className="h-5 w-5 text-blue-500" />
+                      </div>
+                    </div>
+                  </div>
+                  
+                  <div className="p-3 bg-gray-50 rounded-lg">
+                    <div className="flex justify-between items-center">
+                      <div>
+                        <Typography variant="small" color="gray">Request Rate</Typography>
+                        <Typography variant="h4" className="font-bold">
+                          {metrics.requestRate.toFixed(0)}/min
+                        </Typography>
+                      </div>
+                      <div className="p-2 rounded-full bg-teal-50">
+                        <BoltIcon className="h-5 w-5 text-teal-500" />
+                      </div>
+                    </div>
+                  </div>
+                  
+                  <div className="p-3 bg-gray-50 rounded-lg">
+                    <div className="flex justify-between items-center">
+                      <div>
+                        <Typography variant="small" color="gray">Active Jobs</Typography>
+                        <Typography variant="h4" className="font-bold">
+                          {metrics.activeJobs}
+                        </Typography>
+                      </div>
+                      <div className="p-2 rounded-full bg-purple-50">
+                        <DocumentChartBarIcon className="h-5 w-5 text-purple-500" />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                
+                <div className="h-72">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <LineChart data={timeSeriesData}>
+                      <CartesianGrid strokeDasharray="3 3" />
+                      <XAxis dataKey="time" />
+                      <YAxis yAxisId="left" />
+                      <YAxis yAxisId="right" orientation="right" />
+                      <Tooltip />
+                      <Legend />
+                      <Line yAxisId="left" type="monotone" dataKey="requests" stroke="#8884d8" name="Requests/min" />
+                      <Line yAxisId="right" type="monotone" dataKey="errors" stroke="#ff7d7d" name="Error Rate (%)" />
+                    </LineChart>
+                  </ResponsiveContainer>
+                </div>
+              </CardBody>
+            </Card>
+            
+            {/* User Distribution */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <Card>
+                <CardHeader className="p-4">
+                  <Typography variant="h6">User Distribution</Typography>
+                </CardHeader>
+                <CardBody className="p-4">
+                  <div className="h-64">
+                    <ResponsiveContainer width="100%" height="100%">
+                      <PieChart>
+                        <Pie
+                          data={[
+                            { name: 'Admin', value: 5 },
+                            { name: 'Data Scientists', value: 18 },
+                            { name: 'Analysts', value: 42 },
+                            { name: 'Viewers', value: 62 }
+                          ]}
+                          cx="50%"
+                          cy="50%"
+                          labelLine={false}
+                          outerRadius={80}
+                          fill="#8884d8"
+                          dataKey="value"
+                          label={({name, percent}) => `${name} ${(percent * 100).toFixed(0)}%`}
+                        >
+                          {COLORS.map((color, index) => (
+                            <Cell key={`cell-${index}`} fill={color} />
+                          ))}
+                        </Pie>
+                        <Tooltip />
+                        <Legend />
+                      </PieChart>
+                    </ResponsiveContainer>
+                  </div>
+                </CardBody>
+              </Card>
+              
+              <Card>
+                <CardHeader className="p-4">
+                  <Typography variant="h6">Feature Usage</Typography>
+                </CardHeader>
+                <CardBody className="p-4">
+                  <div className="h-64">
+                    <ResponsiveContainer width="100%" height="100%">
+                      <BarChart
+                        data={[
+                          { name: 'Knowledge Graph', value: 42 },
+                          { name: 'AI Analytics', value: 68 },
+                          { name: 'ETL Pipeline', value: 53 },
+                          { name: 'NLP Services', value: 35 },
+                          { name: 'Data Visualization', value: 71 }
+                        ]}
+                      >
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey="name" />
+                        <YAxis />
+                        <Tooltip />
+                        <Bar dataKey="value" fill="#82ca9d" name="Usage Count" />
+                      </BarChart>
+                    </ResponsiveContainer>
+                  </div>
+                </CardBody>
+              </Card>
+            </div>
+            
+            {/* Active Sessions Table */}
+            <Card>
+              <CardHeader className="p-4 border-b border-gray-100">
+                <Typography variant="h6">Active Sessions</Typography>
+              </CardHeader>
+              <CardBody className="p-4">
+                <div className="overflow-x-auto">
+                  <table className="min-w-full divide-y divide-gray-200">
+                    <thead className="bg-gray-50">
+                      <tr>
+                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          User
+                        </th>
+                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          Role
+                        </th>
+                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          Status
+                        </th>
+                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          Location
+                        </th>
+                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          Duration
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody className="bg-white divide-y divide-gray-200">
+                      {[
+                        { id: 1, name: "John Smith", role: "Data Scientist", status: "Active", location: "New York", duration: "1h 24m" },
+                        { id: 2, name: "Alice Chen", role: "Admin", status: "Active", location: "San Francisco", duration: "45m" },
+                        { id: 3, name: "Robert Kim", role: "Analyst", status: "Idle", location: "Chicago", duration: "2h 10m" },
+                        { id: 4, name: "Emily Davis", role: "Data Scientist", status: "Active", location: "Miami", duration: "33m" },
+                        { id: 5, name: "Michael Johnson", role: "Viewer", status: "Active", location: "Seattle", duration: "1h 05m" },
+                      ].map((user) => (
+                        <tr key={user.id}>
+                          <td className="px-6 py-4 whitespace-nowrap">
+                            <div className="text-sm font-medium text-gray-900">{user.name}</div>
+                          </td>
+                          <td className="px-6 py-4 whitespace-nowrap">
+                            <div className="text-sm text-gray-500">{user.role}</div>
+                          </td>
+                          <td className="px-6 py-4 whitespace-nowrap">
+                            <span className={`px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${
+                              user.status === 'Active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
+                            }`}>
+                              {user.status}
+                            </span>
+                          </td>
+                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                            {user.location}
+                          </td>
+                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                            {user.duration}
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </CardBody>
+            </Card>
+          </div>
+        )}
+        
+        {/* AI Performance Tab */}
+        {activeTab === "ai-performance" && (
+          <div className="space-y-6">
+            {/* Model Performance Metrics */}
+            <Card>
+              <CardHeader className="p-4">
+                <Typography variant="h6">AI Model Performance</Typography>
+              </CardHeader>
+              <CardBody className="p-4">
+                <div className="overflow-x-auto">
+                  <table className="min-w-full divide-y divide-gray-200">
+                    <thead className="bg-gray-50">
+                      <tr>
+                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          Model
+                        </th>
+                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          Accuracy
+                        </th>
+                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          Latency (ms)
+                        </th>
+                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          Throughput (req/min)
+                        </th>
+                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          Status
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody className="bg-white divide-y divide-gray-200">
+                      {modelPerformance.map((model, index) => (
+                        <tr key={index}>
+                          <td className="px-6 py-4 whitespace-nowrap">
+                            <div className="text-sm font-medium text-gray-900">{model.name}</div>
+                          </td>
+                          <td className="px-6 py-4 whitespace-nowrap">
+                            <div className="flex items-center">
+                              <span className={`text-sm font-medium ${
+                                model.accuracy > 95 ? 'text-green-600' : 
+                                model.accuracy > 90 ? 'text-amber-600' : 'text-red-600'
+                              }`}>
+                                {model.accuracy.toFixed(1)}%
+                              </span>
+                            </div>
+                          </td>
+                          <td className="px-6 py-4 whitespace-nowrap">
+                            <div className="flex items-center">
+                              <span className={`text-sm ${
+                                model.latency < 100 ? 'text-green-600' : 
+                                model.latency < 200 ? 'text-amber-600' : 'text-red-600'
+                              }`}>
+                                {model.latency.toFixed(0)} ms
+                              </span>
+                            </div>
+                          </td>
+                          <td className="px-6 py-4 whitespace-nowrap">
+                            <div className="text-sm text-gray-900">{model.throughput.toFixed(0)}</div>
+                          </td>
+                          <td className="px-6 py-4 whitespace-nowrap">
+                            <span className="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
+                              Healthy
+                            </span>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </CardBody>
+            </Card>
+            
+            {/* AI Performance Visualizations */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <Card>
+                <CardHeader className="p-4">
+                  <Typography variant="h6">Model Accuracy Comparison</Typography>
+                </CardHeader>
+                <CardBody className="p-4">
+                  <div className="h-72">
+                    <ResponsiveContainer width="100%" height="100%">
+                      <BarChart
+                        data={modelPerformance}
+                        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
+                      >
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey="name" />
+                        <YAxis domain={[85, 100]} />
+                        <Tooltip formatter={(value) => `${(value as number).toFixed(1)}%`} />
+                        <Legend />
+                        <Bar dataKey="accuracy" name="Accuracy (%)" fill="#8884d8" />
+                      </BarChart>
+                    </ResponsiveContainer>
+                  </div>
+                </CardBody>
+              </Card>
+              
+              <Card>
+                <CardHeader className="p-4">
+                  <Typography variant="h6">Model Latency vs Throughput</Typography>
+                </CardHeader>
+                <CardBody className="p-4">
+                  <div className="h-72">
+                    <ResponsiveContainer width="100%" height="100%">
+                      <BarChart
+                        data={modelPerformance}
+                        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
+                      >
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey="name" />
+                        <YAxis yAxisId="left" orientation="left" stroke="#8884d8" />
+                        <YAxis yAxisId="right" orientation="right" stroke="#82ca9d" />
+                        <Tooltip />
+                        <Legend />
+                        <Bar yAxisId="left" dataKey="latency" name="Latency (ms)" fill="#8884d8" />
+                        <Bar yAxisId="right" dataKey="throughput" name="Throughput (req/min)" fill="#82ca9d" />
+                      </BarChart>
+                    </ResponsiveContainer>
+                  </div>
+                </CardBody>
+              </Card>
+            </div>
+            
+            {/* AI System Health */}
+            <Card>
+              <CardHeader className="p-4">
+                <Typography variant="h6">AI System Health</Typography>
+              </CardHeader>
+              <CardBody className="p-4">
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                  <div className="bg-gray-50 rounded-lg p-4">
+                    <div className="flex justify-between items-center mb-2">
+                      <Typography color="blue-gray" className="font-medium">GPU Utilization</Typography>
+                      <MTTooltip content="Current GPU resource usage across all AI models">
+                        <div className="h-5 w-5 text-gray-400 cursor-help">
+                          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
+                          </svg>
+                        </div>
+                      </MTTooltip>
+                    </div>
+                    <div className="flex justify-between items-end">
+                      <Typography variant="h4" className="font-bold">78%</Typography>
+                      <div className="text-xs text-green-500 flex items-center">
+                        <ArrowUpIcon className="h-3 w-3 mr-1" />
+                        5.2%
+                      </div>
+                    </div>
+                    <div className="mt-2">
+                      <Progress value={78} color="blue" size="sm" />
+                    </div>
+                  </div>
+                  
+                  <div className="bg-gray-50 rounded-lg p-4">
+                    <div className="flex justify-between items-center mb-2">
+                      <Typography color="blue-gray" className="font-medium">Inference Queue</Typography>
+                      <MTTooltip content="Number of requests waiting for AI model processing">
+                        <div className="h-5 w-5 text-gray-400 cursor-help">
+                          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
+                          </svg>
+                        </div>
+                      </MTTooltip>
+                    </div>
+                    <div className="flex justify-between items-end">
+                      <Typography variant="h4" className="font-bold">12</Typography>
+                      <div className="text-xs text-red-500 flex items-center">
+                        <ArrowUpIcon className="h-3 w-3 mr-1" />
+                        2.1%
+                      </div>
+                    </div>
+                    <div className="mt-2">
+                      <Progress value={24} color="amber" size="sm" />
+                    </div>
+                  </div>
+                  
+                  <div className="bg-gray-50 rounded-lg p-4">
+                    <div className="flex justify-between items-center mb-2">
+                      <Typography color="blue-gray" className="font-medium">Cache Hit Rate</Typography>
+                      <MTTooltip content="Percentage of AI requests served from cache">
+                        <div className="h-5 w-5 text-gray-400 cursor-help">
+                          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
+                          </svg>
+                        </div>
+                      </MTTooltip>
+                    </div>
+                    <div className="flex justify-between items-end">
+                      <Typography variant="h4" className="font-bold">68.4%</Typography>
+                      <div className="text-xs text-green-500 flex items-center">
+                        <ArrowUpIcon className="h-3 w-3 mr-1" />
+                        3.2%
+                      </div>
+                    </div>
+                    <div className="mt-2">
+                      <Progress value={68.4} color="green" size="sm" />
+                    </div>
+                  </div>
+                </div>
+              </CardBody>
+            </Card>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default RealTimeDashboard;
\ No newline at end of file
diff --git a/src/app/(Dashboard)/dashboard/resources/page.tsx b/src/app/(Dashboard)/dashboard/resources/page.tsx
index 3c7f525..de6e8d3 100644
--- a/src/app/(Dashboard)/dashboard/resources/page.tsx
+++ b/src/app/(Dashboard)/dashboard/resources/page.tsx
@@ -312,439 +312,453 @@ const Resources: React.FC = () => {
   };
 
   return (
-    <div className="w-full">
-      {/* Success/Error Alert */}
-      {showAlert.show && (
-        <Alert
-          open={showAlert.show}
-          onClose={() => setShowAlert(prev => ({ ...prev, show: false }))}
-          animate={{
-            mount: { y: 0 },
-            unmount: { y: -100 },
-          }}
-          className="fixed top-4 right-4 z-50 max-w-md"
-          color={showAlert.type === "success" ? "green" : "red"}
-          icon={
-            showAlert.type === "success" ? (
-              <CheckIcon className="h-6 w-6" />
-            ) : (
-              <ExclamationCircleIcon className="h-6 w-6" />
-            )
-          }
-        >
-          {showAlert.message}
-        </Alert>
-      )}
+    <Card className="border border-gray-100 overflow-hidden">
+      <div className="px-6 py-4 bg-gray-50 border-b border-gray-100 flex items-center justify-between">
+        <div>
+          <Typography variant="h5" color="blue-gray">
+            Resources
+          </Typography>
+          <Typography variant="small" color="gray">
+            Manage your files and documents
+          </Typography>
+        </div>
+      </div>
+      <div className="p-4">
+        <div className="w-full">
+          {/* Success/Error Alert */}
+          {showAlert.show && (
+            <Alert
+              open={showAlert.show}
+              onClose={() => setShowAlert(prev => ({ ...prev, show: false }))}
+              animate={{
+                mount: { y: 0 },
+                unmount: { y: -100 },
+              }}
+              className="fixed top-4 right-4 z-50 max-w-md"
+              color={showAlert.type === "success" ? "green" : "red"}
+              icon={
+                showAlert.type === "success" ? (
+                  <CheckIcon className="h-6 w-6" />
+                ) : (
+                  <ExclamationCircleIcon className="h-6 w-6" />
+                )
+              }
+            >
+              {showAlert.message}
+            </Alert>
+          )}
 
-      {/* Resources Header */}
-      <Card className="w-full shadow-sm border border-gray-100 mb-6">
-        <CardBody>
-          <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
-            <div>
-              <Typography variant="h4" color="blue-gray" className="mb-1">
-                Resources
-              </Typography>
-              <Typography color="gray" className="font-normal">
-                Manage your files and documents
-              </Typography>
-            </div>
-            <div className="flex flex-wrap items-center gap-3">
-              <div>
-                <IconButton
-                  onClick={loadResources}
-                  variant="text"
-                  color="teal"
-                  className="h-8 w-8 rounded-full hover:bg-white/20 transition-all"
-                  size="sm"
-                >
-                  <ArrowPathIcon className="h-4 w-4" />
-                </IconButton>
-              </div>
-              <div className="w-full md:w-auto">
-                <Input
-                  label="Search files"
-                  icon={<DocumentIcon className="h-5 w-5 text-blue-gray-300" />}
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="min-w-[250px]" crossOrigin={undefined}                />
+          {/* Resources Header */}
+          <Card className="w-full shadow-sm border border-gray-100 mb-6">
+            <CardBody>
+              <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+                <div>
+                  <Typography variant="h4" color="blue-gray" className="mb-1">
+                    Resources
+                  </Typography>
+                  <Typography color="gray" className="font-normal">
+                    Manage your files and documents
+                  </Typography>
+                </div>
+                <div className="flex flex-wrap items-center gap-3">
+                  <div>
+                    <IconButton
+                      onClick={loadResources}
+                      variant="text"
+                      color="teal"
+                      className="h-8 w-8 rounded-full hover:bg-white/20 transition-all"
+                      size="sm"
+                    >
+                      <ArrowPathIcon className="h-4 w-4" />
+                    </IconButton>
+                  </div>
+                  <div className="w-full md:w-auto">
+                    <Input
+                      label="Search files"
+                      icon={<DocumentIcon className="h-5 w-5 text-blue-gray-300" />}
+                      value={searchQuery}
+                      onChange={(e) => setSearchQuery(e.target.value)}
+                      className="min-w-[250px]" crossOrigin={undefined}                />
+                  </div>
+                  <Button
+                    className="flex items-center gap-2"
+                    color="teal"
+                    onClick={() => setIsUploadModalOpen(true)}
+                  >
+                    <CloudArrowUpIcon className="h-4 w-4" /> Upload File
+                  </Button>
+                </div>
               </div>
-              <Button
-                className="flex items-center gap-2"
-                color="teal"
-                onClick={() => setIsUploadModalOpen(true)}
-              >
-                <CloudArrowUpIcon className="h-4 w-4" /> Upload File
-              </Button>
-            </div>
-          </div>
-        </CardBody>
-      </Card>
+            </CardBody>
+          </Card>
 
-      {/* Resources Content */}
-      <Card className="w-full shadow-sm border border-gray-100">
-        <CardHeader floated={false} shadow={false} className="rounded-none pt-4 pb-0">
-          <Tabs value={activeTab}>
-            <TabsHeader className="bg-gray-100 rounded-lg p-1">
-              <Tab 
-                value="all" 
-                onClick={() => setActiveTab("all")}
-                className={activeTab === "all" ? "font-medium" : ""}
-              >
-                All Files
-              </Tab>
-              <Tab 
-                value="documents" 
-                onClick={() => setActiveTab("documents")}
-                className={activeTab === "documents" ? "font-medium" : ""}
-              >
-                Documents
-              </Tab>
-              <Tab 
-                value="images" 
-                onClick={() => setActiveTab("images")}
-                className={activeTab === "images" ? "font-medium" : ""}
-              >
-                Images
-              </Tab>
-              <Tab 
-                value="other" 
-                onClick={() => setActiveTab("other")}
-                className={activeTab === "other" ? "font-medium" : ""}
-              >
-                Other
-              </Tab>
-            </TabsHeader>
-            <TabsBody animate={{ initial: { y: 250 }, mount: { y: 0 }, unmount: { y: 250 } }}>
-              {["all", "documents", "images", "other"].map((value) => (
-                <TabPanel key={value} value={value} className="p-0">
-                  {filteredResources.length > 0 ? (
-                    <div className="overflow-x-auto">
-                      <table className="w-full min-w-max table-auto text-left">
-                        <thead>
-                          <tr>
-                            <th className="border-b border-blue-gray-100 bg-blue-gray-50/50 p-4">
-                              <Typography
-                                variant="small"
-                                color="blue-gray"
-                                className="font-normal leading-none opacity-70"
-                              >
-                                Name
-                              </Typography>
-                            </th>
-                            <th className="border-b border-blue-gray-100 bg-blue-gray-50/50 p-4">
-                              <Typography
-                                variant="small"
-                                color="blue-gray"
-                                className="font-normal leading-none opacity-70"
-                              >
-                                Type
-                              </Typography>
-                            </th>
-                            <th className="border-b border-blue-gray-100 bg-blue-gray-50/50 p-4">
-                              <Typography
-                                variant="small"
-                                color="blue-gray"
-                                className="font-normal leading-none opacity-70"
-                              >
-                                Description
-                              </Typography>
-                            </th>
-                            <th className="border-b border-blue-gray-100 bg-blue-gray-50/50 p-4">
-                              <Typography
-                                variant="small"
-                                color="blue-gray"
-                                className="font-normal leading-none opacity-70"
-                              >
-                                Actions
-                              </Typography>
-                            </th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {filteredResources.map((resource, index) => {
-                            const isLast = index === filteredResources.length - 1;
-                            const classes = isLast ? "p-4" : "p-4 border-b border-blue-gray-50";
+          {/* Resources Content */}
+          <Card className="w-full shadow-sm border border-gray-100">
+            <CardHeader floated={false} shadow={false} className="rounded-none pt-4 pb-0">
+              <Tabs value={activeTab}>
+                <TabsHeader className="bg-gray-100 rounded-lg p-1">
+                  <Tab 
+                    value="all" 
+                    onClick={() => setActiveTab("all")}
+                    className={activeTab === "all" ? "font-medium" : ""}
+                  >
+                    All Files
+                  </Tab>
+                  <Tab 
+                    value="documents" 
+                    onClick={() => setActiveTab("documents")}
+                    className={activeTab === "documents" ? "font-medium" : ""}
+                  >
+                    Documents
+                  </Tab>
+                  <Tab 
+                    value="images" 
+                    onClick={() => setActiveTab("images")}
+                    className={activeTab === "images" ? "font-medium" : ""}
+                  >
+                    Images
+                  </Tab>
+                  <Tab 
+                    value="other" 
+                    onClick={() => setActiveTab("other")}
+                    className={activeTab === "other" ? "font-medium" : ""}
+                  >
+                    Other
+                  </Tab>
+                </TabsHeader>
+                <TabsBody animate={{ initial: { y: 250 }, mount: { y: 0 }, unmount: { y: 250 } }}>
+                  {["all", "documents", "images", "other"].map((value) => (
+                    <TabPanel key={value} value={value} className="p-0">
+                      {filteredResources.length > 0 ? (
+                        <div className="overflow-x-auto">
+                          <table className="w-full min-w-max table-auto text-left">
+                            <thead>
+                              <tr>
+                                <th className="border-b border-blue-gray-100 bg-blue-gray-50/50 p-4">
+                                  <Typography
+                                    variant="small"
+                                    color="blue-gray"
+                                    className="font-normal leading-none opacity-70"
+                                  >
+                                    Name
+                                  </Typography>
+                                </th>
+                                <th className="border-b border-blue-gray-100 bg-blue-gray-50/50 p-4">
+                                  <Typography
+                                    variant="small"
+                                    color="blue-gray"
+                                    className="font-normal leading-none opacity-70"
+                                  >
+                                    Type
+                                  </Typography>
+                                </th>
+                                <th className="border-b border-blue-gray-100 bg-blue-gray-50/50 p-4">
+                                  <Typography
+                                    variant="small"
+                                    color="blue-gray"
+                                    className="font-normal leading-none opacity-70"
+                                  >
+                                    Description
+                                  </Typography>
+                                </th>
+                                <th className="border-b border-blue-gray-100 bg-blue-gray-50/50 p-4">
+                                  <Typography
+                                    variant="small"
+                                    color="blue-gray"
+                                    className="font-normal leading-none opacity-70"
+                                  >
+                                    Actions
+                                  </Typography>
+                                </th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              {filteredResources.map((resource, index) => {
+                                const isLast = index === filteredResources.length - 1;
+                                const classes = isLast ? "p-4" : "p-4 border-b border-blue-gray-50";
 
-                            return (
-                              <tr key={resource.id} className="hover:bg-blue-gray-50/30">
-                                <td className={classes}>
-                                  <div className="flex items-center gap-3">
-                                    {getFileIcon(resource.resource_type)}
-                                    <div>
+                                return (
+                                  <tr key={resource.id} className="hover:bg-blue-gray-50/30">
+                                    <td className={classes}>
+                                      <div className="flex items-center gap-3">
+                                        {getFileIcon(resource.resource_type)}
+                                        <div>
+                                          <Typography variant="small" color="blue-gray" className="font-medium w-32 overscroll-x-contain overflow-auto">
+                                            {resource.name}
+                                          </Typography>
+                                        </div>
+                                      </div>
+                                    </td>
+                                    <td className={classes}>
+                                      <Chip
+                                        size="sm"
+                                        variant="ghost"
+                                        value={resource.resource_type.toUpperCase()}
+                                        color={getTypeColor(resource.resource_type)}
+                                      />
+                                    </td>
+                                    <td className={classes}>
                                       <Typography variant="small" color="blue-gray" className="font-medium w-32 overscroll-x-contain overflow-auto">
-                                        {resource.name}
+                                        {resource.description ? resource.description : ''}
                                       </Typography>
-                                    </div>
-                                  </div>
-                                </td>
-                                <td className={classes}>
-                                  <Chip
-                                    size="sm"
-                                    variant="ghost"
-                                    value={resource.resource_type.toUpperCase()}
-                                    color={getTypeColor(resource.resource_type)}
-                                  />
-                                </td>
-                                <td className={classes}>
-                                  <Typography variant="small" color="blue-gray" className="font-medium w-32 overscroll-x-contain overflow-auto">
-                                    {resource.description ? resource.description : ''}
-                                  </Typography>
-                                </td>
-                                <td className={classes}>
-                                  <div className="flex items-center gap-2">
-                                    {/* Edit button */}
-                                    <IconButton
-                                      variant="text"
-                                      color="blue-gray"
-                                      onClick={() => {
-                                        setSelectedResource(resource);
-                                        setIsEditModalOpen(true);
-                                      }}
-                                    >
-                                      <PencilIcon className="h-4 w-4" />
-                                    </IconButton>
-                                    
-                                    {/* Delete button */}
-                                    <IconButton
-                                      variant="text"
-                                      color="red"
-                                      onClick={() => {
-                                        setSelectedResource(resource);
-                                        setIsDeleteModalOpen(true);
-                                      }}
-                                    >
-                                      <TrashIcon className="h-4 w-4" />
-                                    </IconButton>
-                                  </div>
-                                </td>
-                              </tr>
-                            );
-                          })}
-                        </tbody>
-                      </table>
-                    </div>
-                  ) : (
-                    <div className="flex flex-col items-center justify-center py-12">
-                      <FolderIcon className="h-16 w-16 text-blue-gray-200 mb-4" />
-                      <Typography color="blue-gray" className="mb-2 font-medium">
-                        No files found
-                      </Typography>
-                      <Typography color="gray" className="text-center max-w-xs">
-                        {searchQuery
-                          ? `No files matching "${searchQuery}" were found. Try a different search term.`
-                          : activeTab === "all"
-                          ? "You haven't uploaded any files yet. Click the 'Upload File' button to get started."
-                          : activeTab === "documents"
-                          ? "You haven't uploaded any documents yet. Click the 'Upload File' button to get started."
-                          : activeTab === "images"
-                          ? "You haven't uploaded any images yet. Click the 'Upload File' button to get started."
-                          : ""}
-                      </Typography>
-                      <Button
-                        variant="text"
-                        color="teal"
-                        className="mt-4 flex items-center gap-2"
-                        onClick={() => setIsUploadModalOpen(true)}
-                      >
-                        <CloudArrowUpIcon className="h-4 w-4" /> Upload File
-                      </Button>
-                    </div>
-                  )}
-                </TabPanel>
-              ))}
-            </TabsBody>
-          </Tabs>
-        </CardHeader>
-      </Card>
+                                    </td>
+                                    <td className={classes}>
+                                      <div className="flex items-center gap-2">
+                                        {/* Edit button */}
+                                        <IconButton
+                                          variant="text"
+                                          color="blue-gray"
+                                          onClick={() => {
+                                            setSelectedResource(resource);
+                                            setIsEditModalOpen(true);
+                                          }}
+                                        >
+                                          <PencilIcon className="h-4 w-4" />
+                                        </IconButton>
+                                        
+                                        {/* Delete button */}
+                                        <IconButton
+                                          variant="text"
+                                          color="red"
+                                          onClick={() => {
+                                            setSelectedResource(resource);
+                                            setIsDeleteModalOpen(true);
+                                          }}
+                                        >
+                                          <TrashIcon className="h-4 w-4" />
+                                        </IconButton>
+                                      </div>
+                                    </td>
+                                  </tr>
+                                );
+                              })}
+                            </tbody>
+                          </table>
+                        </div>
+                      ) : (
+                        <div className="flex flex-col items-center justify-center py-12">
+                          <FolderIcon className="h-16 w-16 text-blue-gray-200 mb-4" />
+                          <Typography color="blue-gray" className="mb-2 font-medium">
+                            No files found
+                          </Typography>
+                          <Typography color="gray" className="text-center max-w-xs">
+                            {searchQuery
+                              ? `No files matching "${searchQuery}" were found. Try a different search term.`
+                              : activeTab === "all"
+                              ? "You haven't uploaded any files yet. Click the 'Upload File' button to get started."
+                              : activeTab === "documents"
+                              ? "You haven't uploaded any documents yet. Click the 'Upload File' button to get started."
+                              : activeTab === "images"
+                              ? "You haven't uploaded any images yet. Click the 'Upload File' button to get started."
+                              : ""}
+                          </Typography>
+                          <Button
+                            variant="text"
+                            color="teal"
+                            className="mt-4 flex items-center gap-2"
+                            onClick={() => setIsUploadModalOpen(true)}
+                          >
+                            <CloudArrowUpIcon className="h-4 w-4" /> Upload File
+                          </Button>
+                        </div>
+                      )}
+                    </TabPanel>
+                  ))}
+                </TabsBody>
+              </Tabs>
+            </CardHeader>
+          </Card>
 
-      {/* Upload Modal */}
-      <Dialog
-        open={isUploadModalOpen}
-        handler={() => !isUploading && cancelFileUpload()}
-        size="md"
-      >
-        <DialogHeader>Upload Files</DialogHeader>
-        <DialogBody divider>
-          <div
-            className={cn(
-              uploadFile ? "border-black" : "border-dashed",
-              "border-2 rounded-lg p-8 transition-colors cursor-pointer text-center",
-              isDragging
-                ? "border-teal-500 bg-teal-50"
-                : "border-blue-gray-200 hover:border-teal-500 hover:bg-teal-50/30"
-            )}
-            onDragLeave={handleDragLeave}
-            onDragOver={handleDragOver}
-            onDrop={handleDrop}
-            onClick={() => fileInputRef.current?.click()}
+          {/* Upload Modal */}
+          <Dialog
+            open={isUploadModalOpen}
+            handler={() => !isUploading && cancelFileUpload()}
+            size="md"
           >
-            {isUploading ? (
-              <div className="flex flex-col items-center justify-center gap-4">
-                <Spinner className="h-12 w-12 text-teal-500" />
-                <Typography color="teal" className="font-medium">
-                  Uploading...
-                </Typography>
+            <DialogHeader>Upload Files</DialogHeader>
+            <DialogBody divider>
+              <div
+                className={cn(
+                  uploadFile ? "border-black" : "border-dashed",
+                  "border-2 rounded-lg p-8 transition-colors cursor-pointer text-center",
+                  isDragging
+                    ? "border-teal-500 bg-teal-50"
+                    : "border-blue-gray-200 hover:border-teal-500 hover:bg-teal-50/30"
+                )}
+                onDragLeave={handleDragLeave}
+                onDragOver={handleDragOver}
+                onDrop={handleDrop}
+                onClick={() => fileInputRef.current?.click()}
+              >
+                {isUploading ? (
+                  <div className="flex flex-col items-center justify-center gap-4">
+                    <Spinner className="h-12 w-12 text-teal-500" />
+                    <Typography color="teal" className="font-medium">
+                      Uploading...
+                    </Typography>
+                  </div>
+                ) : uploadFile ? (
+                  <div className="flex items-center gap-3">
+                      <div>{getFileNameIcon(uploadFile.name)}</div>
+                      <Typography variant="small" color="blue-gray" className="font-medium overscroll-x-contain overflow-auto">
+                        {uploadFile.name}
+                      </Typography>
+                  </div>
+                ) : (
+                  <>
+                    <CloudArrowUpIcon className="h-12 w-12 text-blue-gray-300 mx-auto mb-4" />
+                    <Typography color="blue-gray" className="font-medium mb-1">
+                      Drag and drop a file here
+                    </Typography>
+                    <Typography color="gray" className="text-sm">
+                      or <span className="text-teal-500 font-medium">browse</span> to upload
+                    </Typography>
+                    <Typography color="gray" className="text-xs mt-4">
+                      Supported formats: PDF, JPG, JPEG, PNG, GIF
+                    </Typography>
+                  </>
+                )}
+                <input
+                  type="file"
+                  ref={fileInputRef}
+                  className="hidden"
+                  onChange={handleFileInputChange}
+                  accept=".pdf,.jpg,.jpeg,.png,.gif"
+                  disabled={isUploading}
+                />
               </div>
-            ) : uploadFile ? (
-              <div className="flex items-center gap-3">
-                  <div>{getFileNameIcon(uploadFile.name)}</div>
-                  <Typography variant="small" color="blue-gray" className="font-medium overscroll-x-contain overflow-auto">
-                    {uploadFile.name}
-                  </Typography>
+              <div className='mt-4'>
+                <Input
+                  label="Description"
+                  value={fileDescription}
+                  onChange={(e) => {setFileDescription(e.target.value);}}
+                  crossOrigin={undefined}
+                />
               </div>
-            ) : (
-              <>
-                <CloudArrowUpIcon className="h-12 w-12 text-blue-gray-300 mx-auto mb-4" />
-                <Typography color="blue-gray" className="font-medium mb-1">
-                  Drag and drop a file here
-                </Typography>
-                <Typography color="gray" className="text-sm">
-                  or <span className="text-teal-500 font-medium">browse</span> to upload
-                </Typography>
-                <Typography color="gray" className="text-xs mt-4">
-                  Supported formats: PDF, JPG, JPEG, PNG, GIF
-                </Typography>
-              </>
-            )}
-            <input
-              type="file"
-              ref={fileInputRef}
-              className="hidden"
-              onChange={handleFileInputChange}
-              accept=".pdf,.jpg,.jpeg,.png,.gif"
-              disabled={isUploading}
-            />
-          </div>
-          <div className='mt-4'>
-            <Input
-              label="Description"
-              value={fileDescription}
-              onChange={(e) => {setFileDescription(e.target.value);}}
-              crossOrigin={undefined}
-            />
-          </div>
-        </DialogBody>
-        <DialogFooter>
-          <Button
-            variant="text"
-            color="red"
-            onClick={() => !isUploading && cancelFileUpload()}
-            disabled={isUploading}
-          >
-            Cancel
-          </Button>
-          {uploadFile && (
-            <Button
-              color="teal"
-              onClick={handleFileUpload}
-            >Upload</Button>
-          )}
-        </DialogFooter>
-      </Dialog>
-      
-      {/* Edit Modal */}
-      <Dialog
-        open={isEditModalOpen}
-        handler={() => !isUploading && cancelFileUpload()}
-        size="md"
-      >
-        <DialogHeader>Edit Files</DialogHeader>
-        <DialogBody divider>
-          <div
-            className={cn(
-              "border-2 border-black rounded-lg p-8 transition-colors cursor-pointer text-center",
-              isDragging
-                ? "border-teal-500 bg-teal-50"
-                : "border-blue-gray-200 hover:border-teal-500 hover:bg-teal-50/30"
-            )}
-            onDragLeave={handleDragLeave}
-            onDragOver={handleDragOver}
-            onDrop={handleDrop}
-            onClick={() => fileInputRef.current?.click()}
+            </DialogBody>
+            <DialogFooter>
+              <Button
+                variant="text"
+                color="red"
+                onClick={() => !isUploading && cancelFileUpload()}
+                disabled={isUploading}
+              >
+                Cancel
+              </Button>
+              {uploadFile && (
+                <Button
+                  color="teal"
+                  onClick={handleFileUpload}
+                >Upload</Button>
+              )}
+            </DialogFooter>
+          </Dialog>
+          
+          {/* Edit Modal */}
+          <Dialog
+            open={isEditModalOpen}
+            handler={() => !isUploading && cancelFileUpload()}
+            size="md"
           >
-            {isUploading ? (
-              <div className="flex flex-col items-center justify-center gap-4">
-                <Spinner className="h-12 w-12 text-teal-500" />
-                <Typography color="teal" className="font-medium">
-                  Uploading...
-                </Typography>
-              </div>
-            ) : uploadFile ? (
-              <div className="flex items-center gap-3">
-                  <div>{getFileNameIcon(uploadFile.name)}</div>
-                  <Typography variant="small" color="blue-gray" className="font-medium overscroll-x-contain overflow-auto">
-                    {uploadFile.name}
-                  </Typography>
+            <DialogHeader>Edit Files</DialogHeader>
+            <DialogBody divider>
+              <div
+                className={cn(
+                  "border-2 border-black rounded-lg p-8 transition-colors cursor-pointer text-center",
+                  isDragging
+                    ? "border-teal-500 bg-teal-50"
+                    : "border-blue-gray-200 hover:border-teal-500 hover:bg-teal-50/30"
+                )}
+                onDragLeave={handleDragLeave}
+                onDragOver={handleDragOver}
+                onDrop={handleDrop}
+                onClick={() => fileInputRef.current?.click()}
+              >
+                {isUploading ? (
+                  <div className="flex flex-col items-center justify-center gap-4">
+                    <Spinner className="h-12 w-12 text-teal-500" />
+                    <Typography color="teal" className="font-medium">
+                      Uploading...
+                    </Typography>
+                  </div>
+                ) : uploadFile ? (
+                  <div className="flex items-center gap-3">
+                      <div>{getFileNameIcon(uploadFile.name)}</div>
+                      <Typography variant="small" color="blue-gray" className="font-medium overscroll-x-contain overflow-auto">
+                        {uploadFile.name}
+                      </Typography>
+                  </div>
+                ) : (
+                  <div className="flex items-center gap-3">
+                      <div>{getFileIcon(selectedResource ? selectedResource.resource_type : '')}</div>
+                      <Typography variant="small" color="blue-gray" className="font-medium overscroll-x-contain overflow-auto">
+                        {selectedResource ? selectedResource.name : ''}
+                      </Typography>
+                  </div>
+                )}
+                <input
+                  type="file"
+                  ref={fileInputRef}
+                  className="hidden"
+                  onChange={handleFileInputChange}
+                  accept=".pdf,.jpg,.jpeg,.png,.gif"
+                  disabled={isUploading}
+                />
               </div>
-            ) : (
-              <div className="flex items-center gap-3">
-                  <div>{getFileIcon(selectedResource ? selectedResource.resource_type : '')}</div>
-                  <Typography variant="small" color="blue-gray" className="font-medium overscroll-x-contain overflow-auto">
-                    {selectedResource ? selectedResource.name : ''}
-                  </Typography>
+              <div className='mt-4'>
+                <Input
+                  label="Description"
+                  value={fileDescription}
+                  onChange={(e) => {setFileDescription(e.target.value);}}
+                  crossOrigin={undefined}
+                />
               </div>
-            )}
-            <input
-              type="file"
-              ref={fileInputRef}
-              className="hidden"
-              onChange={handleFileInputChange}
-              accept=".pdf,.jpg,.jpeg,.png,.gif"
-              disabled={isUploading}
-            />
-          </div>
-          <div className='mt-4'>
-            <Input
-              label="Description"
-              value={fileDescription}
-              onChange={(e) => {setFileDescription(e.target.value);}}
-              crossOrigin={undefined}
-            />
-          </div>
-        </DialogBody>
-        <DialogFooter>
-          <Button
-            variant="text"
-            color="red"
-            onClick={() => !isUploading && cancelFileUpload()}
-            disabled={isUploading}
-          >
-            Cancel
-          </Button>
-          <Button
-            color="teal"
-            onClick={editResource}
-          >
-            Edit
-          </Button>
-        </DialogFooter>
-      </Dialog>
+            </DialogBody>
+            <DialogFooter>
+              <Button
+                variant="text"
+                color="red"
+                onClick={() => !isUploading && cancelFileUpload()}
+                disabled={isUploading}
+              >
+                Cancel
+              </Button>
+              <Button
+                color="teal"
+                onClick={editResource}
+              >
+                Edit
+              </Button>
+            </DialogFooter>
+          </Dialog>
 
-      {/* DeleteConfirmation Modal */}
-      <Dialog
-        open={isDeleteModalOpen}
-        handler={() => setIsDeleteModalOpen(false)}
-        size="xs"
-      >
-        <DialogHeader>Confirm Deletion</DialogHeader>
-        <DialogBody divider>
-          Are you sure you want to delete{" "}
-          <span className="font-medium">{selectedResource?.name}</span>? This action cannot be undone.
-        </DialogBody>
-        <DialogFooter>
-          <Button
-            variant="text"
-            color="blue-gray"
-            onClick={() => setIsDeleteModalOpen(false)}
+          {/* DeleteConfirmation Modal */}
+          <Dialog
+            open={isDeleteModalOpen}
+            handler={() => setIsDeleteModalOpen(false)}
+            size="xs"
           >
-            Cancel
-          </Button>
-          <Button color="red" onClick={deleteResource}>
-            Delete
-          </Button>
-        </DialogFooter>
-      </Dialog>
-    </div>
+            <DialogHeader>Confirm Deletion</DialogHeader>
+            <DialogBody divider>
+              Are you sure you want to delete{" "}
+              <span className="font-medium">{selectedResource?.name}</span>? This action cannot be undone.
+            </DialogBody>
+            <DialogFooter>
+              <Button
+                variant="text"
+                color="blue-gray"
+                onClick={() => setIsDeleteModalOpen(false)}
+              >
+                Cancel
+              </Button>
+              <Button color="red" onClick={deleteResource}>
+                Delete
+              </Button>
+            </DialogFooter>
+          </Dialog>
+        </div>
+      </div>
+    </Card>
   );
 }
 
diff --git a/src/components/Dashboard/RealTimeDashboard.tsx b/src/components/Dashboard/RealTimeDashboard.tsx
deleted file mode 100644
index c89325d..0000000
--- a/src/components/Dashboard/RealTimeDashboard.tsx
+++ /dev/null
@@ -1,912 +0,0 @@
-'use client'
-
-import React, { useState, useEffect } from 'react';
-import { LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, PieChart, Pie, Cell, AreaChart, Area } from 'recharts';
-import {
-  ArrowUpIcon,
-  ArrowDownIcon,
-  ClockIcon,
-  ServerIcon,
-  CpuChipIcon,
-  UserGroupIcon,
-  DocumentChartBarIcon,
-  CloudIcon,
-  ShieldCheckIcon,
-  BoltIcon,
-  ArrowPathIcon
-} from '@heroicons/react/24/outline';
-import {
-  Card,
-  CardBody,
-  CardHeader,
-  Typography,
-  Button,
-  Tabs,
-  TabsHeader,
-  Tab,
-  Progress,
-  Tooltip as MTTooltip
-} from "@material-tailwind/react";
-
-interface TimeSeriesData {
-  time: string,
-  cpu: number,
-  memory: number,
-  requests: number,
-  errors: number
-}
-
-export function RealTimeDashboard() {
-  // State for active tab
-  const [activeTab, setActiveTab] = useState("system-metrics");
-  const [isRefreshing, setIsRefreshing] = useState(false);
-  const [lastUpdated, setLastUpdated] = useState(new Date());
-  const [metrics, setMetrics] = useState({
-    cpuUsage: 42,
-    memoryUsage: 68,
-    diskUsage: 51,
-    networkIn: 24.5,
-    networkOut: 18.2,
-    activeUsers: 127,
-    activeJobs: 8,
-    responseTime: 120, // in ms
-    uptime: 99.98,
-    errorRate: 0.05,
-    requestRate: 125 //requests per minute
-  });
-  
-  // Sample time series data
-  const [timeSeriesData, setTimeSeriesData] = useState<TimeSeriesData[]>([]);
-  const [modelPerformance, setModelPerformance] = useState([
-    { name: 'ETL Pipeline', accuracy: 99.2, latency: 45, throughput: 850 },
-    { name: 'NLP Model', accuracy: 94.7, latency: 120, throughput: 320 },
-    { name: 'Vision Model', accuracy: 96.8, latency: 220, throughput: 150 },
-    { name: 'Recommendation', accuracy: 92.5, latency: 85, throughput: 540 },
-    { name: 'Classification', accuracy: 97.3, latency: 65, throughput: 620 }
-  ]);
-  
-  // Generate initial time series data
-  useEffect(() => {
-    const initialData = [];
-    const now = new Date();
-    
-    for (let i = 30; i >= 0; i--) {
-      const time = new Date(now.getTime() - i * 60000);
-      initialData.push({
-        time: time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
-        cpu: 30 + Math.random() * 25,
-        memory: 55 + Math.random() * 25,
-        requests: 80 + Math.random() * 90,
-        errors: Math.random() * 2
-      });
-    }
-    
-    setTimeSeriesData(initialData);
-    
-    // Setup interval for real-time updates
-    const interval = setInterval(() => {
-      updateMetrics();
-      updateTimeSeriesData();
-      setLastUpdated(new Date());
-    }, 5000);
-    
-    return () => clearInterval(interval);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  
-  // Refresh data manually
-  const handleRefresh = () => {
-    setIsRefreshing(true);
-    
-    // Simulate data fetching delay
-    setTimeout(() => {
-      updateMetrics();
-      updateTimeSeriesData();
-      setLastUpdated(new Date());
-      setIsRefreshing(false);
-    }, 1000);
-  };
-  
-  // Update metrics with slight random variations
-  const updateMetrics = () => {
-    setMetrics(prev => ({
-      cpuUsage: Math.max(0, Math.min(100, prev.cpuUsage + (Math.random() * 10 - 5))),
-      memoryUsage: Math.max(0, Math.min(100, prev.memoryUsage + (Math.random() * 8 - 4))),
-      diskUsage: Math.max(0, Math.min(100, prev.diskUsage + (Math.random() * 2 - 1))),
-      networkIn: Math.max(0, prev.networkIn + (Math.random() * 5 - 2.5)),
-      networkOut: Math.max(0, prev.networkOut + (Math.random() * 4 - 2)),
-      activeUsers: Math.max(0, prev.activeUsers + Math.floor(Math.random() * 11 - 5)),
-      activeJobs: Math.max(0, prev.activeJobs + Math.floor(Math.random() * 3 - 1)),
-      responseTime: Math.max(50, prev.responseTime + (Math.random() * 30 - 15)),
-      uptime: Math.min(100, prev.uptime + 0.001),
-      errorRate: Math.max(0, prev.errorRate + (Math.random() * 0.02 - 0.01)),
-      requestRate: Math.max(0, prev.requestRate + (Math.random() * 20 - 10))
-    }));
-    
-    // Update model performance occasionally
-    if (Math.random() > 0.7) {
-      setModelPerformance(prev => 
-        prev.map(model => ({
-          ...model,
-          accuracy: Math.max(90, Math.min(99.9, model.accuracy + (Math.random() * 0.6 - 0.3))),
-          latency: Math.max(10, model.latency + (Math.random() * 10 - 5)),
-          throughput: Math.max(50, model.throughput + (Math.random() * 30 - 15))
-        }))
-      );
-    }
-  };
-  
-  // Add new data point to time series
-  const updateTimeSeriesData = () => {
-    const now = new Date();
-    const newDataPoint = {
-      time: now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
-      cpu: metrics.cpuUsage,
-      memory: metrics.memoryUsage,
-      requests: metrics.requestRate,
-      errors: metrics.errorRate * 100
-    };
-    
-    setTimeSeriesData(prev => {
-      const newData = [...prev, newDataPoint];
-      // Keep only the last 30 data points
-      if (newData.length > 30) {
-        return newData.slice(-30);
-      }
-      return newData;
-    });
-  };
-  
-  // Format for percentages
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const formatPercent = (value: number) => `${value.toFixed(1)}%`;
-  
-  // Format for data transfer
-  const formatDataTransfer = (value: number) => `${value.toFixed(1)} MB/s`;
-  
-  // Get status color based on value thresholds
-  const getStatusColor = (value: number, thresholds = { warning: 70, critical: 90 }) => {
-    if (value >= thresholds.critical) return "red";
-    if (value >= thresholds.warning) return "amber";
-    return "green";
-  };
-  
-  // Chart colors
-  const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884D8'];
-  
-  // Calculate trend indicators
-  const calculateTrend = (current: number, previous: number) => {
-    if (!previous || current === previous) return { direction: 'neutral', value: 0 };
-    
-    const diff = current - previous;
-    const percentChange = (diff / previous) * 100;
-    
-    return {
-      direction: diff > 0 ? 'up' : 'down',
-      value: Math.abs(percentChange).toFixed(1)
-    };
-  };
-  
-  // Get CPU trend from time series data
-  const cpuTrend = timeSeriesData.length > 1 
-    ? calculateTrend(
-        timeSeriesData[timeSeriesData.length - 1].cpu,
-        timeSeriesData[timeSeriesData.length - 2].cpu
-      )
-    : { direction: 'neutral', value: 0 };
-  
-  return (
-    <div className="space-y-6">
-      {/* Status bar with refresh control */}
-      <div className="bg-gray-100 p-3 rounded-lg flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <div className="h-2 w-2 rounded-full bg-green-500 animate-pulse"></div>
-          <Typography variant="small" className="font-medium text-gray-700">
-            Live System Metrics
-          </Typography>
-        </div>
-        <div className="flex items-center gap-3">
-          <Typography variant="small" color="gray" className="flex items-center gap-1">
-            <ClockIcon className="h-4 w-4" /> 
-            Last updated: {lastUpdated.toLocaleTimeString()}
-          </Typography>
-          <Button 
-            variant="text" 
-            size="sm" 
-            className="flex items-center gap-1"
-            onClick={handleRefresh}
-            disabled={isRefreshing}
-          >
-            <ArrowPathIcon className={`h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`} />
-            Refresh
-          </Button>
-        </div>
-      </div>
-      
-      {/* Dashboard Tabs */}
-      <Tabs value={activeTab}>
-        <TabsHeader>
-          <Tab value="system-metrics" onClick={() => setActiveTab("system-metrics")}>
-            <div className="flex items-center gap-2">
-              <ServerIcon className="h-4 w-4" />
-              System Metrics
-            </div>
-          </Tab>
-          <Tab value="user-activity" onClick={() => setActiveTab("user-activity")}>
-            <div className="flex items-center gap-2">
-              <UserGroupIcon className="h-4 w-4" />
-              User Activity
-            </div>
-          </Tab>
-          <Tab value="ai-performance" onClick={() => setActiveTab("ai-performance")}>
-            <div className="flex items-center gap-2">
-              <CpuChipIcon className="h-4 w-4" />
-              AI Performance
-            </div>
-          </Tab>
-        </TabsHeader>
-      </Tabs>
-      
-      {/* System Metrics Tab */}
-      {activeTab === "system-metrics" && (
-        <div className="space-y-6">
-          {/* Key System Metrics */}
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-            {/* CPU Usage Card */}
-            <Card className="hover:shadow-md transition-shadow">
-              <CardBody className="p-4">
-                <div className="flex justify-between items-start">
-                  <div>
-                    <Typography variant="small" color="blue-gray" className="font-medium mb-1">
-                      CPU Usage
-                    </Typography>
-                    <div className="flex items-center gap-2">
-                      <Typography variant="h4" className="font-bold">
-                        {metrics.cpuUsage.toFixed(1)}%
-                      </Typography>
-                      {cpuTrend.direction !== 'neutral' && (
-                        <div className={`flex items-center text-xs ${cpuTrend.direction === 'up' ? 'text-red-500' : 'text-green-500'}`}>
-                          {cpuTrend.direction === 'up' ? (
-                            <ArrowUpIcon className="h-3 w-3 mr-1" />
-                          ) : (
-                            <ArrowDownIcon className="h-3 w-3 mr-1" />
-                          )}
-                          {cpuTrend.value}%
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                  <div className={`p-2 rounded-full bg-${getStatusColor(metrics.cpuUsage)}-50`}>
-                    <CpuChipIcon className={`h-5 w-5 text-${getStatusColor(metrics.cpuUsage)}-500`} />
-                  </div>
-                </div>
-                <div className="mt-3">
-                  <Progress 
-                    value={metrics.cpuUsage} 
-                    color={getStatusColor(metrics.cpuUsage)} 
-                    size="lg"
-                  />
-                </div>
-              </CardBody>
-            </Card>
-            
-            {/* Memory Usage Card */}
-            <Card className="hover:shadow-md transition-shadow">
-              <CardBody className="p-4">
-                <div className="flex justify-between items-start">
-                  <div>
-                    <Typography variant="small" color="blue-gray" className="font-medium mb-1">
-                      Memory Usage
-                    </Typography>
-                    <Typography variant="h4" className="font-bold">
-                      {metrics.memoryUsage.toFixed(1)}%
-                    </Typography>
-                  </div>
-                  <div className={`p-2 rounded-full bg-${getStatusColor(metrics.memoryUsage)}-50`}>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" 
-                      className={`h-5 w-5 text-${getStatusColor(metrics.memoryUsage)}-500`}>
-                      <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 002.25-2.25V6.75a2.25 2.25 0 00-2.25-2.25H6.75A2.25 2.25 0 004.5 6.75v10.5a2.25 2.25 0 002.25 2.25zm.75-12h9v9h-9v-9z" />
-                    </svg>
-                  </div>
-                </div>
-                <div className="mt-3">
-                  <Progress 
-                    value={metrics.memoryUsage} 
-                    color={getStatusColor(metrics.memoryUsage)} 
-                    size="lg"
-                  />
-                </div>
-              </CardBody>
-            </Card>
-            
-            {/* Disk Usage Card */}
-            <Card className="hover:shadow-md transition-shadow">
-              <CardBody className="p-4">
-                <div className="flex justify-between items-start">
-                  <div>
-                    <Typography variant="small" color="blue-gray" className="font-medium mb-1">
-                      Storage Usage
-                    </Typography>
-                    <Typography variant="h4" className="font-bold">
-                      {metrics.diskUsage.toFixed(1)}%
-                    </Typography>
-                  </div>
-                  <div className="p-2 rounded-full bg-blue-50">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" 
-                      className="h-5 w-5 text-blue-500">
-                      <path strokeLinecap="round" strokeLinejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" />
-                    </svg>
-                  </div>
-                </div>
-                <div className="mt-3">
-                  <Progress 
-                    value={metrics.diskUsage} 
-                    color={getStatusColor(metrics.diskUsage, { warning: 80, critical: 95 })} 
-                    size="lg"
-                  />
-                </div>
-              </CardBody>
-            </Card>
-            
-            {/* Network Usage Card */}
-            <Card className="hover:shadow-md transition-shadow">
-              <CardBody className="p-4">
-                <div className="flex justify-between items-start">
-                  <div>
-                    <Typography variant="small" color="blue-gray" className="font-medium mb-1">
-                      Network Traffic
-                    </Typography>
-                    <div className="space-y-1">
-                      <div className="flex items-center gap-1">
-                        <ArrowUpIcon className="h-3 w-3 text-blue-500" />
-                        <Typography variant="small">
-                          Out: {formatDataTransfer(metrics.networkOut)}
-                        </Typography>
-                      </div>
-                      <div className="flex items-center gap-1">
-                        <ArrowDownIcon className="h-3 w-3 text-green-500" />
-                        <Typography variant="small">
-                          In: {formatDataTransfer(metrics.networkIn)}
-                        </Typography>
-                      </div>
-                    </div>
-                  </div>
-                  <div className="p-2 rounded-full bg-purple-50">
-                    <CloudIcon className="h-5 w-5 text-purple-500" />
-                  </div>
-                </div>
-                <div className="mt-3 space-y-1">
-                  <div className="h-2 w-full bg-gray-200 rounded-full">
-                    <div className="h-2 bg-blue-500 rounded-full" style={{ width: `${(metrics.networkOut / 50) * 100}%` }}></div>
-                  </div>
-                  <div className="h-2 w-full bg-gray-200 rounded-full">
-                    <div className="h-2 bg-green-500 rounded-full" style={{ width: `${(metrics.networkIn / 50) * 100}%` }}></div>
-                  </div>
-                </div>
-              </CardBody>
-            </Card>
-          </div>
-          
-          {/* System Performance Chart */}
-          <Card>
-            <CardHeader className="p-4">
-              <Typography variant="h6">System Performance Trends</Typography>
-            </CardHeader>
-            <CardBody className="p-4">
-              <div className="h-80">
-                <ResponsiveContainer width="100%" height="100%">
-                  <AreaChart
-                    data={timeSeriesData}
-                    margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
-                  >
-                    <CartesianGrid strokeDasharray="3 3" />
-                    <XAxis dataKey="time" />
-                    <YAxis />
-                    <Tooltip />
-                    <Legend />
-                    <Area type="monotone" dataKey="cpu" stackId="1" stroke="#8884d8" fill="#8884d8" name="CPU (%)" />
-                    <Area type="monotone" dataKey="memory" stackId="2" stroke="#82ca9d" fill="#82ca9d" name="Memory (%)" />
-                    <Area type="monotone" dataKey="requests" stackId="3" stroke="#ffc658" fill="#ffc658" name="Requests/min" />
-                  </AreaChart>
-                </ResponsiveContainer>
-              </div>
-            </CardBody>
-          </Card>
-          
-          {/* Additional System Metrics */}
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            {/* Response Time Card */}
-            <Card className="hover:shadow-md transition-shadow">
-              <CardBody className="p-4">
-                <div className="flex items-center justify-between mb-2">
-                  <Typography variant="small" color="blue-gray" className="font-medium">
-                    Avg. Response Time
-                  </Typography>
-                  <div className="p-2 rounded-full bg-amber-50">
-                    <BoltIcon className="h-4 w-4 text-amber-500" />
-                  </div>
-                </div>
-                <Typography variant="h4" className="font-bold mb-1">
-                  {metrics.responseTime.toFixed(0)} ms
-                </Typography>
-                <Typography variant="small" color="gray">
-                  Target: &lt;100ms
-                </Typography>
-                <div className="mt-2">
-                  <Progress 
-                    value={(metrics.responseTime / 2)} 
-                    color={metrics.responseTime > 200 ? "red" : metrics.responseTime > 100 ? "amber" : "green"} 
-                    size="sm"
-                  />
-                </div>
-              </CardBody>
-            </Card>
-            
-            {/* Uptime Card */}
-            <Card className="hover:shadow-md transition-shadow">
-              <CardBody className="p-4">
-                <div className="flex items-center justify-between mb-2">
-                  <Typography variant="small" color="blue-gray" className="font-medium">
-                    System Uptime
-                  </Typography>
-                  <div className="p-2 rounded-full bg-green-50">
-                    <ShieldCheckIcon className="h-4 w-4 text-green-500" />
-                  </div>
-                </div>
-                <Typography variant="h4" className="font-bold mb-1">
-                  {metrics.uptime.toFixed(2)}%
-                </Typography>
-                <Typography variant="small" color="gray">
-                  Last 30 days
-                </Typography>
-                <div className="mt-2">
-                  <Progress 
-                    value={metrics.uptime} 
-                    color="green" 
-                    size="sm"
-                  />
-                </div>
-              </CardBody>
-            </Card>
-            
-            {/* Error Rate Card */}
-            <Card className="hover:shadow-md transition-shadow">
-              <CardBody className="p-4">
-                <div className="flex items-center justify-between mb-2">
-                  <Typography variant="small" color="blue-gray" className="font-medium">
-                    Error Rate
-                  </Typography>
-                  <div className="p-2 rounded-full bg-red-50">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" 
-                      className="h-4 w-4 text-red-500">
-                      <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
-                    </svg>
-                  </div>
-                </div>
-                <Typography variant="h4" className="font-bold mb-1">
-                  {(metrics.errorRate * 100).toFixed(2)}%
-                </Typography>
-                <Typography variant="small" color="gray">
-                  Target: &lt;0.1%
-                </Typography>
-                <div className="mt-2">
-                  <Progress 
-                    value={(metrics.errorRate * 1000)} 
-                    color={metrics.errorRate > 0.1 ? "red" : metrics.errorRate > 0.05 ? "amber" : "green"} 
-                    size="sm"
-                  />
-                </div>
-              </CardBody>
-            </Card>
-          </div>
-        </div>
-      )}
-      
-      {/* User Activity Tab */}
-      {activeTab === "user-activity" && (
-        <div className="space-y-6">
-          {/* Active User Stats */}
-          <Card>
-            <CardHeader className="p-4">
-              <Typography variant="h6">Active User Metrics</Typography>
-            </CardHeader>
-            <CardBody className="p-4">
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
-                <div className="p-3 bg-gray-50 rounded-lg">
-                  <div className="flex justify-between items-center">
-                    <div>
-                      <Typography variant="small" color="gray">Current Active Users</Typography>
-                      <Typography variant="h4" className="font-bold">
-                        {metrics.activeUsers}
-                      </Typography>
-                    </div>
-                    <div className="p-2 rounded-full bg-blue-50">
-                      <UserGroupIcon className="h-5 w-5 text-blue-500" />
-                    </div>
-                  </div>
-                </div>
-                
-                <div className="p-3 bg-gray-50 rounded-lg">
-                  <div className="flex justify-between items-center">
-                    <div>
-                      <Typography variant="small" color="gray">Request Rate</Typography>
-                      <Typography variant="h4" className="font-bold">
-                        {metrics.requestRate.toFixed(0)}/min
-                      </Typography>
-                    </div>
-                    <div className="p-2 rounded-full bg-teal-50">
-                      <BoltIcon className="h-5 w-5 text-teal-500" />
-                    </div>
-                  </div>
-                </div>
-                
-                <div className="p-3 bg-gray-50 rounded-lg">
-                  <div className="flex justify-between items-center">
-                    <div>
-                      <Typography variant="small" color="gray">Active Jobs</Typography>
-                      <Typography variant="h4" className="font-bold">
-                        {metrics.activeJobs}
-                      </Typography>
-                    </div>
-                    <div className="p-2 rounded-full bg-purple-50">
-                      <DocumentChartBarIcon className="h-5 w-5 text-purple-500" />
-                    </div>
-                  </div>
-                </div>
-              </div>
-              
-              <div className="h-72">
-                <ResponsiveContainer width="100%" height="100%">
-                  <LineChart data={timeSeriesData}>
-                    <CartesianGrid strokeDasharray="3 3" />
-                    <XAxis dataKey="time" />
-                    <YAxis yAxisId="left" />
-                    <YAxis yAxisId="right" orientation="right" />
-                    <Tooltip />
-                    <Legend />
-                    <Line yAxisId="left" type="monotone" dataKey="requests" stroke="#8884d8" name="Requests/min" />
-                    <Line yAxisId="right" type="monotone" dataKey="errors" stroke="#ff7d7d" name="Error Rate (%)" />
-                  </LineChart>
-                </ResponsiveContainer>
-              </div>
-            </CardBody>
-          </Card>
-          
-          {/* User Distribution */}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <Card>
-              <CardHeader className="p-4">
-                <Typography variant="h6">User Distribution</Typography>
-              </CardHeader>
-              <CardBody className="p-4">
-                <div className="h-64">
-                  <ResponsiveContainer width="100%" height="100%">
-                    <PieChart>
-                      <Pie
-                        data={[
-                          { name: 'Admin', value: 5 },
-                          { name: 'Data Scientists', value: 18 },
-                          { name: 'Analysts', value: 42 },
-                          { name: 'Viewers', value: 62 }
-                        ]}
-                        cx="50%"
-                        cy="50%"
-                        labelLine={false}
-                        outerRadius={80}
-                        fill="#8884d8"
-                        dataKey="value"
-                        label={({name, percent}) => `${name} ${(percent * 100).toFixed(0)}%`}
-                      >
-                        {COLORS.map((color, index) => (
-                          <Cell key={`cell-${index}`} fill={color} />
-                        ))}
-                      </Pie>
-                      <Tooltip />
-                      <Legend />
-                    </PieChart>
-                  </ResponsiveContainer>
-                </div>
-              </CardBody>
-            </Card>
-            
-            <Card>
-              <CardHeader className="p-4">
-                <Typography variant="h6">Feature Usage</Typography>
-              </CardHeader>
-              <CardBody className="p-4">
-                <div className="h-64">
-                  <ResponsiveContainer width="100%" height="100%">
-                    <BarChart
-                      data={[
-                        { name: 'Knowledge Graph', value: 42 },
-                        { name: 'AI Analytics', value: 68 },
-                        { name: 'ETL Pipeline', value: 53 },
-                        { name: 'NLP Services', value: 35 },
-                        { name: 'Data Visualization', value: 71 }
-                      ]}
-                    >
-                      <CartesianGrid strokeDasharray="3 3" />
-                      <XAxis dataKey="name" />
-                      <YAxis />
-                      <Tooltip />
-                      <Bar dataKey="value" fill="#82ca9d" name="Usage Count" />
-                    </BarChart>
-                  </ResponsiveContainer>
-                </div>
-              </CardBody>
-            </Card>
-          </div>
-          
-          {/* Active Sessions Table */}
-          <Card>
-            <CardHeader className="p-4 border-b border-gray-100">
-              <Typography variant="h6">Active Sessions</Typography>
-            </CardHeader>
-            <CardBody className="p-4">
-              <div className="overflow-x-auto">
-                <table className="min-w-full divide-y divide-gray-200">
-                  <thead className="bg-gray-50">
-                    <tr>
-                      <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                        User
-                      </th>
-                      <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                        Role
-                      </th>
-                      <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                        Status
-                      </th>
-                      <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                        Location
-                      </th>
-                      <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                        Duration
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody className="bg-white divide-y divide-gray-200">
-                    {[
-                      { id: 1, name: "John Smith", role: "Data Scientist", status: "Active", location: "New York", duration: "1h 24m" },
-                      { id: 2, name: "Alice Chen", role: "Admin", status: "Active", location: "San Francisco", duration: "45m" },
-                      { id: 3, name: "Robert Kim", role: "Analyst", status: "Idle", location: "Chicago", duration: "2h 10m" },
-                      { id: 4, name: "Emily Davis", role: "Data Scientist", status: "Active", location: "Miami", duration: "33m" },
-                      { id: 5, name: "Michael Johnson", role: "Viewer", status: "Active", location: "Seattle", duration: "1h 05m" },
-                    ].map((user) => (
-                      <tr key={user.id}>
-                        <td className="px-6 py-4 whitespace-nowrap">
-                          <div className="text-sm font-medium text-gray-900">{user.name}</div>
-                        </td>
-                        <td className="px-6 py-4 whitespace-nowrap">
-                          <div className="text-sm text-gray-500">{user.role}</div>
-                        </td>
-                        <td className="px-6 py-4 whitespace-nowrap">
-                          <span className={`px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${
-                            user.status === 'Active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
-                          }`}>
-                            {user.status}
-                          </span>
-                        </td>
-                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                          {user.location}
-                        </td>
-                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                          {user.duration}
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            </CardBody>
-          </Card>
-        </div>
-      )}
-      
-      {/* AI Performance Tab */}
-      {activeTab === "ai-performance" && (
-        <div className="space-y-6">
-          {/* Model Performance Metrics */}
-          <Card>
-            <CardHeader className="p-4">
-              <Typography variant="h6">AI Model Performance</Typography>
-            </CardHeader>
-            <CardBody className="p-4">
-              <div className="overflow-x-auto">
-                <table className="min-w-full divide-y divide-gray-200">
-                  <thead className="bg-gray-50">
-                    <tr>
-                      <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                        Model
-                      </th>
-                      <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                        Accuracy
-                      </th>
-                      <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                        Latency (ms)
-                      </th>
-                      <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                        Throughput (req/min)
-                      </th>
-                      <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                        Status
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody className="bg-white divide-y divide-gray-200">
-                    {modelPerformance.map((model, index) => (
-                      <tr key={index}>
-                        <td className="px-6 py-4 whitespace-nowrap">
-                          <div className="text-sm font-medium text-gray-900">{model.name}</div>
-                        </td>
-                        <td className="px-6 py-4 whitespace-nowrap">
-                          <div className="flex items-center">
-                            <span className={`text-sm font-medium ${
-                              model.accuracy > 95 ? 'text-green-600' : 
-                              model.accuracy > 90 ? 'text-amber-600' : 'text-red-600'
-                            }`}>
-                              {model.accuracy.toFixed(1)}%
-                            </span>
-                          </div>
-                        </td>
-                        <td className="px-6 py-4 whitespace-nowrap">
-                          <div className="flex items-center">
-                            <span className={`text-sm ${
-                              model.latency < 100 ? 'text-green-600' : 
-                              model.latency < 200 ? 'text-amber-600' : 'text-red-600'
-                            }`}>
-                              {model.latency.toFixed(0)} ms
-                            </span>
-                          </div>
-                        </td>
-                        <td className="px-6 py-4 whitespace-nowrap">
-                          <div className="text-sm text-gray-900">{model.throughput.toFixed(0)}</div>
-                        </td>
-                        <td className="px-6 py-4 whitespace-nowrap">
-                          <span className="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
-                            Healthy
-                          </span>
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            </CardBody>
-          </Card>
-          
-          {/* AI Performance Visualizations */}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <Card>
-              <CardHeader className="p-4">
-                <Typography variant="h6">Model Accuracy Comparison</Typography>
-              </CardHeader>
-              <CardBody className="p-4">
-                <div className="h-72">
-                  <ResponsiveContainer width="100%" height="100%">
-                    <BarChart
-                      data={modelPerformance}
-                      margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
-                    >
-                      <CartesianGrid strokeDasharray="3 3" />
-                      <XAxis dataKey="name" />
-                      <YAxis domain={[85, 100]} />
-                      <Tooltip formatter={(value) => `${(value as number).toFixed(1)}%`} />
-                      <Legend />
-                      <Bar dataKey="accuracy" name="Accuracy (%)" fill="#8884d8" />
-                    </BarChart>
-                  </ResponsiveContainer>
-                </div>
-              </CardBody>
-            </Card>
-            
-            <Card>
-              <CardHeader className="p-4">
-                <Typography variant="h6">Model Latency vs Throughput</Typography>
-              </CardHeader>
-              <CardBody className="p-4">
-                <div className="h-72">
-                  <ResponsiveContainer width="100%" height="100%">
-                    <BarChart
-                      data={modelPerformance}
-                      margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
-                    >
-                      <CartesianGrid strokeDasharray="3 3" />
-                      <XAxis dataKey="name" />
-                      <YAxis yAxisId="left" orientation="left" stroke="#8884d8" />
-                      <YAxis yAxisId="right" orientation="right" stroke="#82ca9d" />
-                      <Tooltip />
-                      <Legend />
-                      <Bar yAxisId="left" dataKey="latency" name="Latency (ms)" fill="#8884d8" />
-                      <Bar yAxisId="right" dataKey="throughput" name="Throughput (req/min)" fill="#82ca9d" />
-                    </BarChart>
-                  </ResponsiveContainer>
-                </div>
-              </CardBody>
-            </Card>
-          </div>
-          
-          {/* AI System Health */}
-          <Card>
-            <CardHeader className="p-4">
-              <Typography variant="h6">AI System Health</Typography>
-            </CardHeader>
-            <CardBody className="p-4">
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                <div className="bg-gray-50 rounded-lg p-4">
-                  <div className="flex justify-between items-center mb-2">
-                    <Typography color="blue-gray" className="font-medium">GPU Utilization</Typography>
-                    <MTTooltip content="Current GPU resource usage across all AI models">
-                      <div className="h-5 w-5 text-gray-400 cursor-help">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
-                          <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
-                        </svg>
-                      </div>
-                    </MTTooltip>
-                  </div>
-                  <div className="flex justify-between items-end">
-                    <Typography variant="h4" className="font-bold">78%</Typography>
-                    <div className="text-xs text-green-500 flex items-center">
-                      <ArrowUpIcon className="h-3 w-3 mr-1" />
-                      5.2%
-                    </div>
-                  </div>
-                  <div className="mt-2">
-                    <Progress value={78} color="blue" size="sm" />
-                  </div>
-                </div>
-                
-                <div className="bg-gray-50 rounded-lg p-4">
-                  <div className="flex justify-between items-center mb-2">
-                    <Typography color="blue-gray" className="font-medium">Inference Queue</Typography>
-                    <MTTooltip content="Number of requests waiting for AI model processing">
-                      <div className="h-5 w-5 text-gray-400 cursor-help">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
-                          <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
-                        </svg>
-                      </div>
-                    </MTTooltip>
-                  </div>
-                  <div className="flex justify-between items-end">
-                    <Typography variant="h4" className="font-bold">12</Typography>
-                    <div className="text-xs text-red-500 flex items-center">
-                      <ArrowUpIcon className="h-3 w-3 mr-1" />
-                      2.1%
-                    </div>
-                  </div>
-                  <div className="mt-2">
-                    <Progress value={24} color="amber" size="sm" />
-                  </div>
-                </div>
-                
-                <div className="bg-gray-50 rounded-lg p-4">
-                  <div className="flex justify-between items-center mb-2">
-                    <Typography color="blue-gray" className="font-medium">Cache Hit Rate</Typography>
-                    <MTTooltip content="Percentage of AI requests served from cache">
-                      <div className="h-5 w-5 text-gray-400 cursor-help">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
-                          <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
-                        </svg>
-                      </div>
-                    </MTTooltip>
-                  </div>
-                  <div className="flex justify-between items-end">
-                    <Typography variant="h4" className="font-bold">68.4%</Typography>
-                    <div className="text-xs text-green-500 flex items-center">
-                      <ArrowUpIcon className="h-3 w-3 mr-1" />
-                      3.2%
-                    </div>
-                  </div>
-                  <div className="mt-2">
-                    <Progress value={68.4} color="green" size="sm" />
-                  </div>
-                </div>
-              </div>
-            </CardBody>
-          </Card>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default RealTimeDashboard;
\ No newline at end of file

From adaa6beefbb2c5d75f9fe4d5d762ea2663398617 Mon Sep 17 00:00:00 2001
From: KenTheNoob <kc97@njit.edu>
Date: Sat, 12 Apr 2025 22:27:43 -0400
Subject: [PATCH 3/7] chatbox env fix

---
 .env.example                       | 2 ++
 .gitignore                         | 1 +
 src/components/ChatBox/ChatBox.tsx | 3 +--
 3 files changed, 4 insertions(+), 2 deletions(-)
 create mode 100644 .env.example

diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..c5d7eef
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,2 @@
+NEXT_PUBLIC_OPENAI_API_KEY=your-api-key-here
+# Use this until ChatBox code for openai api streaming is moved to backend
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index a27ec58..458b3f8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -32,6 +32,7 @@ yarn-error.log*
 
 # env files (can opt-in for committing if needed)
 .env*
+!.env.example
 
 # vercel
 .vercel
diff --git a/src/components/ChatBox/ChatBox.tsx b/src/components/ChatBox/ChatBox.tsx
index c2c9aa9..ce35e63 100644
--- a/src/components/ChatBox/ChatBox.tsx
+++ b/src/components/ChatBox/ChatBox.tsx
@@ -103,7 +103,7 @@ interface ChatBoxProps {
 // AI setup
 const AI_ENDPOINT = "https://api.openai.com/v1/chat/completions";
 const SYSTEM_PROMPT = "You are a helpful, friendly AI assistant for Theoforge, a company that specializes in ETL Solutions, Knowledge Graphs, and Custom LLM Training. Your goal is to be helpful, gather information about the guest to better assist them, and ultimately help convert them to customers. Ask questions one at a time to learn about their needs. Be concise but friendly.";
-const apiKey = process.env.VITE_OPENAI_API_KEY || '';
+const apiKey = process.env.NEXT_PUBLIC_OPENAI_API_KEY || '';
 
 // Questions to ask guests
 const GUEST_QUESTIONS: Question[] = [
@@ -771,7 +771,6 @@ export function ChatBox({
             </div>
           </div>
         </CardHeader>
-        
         {/* Message Container */}
         <CardBody 
           ref={chatContainerRef} 

From 7caa28b2040189cd23593484a392f9e090f1d594 Mon Sep 17 00:00:00 2001
From: KenTheNoob <kc97@njit.edu>
Date: Mon, 14 Apr 2025 00:12:30 -0400
Subject: [PATCH 4/7] fixing packages

---
 package-lock.json | 288 +++++++++++++++++++++++++---------------------
 package.json      |   1 +
 2 files changed, 159 insertions(+), 130 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e3081ab..9923cdb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "@react-three/fiber": "^8.16.0",
         "@types/d3-force": "^3.0.10",
         "@vercel/analytics": "^1.5.0",
+        "axios": "^1.8.4",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "d3": "^7.9.0",
@@ -106,16 +107,6 @@
       "integrity": "sha512-gAmrUZSGtKc3AiBL71iNWxDsyUC5uMaKKGdvzYsBoTW/xi42JQHl7eKV2OYzCUqvc+D2RCcf7EXY2iCyFIk6og==",
       "license": "MIT"
     },
-    "node_modules/@emnapi/runtime": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.4.0.tgz",
-      "integrity": "sha512-64WYIf4UYcdLnbKn/umDlNjQDSS8AgZrI/R9+x5ilkUVFxXcA1Ebl+gQLc/6mERA4407Xof0R7wEyEuj091CVw==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
     "node_modules/@emotion/is-prop-valid": {
       "version": "0.8.8",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
@@ -812,6 +803,126 @@
         "fast-glob": "3.3.1"
       }
     },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "14.2.28",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.28.tgz",
+      "integrity": "sha512-kzGChl9setxYWpk3H6fTZXXPFFjg7urptLq5o5ZgYezCrqlemKttwMT5iFyx/p1e/JeglTwDFRtb923gTJ3R1w==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "14.2.28",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.28.tgz",
+      "integrity": "sha512-z6FXYHDJlFOzVEOiiJ/4NG8aLCeayZdcRSMjPDysW297Up6r22xw6Ea9AOwQqbNsth8JNgIK8EkWz2IDwaLQcw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "14.2.28",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.28.tgz",
+      "integrity": "sha512-9ARHLEQXhAilNJ7rgQX8xs9aH3yJSj888ssSjJLeldiZKR4D7N08MfMqljk77fAwZsWwsrp8ohHsMvurvv9liQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "14.2.28",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.28.tgz",
+      "integrity": "sha512-p6gvatI1nX41KCizEe6JkF0FS/cEEF0u23vKDpl+WhPe/fCTBeGkEBh7iW2cUM0rvquPVwPWdiUR6Ebr/kQWxQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "14.2.28",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.28.tgz",
+      "integrity": "sha512-nsiSnz2wO6GwMAX2o0iucONlVL7dNgKUqt/mDTATGO2NY59EO/ZKnKEr80BJFhuA5UC1KZOMblJHWZoqIJddpA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "14.2.28",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.28.tgz",
+      "integrity": "sha512-+IuGQKoI3abrXFqx7GtlvNOpeExUH1mTIqCrh1LGFf8DnlUcTmOOCApEnPJUSLrSbzOdsF2ho2KhnQoO0I1RDw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "14.2.28",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.28.tgz",
+      "integrity": "sha512-l61WZ3nevt4BAnGksUVFKy2uJP5DPz2E0Ma/Oklvo3sGj9sw3q7vBWONFRgz+ICiHpW5mV+mBrkB3XEubMrKaA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.28",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.28.tgz",
+      "integrity": "sha512-+Kcp1T3jHZnJ9v9VTJ/yf1t/xmtFAc/Sge4v7mVc1z+NYfYzisi8kJ9AsY8itbgq+WgEwMtOpiLLJsUy2qnXZw==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@next/swc-win32-x64-msvc": {
       "version": "14.2.28",
       "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.28.tgz",
@@ -2796,6 +2907,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.8.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.8.4.tgz",
+      "integrity": "sha512-eBSYY4Y68NNlHbHBMdeDmKNtDgXWhQsJcGqzO3iLUM0GraQFSS9cVgPX5I9b3lbdFKyYoAEGAZF1DwhTaljNAw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
@@ -5042,6 +5164,26 @@
         "node": ">=12"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
@@ -8442,6 +8584,12 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -11026,126 +11174,6 @@
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
       }
-    },
-    "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.2.28",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.28.tgz",
-      "integrity": "sha512-kzGChl9setxYWpk3H6fTZXXPFFjg7urptLq5o5ZgYezCrqlemKttwMT5iFyx/p1e/JeglTwDFRtb923gTJ3R1w==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-darwin-x64": {
-      "version": "14.2.28",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.28.tgz",
-      "integrity": "sha512-z6FXYHDJlFOzVEOiiJ/4NG8aLCeayZdcRSMjPDysW297Up6r22xw6Ea9AOwQqbNsth8JNgIK8EkWz2IDwaLQcw==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.2.28",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.28.tgz",
-      "integrity": "sha512-9ARHLEQXhAilNJ7rgQX8xs9aH3yJSj888ssSjJLeldiZKR4D7N08MfMqljk77fAwZsWwsrp8ohHsMvurvv9liQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.2.28",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.28.tgz",
-      "integrity": "sha512-p6gvatI1nX41KCizEe6JkF0FS/cEEF0u23vKDpl+WhPe/fCTBeGkEBh7iW2cUM0rvquPVwPWdiUR6Ebr/kQWxQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.2.28",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.28.tgz",
-      "integrity": "sha512-nsiSnz2wO6GwMAX2o0iucONlVL7dNgKUqt/mDTATGO2NY59EO/ZKnKEr80BJFhuA5UC1KZOMblJHWZoqIJddpA==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.2.28",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.28.tgz",
-      "integrity": "sha512-+IuGQKoI3abrXFqx7GtlvNOpeExUH1mTIqCrh1LGFf8DnlUcTmOOCApEnPJUSLrSbzOdsF2ho2KhnQoO0I1RDw==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.2.28",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.28.tgz",
-      "integrity": "sha512-l61WZ3nevt4BAnGksUVFKy2uJP5DPz2E0Ma/Oklvo3sGj9sw3q7vBWONFRgz+ICiHpW5mV+mBrkB3XEubMrKaA==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.2.28",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.28.tgz",
-      "integrity": "sha512-+Kcp1T3jHZnJ9v9VTJ/yf1t/xmtFAc/Sge4v7mVc1z+NYfYzisi8kJ9AsY8itbgq+WgEwMtOpiLLJsUy2qnXZw==",
-      "cpu": [
-        "ia32"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
     }
   }
 }
diff --git a/package.json b/package.json
index e022a80..8a04050 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "@react-three/fiber": "^8.16.0",
     "@types/d3-force": "^3.0.10",
     "@vercel/analytics": "^1.5.0",
+    "axios": "^1.8.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "d3": "^7.9.0",

From 926a54681c52e34fda76055c038485afe8f65940 Mon Sep 17 00:00:00 2001
From: KenTheNoob <kc97@njit.edu>
Date: Mon, 14 Apr 2025 00:32:09 -0400
Subject: [PATCH 5/7] shadcn setup fix

---
 components.json | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/components.json b/components.json
index 24be433..05743b4 100644
--- a/components.json
+++ b/components.json
@@ -5,13 +5,16 @@
   "tsx": true,
   "tailwind": {
     "config": "tailwind.config.js",
-    "css": "src/app/globals.css",
+    "css": "src/app/(HomePage)/globals.css",
     "baseColor": "neutral",
     "cssVariables": true,
     "prefix": ""
   },
   "aliases": {
     "components": "@/components",
-    "utils": "@/lib/utils"
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
   }
 }

From 0d298928287b386b369c4cb00a17576576ede032 Mon Sep 17 00:00:00 2001
From: Samuel-okongo <so274@njit.edu>
Date: Wed, 16 Apr 2025 11:55:53 -0400
Subject: [PATCH 6/7] finished QA and Login/REgister

---
 package-lock.json                    |  18 +--
 package.json                         |   4 +-
 public/images/auth-bg.jpg            |   2 +
 src/components/AuthForm/AuthForm.tsx | 199 ++++++++++++++++-----------
 src/components/Layout/Header.tsx     |  56 ++++++--
 tailwind.config.js                   |   5 +-
 6 files changed, 181 insertions(+), 103 deletions(-)
 create mode 100644 public/images/auth-bg.jpg

diff --git a/package-lock.json b/package-lock.json
index 9923cdb..44b2a32 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,10 +12,10 @@
         "@fontsource/poppins": "^5.2.5",
         "@fontsource/public-sans": "^5.2.5",
         "@headlessui/react": "^2.2.1",
-        "@heroicons/react": "^2.1.1",
+        "@heroicons/react": "^2.2.0",
         "@langchain/core": "^0.3.44",
         "@langchain/openai": "^0.5.5",
-        "@material-tailwind/react": "^2.1.9",
+        "@material-tailwind/react": "^2.1.10",
         "@radix-ui/react-dialog": "^1.1.6",
         "@radix-ui/react-icons": "^1.3.2",
         "@radix-ui/react-slot": "^1.1.2",
@@ -375,12 +375,12 @@
       }
     },
     "node_modules/@heroicons/react": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.1.tgz",
-      "integrity": "sha512-JyyN9Lo66kirbCMuMMRPtJxtKJoIsXKS569ebHGGRKbl8s4CtUfLnyKJxteA+vIKySocO4s1SkTkGS4xtG/yEA==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.2.0.tgz",
+      "integrity": "sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==",
       "license": "MIT",
       "peerDependencies": {
-        "react": ">= 16"
+        "react": ">= 16 || ^19.0.0-rc"
       }
     },
     "node_modules/@humanfs/core": {
@@ -602,9 +602,9 @@
       }
     },
     "node_modules/@material-tailwind/react": {
-      "version": "2.1.9",
-      "resolved": "https://registry.npmjs.org/@material-tailwind/react/-/react-2.1.9.tgz",
-      "integrity": "sha512-3uPlJE9yK4JF9DEQO4I1QbjR8o05+4fysLqoZ0v38TDOLE2tvDRhTBVhn6Mp9vSsq5CoJOKgemG7kbkOFAji4A==",
+      "version": "2.1.10",
+      "resolved": "https://registry.npmjs.org/@material-tailwind/react/-/react-2.1.10.tgz",
+      "integrity": "sha512-xGU/mLDKDBp/qZ8Dp2XR7fKcTpDuFeZEBqoL9Bk/29kakKxNxjUGYSRHEFLsyOFf4VIhU6WGHdIS7tOA3QGJHA==",
       "license": "MIT",
       "dependencies": {
         "@floating-ui/react": "0.19.0",
diff --git a/package.json b/package.json
index 8a04050..2d2a57c 100644
--- a/package.json
+++ b/package.json
@@ -13,10 +13,10 @@
     "@fontsource/poppins": "^5.2.5",
     "@fontsource/public-sans": "^5.2.5",
     "@headlessui/react": "^2.2.1",
-    "@heroicons/react": "^2.1.1",
+    "@heroicons/react": "^2.2.0",
     "@langchain/core": "^0.3.44",
     "@langchain/openai": "^0.5.5",
-    "@material-tailwind/react": "^2.1.9",
+    "@material-tailwind/react": "^2.1.10",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-slot": "^1.1.2",
diff --git a/public/images/auth-bg.jpg b/public/images/auth-bg.jpg
new file mode 100644
index 0000000..2e66a49
--- /dev/null
+++ b/public/images/auth-bg.jpg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Error><Code>AccessDenied</Code><Message>Access Denied</Message><RequestId>T3WYDG1N0KPH1NG7</RequestId><HostId>ANeE+zNazkkkcCjfZ9thSuYkPo2MVag3remsvenWY8hsVfnba+cojTQu0X/pG2DkxCaUOB/R2Pg=</HostId></Error>
\ No newline at end of file
diff --git a/src/components/AuthForm/AuthForm.tsx b/src/components/AuthForm/AuthForm.tsx
index 31b7eda..2d25c85 100644
--- a/src/components/AuthForm/AuthForm.tsx
+++ b/src/components/AuthForm/AuthForm.tsx
@@ -4,8 +4,9 @@
 import React, { useState, useContext, useEffect } from 'react';
 import { ArrowLeftIcon, EnvelopeIcon, LockClosedIcon, SparklesIcon, UserIcon, IdentificationIcon, CheckIcon, ExclamationCircleIcon } from '@heroicons/react/24/outline';
 import { AuthContext } from '../Dashboard/AppContext';
-import { Typography, Alert, Button } from "@material-tailwind/react";
 import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import Image from 'next/image';
 
 interface AuthFormProps {
   type: 'login' | 'register';
@@ -97,120 +98,143 @@ export function AuthForm({ type }: AuthFormProps) {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-gray-50 to-gray-100">
-      <div className="w-full max-w-md">
+    <div className="min-h-screen flex items-center justify-center p-4 bg-[url('/hero_star_bg.png')] bg-cover bg-center bg-no-repeat relative overflow-hidden">
+      {/* Dark overlay to match the hero section */}
+      <div className="absolute inset-0 bg-black/40 z-0"></div>
+      
+      {/* Network grid overlay - subtle visual connection to AI/tech theme */}
+      <div className="absolute inset-0 opacity-10 z-0 mix-blend-screen">
+        <svg className="w-full h-full" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+          <pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse">
+            <path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.5)" strokeWidth="0.5"/>
+          </pattern>
+          <rect width="100" height="100" fill="url(#grid)" />
+          
+          {/* Nodes/stars that represent AI nodes - matching TheoForge's tech aesthetic */}
+          <circle cx="20" cy="20" r="1" fill="rgba(255, 255, 255, 0.8)" className="animate-pulse" style={{ animationDuration: '4s' }} />
+          <circle cx="40" cy="70" r="1.2" fill="rgba(0, 169, 157, 0.8)" className="animate-pulse" style={{ animationDuration: '6s' }} />
+          <circle cx="65" cy="30" r="0.8" fill="rgba(255, 255, 255, 0.8)" className="animate-pulse" style={{ animationDuration: '5s' }} />
+          <circle cx="80" cy="80" r="1" fill="rgba(184, 134, 11, 0.8)" className="animate-pulse" style={{ animationDuration: '7s' }} />
+          <circle cx="15" cy="60" r="0.7" fill="rgba(0, 169, 157, 0.8)" className="animate-pulse" style={{ animationDuration: '5.5s' }} />
+          <circle cx="90" cy="10" r="0.9" fill="rgba(255, 255, 255, 0.8)" className="animate-pulse" style={{ animationDuration: '4.5s' }} />
+        </svg>
+      </div>
+      <div className="w-full max-w-md relative z-10">
         <div className="mb-6">
-          <button 
-            onClick={() => navigate.push('/')} 
-            className="flex items-center text-gray-700 hover:text-teal-600 transition-colors duration-300 font-medium"
-          >
+          <Link href="/" className="flex items-center text-white hover:text-[hsl(var(--primary))] transition-colors duration-300 font-medium relative z-10">
             <ArrowLeftIcon className="h-5 w-5 mr-2" /> Back to home
-          </button>
+          </Link>
         </div>
 
-        <div className="bg-white rounded-xl shadow-xl border border-gray-100 overflow-hidden transform hover:scale-[1.01] transition-transform duration-300">
-          <div className="h-2 bg-gradient-to-r from-teal-400 to-teal-600"></div>
-          <div className="p-8">
+        <div className="bg-white/95 backdrop-blur-sm rounded-xl shadow-2xl overflow-hidden transform hover:scale-[1.01] transition-transform duration-300 border border-[hsla(var(--primary),0.3)]">
+          <div className="h-2 bg-gradient-to-r from-[hsl(var(--primary))] to-[hsl(var(--secondary))]"></div>
+          <div className="p-8 relative">
+            {/* Decorative corner elements that match TheoForge's design language */}
+            <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-[hsla(var(--primary),0.1)] to-transparent rounded-bl-full -z-10"></div>
+            <div className="absolute bottom-0 left-0 w-24 h-24 bg-gradient-to-tr from-[hsla(var(--secondary),0.1)] to-transparent rounded-tr-full -z-10"></div>
             <div className="flex justify-center mb-8">
-              <div className="h-16 w-16 rounded-full bg-teal-50 flex items-center justify-center">
-                {type === 'login' ? (
-                  <LockClosedIcon className="h-8 w-8 text-teal-500" />
-                ) : (
-                  <UserIcon className="h-8 w-8 text-teal-500" />
-                )}
+              <div className="relative">
+                <div className="h-20 w-20 rounded-full bg-gradient-to-br from-[hsl(var(--primary))] to-[hsl(var(--secondary))] flex items-center justify-center shadow-lg p-3">
+                  <Image 
+                    src="/logo.png" 
+                    alt="TheoForge Logo" 
+                    width={60} 
+                    height={60} 
+                    className="transform transition-all duration-500 hover:scale-110"
+                    priority
+                  />
+                </div>
+                <div className="absolute -top-2 -right-2 h-8 w-8 rounded-full bg-[hsl(var(--secondary))] flex items-center justify-center shadow-md">
+                  <SparklesIcon className="h-5 w-5 text-white" />
+                </div>
               </div>
             </div>
             
-            <Typography variant="h3" className="text-center text-gray-800 font-bold text-2xl mb-2">
-              {type === 'login' ? 'Welcome Back' : 'Create Account'}
-            </Typography>
-            
-            <Typography className="text-center text-gray-500 mb-8">
-              {type === 'login' 
-                ? 'Sign in to access your account' 
-                : 'Join us and start your journey'}
-            </Typography>
+            <div className="text-center mb-8">
+              <h3 className="mb-2 font-bold font-heading text-black text-3xl">
+                {type === 'login' ? 'Welcome Back' : 'Join TheoForge'}
+              </h3>
+              <p className="text-black max-w-md mx-auto">
+                {type === 'login' 
+                  ? 'Sign in to access your strategic AI transformation platform' 
+                  : 'Create your account to empower enterprise engineering with TheoForge'}
+              </p>
+            </div>
             
             {showAlert.show && (
-              <Alert
-                open={showAlert.show}
-                onClose={() => setShowAlert(prev => ({ ...prev, show: false }))}
-                animate={{
-                  mount: { y: 0 },
-                  unmount: { y: -100 },
-                }}
-                className={showAlert.type === "success" ? "mb-6 bg-green-50 border-l-4 border-green-500 text-green-700 p-4" : "mb-6 bg-red-50 border-l-4 border-red-500 text-red-700 p-4"}
-                icon={showAlert.type === "success" ? <CheckIcon className="h-6 w-6" /> : <ExclamationCircleIcon className="h-6 w-6" />}
-              >
-                {showAlert.message}
-              </Alert>
+              <div className={`mb-5 p-4 rounded-lg flex items-start ${showAlert.type === "success" ? "bg-green-50 text-green-900 border border-green-200" : "bg-red-50 text-red-900 border border-red-200"}`}>
+                <div className="flex-shrink-0 mr-3">
+                  {showAlert.type === "success" ? 
+                    <CheckIcon className="h-6 w-6 text-green-500" /> : 
+                    <ExclamationCircleIcon className="h-6 w-6 text-red-500" />}
+                </div>
+                <div>{showAlert.message}</div>
+              </div>
             )}
 
-            <form onSubmit={handleSubmit} className="space-y-5">
-              <div className="relative">
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div className="relative group">
                 <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                  <EnvelopeIcon className="h-5 w-5 text-gray-400" />
+                  <EnvelopeIcon className="h-5 w-5 text-black/60 group-focus-within:text-[hsl(var(--primary))]" />
                 </div>
                 <input
                   type="email"
                   placeholder="Email"
-                  className="w-full p-3 pl-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-all duration-300"
+                  className="w-full p-3 pl-10 border border-[hsl(var(--input))] bg-white/80 rounded-lg focus:ring-2 focus:ring-[hsl(var(--primary))] focus:border-[hsl(var(--primary))] transition-all duration-300 font-sans shadow-sm text-black placeholder:text-black/60"
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
-                  required
                 />
               </div>
               
-              <div className="relative">
+              <div className="relative group">
                 <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                  <LockClosedIcon className="h-5 w-5 text-gray-400" />
+                  <LockClosedIcon className="h-5 w-5 text-gray-400 group-focus-within:text-[hsl(var(--primary))]" />
                 </div>
                 <input
                   type="password"
                   placeholder="Password"
-                  className="w-full p-3 pl-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-all duration-300"
+                  className="w-full p-3 pl-10 border border-[hsl(var(--input))] bg-white/80 rounded-lg focus:ring-2 focus:ring-[hsl(var(--primary))] focus:border-[hsl(var(--primary))] transition-all duration-300 font-sans shadow-sm"
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
-                  required
                 />
               </div>
 
               {type === 'register' && (
                 <>
-                  <div className="relative">
+                  <div className="relative group">
                     <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                      <UserIcon className="h-5 w-5 text-gray-400" />
+                      <UserIcon className="h-5 w-5 text-gray-400 group-focus-within:text-[hsl(var(--primary))]" />
                     </div>
                     <input
                       type="text"
                       placeholder="Nickname"
-                      className="w-full p-3 pl-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-all duration-300"
+                      className="w-full p-3 pl-10 border border-[hsl(var(--input))] bg-white/80 rounded-lg focus:ring-2 focus:ring-[hsl(var(--primary))] focus:border-[hsl(var(--primary))] transition-all duration-300 font-sans shadow-sm"
                       value={nickname}
                       onChange={(e) => setNickname(e.target.value)}
                     />
                   </div>
                   
                   <div className="grid grid-cols-2 gap-4">
-                    <div className="relative">
+                    <div className="relative group">
                       <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                        <IdentificationIcon className="h-5 w-5 text-gray-400" />
+                        <IdentificationIcon className="h-5 w-5 text-gray-400 group-focus-within:text-[hsl(var(--primary))]" />
                       </div>
                       <input
                         type="text"
                         placeholder="First Name"
-                        className="w-full p-3 pl-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-all duration-300"
+                        className="w-full p-3 pl-10 border border-[hsl(var(--input))] bg-white/80 rounded-lg focus:ring-2 focus:ring-[hsl(var(--primary))] focus:border-[hsl(var(--primary))] transition-all duration-300 font-sans shadow-sm"
                         value={firstName}
                         onChange={(e) => setFirstName(e.target.value)}
                       />
                     </div>
-                    <div className="relative">
+                    <div className="relative group">
                       <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                        <IdentificationIcon className="h-5 w-5 text-gray-400" />
+                        <IdentificationIcon className="h-5 w-5 text-gray-400 group-focus-within:text-[hsl(var(--primary))]" />
                       </div>
                       <input
                         type="text"
                         placeholder="Last Name"
-                        className="w-full p-3 pl-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-all duration-300"
+                        className="w-full p-3 pl-10 border border-[hsl(var(--input))] bg-white/80 rounded-lg focus:ring-2 focus:ring-[hsl(var(--primary))] focus:border-[hsl(var(--primary))] transition-all duration-300 font-sans shadow-sm"
                         value={lastName}
                         onChange={(e) => setLastName(e.target.value)}
                       />
@@ -219,48 +243,65 @@ export function AuthForm({ type }: AuthFormProps) {
                 </>
               )}
 
-              <Button 
+              <button 
                 type="submit" 
-                color="teal" 
-                className="mt-6 py-3 font-medium tracking-wide shadow-md hover:shadow-lg transition-all duration-300"
-                fullWidth
+                className="mt-6 py-4 px-6 w-full font-bold text-lg tracking-wide shadow-lg hover:shadow-xl transition-all duration-500 bg-black hover:bg-black/80 text-white rounded-lg relative overflow-hidden group"
               >
-                {type === 'login' ? 'Login' : 'Register'}
-              </Button>
+                <span className="relative z-10 flex items-center justify-center">
+                  {type === 'login' ? (
+                    <>
+                      <span className="font-semibold">Sign In</span>
+                      <svg className="w-5 h-5 ml-2 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
+                      </svg>
+                    </>
+                  ) : (
+                    <>
+                      <span className="font-semibold">Create Account</span>
+                      <SparklesIcon className="w-5 h-5 ml-2" />
+                    </>
+                  )}
+                </span>
+              </button>
             </form>
 
             {type === 'login' && (
               <>
                 <div className="flex items-center my-6">
-                  <div className="flex-1 border-t border-gray-200"></div>
-                  <span className="px-3 text-gray-500 text-sm">Or continue with</span>
-                  <div className="flex-1 border-t border-gray-200"></div>
+                  <div className="flex-1 border-t border-black/20"></div>
+                  <span className="px-3 text-black text-sm font-sans">Or continue with</span>
+                  <div className="flex-1 border-t border-black/20"></div>
                 </div>
                 
-                <Button
-                  variant="outlined"
-                  color="teal"
+                <button
+                  type="button"
                   onClick={async () => {
                     const success = await login('test@test.com', 'test123');
                     if (success) navigate.push('/dashboard');
                   }}
-                  fullWidth
-                  className="flex items-center justify-center py-3 border-teal-500 text-teal-600 hover:bg-teal-50 transition-colors duration-300"
+                  className="w-full flex items-center justify-center py-3 px-4 bg-white border-2 border-black text-black font-medium hover:bg-black/5 transition-all duration-300 font-sans rounded-lg shadow-sm hover:shadow-md"
                 >
-                  <SparklesIcon className="h-5 w-5 mr-2" /> Test Account
-                </Button>
+                  <SparklesIcon className="h-5 w-5 mr-2 text-black" /> Test Account
+                </button>
               </>
             )}
 
-            <div className="text-center mt-8 text-gray-600">
+            <div className="text-center mt-8 text-black font-sans">
               {type === 'login' ? "Don't have an account?" : "Already have an account?"}{' '}
-              <button
-                type="button"
-                className="text-teal-600 font-medium hover:underline transition-all duration-300"
-                onClick={() => navigate.push(type === 'login' ? '/register' : '/login')}
+              <Link
+                href={type === 'login' ? '/register' : '/login'}
+                className="text-black font-semibold hover:text-[hsl(var(--secondary))] transition-all duration-300 underline"
               >
-                {type === 'login' ? 'Sign Up' : 'Sign In'}
-              </button>
+                {type === 'login' ? (
+                  <span className="inline-flex items-center">
+                    Sign Up <span className="inline-block ml-1 font-bold text-black" aria-hidden="true">→</span>
+                  </span>
+                ) : (
+                  <span className="inline-flex items-center">
+                    Sign In <span className="inline-block ml-1 font-bold text-black" aria-hidden="true">→</span>
+                  </span>
+                )}
+              </Link>
             </div>
           </div>
         </div>
diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
index d897ff4..d093950 100644
--- a/src/components/Layout/Header.tsx
+++ b/src/components/Layout/Header.tsx
@@ -27,8 +27,11 @@ const Header: React.FC = () => {
     { label: "The Forge", path: "/forge" }, 
     { label: "Community", path: "/community" },
     { label: "Contact", path: "/contact" },
-    { label: "Sign In", path: "/login" },
-    { label: "Register", path: "/register" },
+  ];
+
+  const authItems = [
+    { label: "Sign In", path: "/login", primary: true },
+    { label: "Register", path: "/register", primary: false },
   ];
 
   return (
@@ -62,14 +65,32 @@ const Header: React.FC = () => {
               key={item.label}
               href={item.path}
               className={cn(
-                "text-sm font-medium transition-colors hover:text-primary",
-                pathname === item.path ? "text-primary dark:text-primary-light" : "text-muted-foreground"
+                "text-sm font-semibold transition-colors hover:text-black",
+                pathname === item.path ? "text-black underline" : "text-black/70"
               )}
             >
               {item.label}
             </Link>
           ))}
         </nav>
+        
+        {/* Auth Buttons */}
+        <div className="hidden sm:flex items-center gap-3">
+          {authItems.map((item) => (
+            <Link
+              key={item.label}
+              href={item.path}
+              className={cn(
+                "text-sm font-bold px-4 py-2 rounded-lg transition-all duration-300",
+                item.primary 
+                  ? "bg-black text-white hover:bg-black/80 shadow-sm hover:shadow-md" 
+                  : "border-2 border-black text-black hover:bg-black/5"
+              )}
+            >
+              {item.label}
+            </Link>
+          ))}
+        </div>
 
         {/* Mobile Navigation Trigger (Hamburger Menu) */}
         <div className="sm:hidden flex items-center">
@@ -105,23 +126,38 @@ const Header: React.FC = () => {
                     <Link
                       href={item.path}
                       className={cn(
-                        "block py-2 text-sm font-medium transition-colors hover:text-primary",
-                        pathname === item.path ? "text-primary dark:text-primary-light" : "text-muted-foreground"
+                        "block py-2 text-sm font-semibold transition-colors hover:text-black",
+                        pathname === item.path ? "text-black underline" : "text-black/70"
                       )}
                     >
                       {item.label}
                     </Link>
                   </SheetClose>
                 ))}
+                
+                <div className="border-t border-border/40 mt-4 pt-4">
+                  {authItems.map((item) => (
+                    <SheetClose asChild key={item.label}>
+                      <Link
+                        href={item.path}
+                        className={cn(
+                          "block py-3 px-4 text-sm font-bold my-3 rounded-lg text-center transition-all shadow-sm",
+                          item.primary 
+                            ? "bg-black text-white hover:bg-black/80" 
+                            : "border-2 border-black text-black hover:bg-black/5"
+                        )}
+                      >
+                        {item.label}
+                      </Link>
+                    </SheetClose>
+                  ))}
+                </div>
               </nav>
             </SheetContent>
           </Sheet>
         </div>
 
-        {/* Optional: Placeholder for CTA button if needed on desktop */}
-        {/* <div className="hidden sm:flex items-center"> */}
-        {/*   <Button>Contact Us</Button> */}
-        {/* </div> */}
+        {/* Auth buttons are now in their own section above */}
       </div>
     </header>
   );
diff --git a/tailwind.config.js b/tailwind.config.js
index 47226b5..049a553 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,9 +1,8 @@
 const { fontFamily } = require('tailwindcss/defaultTheme');
 const defaultTheme = require('tailwindcss/defaultTheme');
-const withMT = require("@material-tailwind/react/utils/withMT");
 
 /** @type {import('tailwindcss').Config} */
-module.exports = withMT({
+module.exports = {
   darkMode: ["class"], 
   content: [
     './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
@@ -124,6 +123,6 @@ module.exports = withMT({
     },
   },
   plugins: [require("tailwindcss-animate")], 
-});
+};
 
 // Removed the corePlugins section to re-enable Tailwind's Preflight base styles.

From 7cc77a7f6990f585881fe859ee576cf4010a89d6 Mon Sep 17 00:00:00 2001
From: KenTheNoob <kc97@njit.edu>
Date: Wed, 16 Apr 2025 13:37:53 -0400
Subject: [PATCH 7/7] tailwind multi-config

---
 src/app/(Dashboard)/globals.css               |  1 +
 .../(Dashboard)/tailwind.dashboard.config.js  | 65 +++++++++++++++++++
 tailwind.config.js                            |  6 +-
 3 files changed, 68 insertions(+), 4 deletions(-)
 create mode 100644 src/app/(Dashboard)/tailwind.dashboard.config.js

diff --git a/src/app/(Dashboard)/globals.css b/src/app/(Dashboard)/globals.css
index 5beafc7..15a7207 100644
--- a/src/app/(Dashboard)/globals.css
+++ b/src/app/(Dashboard)/globals.css
@@ -1,3 +1,4 @@
+@config "./tailwind.dashboard.config.js";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/src/app/(Dashboard)/tailwind.dashboard.config.js b/src/app/(Dashboard)/tailwind.dashboard.config.js
new file mode 100644
index 0000000..609f4c6
--- /dev/null
+++ b/src/app/(Dashboard)/tailwind.dashboard.config.js
@@ -0,0 +1,65 @@
+const withMT = require("@material-tailwind/react/utils/withMT");
+
+module.exports = withMT({
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@material-tailwind/react/components/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@material-tailwind/react/theme/components/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#f0fdfa',
+          100: '#ccfbf1',
+          200: '#99f6e4',
+          300: '#5eead4',
+          400: '#2dd4bf',
+          500: '#14b8a6',
+          600: '#0d9488',
+          700: '#0f766e',
+          800: '#115e59',
+          900: '#134e4a',
+        },
+      },
+      animation: {
+        blob: "blob 7s infinite",
+        fadeIn: "fadeIn 1.5s ease-in-out",
+        slideUp: "slideUp 0.6s ease-in-out",
+        bounce: "bounce 1s infinite",
+      },
+      keyframes: {
+        blob: {
+          "0%": {
+            transform: "translate(0px, 0px) scale(1)",
+          },
+          "33%": {
+            transform: "translate(30px, -50px) scale(1.1)",
+          },
+          "66%": {
+            transform: "translate(-20px, 20px) scale(0.9)",
+          },
+          "100%": {
+            transform: "translate(0px, 0px) scale(1)",
+          },
+        },
+        fadeIn: {
+          "0%": { opacity: 0 },
+          "100%": { opacity: 1 },
+        },
+        slideUp: {
+          "0%": { transform: "translateY(20px)", opacity: 0 },
+          "100%": { transform: "translateY(0)", opacity: 1 },
+        },
+      },
+      transitionDelay: {
+        '400': '400ms',
+        '600': '600ms',
+        '800': '800ms',
+        '900': '900ms',
+      }
+    },
+  },
+  plugins: [],
+});
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 049a553..b43484e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -84,11 +84,9 @@ module.exports = {
         },
       },
       borderRadius: {
-        /* this gets rid of all rounded borders
         lg: "var(--radius)",
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
-        */
       },
       fontFamily: {
         // Use CSS variable names defined in app/layout.tsx (or similar)
@@ -123,6 +121,6 @@ module.exports = {
     },
   },
   plugins: [require("tailwindcss-animate")], 
-};
+}
 
-// Removed the corePlugins section to re-enable Tailwind's Preflight base styles.
+// Removed the corePlugins section to re-enable Tailwind's Preflight base styles.
\ No newline at end of file