From c1e8923edd66661a91c52f43af9f11ba4a738f89 Mon Sep 17 00:00:00 2001
From: PriyankaVerma2307 <vermapriyanka32892@gmail.com>
Date: Fri, 9 Jan 2026 15:04:53 +0530
Subject: [PATCH 1/4] Fix input text visibility and minor styling improvements

---
 frontend/app/creator/campaign-wall/page.tsx   |  12 +-
 .../analytics/AIAnalyticsDashboard.tsx        |   2 +-
 frontend/components/auth/AuthGuard.tsx        |   2 +-
 frontend/package-lock.json                    | 149 ++++++++++--------
 frontend/package.json                         |   5 +-
 5 files changed, 93 insertions(+), 77 deletions(-)

diff --git a/frontend/app/creator/campaign-wall/page.tsx b/frontend/app/creator/campaign-wall/page.tsx
index 091cf17..7dded57 100644
--- a/frontend/app/creator/campaign-wall/page.tsx
+++ b/frontend/app/creator/campaign-wall/page.tsx
@@ -277,14 +277,14 @@ export default function CampaignWallPage() {
               <div className="mb-6 flex flex-col flex-wrap gap-4 rounded-xl bg-white p-6 shadow-md sm:flex-row">
                 <div className="min-w-[200px] flex-1">
                   <div className="relative">
-                    <Search className="absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 text-gray-400" />
+                    <Search className="absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 text-black" />
                     <input
                       type="text"
                       placeholder="Search campaigns..."
                       value={searchTerm}
                       onChange={(e) => setSearchTerm(e.target.value)}
                       onKeyPress={(e) => e.key === "Enter" && handleSearch()}
-                      className="w-full rounded-lg border border-gray-300 py-3 pr-4 pl-10 focus:border-purple-500 focus:ring-2 focus:ring-purple-200 focus:outline-none"
+                      className="w-full rounded-lg border text-black border-gray-300 py-3 pr-4 pl-10 focus:border-purple-500 focus:ring-2 focus:ring-purple-200 focus:outline-none"
                     />
                   </div>
                 </div>
@@ -294,7 +294,7 @@ export default function CampaignWallPage() {
                     <select
                       value={platformFilter}
                       onChange={(e) => setPlatformFilter(e.target.value)}
-                      className="min-w-[120px] appearance-none rounded-lg border border-gray-300 py-3 pr-10 pl-10 focus:border-purple-500 focus:ring-2 focus:ring-purple-200 focus:outline-none"
+                      className="min-w-[120px] appearance-none text-gray-500 rounded-lg border border-gray-300 py-3 pr-10 pl-10 focus:border-purple-500 focus:ring-2 focus:ring-purple-200 focus:outline-none"
                     >
                       <option value="">All Platforms</option>
                       {PLATFORM_OPTIONS.map((option) => (
@@ -307,7 +307,7 @@ export default function CampaignWallPage() {
                   <select
                     value={nicheFilter}
                     onChange={(e) => setNicheFilter(e.target.value)}
-                    className="min-w-[120px] appearance-none rounded-lg border border-gray-300 py-3 pr-10 pl-4 focus:border-purple-500 focus:ring-2 focus:ring-purple-200 focus:outline-none"
+                    className="min-w-[120px] appearance-none rounded-lg border  text-gray-500 border-gray-300 py-3 pr-10 pl-4 focus:border-purple-500 focus:ring-2 focus:ring-purple-200 focus:outline-none"
                   >
                     <option value="">All Niches</option>
                     {NICHE_OPTIONS.map((option) => (
@@ -321,7 +321,7 @@ export default function CampaignWallPage() {
                     placeholder="Min Budget"
                     value={budgetMin}
                     onChange={(e) => setBudgetMin(e.target.value)}
-                    className="w-28 rounded-lg border border-gray-300 px-3 py-3 focus:border-purple-500 focus:ring-2 focus:ring-purple-200 focus:outline-none"
+                    className="w-34 rounded-lg border  text-black border-gray-300 px-3 py-3 focus:border-purple-500 focus:ring-2 focus:ring-purple-200 focus:outline-none"
                     min={0}
                   />
                   <input
@@ -329,7 +329,7 @@ export default function CampaignWallPage() {
                     placeholder="Max Budget"
                     value={budgetMax}
                     onChange={(e) => setBudgetMax(e.target.value)}
-                    className="w-28 rounded-lg border border-gray-300 px-3 py-3 focus:border-purple-500 focus:ring-2 focus:ring-purple-200 focus:outline-none"
+                    className="w-34 rounded-lg border  text-black border-gray-300 px-3 py-3 focus:border-purple-500 focus:ring-2 focus:ring-purple-200 focus:outline-none"
                     min={0}
                   />
                   <button
diff --git a/frontend/components/analytics/AIAnalyticsDashboard.tsx b/frontend/components/analytics/AIAnalyticsDashboard.tsx
index 5e61f4d..158100c 100644
--- a/frontend/components/analytics/AIAnalyticsDashboard.tsx
+++ b/frontend/components/analytics/AIAnalyticsDashboard.tsx
@@ -279,7 +279,7 @@ export default function AIAnalyticsDashboard({
             onChange={(e) => setNlQuery(e.target.value)}
             onKeyPress={(e) => e.key === "Enter" && handleNLQuery()}
             placeholder="Ask a question about your analytics data... (e.g., 'What's my average engagement rate?')"
-            className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+            className="flex-1 px-4 py-2 text-black border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
           />
           <button
             onClick={handleNLQuery}
diff --git a/frontend/components/auth/AuthGuard.tsx b/frontend/components/auth/AuthGuard.tsx
index 9e11aea..681dd32 100644
--- a/frontend/components/auth/AuthGuard.tsx
+++ b/frontend/components/auth/AuthGuard.tsx
@@ -71,4 +71,4 @@ export default function AuthGuard({ children, requiredRole }: AuthGuardProps) {
   }
 
   return <>{children}</>;
-}
+}
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 3bab148..9018433 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,7 +9,8 @@
       "version": "0.1.0",
       "dependencies": {
         "@hookform/resolvers": "^5.2.2",
-        "@supabase/supabase-js": "^2.78.0",
+        "@supabase/auth-helpers-nextjs": "^0.15.0",
+        "@supabase/supabase-js": "^2.90.0",
         "@tanstack/react-query": "^5.90.5",
         "axios": "^1.13.1",
         "framer-motion": "^12.23.24",
@@ -1295,83 +1296,97 @@
       "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
       "license": "MIT"
     },
-    "node_modules/@supabase/auth-js": {
-      "version": "2.78.0",
-      "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.78.0.tgz",
-      "integrity": "sha512-cXDtu1U0LeZj/xfnFoV7yCze37TcbNo8FCxy1FpqhMbB9u9QxxDSW6pA5gm/07Ei7m260Lof4CZx67Cu6DPeig==",
+    "node_modules/@supabase/auth-helpers-nextjs": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/@supabase/auth-helpers-nextjs/-/auth-helpers-nextjs-0.15.0.tgz",
+      "integrity": "sha512-VtXz3GGnxluoxks1g3SaCoYr2OZ7PgRukDl+pLWrDfD2dPDaG8hmkp5iBZsU+lmsDYALGNO2dgbymgpAfD8eCQ==",
+      "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
       "license": "MIT",
       "dependencies": {
-        "@supabase/node-fetch": "2.6.15",
-        "tslib": "2.8.1"
+        "cookie": "^1.0.2"
+      },
+      "peerDependencies": {
+        "@supabase/supabase-js": "^2.76.1"
       }
     },
-    "node_modules/@supabase/functions-js": {
-      "version": "2.78.0",
-      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.78.0.tgz",
-      "integrity": "sha512-t1jOvArBsOINyqaRee1xJ3gryXLvkBzqnKfi6q3YRzzhJbGS6eXz0pXR5fqmJeB01fLC+1njpf3YhMszdPEF7g==",
+    "node_modules/@supabase/auth-js": {
+      "version": "2.90.0",
+      "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.90.0.tgz",
+      "integrity": "sha512-J5Jgr1XE86NpK0LX8yLdjv3NzzsUnGky72QIGR1AcdVXHQIhwjb3JFEjNutODNKyOrknx00lyClOvqooHFHIiw==",
       "license": "MIT",
       "dependencies": {
-        "@supabase/node-fetch": "2.6.15",
         "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
       }
     },
-    "node_modules/@supabase/node-fetch": {
-      "version": "2.6.15",
-      "resolved": "https://registry.npmjs.org/@supabase/node-fetch/-/node-fetch-2.6.15.tgz",
-      "integrity": "sha512-1ibVeYUacxWYi9i0cf5efil6adJ9WRyZBLivgjs+AUpewx1F3xPi7gLgaASI2SmIQxPoCEjAsLAzKPgMJVgOUQ==",
+    "node_modules/@supabase/functions-js": {
+      "version": "2.90.0",
+      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.90.0.tgz",
+      "integrity": "sha512-YEk4AVtdaUzjxhil2GemOjq0VQVQfg8LmPyooJt80lNscQHfDyCGmHeQ6pDI48dkICTE87V7KVrlXaVGCZa1Rw==",
       "license": "MIT",
       "dependencies": {
-        "whatwg-url": "^5.0.0"
+        "tslib": "2.8.1"
       },
       "engines": {
-        "node": "4.x || >=6.0.0"
+        "node": ">=20.0.0"
       }
     },
     "node_modules/@supabase/postgrest-js": {
-      "version": "2.78.0",
-      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-2.78.0.tgz",
-      "integrity": "sha512-AwhpYlSvJ+PSnPmIK8sHj7NGDyDENYfQGKrMtpVIEzQA2ApUjgpUGxzXWN4Z0wEtLQsvv7g4y9HVad9Hzo1TNA==",
+      "version": "2.90.0",
+      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-2.90.0.tgz",
+      "integrity": "sha512-XCgrXuGtBPgxQWKfS8tZ4/deK5+cgUW+XLl4zq4v7JRUfCHlc3ZewZid5hjcpAIDYwGWq9ihrfPUNDAfl5jDdg==",
       "license": "MIT",
       "dependencies": {
-        "@supabase/node-fetch": "2.6.15",
         "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
       }
     },
     "node_modules/@supabase/realtime-js": {
-      "version": "2.78.0",
-      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.78.0.tgz",
-      "integrity": "sha512-rCs1zmLe7of7hj4s7G9z8rTqzWuNVtmwDr3FiCRCJFawEoa+RQO1xpZGbdeuVvVmKDyVN6b542Okci+117y/LQ==",
+      "version": "2.90.0",
+      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.90.0.tgz",
+      "integrity": "sha512-Hncs2Obk2Wd4Mcj51XDtLqOuiDT6onSmpHkwjsaLDZylgLi4uN81W4LYhj+rdPm3A9nQIRB4/5SZ3Hab2Adlsg==",
       "license": "MIT",
       "dependencies": {
-        "@supabase/node-fetch": "2.6.15",
         "@types/phoenix": "^1.6.6",
         "@types/ws": "^8.18.1",
         "tslib": "2.8.1",
         "ws": "^8.18.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
       }
     },
     "node_modules/@supabase/storage-js": {
-      "version": "2.78.0",
-      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.78.0.tgz",
-      "integrity": "sha512-n17P0JbjHOlxqJpkaGFOn97i3EusEKPEbWOpuk1r4t00Wg06B8Z4GUiq0O0n1vUpjiMgJUkLIMuBVp+bEgunzQ==",
+      "version": "2.90.0",
+      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.90.0.tgz",
+      "integrity": "sha512-50XiDACfHXhibm20J94TEdOYMLXm4fZCHTdAAs9xBDJTBA4RXVN52Bx1MVW34pu3S72rAgObQxVyAFaZ+7+7Tg==",
       "license": "MIT",
       "dependencies": {
-        "@supabase/node-fetch": "2.6.15",
+        "iceberg-js": "^0.8.1",
         "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
       }
     },
     "node_modules/@supabase/supabase-js": {
-      "version": "2.78.0",
-      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.78.0.tgz",
-      "integrity": "sha512-xYMRNBFmKp2m1gMuwcp/gr/HlfZKqjye1Ib8kJe29XJNsgwsfO/f8skxnWiscFKTlkOKLuBexNgl5L8dzGt6vA==",
+      "version": "2.90.0",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.90.0.tgz",
+      "integrity": "sha512-foWQl5x1+LuqT7qdnAoCDcKHTNBSaED+eSEOEmmpqXiQuCfJU2K0lDkfGm7PUBx/BDaw3tFObzuJyZtHDbrehA==",
       "license": "MIT",
       "dependencies": {
-        "@supabase/auth-js": "2.78.0",
-        "@supabase/functions-js": "2.78.0",
-        "@supabase/node-fetch": "2.6.15",
-        "@supabase/postgrest-js": "2.78.0",
-        "@supabase/realtime-js": "2.78.0",
-        "@supabase/storage-js": "2.78.0"
+        "@supabase/auth-js": "2.90.0",
+        "@supabase/functions-js": "2.90.0",
+        "@supabase/postgrest-js": "2.90.0",
+        "@supabase/realtime-js": "2.90.0",
+        "@supabase/storage-js": "2.90.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
       }
     },
     "node_modules/@swc/helpers": {
@@ -1826,9 +1841,9 @@
       }
     },
     "node_modules/@types/phoenix": {
-      "version": "1.6.6",
-      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.6.tgz",
-      "integrity": "sha512-PIzZZlEppgrpoT2QgbnDU+MMzuR6BbCjllj0bM70lWoejMeNJAxCchxnv7J3XFkI8MpygtRpzXrIlmWUBclP5A==",
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.7.tgz",
+      "integrity": "sha512-oN9ive//QSBkf19rfDv45M7eZPi0eEXylht2OLEXicu5b4KoQ1OzXIw+xDSGWxSxe1JmepRR/ZH283vsu518/Q==",
       "license": "MIT"
     },
     "node_modules/@types/react": {
@@ -3046,6 +3061,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -4657,6 +4685,15 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/iceberg-js": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/iceberg-js/-/iceberg-js-0.8.1.tgz",
+      "integrity": "sha512-1dhVQZXhcHje7798IVM+xoo/1ZdVfzOMIc8/rgVSijRK38EDqOJoGula9N/8ZI5RD8QTxNQtK/Gozpr+qUqRRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -7818,12 +7855,6 @@
         "node": ">=8.0"
       }
     },
-    "node_modules/tr46": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "license": "MIT"
-    },
     "node_modules/trim-lines": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
@@ -8256,22 +8287,6 @@
         "d3-timer": "^3.0.1"
       }
     },
-    "node_modules/webidl-conversions": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "license": "BSD-2-Clause"
-    },
-    "node_modules/whatwg-url": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "license": "MIT",
-      "dependencies": {
-        "tr46": "~0.0.3",
-        "webidl-conversions": "^3.0.0"
-      }
-    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -8388,9 +8403,9 @@
       }
     },
     "node_modules/ws": {
-      "version": "8.18.3",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
-      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+      "version": "8.19.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz",
+      "integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==",
       "license": "MIT",
       "engines": {
         "node": ">=10.0.0"
diff --git a/frontend/package.json b/frontend/package.json
index 21516a1..b4ead92 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,7 +12,8 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
-    "@supabase/supabase-js": "^2.78.0",
+    "@supabase/auth-helpers-nextjs": "^0.15.0",
+    "@supabase/supabase-js": "^2.90.0",
     "@tanstack/react-query": "^5.90.5",
     "axios": "^1.13.1",
     "framer-motion": "^12.23.24",
@@ -20,8 +21,8 @@
     "next": "16.0.1",
     "react": "19.2.0",
     "react-dom": "19.2.0",
-    "react-markdown": "^9.0.1",
     "react-hook-form": "^7.66.0",
+    "react-markdown": "^9.0.1",
     "recharts": "^2.15.4",
     "zod": "^4.1.12",
     "zustand": "^5.0.8"

From 5dc879d92e66d65728fd10be5a0ab14a9694c3e6 Mon Sep 17 00:00:00 2001
From: PriyankaVerma2307 <vermapriyanka32892@gmail.com>
Date: Fri, 9 Jan 2026 15:12:06 +0530
Subject: [PATCH 2/4] Fix input text visibility and minor styling improvements

---
 backend/app/core/dependencies.py | 1 -
 backend/app/core/security.py     | 1 -
 backend/env_example              | 2 +-
 backend/test_jwt.py              | 4 ++--
 4 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/backend/app/core/dependencies.py b/backend/app/core/dependencies.py
index aeb8c03..e0ec7d6 100644
--- a/backend/app/core/dependencies.py
+++ b/backend/app/core/dependencies.py
@@ -215,4 +215,3 @@ async def route(user = Depends(get_optional_user)):
         return await get_current_user(credentials)
     except HTTPException:
         return None
-
diff --git a/backend/app/core/security.py b/backend/app/core/security.py
index 23dd3a7..5036bc5 100644
--- a/backend/app/core/security.py
+++ b/backend/app/core/security.py
@@ -169,4 +169,3 @@ def get_password_hash(password: str) -> str:
         return pwd_context.hash(password)
     except ImportError:
         raise ImportError("passlib is required for password hashing. Install with: pip install passlib[bcrypt]")
-
diff --git a/backend/env_example b/backend/env_example
index 4e08603..1d6ad33 100644
--- a/backend/env_example
+++ b/backend/env_example
@@ -33,4 +33,4 @@ ALLOWED_ORIGINS=http://localhost:3000,http://localhost:3001
 # Location: Dashboard → Project Settings → API → JWT Settings → JWT Secret
 # Use the JWT Secret (NOT the anon key!)
 
-SUPABASE_JWT_SECRET=your-jwt-secret-from-supabase-dashboard
+SUPABASE_JWT_SECRET=your_jwt_key
diff --git a/backend/test_jwt.py b/backend/test_jwt.py
index ded0b39..11bc1f8 100644
--- a/backend/test_jwt.py
+++ b/backend/test_jwt.py
@@ -15,8 +15,8 @@
 SUPABASE_ANON_KEY = os.getenv("SUPABASE_KEY")
 
 # Test user credentials (update with your test account)
-TEST_EMAIL = "test@example.com"
-TEST_PASSWORD = "Test123!@#"
+TEST_EMAIL = "anu906162@gmail.com"
+TEST_PASSWORD = "@rani00@"
 
 
 def get_jwt_token():

From 7733c3deeda589d9779db8c6207e7fdc4787df9b Mon Sep 17 00:00:00 2001
From: PriyankaVerma2307 <vermapriyanka32892@gmail.com>
Date: Sun, 11 Jan 2026 21:40:01 +0530
Subject: [PATCH 3/4] Update JWT verification to ES256 using Supabase JWK

---
 backend/app/core/config.py          |  12 ++-
 backend/app/core/security.py        | 123 ++++++----------------------
 backend/app/main.py                 |  54 ++++++------
 backend/test_jwt.py                 |   4 +
 frontend/components/SlidingMenu.tsx |   2 +-
 5 files changed, 60 insertions(+), 135 deletions(-)

diff --git a/backend/app/core/config.py b/backend/app/core/config.py
index 5af58d2..8370082 100644
--- a/backend/app/core/config.py
+++ b/backend/app/core/config.py
@@ -1,6 +1,6 @@
-# Configuration settings for FastAPI app
 from pydantic_settings import BaseSettings
-from typing import Optional
+from typing import Optional, Dict, Any
+import json
 
 class Settings(BaseSettings):
     # Supabase Configuration
@@ -26,11 +26,15 @@ class Settings(BaseSettings):
     # Application Settings
     app_name: Optional[str] = None
 
-    # JWT Authentication
-    SUPABASE_JWT_SECRET: str  # JWT Secret from Supabase Dashboard → Settings → API → JWT Settings
+    # JWT Authentication (RAW JSON STRING)
+    SUPABASE_JWT_PUBLIC_KEY: str
 
     model_config = {
         "env_file": ".env"
     }
 
+    @property
+    def supabase_jwt_jwk(self) -> Dict[str, Any]:
+        return json.loads(self.SUPABASE_JWT_PUBLIC_KEY)
+
 settings = Settings()
diff --git a/backend/app/core/security.py b/backend/app/core/security.py
index 5036bc5..93f3d85 100644
--- a/backend/app/core/security.py
+++ b/backend/app/core/security.py
@@ -3,153 +3,76 @@
 Handles token validation, creation, and user verification
 """
 
-import jwt
-from datetime import datetime, timedelta
-from typing import Optional, Dict, Any
+from jose import jwt, JWTError
 from fastapi import HTTPException, status
+from typing import Optional, Dict, Any
 from app.core.config import settings
 
 
 class JWTHandler:
-    """Handle all JWT operations with Supabase tokens"""
+    """Handle Supabase JWT verification only"""
 
     def __init__(self):
-        try:
-            self.secret_key = settings.SUPABASE_JWT_SECRET
-            if not self.secret_key:
-                raise ValueError("SUPABASE_JWT_SECRET is not set in environment variables")
-        except Exception as e:
-            raise ValueError(f"Failed to load JWT secret: {str(e)}. Please set SUPABASE_JWT_SECRET in your .env file.")
-        self.algorithm = "HS256"  # Supabase uses HS256 for legacy keys
-
-    def decode_token(self, token: str) -> Dict[str, Any]:
-        """
-        Decode and validate JWT token from Supabase
-
-        Args:
-            token: JWT token string (without 'Bearer ' prefix)
+        self.public_key = settings.SUPABASE_JWT_PUBLIC_KEY
+        if not self.public_key:
+            raise ValueError("SUPABASE_JWT_PUBLIC_KEY is not set")
 
-        Returns:
-            Decoded payload with user information
+        self.algorithm = "ES256"
 
-        Raises:
-            HTTPException: If token is invalid or expired
-        """
+    def decode_token(self, token: str) -> Dict[str, Any]:
         try:
-            # Decode JWT using Supabase secret
-            # Note: We don't verify audience as Supabase tokens may have different audience claims
-            # The signature verification is sufficient for security
             payload = jwt.decode(
                 token,
-                self.secret_key,
+                self.public_key,                 # ✅ PUBLIC KEY
                 algorithms=[self.algorithm],
-                options={
-                    "verify_signature": True,
-                    "verify_exp": True,
-                    "verify_iat": True,
-                    "verify_aud": False  # Disable audience verification for Supabase tokens
-                }
+                audience="authenticated",        # Supabase default
             )
 
-            # Validate required fields
-            if 'sub' not in payload:
+            if "sub" not in payload:
                 raise HTTPException(
                     status_code=status.HTTP_401_UNAUTHORIZED,
-                    detail="Invalid token: missing user ID"
+                    detail="Invalid token: missing user id",
                 )
 
             return payload
 
-        except jwt.ExpiredSignatureError:
-            raise HTTPException(
-                status_code=status.HTTP_401_UNAUTHORIZED,
-                detail="Token has expired"
-            )
-
-        except jwt.InvalidTokenError as e:
+        except JWTError as e:
             raise HTTPException(
                 status_code=status.HTTP_401_UNAUTHORIZED,
-                detail=f"Invalid token: {str(e)}"
+                detail=f"Invalid token: {str(e)}",
             )
 
     def verify_token(self, token: str) -> bool:
-        """
-        Quick token validation without full decode
-
-        Args:
-            token: JWT token string
-
-        Returns:
-            True if valid, False otherwise
-        """
         try:
             jwt.decode(
                 token,
-                self.secret_key,
+                self.public_key,
                 algorithms=[self.algorithm],
-                options={
-                    "verify_signature": True,
-                    "verify_exp": True,
-                    "verify_aud": False  # Disable audience verification
-                }
+                audience="authenticated",
             )
             return True
-        except:
+        except JWTError:
             return False
 
     def get_user_id_from_token(self, token: str) -> str:
-        """
-        Extract user ID from token
-
-        Args:
-            token: JWT token string
-
-        Returns:
-            User UUID as string
-        """
-        payload = self.decode_token(token)
-        return payload['sub']
+        return self.decode_token(token)["sub"]
 
     def get_user_email_from_token(self, token: str) -> Optional[str]:
-        """
-        Extract user email from token
-
-        Args:
-            token: JWT token string
-
-        Returns:
-            User email if present in token
-        """
-        payload = self.decode_token(token)
-        return payload.get('email')
+        return self.decode_token(token).get("email")
 
     def get_user_role_from_token(self, token: str) -> Optional[str]:
-        """
-        Extract user role from token metadata
-
-        Args:
-            token: JWT token string
-
-        Returns:
-            User role (creator/brand) if present
-        """
         payload = self.decode_token(token)
-
-        # Supabase stores custom claims in user_metadata or app_metadata
-        user_metadata = payload.get('user_metadata', {})
-        app_metadata = payload.get('app_metadata', {})
-
         return (
-            user_metadata.get('role') or
-            app_metadata.get('role') or
-            payload.get('role')
+            payload.get("user_metadata", {}).get("role")
+            or payload.get("app_metadata", {}).get("role")
+            or payload.get("role")
         )
 
 
-# Singleton instance
 jwt_handler = JWTHandler()
 
 
+
 # Legacy functions for backward compatibility (optional - requires passlib)
 def verify_password(plain_password: str, hashed_password: str) -> bool:
     """Verify a password against a hash (if needed for custom auth)"""
diff --git a/backend/app/main.py b/backend/app/main.py
index 6a6f434..f05d402 100644
--- a/backend/app/main.py
+++ b/backend/app/main.py
@@ -1,43 +1,36 @@
 from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
-import os
-from app.api.routes import health
-from app.core.supabase_clients import supabase_anon as supabase
-from app.api.routes import auth
-from app.api.routes import gemini_generate
-from app.api.routes import campaigns
-from app.api.routes import groq_generate
-from app.api.routes import collaborations
-from app.api.routes import creators
-from app.api.routes import proposals
-from app.api.routes import analytics
-from app.api.routes import ai_analytics
-from app.api.routes import profiles
-app = FastAPI(title="Inpact Backend", version="0.1.0")
 
-# Verify Supabase client initialization on startup
-try:
-    # Try a lightweight query
-    response = supabase.table("_supabase_test").select("*").limit(1).execute()
-    print("✅ Supabase client initialized successfully.")
-except Exception as e:
-    error_msg = str(e)
-    if "Could not find the table" in error_msg:
-        print("⚠️ Supabase client connected, but test table does not exist. Connection is working.")
-    else:
-        print(f"❌ Failed to verify Supabase connection: {e}")
+from app.api.routes import (
+    health,
+    auth,
+    gemini_generate,
+    campaigns,
+    groq_generate,
+    collaborations,
+    creators,
+    proposals,
+    analytics,
+    ai_analytics,
+    profiles,
+)
 
-# --- CORS Setup ---
+app = FastAPI(title="Inpact Backend", version="0.1.0")
+
+# 🔥 FORCE OPEN CORS (DEBUG MODE)
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=os.getenv("ALLOWED_ORIGINS", "http://localhost:3000").split(","),
-    allow_credentials=True,
+    allow_origins=["*"],
+    allow_credentials=False,  # must be False when using "*"
     allow_methods=["*"],
     allow_headers=["*"],
 )
-app.include_router(gemini_generate.router)
+
+
+# Routes
 app.include_router(health.router)
 app.include_router(auth.router)
+app.include_router(gemini_generate.router)
 app.include_router(campaigns.router)
 app.include_router(groq_generate.router)
 app.include_router(collaborations.router)
@@ -49,4 +42,5 @@
 
 @app.get("/")
 def root():
-    return {"message": "Welcome to Inpact Backend 🚀"}
+    return {"message": "Inpact Backend Running 🚀"}
+
diff --git a/backend/test_jwt.py b/backend/test_jwt.py
index 11bc1f8..d2d34e6 100644
--- a/backend/test_jwt.py
+++ b/backend/test_jwt.py
@@ -6,6 +6,7 @@
 import requests
 import os
 from dotenv import load_dotenv
+from jose import jwt, JWTError
 
 load_dotenv()
 
@@ -17,6 +18,8 @@
 # Test user credentials (update with your test account)
 TEST_EMAIL = "anu906162@gmail.com"
 TEST_PASSWORD = "@rani00@"
+# @rani00@
+
 
 
 def get_jwt_token():
@@ -107,3 +110,4 @@ def test_invalid_token():
 
     print("=== Tests Complete ===")
 
+ 
diff --git a/frontend/components/SlidingMenu.tsx b/frontend/components/SlidingMenu.tsx
index 36d2838..8985e65 100644
--- a/frontend/components/SlidingMenu.tsx
+++ b/frontend/components/SlidingMenu.tsx
@@ -253,7 +253,7 @@ export default function SlidingMenu({ role }: Props) {
           </ul>
         </nav>
 
-        <div className="mt-auto p-4 text-sm text-slate-500">
+        <div className="mb-0 p-4 text-sm text-slate-500">
           <p>
             Logged in as{" "}
             <strong className="text-slate-700 dark:text-slate-200">

From a1c4f467241bedde3b99677a3f134b868c425727 Mon Sep 17 00:00:00 2001
From: PriyankaVerma2307 <vermapriyanka32892@gmail.com>
Date: Wed, 21 Jan 2026 20:02:09 +0530
Subject: [PATCH 4/4] Improve login UI with better contrast, shadow and layout

---
 frontend/app/login/page.tsx  | 232 +++++++++++----------
 frontend/app/signup/page.tsx | 389 ++++++++++++++++-------------------
 2 files changed, 306 insertions(+), 315 deletions(-)

diff --git a/frontend/app/login/page.tsx b/frontend/app/login/page.tsx
index 7e8456b..697b092 100644
--- a/frontend/app/login/page.tsx
+++ b/frontend/app/login/page.tsx
@@ -10,6 +10,7 @@ import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
+
 // Validation schema
 const loginSchema = z.object({
   email: z.string().email("Invalid email address"),
@@ -90,122 +91,137 @@ export default function LoginPage() {
       setIsLoading(false);
     }
   };
+ 
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-linear-to-br from-purple-50 via-white to-blue-50 px-4 py-12">
-      <div className="w-full max-w-md">
-        {/* Logo/Header */}
-        <div className="mb-8 text-center">
-          <h1 className="mb-2 bg-linear-to-r from-purple-600 to-blue-600 bg-clip-text text-4xl font-bold text-transparent">
-            InPactAI
-          </h1>
-          <p className="text-gray-600">
-            Welcome back! Please login to your account
-          </p>
+  <div className="relative flex min-h-screen items-center justify-center bg-gradient-to-br from-indigo-500 via-purple-500 to-blue-500 px-4">
+
+    {/* Soft background blobs */}
+    <div className="pointer-events-none absolute inset-0 overflow-hidden">
+      <div className="absolute -top-32 -left-32 h-96 w-96 rounded-full bg-white/20 blur-3xl" />
+      <div className="absolute -bottom-32 -right-32 h-96 w-96 rounded-full bg-black/10 blur-3xl" />
+    </div>
+
+    {/* Login Card */}
+    
+      <div
+  className="
+    relative w-full max-w-md
+    -translate-y-8
+    rounded-2xl p-8
+
+    bg-white/90 backdrop-blur-xl
+    border border-white/40 ring-1 ring-white/30
+
+    shadow-[0_35px_80px_rgba(0,0,0,0.45)]
+    transition-all duration-300 ease-out
+
+    hover:-translate-y-10
+    hover:shadow-[0_45px_100px_rgba(0,0,0,0.55)]
+  "
+>
+ 
+      {/* Header */}
+      <div className="mb-8 text-center">
+        <h1 className="mb-2 bg-gradient-to-r from-indigo-600 to-blue-600 bg-clip-text text-4xl font-extrabold text-transparent">
+          InPactAI
+        </h1>
+        <p className="text-gray-600">
+          Welcome back! Please login to your account
+        </p>
+      </div>
+
+      {/* Error */}
+      {error && (
+        <div className="mb-6 flex items-start gap-3 rounded-lg border border-red-200 bg-red-50 p-4">
+          <XCircle className="mt-0.5 h-5 w-5 text-red-600" />
+          <p className="text-sm text-red-800">{error}</p>
+        </div>
+      )}
+
+      {/* Form */}
+      <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
+
+        {/* Email */}
+        <div>
+          <label className="mb-1 block text-sm font-medium text-gray-700">
+            Email address
+          </label>
+          <input
+            type="email"
+            placeholder="Enter a email"
+            {...register("email")}
+            disabled={isLoading}
+            className="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-gray-900 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+          />
+          {errors.email && (
+            <p className="mt-1 text-sm text-red-600">
+              {errors.email.message}
+            </p>
+          )}
         </div>
 
-        {/* Error Message */}
-        {error && (
-          <div className="mb-6 flex items-start gap-3 rounded-lg border border-red-200 bg-red-50 p-4">
-            <XCircle className="mt-0.5 h-5 w-5 shrink-0 text-red-600" />
-            <p className="text-sm text-red-800">{error}</p>
-          </div>
-        )}
-
-        {/* Login Form */}
-        <div className="rounded-2xl bg-white p-8 shadow-xl">
-          <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
-            {/* Email Field */}
-            <div>
-              <label
-                htmlFor="email"
-                className="mb-1 block text-sm font-medium text-gray-700"
-              >
-                Email Address
-              </label>
-              <input
-                id="email"
-                type="email"
-                {...register("email")}
-                className="w-full rounded-lg border border-gray-300 px-4 py-2.5 transition outline-none focus:border-transparent focus:ring-2 focus:ring-purple-500"
-                placeholder="you@example.com"
-                disabled={isLoading}
-                autoComplete="email"
-              />
-              {errors.email && (
-                <p className="mt-1 text-sm text-red-600">
-                  {errors.email.message}
-                </p>
-              )}
-            </div>
-
-            {/* Password Field */}
-            <div>
-              <label
-                htmlFor="password"
-                className="mb-1 block text-sm font-medium text-gray-700"
-              >
-                Password
-              </label>
-              <div className="relative">
-                <input
-                  id="password"
-                  type={showPassword ? "text" : "password"}
-                  {...register("password")}
-                  className="w-full rounded-lg border border-gray-300 px-4 py-2.5 pr-10 transition outline-none focus:border-transparent focus:ring-2 focus:ring-purple-500"
-                  placeholder="••••••••"
-                  disabled={isLoading}
-                  autoComplete="current-password"
-                />
-                <button
-                  type="button"
-                  onClick={() => setShowPassword(!showPassword)}
-                  className="absolute top-1/2 right-3 -translate-y-1/2 text-gray-500 hover:text-gray-700"
-                  disabled={isLoading}
-                >
-                  {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
-                </button>
-              </div>
-              {errors.password && (
-                <p className="mt-1 text-sm text-red-600">
-                  {errors.password.message}
-                </p>
-              )}
-            </div>
-
-            {/* Submit Button */}
-            <button
-              type="submit"
+        {/* Password */}
+        <div>
+          <label className="mb-1 block text-sm font-medium text-gray-700">
+            Password
+          </label>
+          <div className="relative">
+            <input
+              type={showPassword ? "text" : "password"}
+              placeholder="Enter a Password"
+              {...register("password")}
               disabled={isLoading}
-              className="flex w-full items-center justify-center gap-2 rounded-lg bg-linear-to-r from-purple-600 to-blue-600 py-3 font-medium text-white transition-all hover:from-purple-700 hover:to-blue-700 focus:ring-4 focus:ring-purple-300 disabled:cursor-not-allowed disabled:opacity-50"
+              className="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 pr-10 text-gray-900 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            />
+            <button
+              type="button"
+              onClick={() => setShowPassword(!showPassword)}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
             >
-              {isLoading && <Loader2 className="h-5 w-5 animate-spin" />}
-              {isLoading ? "Logging in..." : "Log In"}
+              {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
             </button>
-          </form>
-
-          {/* Signup Link */}
-          <div className="mt-6 text-center">
-            <p className="text-sm text-gray-600">
-              Don't have an account?{" "}
-              <Link
-                href="/signup"
-                className="font-medium text-purple-600 hover:text-purple-700"
-              >
-                Sign up
-              </Link>
-            </p>
           </div>
+          {errors.password && (
+            <p className="mt-1 text-sm text-red-600">
+              {errors.password.message}
+            </p>
+          )}
         </div>
 
-        {/* Additional Info */}
-        <div className="mt-6 text-center">
-          <p className="text-xs text-gray-500">
-            By continuing, you agree to InPactAI's Terms of Service and Privacy
-            Policy
-          </p>
-        </div>
-      </div>
+        {/* Button */}
+        <button
+          type="submit"
+          disabled={isLoading}
+          className="
+  relative overflow-hidden
+  flex w-full items-center justify-center gap-2
+  rounded-lg py-3 font-semibold text-white
+
+  bg-gradient-to-r from-indigo-600 via-purple-600 to-blue-600
+  shadow-lg transition-all duration-300
+
+  hover:from-indigo-500 hover:via-purple-500 hover:to-blue-500
+  hover:shadow-xl hover:scale-[1.02]
+
+  disabled:opacity-70
+"
+        >
+          {isLoading && <Loader2 className="h-5 w-5 animate-spin" />}
+          {isLoading ? "Logging in..." : "Log In"}
+        </button>
+      </form>
+
+      {/* Footer */}
+      <p className="mt-6 text-center text-sm text-gray-600">
+        Don&apos;t have an account?{" "}
+        <Link href="/signup" className="font-medium text-indigo-600 hover:underline">
+          Sign up
+        </Link>
+      </p>
     </div>
-  );
-}
+  </div>
+);
+
+
+}
\ No newline at end of file
diff --git a/frontend/app/signup/page.tsx b/frontend/app/signup/page.tsx
index e6e3294..aab35d9 100644
--- a/frontend/app/signup/page.tsx
+++ b/frontend/app/signup/page.tsx
@@ -118,233 +118,208 @@ export default function SignupPage() {
   };
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-linear-to-br from-purple-50 via-white to-blue-50 px-4 py-12">
-      <div className="w-full max-w-md">
-        {/* Logo/Header */}
-        <div className="mb-8 text-center">
-          <h1 className="mb-2 bg-linear-to-r from-purple-600 to-blue-600 bg-clip-text text-4xl font-bold text-transparent">
-            InPactAI
-          </h1>
-          <p className="text-gray-600">Create your account</p>
+  <div className="relative flex min-h-screen items-center justify-center bg-gradient-to-br from-indigo-500 via-purple-500 to-blue-500 px-4 py-12">
+    {/* soft background blobs */}
+    <div className="pointer-events-none absolute inset-0 overflow-hidden">
+      <div className="absolute -top-32 -left-32 h-96 w-96 rounded-full bg-white/20 blur-3xl" />
+      <div className="absolute -bottom-32 -right-32 h-96 w-96 rounded-full bg-black/10 blur-3xl" />
+    </div>
+
+    <div className="relative w-full max-w-md">
+      {/* Header */}
+      <div className="mb-8 text-center">
+        <h1 className="mb-2 bg-gradient-to-r from-indigo-400 to-blue-200 bg-clip-text text-4xl font-extrabold text-transparent">
+          InPactAI
+        </h1>
+        <p className="text-gray-100">Create your account</p>
+      </div>
+
+      {/* Success */}
+      {success && (
+        <div className="mb-6 flex items-start gap-3 rounded-lg border border-green-200 bg-green-50 p-4">
+          <CheckCircle2 className="mt-0.5 h-5 w-5 text-green-600" />
+          <div>
+            <p className="font-medium text-green-800">
+              Account created successfully!
+            </p>
+            <p className="mt-1 text-sm text-green-700">
+              Redirecting to login page...
+            </p>
+          </div>
         </div>
+      )}
 
-        {/* Success Message */}
-        {success && (
-          <div className="mb-6 flex items-start gap-3 rounded-lg border border-green-200 bg-green-50 p-4">
-            <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-green-600" />
-            <div>
-              <p className="font-medium text-green-800">
-                Account created successfully!
+      {/* Error */}
+      {error && (
+        <div className="mb-6 flex items-start gap-3 rounded-lg border border-red-200 bg-red-50 p-4">
+          <XCircle className="mt-0.5 h-5 w-5 text-red-600" />
+          <div className="text-sm text-red-800">
+            {Array.isArray(error)
+              ? error.map((e, i) => (
+                  <div key={i}>{e.msg || e.detail || JSON.stringify(e)}</div>
+                ))
+              : error}
+          </div>
+        </div>
+      )}
+
+      {/* Signup Card */}
+      <div
+        className="
+          relative rounded-2xl p-8
+          -translate-y-8
+          bg-white/90 backdrop-blur-xl
+          border border-white/40 ring-1 ring-white/30
+          text-gray-900
+          shadow-[0_35px_80px_rgba(0,0,0,0.45)]
+          transition-all duration-300 ease-out
+          hover:-translate-y-10
+          hover:shadow-[0_45px_100px_rgba(0,0,0,0.55)]
+        "
+      >
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
+          {/* Name */}
+          <div>
+            <label className="mb-1 block text-sm font-medium text-gray-700">
+              Full Name
+            </label>
+            <input
+              {...register("name")}
+              placeholder="Enter a Name"
+              disabled={isLoading || success}
+              className="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-gray-900 transition-all duration-200 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:scale-[1.01] focus:shadow-md"
+            />
+            {errors.name && (
+              <p className="mt-1 text-sm text-red-600">
+                {errors.name.message}
               </p>
-              <p className="mt-1 text-sm text-green-700">
-                Redirecting to login page...
+            )}
+          </div>
+
+          {/* Email */}
+          <div>
+            <label className="mb-1 block text-sm font-medium text-gray-700">
+              Email Address
+            </label>
+            <input
+              type="email"
+              placeholder="Enter a email"
+              {...register("email")}
+              disabled={isLoading || success}
+              className="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-gray-900 transition-all duration-200 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:scale-[1.01] focus:shadow-md"
+            />
+            {errors.email && (
+              <p className="mt-1 text-sm text-red-600">
+                {errors.email.message}
               </p>
-            </div>
+            )}
           </div>
-        )}
 
-        {/* Error Message */}
-        {error && (
-          <div className="mb-6 flex items-start gap-3 rounded-lg border border-red-200 bg-red-50 p-4">
-            <XCircle className="mt-0.5 h-5 w-5 shrink-0 text-red-600" />
-            <div className="text-sm text-red-800">
-              {Array.isArray(error)
-                ? error.map((e, i) => (
-                    <div key={i}>{e.msg || e.detail || JSON.stringify(e)}</div>
-                  ))
-                : error}
-            </div>
+          {/* Account Type */}
+          <div>
+            <label className="mb-1 block text-sm font-medium text-gray-700">
+              I am a…
+            </label>
+            <select
+              {...register("accountType")}
+              disabled={isLoading || success}
+              className="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-gray-900 transition-all duration-200 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:scale-[1.01] focus:shadow-md"
+            >
+              <option value="">Select account type</option>
+              <option value="Creator">Creator</option>
+              <option value="Brand">Brand</option>
+            </select>
+            {errors.accountType && (
+              <p className="mt-1 text-sm text-red-600">
+                {errors.accountType.message}
+              </p>
+            )}
           </div>
-        )}
 
-        {/* Signup Form */}
-        <div className="rounded-2xl bg-white p-8 shadow-xl">
-          <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
-            {/* Name Field */}
-            <div>
-              <label
-                htmlFor="name"
-                className="mb-1 block text-sm font-medium text-gray-700"
-              >
-                Full Name
-              </label>
+          {/* Password */}
+          <div>
+            <label className="mb-1 block text-sm font-medium text-gray-700">
+              Password
+            </label>
+            <div className="relative">
               <input
-                id="name"
-                type="text"
-                {...register("name")}
-                className="w-full rounded-lg border border-gray-300 px-4 py-2.5 transition outline-none focus:border-transparent focus:ring-2 focus:ring-purple-500"
-                placeholder="John Doe"
+                type={showPassword ? "text" : "password"}
+                placeholder="Enter a Strong Password"
+                {...register("password")}
                 disabled={isLoading || success}
+                className="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 pr-10 text-gray-900 transition-all duration-200 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:scale-[1.01] focus:shadow-md"
               />
-              {errors.name && (
-                <p className="mt-1 text-sm text-red-600">
-                  {errors.name.message}
-                </p>
-              )}
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500"
+              >
+                {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
+              </button>
             </div>
+          </div>
 
-            {/* Email Field */}
-            <div>
-              <label
-                htmlFor="email"
-                className="mb-1 block text-sm font-medium text-gray-700"
-              >
-                Email Address
-              </label>
+          {/* Confirm Password */}
+          <div>
+            <label className="mb-1 block text-sm font-medium text-gray-700">
+              Confirm Password
+            </label>
+            <div className="relative">
               <input
-                id="email"
-                type="email"
-                {...register("email")}
-                className="w-full rounded-lg border border-gray-300 px-4 py-2.5 transition outline-none focus:border-transparent focus:ring-2 focus:ring-purple-500"
-                placeholder="you@example.com"
+                type={showConfirmPassword ? "text" : "password"}
+                placeholder="Enter  Confirm Password"
+                {...register("confirmPassword")}
                 disabled={isLoading || success}
+                className="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 pr-10 text-gray-900 transition-all duration-200 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:scale-[1.01] focus:shadow-md"
               />
-              {errors.email && (
-                <p className="mt-1 text-sm text-red-600">
-                  {errors.email.message}
-                </p>
-              )}
-            </div>
-
-            {/* Account Type Field */}
-            <div>
-              <label
-                htmlFor="accountType"
-                className="mb-1 block text-sm font-medium text-gray-700"
-              >
-                I am a...
-              </label>
-              <select
-                id="accountType"
-                {...register("accountType")}
-                className="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 transition outline-none focus:border-transparent focus:ring-2 focus:ring-purple-500"
-                disabled={isLoading || success}
+              <button
+                type="button"
+                onClick={() =>
+                  setShowConfirmPassword(!showConfirmPassword)
+                }
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500"
               >
-                <option value="">Select account type</option>
-                <option value="Creator">Creator</option>
-                <option value="Brand">Brand</option>
-              </select>
-              {errors.accountType && (
-                <p className="mt-1 text-sm text-red-600">
-                  {errors.accountType.message}
-                </p>
-              )}
-            </div>
-
-            {/* Password Field */}
-            <div>
-              <label
-                htmlFor="password"
-                className="mb-1 block text-sm font-medium text-gray-700"
-              >
-                Password
-              </label>
-              <div className="relative">
-                <input
-                  id="password"
-                  type={showPassword ? "text" : "password"}
-                  {...register("password")}
-                  className="w-full rounded-lg border border-gray-300 px-4 py-2.5 pr-10 transition outline-none focus:border-transparent focus:ring-2 focus:ring-purple-500"
-                  placeholder="••••••••"
-                  disabled={isLoading || success}
-                />
-                <button
-                  type="button"
-                  onClick={() => setShowPassword(!showPassword)}
-                  className="absolute top-1/2 right-3 -translate-y-1/2 text-gray-500 hover:text-gray-700"
-                  disabled={isLoading || success}
-                >
-                  {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
-                </button>
-              </div>
-              {errors.password && (
-                <p className="mt-1 text-sm text-red-600">
-                  {errors.password.message}
-                </p>
-              )}
-
-              {/* Password Strength Indicator */}
-              {password && (
-                <div className="mt-2">
-                  <div className="mb-1 flex items-center gap-2">
-                    <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-gray-200">
-                      <div
-                        className={`h-full ${passwordStrength.color} transition-all duration-300`}
-                        style={{
-                          width: `${(passwordStrength.strength / 5) * 100}%`,
-                        }}
-                      />
-                    </div>
-                    <span className="text-xs font-medium text-gray-600">
-                      {passwordStrength.label}
-                    </span>
-                  </div>
-                </div>
-              )}
-            </div>
-
-            {/* Confirm Password Field */}
-            <div>
-              <label
-                htmlFor="confirmPassword"
-                className="mb-1 block text-sm font-medium text-gray-700"
-              >
-                Confirm Password
-              </label>
-              <div className="relative">
-                <input
-                  id="confirmPassword"
-                  type={showConfirmPassword ? "text" : "password"}
-                  {...register("confirmPassword")}
-                  className="w-full rounded-lg border border-gray-300 px-4 py-2.5 pr-10 transition outline-none focus:border-transparent focus:ring-2 focus:ring-purple-500"
-                  placeholder="••••••••"
-                  disabled={isLoading || success}
-                />
-                <button
-                  type="button"
-                  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-                  className="absolute top-1/2 right-3 -translate-y-1/2 text-gray-500 hover:text-gray-700"
-                  disabled={isLoading || success}
-                >
-                  {showConfirmPassword ? (
-                    <EyeOff size={20} />
-                  ) : (
-                    <Eye size={20} />
-                  )}
-                </button>
-              </div>
-              {errors.confirmPassword && (
-                <p className="mt-1 text-sm text-red-600">
-                  {errors.confirmPassword.message}
-                </p>
-              )}
+                {showConfirmPassword ? (
+                  <EyeOff size={20} />
+                ) : (
+                  <Eye size={20} />
+                )}
+              </button>
             </div>
+          </div>
 
-            {/* Submit Button */}
-            <button
-              type="submit"
-              disabled={isLoading || success}
-              className="flex w-full items-center justify-center gap-2 rounded-lg bg-linear-to-r from-purple-600 to-blue-600 py-3 font-medium text-white transition-all hover:from-purple-700 hover:to-blue-700 focus:ring-4 focus:ring-purple-300 disabled:cursor-not-allowed disabled:opacity-50"
-            >
-              {isLoading && <Loader2 className="h-5 w-5 animate-spin" />}
-              {isLoading ? "Creating Account..." : "Create Account"}
-            </button>
-          </form>
+          {/* Submit */}
+          <button
+            type="submit"
+            disabled={isLoading || success}
+            className="
+              relative overflow-hidden
+              flex w-full items-center justify-center gap-2
+              rounded-lg py-3 font-semibold text-white
+              bg-gradient-to-r from-indigo-600 via-purple-600 to-blue-600
+              shadow-lg transition-all duration-300
+              hover:from-indigo-500 hover:via-purple-500 hover:to-blue-500
+              hover:shadow-xl hover:scale-[1.02]
+              disabled:opacity-50
+            "
+          >
+            {isLoading && <Loader2 className="h-5 w-5 animate-spin" />}
+            {isLoading ? "Creating Account..." : "Create Account"}
+          </button>
+        </form>
 
-          {/* Login Link */}
-          <div className="mt-6 text-center">
-            <p className="text-sm text-gray-600">
-              Already have an account?{" "}
-              <Link
-                href="/login"
-                className="font-medium text-purple-600 hover:text-purple-700"
-              >
-                Log in
-              </Link>
-            </p>
-          </div>
-        </div>
+        <p className="mt-6 text-center text-sm text-gray-600">
+          Already have an account?{" "}
+          <Link
+            href="/login"
+            className="font-medium text-indigo-600 hover:underline"
+          >
+            Log in
+          </Link>
+        </p>
       </div>
     </div>
-  );
+  </div>
+);
+
 }