diff --git a/next.config.mjs b/next.config.mjs
index 6922688..db847a3 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,15 +1,22 @@
-/** @type {import('next').NextConfig} */
+const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL_SOURCE;
+
 const nextConfig = {
-    images: {
-      remotePatterns: [
-        {
-          protocol: 'https',
-          hostname: 'upload.wikimedia.org',
-          pathname: '/wikipedia/**', 
-        },
-      ],
-    },
-  };
-  
-  export default nextConfig;
-  
\ No newline at end of file
+  reactStrictMode: true, // From the second config
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: SUPABASE_URL,
+        port: "",
+        pathname: "/storage/v1/object/sign/**", // From the second config
+      },
+      {
+        protocol: "https",
+        hostname: "upload.wikimedia.org",
+        pathname: "/wikipedia/**", // From the first config
+      },
+    ],
+  },
+};
+
+export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
index ac30d67..00c256c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,6 +29,7 @@
         "b2d-ventures": "file:",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
+        "date-fns": "^4.1.0",
         "dotenv": "^16.4.5",
         "embla-carousel-react": "^8.2.0",
         "lucide-react": "^0.428.0",
@@ -38,18 +39,21 @@
         "react-countup": "^6.5.3",
         "react-dom": "^18",
         "react-hot-toast": "^2.4.1",
+        "react-markdown": "^9.0.1",
         "recharts": "^2.12.7",
         "tailwind-merge": "^2.5.2",
         "tailwindcss-animate": "^1.0.7"
       },
       "devDependencies": {
         "@playwright/test": "^1.47.2",
+        "@tailwindcss/typography": "^0.5.15",
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
         "eslint": "^8",
         "eslint-config-next": "14.2.5",
         "postcss": "^8",
+        "supabase": "^1.200.3",
         "tailwindcss": "^3.4.1",
         "typescript": "^5"
       }
@@ -254,6 +258,18 @@
         "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
+    "node_modules/@isaacs/fs-minipass": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
+      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
+      "dev": true,
+      "dependencies": {
+        "minipass": "^7.0.4"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
@@ -1572,6 +1588,34 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.15.tgz",
+      "integrity": "sha512-AqhlCXl+8grUz8uqExv5OTtgpjuVIwFTSXTrh8y9/pw6q2ek7fJ+Y8ZEVw7EB2DCcuCOtEjf9w3+J3rzts01uA==",
+      "dev": true,
+      "dependencies": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2",
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20"
+      }
+    },
+    "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@tanstack/query-core": {
       "version": "5.59.0",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.59.0.tgz",
@@ -1675,12 +1719,54 @@
       "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
       "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="
     },
+    "node_modules/@types/debug": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
+      "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==",
+      "dependencies": {
+        "@types/ms": "*"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
+      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw=="
+    },
+    "node_modules/@types/estree-jsx": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz",
+      "integrity": "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==",
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "node_modules/@types/mdast": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+      "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@types/ms": {
+      "version": "0.7.34",
+      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.34.tgz",
+      "integrity": "sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g=="
+    },
     "node_modules/@types/node": {
       "version": "20.16.10",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.10.tgz",
@@ -1697,14 +1783,12 @@
     "node_modules/@types/prop-types": {
       "version": "15.7.13",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
-      "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==",
-      "devOptional": true
+      "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA=="
     },
     "node_modules/@types/react": {
       "version": "18.3.10",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.10.tgz",
       "integrity": "sha512-02sAAlBnP39JgXwkAq3PeU9DVaaGpZyF3MGcC0MKgQVkZor5IiiDAipVaxQHtDJAmO4GIy/rVBy/LzVj76Cyqg==",
-      "devOptional": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -1719,6 +1803,11 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="
+    },
     "node_modules/@types/ws": {
       "version": "8.5.12",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.12.tgz",
@@ -1857,8 +1946,7 @@
     "node_modules/@ungap/structured-clone": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
-      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
-      "dev": true
+      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ=="
     },
     "node_modules/acorn": {
       "version": "8.12.1",
@@ -1881,6 +1969,18 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/agent-base": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
+      "integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -2169,11 +2269,35 @@
       "resolved": "",
       "link": true
     },
+    "node_modules/bail": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
+      "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "node_modules/bin-links": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/bin-links/-/bin-links-4.0.4.tgz",
+      "integrity": "sha512-cMtq4W5ZsEwcutJrVId+a/tjt8GSbS+h0oNkdl6+6rBuEv8Ot33Bevj5KPm40t309zuhVic8NjpuL42QCiJWWA==",
+      "dev": true,
+      "dependencies": {
+        "cmd-shim": "^6.0.0",
+        "npm-normalize-package-bin": "^3.0.0",
+        "read-cmd-shim": "^4.0.0",
+        "write-file-atomic": "^5.0.0"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -2272,6 +2396,15 @@
         }
       ]
     },
+    "node_modules/ccount": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -2288,6 +2421,42 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/character-entities": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
+      "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-html4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+      "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-reference-invalid": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+      "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -2322,6 +2491,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/chownr": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
+      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/class-variance-authority": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz",
@@ -2354,6 +2532,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/cmd-shim": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/cmd-shim/-/cmd-shim-6.0.3.tgz",
+      "integrity": "sha512-FMabTRlc5t5zjdenF6mS0MBeFZm0XqHqeOkcskKFb/LYCcRQ5fVgLOHVc4Lq9CqABd9zhjwPjMBCJvMCziSVtA==",
+      "dev": true,
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2370,6 +2557,15 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
+    "node_modules/comma-separated-tokens": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -2552,6 +2748,15 @@
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
       "dev": true
     },
+    "node_modules/data-uri-to-buffer": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
+      "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/data-view-buffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz",
@@ -2603,11 +2808,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
       "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
-      "dev": true,
       "dependencies": {
         "ms": "^2.1.3"
       },
@@ -2625,6 +2838,18 @@
       "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
       "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="
     },
+    "node_modules/decode-named-character-reference": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz",
+      "integrity": "sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==",
+      "dependencies": {
+        "character-entities": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/deep-equal": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.3.tgz",
@@ -2697,11 +2922,31 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/detect-node-es": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
       "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
     },
+    "node_modules/devlop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+      "dependencies": {
+        "dequal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -3408,6 +3653,15 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-util-is-identifier-name": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
+      "integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -3422,6 +3676,11 @@
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
       "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
     },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -3482,6 +3741,29 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fetch-blob": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
+      "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/jimmywarting"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/jimmywarting"
+        }
+      ],
+      "dependencies": {
+        "node-domexception": "^1.0.0",
+        "web-streams-polyfill": "^3.0.3"
+      },
+      "engines": {
+        "node": "^12.20 || >= 14.13"
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -3576,6 +3858,18 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/formdata-polyfill": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
+      "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
+      "dev": true,
+      "dependencies": {
+        "fetch-blob": "^3.1.2"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3902,6 +4196,66 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hast-util-to-jsx-runtime": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.0.tgz",
+      "integrity": "sha512-H/y0+IWPdsLLS738P8tDnrQ8Z+dj12zQQ6WC11TIM21C8WFVoIxcqWXf2H3hiTVZjF1AWqoimGwrTWecWrnmRQ==",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "mdast-util-mdx-expression": "^2.0.0",
+        "mdast-util-mdx-jsx": "^3.0.0",
+        "mdast-util-mdxjs-esm": "^2.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "style-to-object": "^1.0.0",
+        "unist-util-position": "^5.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-whitespace": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+      "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/html-url-attributes": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
+      "integrity": "sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz",
+      "integrity": "sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==",
+      "dev": true,
+      "dependencies": {
+        "agent-base": "^7.0.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -3953,6 +4307,11 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
+    "node_modules/inline-style-parser": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.4.tgz",
+      "integrity": "sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q=="
+    },
     "node_modules/internal-slot": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz",
@@ -3983,6 +4342,28 @@
         "loose-envify": "^1.0.0"
       }
     },
+    "node_modules/is-alphabetical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-arguments": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
@@ -4134,6 +4515,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-decimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -4188,6 +4578,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-hexadecimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+      "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-map": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
@@ -4244,6 +4643,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-plain-obj": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-regex": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
@@ -4567,12 +4977,33 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "node_modules/lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+      "dev": true
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "dev": true
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "node_modules/longest-streak": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
+      "integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -4597,6 +5028,150 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
       }
     },
+    "node_modules/mdast-util-from-markdown": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.1.tgz",
+      "integrity": "sha512-aJEUyzZ6TzlsX2s5B4Of7lN7EQtAxvtradMMglCQDyaTFgse6CmtmdJ15ElnVRlCg1vpNyVtbem0PWzlNieZsA==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark": "^4.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-expression": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz",
+      "integrity": "sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-jsx": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.1.3.tgz",
+      "integrity": "sha512-bfOjvNt+1AcbPLTFMFWY149nJz0OjmewJs3LQQ5pIyVGxP4CdOqNVJL6kTaM5c68p8q82Xv3nCyFfUnuEcH3UQ==",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "parse-entities": "^4.0.0",
+        "stringify-entities": "^4.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdxjs-esm": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-2.0.1.tgz",
+      "integrity": "sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-phrasing": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz",
+      "integrity": "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-hast": {
+      "version": "13.2.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.0.tgz",
+      "integrity": "sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "trim-lines": "^3.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-markdown": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.0.tgz",
+      "integrity": "sha512-SR2VnIEdVNCJbP6y7kVTJgPLifdr8WEU440fQec7qHoHOUz/oJ2jmNRqdDQ3rbiStOXb2mCDGTuwsK5OPUgYlQ==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "longest-streak": "^3.0.0",
+        "mdast-util-phrasing": "^4.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "unist-util-visit": "^5.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
+      "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/merge-anything": {
       "version": "5.1.7",
       "resolved": "https://registry.npmjs.org/merge-anything/-/merge-anything-5.1.7.tgz",
@@ -4619,6 +5194,427 @@
         "node": ">= 8"
       }
     },
+    "node_modules/micromark": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.0.tgz",
+      "integrity": "sha512-o/sd0nMof8kYff+TqcDx3VSrgBTcZpSvYcAHIfHhv5VAuNmisCxjhx6YmxS8PFEpb9z5WKWKPdzf0jM23ro3RQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "@types/debug": "^4.0.0",
+        "debug": "^4.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-core-commonmark": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.1.tgz",
+      "integrity": "sha512-CUQyKr1e///ZODyD1U3xit6zXwy1a8q2a1S1HKtIlmgvurrEpaw/Y9y6KSIbF8P59cn/NjzHyO+Q2fAyYLQrAA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-factory-destination": "^2.0.0",
+        "micromark-factory-label": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-factory-title": "^2.0.0",
+        "micromark-factory-whitespace": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-html-tag-name": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-destination": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.0.tgz",
+      "integrity": "sha512-j9DGrQLm/Uhl2tCzcbLhy5kXsgkHUrjJHg4fFAeoMRwJmJerT9aw4FEhIbZStWN8A3qMwOp1uzHr4UL8AInxtA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-label": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-2.0.0.tgz",
+      "integrity": "sha512-RR3i96ohZGde//4WSe/dJsxOX6vxIg9TimLAS3i4EhBAFx8Sm5SmqVfR8E87DPSR31nEAjZfbt91OMZWcNgdZw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-space": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.0.tgz",
+      "integrity": "sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-title": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-2.0.0.tgz",
+      "integrity": "sha512-jY8CSxmpWLOxS+t8W+FG3Xigc0RDQA9bKMY/EwILvsesiRniiVMejYTE4wumNc2f4UbAa4WsHqe3J1QS1sli+A==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-whitespace": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.0.tgz",
+      "integrity": "sha512-28kbwaBjc5yAI1XadbdPYHX/eDnqaUFVikLwrO7FDnKG7lpgxnvk/XGRhX/PN0mOZ+dBSZ+LgunHS+6tYQAzhA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-character": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+      "integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-chunked": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-2.0.0.tgz",
+      "integrity": "sha512-anK8SWmNphkXdaKgz5hJvGa7l00qmcaUQoMYsBwDlSKFKjc6gjGXPDw3FNL3Nbwq5L8gE+RCbGqTw49FK5Qyvg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-classify-character": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-2.0.0.tgz",
+      "integrity": "sha512-S0ze2R9GH+fu41FA7pbSqNWObo/kzwf8rN/+IGlW/4tC6oACOs8B++bh+i9bVyNnwCcuksbFwsBme5OCKXCwIw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-combine-extensions": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.0.tgz",
+      "integrity": "sha512-vZZio48k7ON0fVS3CUgFatWHoKbbLTK/rT7pzpJ4Bjp5JjkZeasRfrS9wsBdDJK2cJLHMckXZdzPSSr1B8a4oQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-numeric-character-reference": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.1.tgz",
+      "integrity": "sha512-bmkNc7z8Wn6kgjZmVHOX3SowGmVdhYS7yBpMnuMnPzDq/6xwVA604DuOXMZTO1lvq01g+Adfa0pE2UKGlxL1XQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-2.0.0.tgz",
+      "integrity": "sha512-r4Sc6leeUTn3P6gk20aFMj2ntPwn6qpDZqWvYmAG6NgvFTIlj4WtrAudLi65qYoaGdXYViXYw2pkmn7QnIFasA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-encode": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.0.tgz",
+      "integrity": "sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-html-tag-name": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.0.tgz",
+      "integrity": "sha512-xNn4Pqkj2puRhKdKTm8t1YHC/BAjx6CEwRFXntTaRf/x16aqka6ouVoutm+QdkISTlT7e2zU7U4ZdlDLJd2Mcw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-normalize-identifier": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.0.tgz",
+      "integrity": "sha512-2xhYT0sfo85FMrUPtHcPo2rrp1lwbDEEzpx7jiH2xXJLqBuy4H0GgXk5ToU8IEwoROtXuL8ND0ttVa4rNqYK3w==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-resolve-all": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.0.tgz",
+      "integrity": "sha512-6KU6qO7DZ7GJkaCgwBNtplXCvGkJToU86ybBAUdavvgsCiG8lSSvYxr9MhwmQ+udpzywHsl4RpGJsYWG1pDOcA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-sanitize-uri": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.0.tgz",
+      "integrity": "sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-subtokenize": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.0.1.tgz",
+      "integrity": "sha512-jZNtiFl/1aY73yS3UGQkutD0UbhTt68qnRpw2Pifmz5wV9h8gOVsN70v+Lq/f1rKaU/W8pxRe8y8Q9FX1AOe1Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.0.tgz",
+      "integrity": "sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
     "node_modules/micromatch": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@@ -4660,11 +5656,53 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/minizlib": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.0.1.tgz",
+      "integrity": "sha512-umcy022ILvb5/3Djuu8LWeqUa8D68JaBzlttKeMWen48SjabqS3iY5w/vzeMzMUNhLDifyhbOwKDSznB1vvrwg==",
+      "dev": true,
+      "dependencies": {
+        "minipass": "^7.0.4",
+        "rimraf": "^5.0.5"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/minizlib/node_modules/rimraf": {
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.10.tgz",
+      "integrity": "sha512-l0OE8wL34P4nJH/H2ffoaniAokM2qSmrtXHmlpvYr5AVVX8msAyW0l8NVJFDxlSK4u3Uh/f41cQheDVdnYijwQ==",
+      "dev": true,
+      "dependencies": {
+        "glob": "^10.3.7"
+      },
+      "bin": {
+        "rimraf": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/mkdirp": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
+      "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
+      "dev": true,
+      "bin": {
+        "mkdirp": "dist/cjs/src/bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
     "node_modules/mz": {
       "version": "2.7.0",
@@ -4784,6 +5822,43 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/node-domexception": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
+      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/jimmywarting"
+        },
+        {
+          "type": "github",
+          "url": "https://paypal.me/jimmywarting"
+        }
+      ],
+      "engines": {
+        "node": ">=10.5.0"
+      }
+    },
+    "node_modules/node-fetch": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
+      "integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
+      "dev": true,
+      "dependencies": {
+        "data-uri-to-buffer": "^4.0.0",
+        "fetch-blob": "^3.1.4",
+        "formdata-polyfill": "^4.0.10"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/node-fetch"
+      }
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -4792,6 +5867,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/npm-normalize-package-bin": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-3.0.1.tgz",
+      "integrity": "sha512-dMxCf+zZ+3zeQZXKxmyuCKlIDPGuv8EF940xbkC4kQVDTtqoh6rJFO+JTKSA6/Rwi0getWmtuy4Itup0AMcaDQ==",
+      "dev": true,
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -4994,6 +6078,30 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-entities": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.1.tgz",
+      "integrity": "sha512-SWzvYcSJh4d/SGLIOQfZ/CoNv6BTlI6YEQ7Nj82oDVnRpwe/Z/F1EMx42x3JAOwGBlCjeCH0BRJQbQ/opHL17w==",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "character-entities": "^2.0.0",
+        "character-entities-legacy": "^3.0.0",
+        "character-reference-invalid": "^2.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "is-alphanumerical": "^2.0.0",
+        "is-decimal": "^2.0.0",
+        "is-hexadecimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/parse-entities/node_modules/@types/unist": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA=="
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -5286,6 +6394,15 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/property-information": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz",
+      "integrity": "sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -5368,6 +6485,31 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-markdown": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-9.0.1.tgz",
+      "integrity": "sha512-186Gw/vF1uRkydbsOIkcGXw7aHq0sZOCRFFjGrr7b9+nVZg4UfA4enXCaxm4fUzecU38sWfrNDitGhshuU7rdg==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "devlop": "^1.0.0",
+        "hast-util-to-jsx-runtime": "^2.0.0",
+        "html-url-attributes": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-rehype": "^11.0.0",
+        "unified": "^11.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18",
+        "react": ">=18"
+      }
+    },
     "node_modules/react-remove-scroll": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.0.tgz",
@@ -5472,6 +6614,15 @@
         "pify": "^2.3.0"
       }
     },
+    "node_modules/read-cmd-shim": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/read-cmd-shim/-/read-cmd-shim-4.0.0.tgz",
+      "integrity": "sha512-yILWifhaSEEytfXI76kB9xEEiG1AiozaCJZ83A87ytjRiN+jVibXjedjCRNjoZviinhG+4UkalO3mWTd8u5O0Q==",
+      "dev": true,
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -5557,6 +6708,37 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/remark-parse": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
+      "integrity": "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-rehype": {
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.1.tgz",
+      "integrity": "sha512-g/osARvjkBXb6Wo0XvAeXQohVta8i84ACbenPpoSsxTOQH/Ae0/RGP4WZgnMH5pMLpsj4FG7OHmcIcXxpza8eQ==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "unified": "^11.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -5811,6 +6993,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/space-separated-tokens": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/stop-iteration-iterator": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz",
@@ -5986,6 +7177,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/stringify-entities": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+      "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+      "dependencies": {
+        "character-entities-html4": "^2.0.0",
+        "character-entities-legacy": "^3.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -6030,6 +7234,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/style-to-object": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.8.tgz",
+      "integrity": "sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==",
+      "dependencies": {
+        "inline-style-parser": "0.2.4"
+      }
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
@@ -6073,6 +7285,25 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/supabase": {
+      "version": "1.200.3",
+      "resolved": "https://registry.npmjs.org/supabase/-/supabase-1.200.3.tgz",
+      "integrity": "sha512-3NdhqBkfPVlm+rAhWQoVcyr54kykuAlHav/GWaAoQEHBDbbYI1lhbDzugk8ryQg92vSLwr3pWz0s4Hjdte8WyQ==",
+      "dev": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "bin-links": "^4.0.3",
+        "https-proxy-agent": "^7.0.2",
+        "node-fetch": "^3.3.2",
+        "tar": "7.4.3"
+      },
+      "bin": {
+        "supabase": "bin/supabase"
+      },
+      "engines": {
+        "npm": ">=8"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -6158,6 +7389,23 @@
         "node": ">=6"
       }
     },
+    "node_modules/tar": {
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.4.3.tgz",
+      "integrity": "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==",
+      "dev": true,
+      "dependencies": {
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.2",
+        "minizlib": "^3.0.1",
+        "mkdirp": "^3.0.1",
+        "yallist": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -6204,6 +7452,24 @@
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
       "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
     },
+    "node_modules/trim-lines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+      "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/trough": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz",
+      "integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
@@ -6368,6 +7634,87 @@
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
       "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw=="
     },
+    "node_modules/unified": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
+      "integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "bail": "^2.0.0",
+        "devlop": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-plain-obj": "^4.0.0",
+        "trough": "^2.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-is": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
+      "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+      "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
+      "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit-parents": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz",
+      "integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -6423,6 +7770,32 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
+    "node_modules/vfile": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
+      "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-message": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz",
+      "integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/victory-vendor": {
       "version": "36.9.2",
       "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
@@ -6444,6 +7817,15 @@
         "d3-timer": "^3.0.1"
       }
     },
+    "node_modules/web-streams-polyfill": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
+      "integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
@@ -6653,6 +8035,19 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "dev": true
     },
+    "node_modules/write-file-atomic": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.1.tgz",
+      "integrity": "sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==",
+      "dev": true,
+      "dependencies": {
+        "imurmurhash": "^0.1.4",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
     "node_modules/ws": {
       "version": "8.18.0",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
@@ -6681,6 +8076,15 @@
         "@babel/runtime-corejs3": "^7.16.5"
       }
     },
+    "node_modules/yallist": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
+      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/yaml": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.1.tgz",
@@ -6703,6 +8107,15 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zwitch": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+      "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 1ea5e8a..b372e61 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "b2d-ventures": "file:",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
     "dotenv": "^16.4.5",
     "embla-carousel-react": "^8.2.0",
     "lucide-react": "^0.428.0",
@@ -39,18 +40,21 @@
     "react-countup": "^6.5.3",
     "react-dom": "^18",
     "react-hot-toast": "^2.4.1",
+    "react-markdown": "^9.0.1",
     "recharts": "^2.12.7",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@playwright/test": "^1.47.2",
+    "@tailwindcss/typography": "^0.5.15",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
     "eslint-config-next": "14.2.5",
     "postcss": "^8",
+    "supabase": "^1.200.3",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }
diff --git a/public/banner.jpg b/public/banner.jpg
new file mode 100644
index 0000000..6eeb714
Binary files /dev/null and b/public/banner.jpg differ
diff --git a/src/app/(investment)/deals/[id]/followShareButton.tsx b/src/app/(investment)/deals/[id]/followShareButton.tsx
new file mode 100644
index 0000000..d143860
--- /dev/null
+++ b/src/app/(investment)/deals/[id]/followShareButton.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { ShareIcon, StarIcon } from "lucide-react";
+import { redirect } from "next/navigation";
+import useSession from "@/lib/supabase/useSession";
+import toast from "react-hot-toast";
+
+const FollowShareButtons = () => {
+  const [progress, setProgress] = useState(0);
+  const [tab, setTab] = useState("Pitch");
+  const { session, loading } = useSession();
+  const user = session?.user;
+  const [sessionLoaded, setSessionLoaded] = useState(false);
+  const [isFollow, setIsFollow] = useState(false);
+
+  useEffect(() => {
+    if (!loading) {
+      setSessionLoaded(true);
+    }
+  }, [loading]);
+
+  const handleShare = () => {
+    const currentUrl = window.location.href;
+    if (document.hasFocus()) {
+      navigator.clipboard.writeText(currentUrl).then(() => {
+        toast.success("URL copied to clipboard!");
+      });
+    }
+  };
+  const handleFollow = () => {
+    if (user) {
+      setIsFollow((prevState) => !prevState);
+    } else {
+      redirect("/login");
+    }
+  };
+
+  return (
+    <div className="grid grid-cols-2 gap-5 justify-self-end ">
+      <div className="mt-2 cursor-pointer" onClick={handleFollow}>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <StarIcon id="follow" fill={isFollow ? "#FFFF00" : "#fff"} strokeWidth={2} />
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Follow NVIDIA</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+      <div onClick={handleShare} className="cursor-pointer mt-2">
+        <ShareIcon />
+      </div>
+    </div>
+  );
+};
+
+export default FollowShareButtons;
diff --git a/src/app/(investment)/deals/[id]/page.tsx b/src/app/(investment)/deals/[id]/page.tsx
new file mode 100644
index 0000000..37fd7f4
--- /dev/null
+++ b/src/app/(investment)/deals/[id]/page.tsx
@@ -0,0 +1,162 @@
+import Image from "next/image";
+import Link from "next/link";
+
+import ReactMarkdown from "react-markdown";
+
+import * as Tabs from "@radix-ui/react-tabs";
+import { Button } from "@/components/ui/button";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { Separator } from "@/components/ui/separator";
+import { createSupabaseClient } from "@/lib/supabase/serverComponentClient";
+import FollowShareButtons from "./followShareButton";
+
+import { getProjectData } from "@/lib/data/projectQuery";
+
+export default async function ProjectDealPage({ params }: { params: { id: number } }) {
+  const supabase = createSupabaseClient();
+
+  const { data: projectData, error: projectDataError } = await getProjectData(supabase, params.id);
+
+  const carouselData = [
+    { src: "/boiler1.jpg", alt: "Boiler 1" },
+    { src: "/boiler1.jpg", alt: "Boiler 1" },
+    { src: "/boiler1.jpg", alt: "Boiler 1" },
+    { src: "/boiler1.jpg", alt: "Boiler 1" },
+    { src: "/boiler1.jpg", alt: "Boiler 1" },
+  ];
+
+  if (projectDataError) {
+    return <div>Error</div>;
+  }
+
+  return (
+    <div className="container max-w-screen-xl my-5">
+      <div className="flex flex-col gap-y-10">
+        <div id="content">
+          {/* Name, star and share button packed */}
+          <div id="header" className="flex flex-col">
+            <div className="flex justify-between">
+              <span className="flex">
+                <Image src="/logo.svg" alt="logo" width={50} height={50} className="sm:scale-75" />
+                <h1 className="mt-3 font-bold  text-lg md:text-3xl">{projectData?.project_name}</h1>
+              </span>
+              <FollowShareButtons />
+            </div>
+            {/* end of pack */}
+            <p className="mt-2 sm:text-sm">{projectData?.project_short_description}</p>
+            <div className="flex flex-wrap mt-3">
+              {projectData?.tags.map((tag, index) => (
+                <span key={index} className="text-xs rounded-md bg-slate-200 dark:bg-slate-700 p-1 mx-1 mb-1">
+                  {tag.tag_name}
+                </span>
+              ))}
+            </div>
+          </div>
+          <div id="sub-content" className="flex flex-row mt-5">
+            {/* image carousel */}
+            <div id="image-corousel" className="shrink-0 w-[700px] flex flex-col">
+              <Carousel className="w-full h-full ml-1">
+                <CarouselContent className="flex h-full">
+                  {carouselData.map((item, index) => (
+                    <CarouselItem key={index}>
+                      <Image src={item.src} alt={item.alt} width={700} height={400} className="rounded-lg" />
+                    </CarouselItem>
+                  ))}
+                </CarouselContent>
+                <CarouselPrevious />
+                <CarouselNext />
+              </Carousel>
+
+              <Carousel className="w-full ml-1 h-[100px]">
+                <CarouselContent className="flex space-x-1">
+                  {carouselData.map((item, index) => (
+                    <CarouselItem key={index} className="flex">
+                      <Image src={item.src} alt={item.alt} width={200} height={100} className="rounded-lg basis-0" />
+                    </CarouselItem>
+                  ))}
+                </CarouselContent>
+              </Carousel>
+            </div>
+            <div id="stats" className="flex flex-col w-full mt-4 pl-12">
+              <div className="pl-5">
+                <span>
+                  <h1 className="font-semibold text-xl md:text-4xl mt-8">${projectData?.total_investment}</h1>
+                  <p className="text-sm md:text-lg"> 5% raised of \$5M max goal</p>
+                  <Progress
+                    value={projectData?.total_investment / projectData?.target_investment}
+                    className="w-[60%] h-3 mt-3"
+                  />
+                </span>
+                <span>
+                  <h1 className="font-semibold text-4xl md:mt-8">
+                    <p className="text-xl md:text-4xl">{projectData?.total_investment}</p>
+                  </h1>
+                  <p className="text-sm md:text-lg"> Investors</p>
+                </span>
+                <Separator decorative className="mt-3 w-3/4 ml-5" />
+                <span>
+                  <h1 className="font-semibold text-xl md:text-4xl mt-8 ml-5"></h1>
+                  <p className="text-xl md:text-4xl">1 hours</p>
+                  <p> Left to invest</p>
+                </span>
+                <Button className="mt-5 w-3/4 h-12">
+                  <Link href={`/invest/${params.id}`}>Invest in {projectData?.project_name}</Link>
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+        {/* menu */}
+        <div id="deck">
+          <div className="flex w-fit">
+            <Tabs.Root defaultValue="pitch">
+              <Tabs.List className="list-none flex gap-10 text-lg md:text-xl">
+                <Tabs.Trigger value="pitch">Pitch</Tabs.Trigger>
+                <Tabs.Trigger value="general">General Data</Tabs.Trigger>
+                <Tabs.Trigger value="update">Updates</Tabs.Trigger>
+              </Tabs.List>
+              <Separator className="mb-4 mt-2 w-full border-1" />
+              <Tabs.Content value="pitch">
+                <Card>
+                  <CardHeader>
+                    <CardTitle></CardTitle>
+                    <CardDescription></CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="prose prose-sm max-w-none">
+                      <ReactMarkdown>{projectData?.project_description || "No pitch available."}</ReactMarkdown>
+                    </div>
+                  </CardContent>
+                </Card>
+              </Tabs.Content>
+              <Tabs.Content value="general">
+                <Card>
+                  <CardHeader>
+                    <CardTitle>general</CardTitle>
+                    <CardDescription>general Description</CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <p>general Content</p>
+                  </CardContent>
+                </Card>
+              </Tabs.Content>
+              <Tabs.Content value="update">
+                <Card>
+                  <CardHeader>
+                    <CardTitle>update</CardTitle>
+                    <CardDescription>update Description</CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <p>update Content</p>
+                  </CardContent>
+                </Card>
+              </Tabs.Content>
+            </Tabs.Root>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(investment)/deals/page.tsx b/src/app/(investment)/deals/page.tsx
new file mode 100644
index 0000000..799cad4
--- /dev/null
+++ b/src/app/(investment)/deals/page.tsx
@@ -0,0 +1,273 @@
+"use client";
+
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { useState } from "react";
+import { Clock3Icon, UserIcon, UsersIcon } from "lucide-react";
+import { Separator } from "@/components/ui/separator";
+import { ProjectCard } from "@/components/projectCard";
+import { getAllTagsQuery, getALlFundedStatusQuery, getAllBusinessTypeQuery } from "@/lib/data/dropdownQuery";
+import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
+import { useQuery } from "@supabase-cache-helpers/postgrest-react-query";
+import { searchProjectsQuery, FilterParams, FilterProjectQueryParams } from "@/lib/data/projectQuery";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+
+const ProjectSection = ({ filteredProjects }) => {
+  interface Tags {
+    tag_name: string;
+  }
+
+  if (!filteredProjects) {
+    return <div>No projects found!</div>;
+  }
+
+  return (
+    <div>
+      <div className="mt-10">
+        <h2 className="text-2xl">Deals</h2>
+        <p className="mt-3">The deals attracting the most interest right now</p>
+      </div>
+
+      {/* Block for all the deals */}
+      <div className="mt-10 grid grid-cols-3 gap-4">
+        {filteredProjects.map((item, index) => (
+          <Link key={index} href={`/deals/${item.project_id}`}>
+            <ProjectCard
+              key={index}
+              name={item.project_name}
+              description={item.project_short_description}
+              joinDate={item.published_time}
+              imageUri={item.card_image_url}
+              location={item.business_location}
+              minInvestment={item.min_investment}
+              totalInvestor={item.total_investment}
+              totalRaised={item.target_investment}
+              tags={item.tags.map((tag: Tags) => tag.tag_name)}
+            />
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const ShowFilter = ({ filterParams, clearAll }: { filterParams: FilterParams; clearAll: () => void }) => {
+  const { searchTerm, tagsFilter, projectStatusFilter, businessTypeFilter, sortByTimeFilter } = filterParams;
+
+  if (!searchTerm && !tagsFilter && !projectStatusFilter && !businessTypeFilter && !sortByTimeFilter) {
+    return <div></div>;
+  }
+
+  if (
+    projectStatusFilter === "all" &&
+    businessTypeFilter === "all" &&
+    sortByTimeFilter === "all" &&
+    (!tagsFilter || tagsFilter.length === 0)
+  ) {
+    return <div></div>;
+  }
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      {searchTerm && (
+        <Button key={searchTerm} variant="secondary">
+          {searchTerm}
+        </Button>
+      )}
+
+      {tagsFilter &&
+        tagsFilter.map((tag: string) => (
+          <Button key={tag} variant="secondary">
+            {tag}
+          </Button>
+        ))}
+
+      {projectStatusFilter && projectStatusFilter !== "all" && (
+        <Button key={projectStatusFilter} variant="secondary">
+          {projectStatusFilter}
+        </Button>
+      )}
+
+      {businessTypeFilter && businessTypeFilter !== "all" && (
+        <Button key={businessTypeFilter} variant="secondary">
+          {businessTypeFilter}
+        </Button>
+      )}
+
+      {sortByTimeFilter && sortByTimeFilter !== "all" && (
+        <Button key={sortByTimeFilter} variant="secondary">
+          {sortByTimeFilter}
+        </Button>
+      )}
+
+      {/* Clear All button */}
+      <Button variant="destructive" onClick={clearAll}>
+        Clear All
+      </Button>
+    </div>
+  );
+};
+
+export default function Deals() {
+  const supabase = createSupabaseClient();
+
+  const [searchTerm, setSearchTerm] = useState("");
+  const [searchTermVisual, setSearchTermVisual] = useState("");
+  const [sortByTimeFilter, setSortByTimeFilter] = useState("all");
+  const [businessTypeFilter, setBusinessTypeFilter] = useState("all");
+  const [tagFilter, setTagFilter] = useState([]);
+  const [projectStatusFilter, setprojectStatusFilter] = useState("all");
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(4);
+
+  const filterParams: FilterParams = {
+    searchTerm,
+    tagsFilter: tagFilter,
+    projectStatusFilter,
+    businessTypeFilter,
+    sortByTimeFilter,
+  };
+
+  const filterProjectQueryParams: FilterProjectQueryParams = {
+    searchTerm,
+    tagsFilter: tagFilter,
+    projectStatusFilter,
+    businessTypeFilter,
+    sortByTimeFilter,
+    page,
+    pageSize,
+  };
+
+  const { data: tags, isLoading: isLoadingTags, error: tagsLoadingError } = useQuery(getAllTagsQuery(supabase));
+  const {
+    data: projectStatus,
+    isLoading: isLoadingFunded,
+    error: fundedLoadingError,
+  } = useQuery(getALlFundedStatusQuery(supabase));
+  const {
+    data: businessType,
+    isLoading: isLoadingBusinessType,
+    error: businessTypeLoadingError,
+  } = useQuery(getAllBusinessTypeQuery(supabase));
+
+  const {
+    data: projects,
+    isLoading: isLoadingProjects,
+    error: projectsLoadingError,
+  } = useQuery(searchProjectsQuery(supabase, filterProjectQueryParams));
+
+  const clearAll = () => {
+    setSearchTerm("");
+    setTagFilter([]);
+    setprojectStatusFilter("all");
+    setBusinessTypeFilter("all");
+    setSortByTimeFilter("all");
+  };
+
+  return (
+    <div className="container max-w-screen-xl mx-auto px-4">
+      <div className="h-auto mt-10">
+        <h1 className="text-4xl font-bold">Investment Opportunities</h1>
+        <br />
+        <p>Browse current investment opportunities on B2DVenture.</p>
+        <p>
+          All companies are <u>vetted & pass due diligence.</u>
+        </p>
+
+        {/* {JSON.stringify(projects, null, 4)} */}
+
+        <div className="flex mt-10 gap-3">
+          <Input
+            type="text"
+            placeholder="Search projects"
+            value={searchTermVisual}
+            onChange={(e) => setSearchTermVisual(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                setSearchTerm(e.currentTarget.value);
+              }
+            }}
+          />
+
+          {/* Posted At Filter */}
+          <Select onValueChange={(value) => setSortByTimeFilter(value)}>
+            <SelectTrigger className="w-full sm:w-[180px]">
+              <Clock3Icon className="ml-2" />
+              <SelectValue placeholder="Posted at" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Time</SelectItem>
+              <SelectItem value="Today">Today</SelectItem>
+              <SelectItem value="This Week">This Week</SelectItem>
+              <SelectItem value="This Month">This Month</SelectItem>
+            </SelectContent>
+          </Select>
+
+          {/* Business Type Filter */}
+          <Select onValueChange={(value) => setBusinessTypeFilter}>
+            <SelectTrigger className="w-full sm:w-[180px]">
+              <UsersIcon className="ml-2" />
+              <SelectValue placeholder="Business Type" />
+            </SelectTrigger>
+            <SelectContent>
+              {isLoadingBusinessType ? (
+                <SelectItem disabled value="_">
+                  Loading...
+                </SelectItem>
+              ) : businessTypeLoadingError ? (
+                <SelectItem disabled value="_">
+                  No data available
+                </SelectItem>
+              ) : (
+                <>
+                  <SelectItem value="all">All Types</SelectItem>
+                  {businessType &&
+                    businessType.map((type) => (
+                      <SelectItem key={type.id} value={type.value}>
+                        {type.value}
+                      </SelectItem>
+                    ))}
+                </>
+              )}
+            </SelectContent>
+          </Select>
+
+          {/* Project Status Filter */}
+          <Select onValueChange={(key) => setprojectStatusFilter(key)}>
+            <SelectTrigger className="w-full sm:w-[180px]">
+              <UserIcon className="ml-2" />
+              <SelectValue placeholder="Project Status" />
+            </SelectTrigger>
+            <SelectContent>
+              {isLoadingFunded ? (
+                <SelectItem disabled value="_">
+                  Loading...
+                </SelectItem>
+              ) : fundedLoadingError ? (
+                <SelectItem disabled value="_">
+                  No data available
+                </SelectItem>
+              ) : (
+                <>
+                  <SelectItem value="all">All Statuses</SelectItem>
+                  {projectStatus &&
+                    projectStatus.map((status) => (
+                      <SelectItem key={status.id} value={status.value}>
+                        {status.value}
+                      </SelectItem>
+                    ))}
+                </>
+              )}
+            </SelectContent>
+          </Select>
+        </div>
+        <ShowFilter filterParams={filterParams} clearAll={clearAll} />
+        <Separator className="mt-10" />
+
+        {/* Project Cards Section */}
+        <ProjectSection filteredProjects={projects} />
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/invest/page.tsx b/src/app/(investment)/invest/page.tsx
similarity index 100%
rename from src/app/invest/page.tsx
rename to src/app/(investment)/invest/page.tsx
diff --git a/src/app/notification/page.tsx b/src/app/(user)/notification/page.tsx
similarity index 100%
rename from src/app/notification/page.tsx
rename to src/app/(user)/notification/page.tsx
diff --git a/src/app/(user)/profile/page.tsx b/src/app/(user)/profile/page.tsx
new file mode 100644
index 0000000..ceecf73
--- /dev/null
+++ b/src/app/(user)/profile/page.tsx
@@ -0,0 +1,100 @@
+// components/ProfilePage.tsx
+
+import React from "react";
+import Image from "next/image";
+import { createSupabaseClient } from "@/lib/supabase/serverComponentClient";
+import { getUserProfile } from "@/lib/data/userQuery";
+import { Tables } from "@/types/database.types";
+import { format } from "date-fns";
+import ReactMarkdown from "react-markdown";
+
+interface Profile extends Tables<"Profiles"> {}
+
+export default async function ProfilePage() {
+  const supabase = createSupabaseClient();
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (!user) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <p className="text-red-500">No user found!</p>
+      </div>
+    );
+  }
+
+  const { data: profileData, error } = await getUserProfile(supabase, user.id);
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <p className="text-red-500">Error loading profile: {error}</p>
+      </div>
+    );
+  }
+
+  if (!profileData) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <p>Loading profile...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container max-w-screen-xl px-4 py-8">
+      <div className="bg-card border-2 border-border shadow-xl rounded-lg overflow-hidden">
+        <div className="bg-cover bg-center h-64 p-4" style={{ backgroundImage: "url(./banner.jpg)" }}>
+          <div className="flex justify-end">
+            <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+              Edit Profile
+            </button>
+          </div>
+        </div>
+        <div className="px-4 py-2">
+          {/* Upper */}
+          <div className="flex flex-row items-center gap-4">
+            {/* Profile Image */}
+            <div className="text-center">
+              <Image
+                src={profileData.avatar_url || "https://via.placeholder.com/150"}
+                alt={profileData.full_name || "Profile"}
+                width={150}
+                height={150}
+                className="rounded-full border-4 border-white -mt-16 mx-auto sm:mx-0"
+              />
+            </div>
+            {/* Name and Username */}
+            <div className="flex-grow text-center sm:text-left mt-4 sm:mt-0">
+              <h1 className="text-3xl font-bold">{profileData.full_name || "No Name"}</h1>
+              <p className="text-gray-600">@{profileData.username || "username"}</p>
+              {profileData.website && (
+                <p className="text-blue-500 hover:text-blue-700">
+                  <a href={profileData.website} target="_blank" rel="noopener noreferrer">
+                    {profileData.website}
+                  </a>
+                </p>
+              )}
+            </div>
+          </div>
+          {/* Lower */}
+          <div>
+            <div className="mt-6">
+              <h2 className="text-xl font-semibold mb-2">Bio</h2>
+              <div className="prose prose-sm max-w-none">
+                <ReactMarkdown>{profileData.bio || "No bio available."}</ReactMarkdown>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="px-4 py-4 border-t">
+          <p className="text-sm text-gray-600">
+            Last updated: {profileData.updated_at ? format(new Date(profileData.updated_at), "PPpp") : "N/A"}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/auth/signup/page.tsx b/src/app/auth/signup/page.tsx
new file mode 100644
index 0000000..b280f2b
--- /dev/null
+++ b/src/app/auth/signup/page.tsx
@@ -0,0 +1,32 @@
+import Image from "next/image";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardFooter, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+
+import { SignupButton } from "@/components/auth/signupButton";
+import { SignupForm } from "@/components/auth/signupForm";
+
+export default function Signup() {
+  return (
+    <div
+      className="bg-cover bg-center min-h-screen flex items-center justify-center"
+      style={{ backgroundImage: "url(/signup.png)" }}>
+      <Card>
+        <CardHeader className="items-center">
+          <CardTitle className="text-2xl font-bold">Join Our Community</CardTitle>
+          <CardDescription>
+            Create an account and be a part of a thriving community of investors and innovators.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-y-2 mx-28">
+          <p className="self-center font-semibold text-slate-800 dark:text-slate-200">Sign Up With</p>
+          <SignupForm />
+          <hr></hr>
+          <SignupButton />
+        </CardContent>
+        <CardFooter className="text-xs justify-center">
+          By signing up, you agree to the Terms of Service and acknowledge you’ve read our Privacy Policy.
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/app/deals/page.tsx b/src/app/deals/page.tsx
deleted file mode 100644
index 6aff49f..0000000
--- a/src/app/deals/page.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-"use client";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { useState } from "react";
-import { Clock3Icon, MessageSquareIcon, UserIcon, UsersIcon } from "lucide-react";
-import { Separator } from "@/components/ui/separator";
-import { ExtendableCard } from "@/components/extendableCard";
-
-export default function Deals() {
-  const [postAtFilter, setPostAtFilter] = useState("");
-  const [contentTypeFilter, setContentTypeFilter] = useState("");
-  const [authorFilter, setAuthorFilter] = useState("");
-  const [groupsFilter, setGroupFilter] = useState("");
-  const [selectedTag, setSelectedTag] = useState("");
-  const data = [
-    {
-      name: "NVDA",
-      description: "Founded in 1993, NVIDIA is a key innovator of computer graphics and AI technology",
-      joinDate: "December 2021",
-      location: "Bangkok, Thailand",
-      tags: ["AI", "Technology"],
-      imageUri: "/login.png",
-      minInvestment: 10000,
-      totalInvestor: 58400,
-      totalRaised: 9000000,
-    },
-    {
-      name: "Apple Inc.",
-      description:
-        "Founded in 1976, Apple Inc. is a leading innovator in consumer electronics, software, and online services, known for products like the iPhone, MacBook, and the App Store.",
-      joinDate: "February 2020",
-      location: "Cupertino, California, USA",
-      tags: ["Consumer Electronics", "Software"],
-      imageUri: "/money.png",
-      minInvestment: 10000,
-      totalInvestor: 58400,
-      totalRaised: 9000000,
-    },
-    {
-      name: "Google LLC",
-      description:
-        "Founded in 1998, Google LLC specializes in internet-related services and products, including search engines, online advertising, cloud computing, and the Android operating system.",
-      joinDate: "April 2019",
-      location: "Mountain View, California, USA",
-      tags: ["Internet", "Search Engine"],
-      imageUri: "/money.png",
-      minInvestment: 10000,
-      totalInvestor: 5000,
-      totalRaised: 1500000000,
-    },
-    {
-      name: "Microsoft Corporation",
-      description: "Microsoft Corporation is a multinational technology company.",
-      joinDate: "January 2018",
-      location: "California, USA",
-      tags: ["Technology", "Software"],
-      imageUri: null,
-      minInvestment: 250,
-      totalInvestor: 5000,
-      totalRaised: 1500000,
-    },
-  ];
-
-  const filteredData = selectedTag ? data.filter((item) => item.tags.includes(selectedTag)) : data;
-
-  return (
-    <div className="container max-w-screen-xl mx-auto px-4">
-      <div className="h-auto mt-10">
-        <h1 className="text-4xl font-bold">Investment Opportunities</h1>
-        <br />
-        <p>Browse current investment opportunities on B2DVenture.</p>
-        <p>
-          All companies are <u>vetted & pass due diligence.</u>
-        </p>
-
-        {/* Filters */}
-        <div className="flex flex-wrap mt-10 gap-3">
-          <Select onValueChange={(value) => setPostAtFilter(value)}>
-            <SelectTrigger className="w-full sm:w-[180px]">
-              <Clock3Icon className="ml-2" />
-              <SelectValue placeholder="Posted at" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="Today">Today</SelectItem>
-              <SelectItem value="Yesterday">Yesterday</SelectItem>
-            </SelectContent>
-          </Select>
-
-          <Select onValueChange={(value) => setSelectedTag(value)}>
-            <SelectTrigger className="w-full sm:w-[180px]">
-              <MessageSquareIcon className="ml-2" />
-              <SelectValue placeholder="Tags" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="_">All Tags</SelectItem>
-              <SelectItem value="AI">AI</SelectItem>
-              <SelectItem value="Technology">Technology</SelectItem>
-              <SelectItem value="Consumer Electronics">Consumer Electronics</SelectItem>
-              <SelectItem value="Software">Software</SelectItem>
-              <SelectItem value="Internet">Internet</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-        <Separator className="mt-10" />
-      </div>
-
-      <div className="mt-10">
-        <h2 className="text-2xl">Deals</h2>
-        <p className="mt-3">The deals attracting the most interest right now</p>
-      </div>
-
-      {/* Block for all the deals */}
-      <div className="mt-10 grid grid-cols-3 gap-4">
-        {filteredData.map((item, index) => (
-          <ExtendableCard
-            key={index}
-            name={item.name}
-            description={item.description}
-            joinDate={item.joinDate}
-            imageUri={item.imageUri}
-            location={item.location}
-            minInvestment={item.minInvestment}
-            totalInvestor={item.totalInvestor}
-            totalRaised={item.totalRaised}
-            tags={item.tags}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/find/page.tsx b/src/app/find/page.tsx
index 514e016..c3e3672 100644
--- a/src/app/find/page.tsx
+++ b/src/app/find/page.tsx
@@ -1,85 +1,25 @@
 "use client";
 
 import { useSearchParams } from "next/navigation";
-import { SupabaseClient } from "@supabase/supabase-js";
 import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
 import { useQuery } from "@supabase-cache-helpers/postgrest-react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { ExtendableCard } from "@/components/extendableCard";
+import { ProjectCard } from "@/components/projectCard";
 import { Separator } from "@/components/ui/separator";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { getBusinesses, getInvestmentCounts, getProjects, getTags } from "@/lib/data/query";
+import { Tables } from "@/types/database.types";
 
-interface ProjectInvestmentDetail {
-  minInvestment: number;
-  totalInvestment: number;
-  targetInvestment: number;
-}
+interface ProjectInvestmentDetail extends Tables<"ProjectInvestmentDetail"> {}
 
-interface Project {
-  id: string;
-  projectName: string;
-  businessId: string;
-  investmentCount: number;
-  projectShortDescription: string;
-  publishedTime: string;
+interface Project extends Tables<"Project"> {
   ProjectInvestmentDetail: ProjectInvestmentDetail[];
-  tags: string[];
 }
 
-interface Business {
-  id: string;
-  businessName: string;
-  joinedDate: string;
+interface Business extends Tables<"Business"> {
   Projects: Project[];
 }
 
-function getBusinesses(client: SupabaseClient, query: string | null) {
-  return client
-    .from("Business")
-    .select("id, businessName, joinedDate")
-    .ilike("businessName", `%${query}%`);
-}
-
-function getProjects(client: SupabaseClient, businessIds: string[]) {
-  return client
-    .from("Project")
-    .select(
-      `
-            id,
-            projectName,
-            businessId,
-            publishedTime,
-            projectShortDescription,
-            ProjectInvestmentDetail (
-                minInvestment,
-                totalInvestment,
-                targetInvestment
-            )
-        `
-    )
-    .in("businessId", businessIds);
-}
-
-function getTags(client: SupabaseClient, projectIds: string[]) {
-  return client
-    .from("ItemTag")
-    .select("itemId, Tag (value)")
-    .in("itemId", projectIds);
-}
-
-function getInvestmentCounts(client: SupabaseClient, projectIds: string[]) {
-  return client
-    .from("InvestmentDeal")
-    .select("*", { count: "exact", head: true })
-    .in("projectId", projectIds);
-}
-
 export default function Find() {
   const searchParams = useSearchParams();
   const query = searchParams.get("query");
@@ -121,11 +61,7 @@ export default function Find() {
 
   // -----
 
-  const isLoading =
-    isLoadingBusinesses ||
-    isLoadingProjects ||
-    isLoadingTags ||
-    isLoadingInvestments;
+  const isLoading = isLoadingBusinesses || isLoadingProjects || isLoadingTags || isLoadingInvestments;
   const error = businessError || projectError || tagError || investmentError;
 
   const results: Business[] =
@@ -136,13 +72,8 @@ export default function Find() {
           ?.filter((project) => project.businessId === business.id)
           .map((project) => ({
             ...project,
-            tags:
-              tags
-                ?.filter((tag) => tag.itemId === project.id)
-                .map((tag) => tag.Tag.value) || [],
-            investmentCount:
-              investmentCounts?.find((ic) => ic.projectId === project.id)
-                ?.count || 0,
+            tags: tags?.filter((tag) => tag.itemId === project.id).map((tag) => tag.Tag.value) || [],
+            investmentCount: investmentCounts?.find((ic) => ic.projectId === project.id)?.count || 0,
           })) || [],
     })) || [];
 
@@ -161,47 +92,22 @@ export default function Find() {
           <ul>
             {results.map((business) => (
               <li key={business.id}>
-                {/* <h2>{business.businessName}</h2>
-                <p>Joined Date: {new Date(business.joinedDate).toLocaleDateString()}</p>
-                {business.Projects.map((project) => (
-                  <ExtendableCard
-                    key={project.id}
-                    name={project.projectName}
-                    description={project.projectName}
-                    joinDate={project.projectName}
-                    location={"Bangkok"}
-                    minInvestment={project.ProjectInvestmentDetail[0]?.minInvestment}
-                    totalInvestor={project.ProjectInvestmentDetail[0]?.totalInvestment}
-                    totalRaised={project.ProjectInvestmentDetail[0]?.targetInvestment}
-                    tags={null}
-                  />
-                ))} */}
-
                 <Card className="w-full">
                   <CardHeader>
                     <CardTitle>{business.businessName}</CardTitle>
-                    <CardDescription>
-                      Joined Date:{" "}
-                      {new Date(business.joinedDate).toLocaleDateString()}
-                    </CardDescription>
+                    <CardDescription>Joined Date: {new Date(business.joinedDate).toLocaleDateString()}</CardDescription>
                   </CardHeader>
                   <CardContent>
                     {business.Projects.map((project) => (
-                      <ExtendableCard
+                      <ProjectCard
                         key={project.id}
                         name={project.projectName}
                         description={project.projectName}
                         joinDate={project.projectName}
                         location={"Bangkok"}
-                        minInvestment={
-                          project.ProjectInvestmentDetail[0]?.minInvestment
-                        }
-                        totalInvestor={
-                          project.ProjectInvestmentDetail[0]?.totalInvestment
-                        }
-                        totalRaised={
-                          project.ProjectInvestmentDetail[0]?.targetInvestment
-                        }
+                        minInvestment={project.ProjectInvestmentDetail[0]?.minInvestment}
+                        totalInvestor={project.ProjectInvestmentDetail[0]?.totalInvestment}
+                        totalRaised={project.ProjectInvestmentDetail[0]?.targetInvestment}
                         tags={[]}
                         imageUri={null}
                       />
diff --git a/src/app/landing/page.tsx b/src/app/landing/page.tsx
deleted file mode 100644
index 604a8de..0000000
--- a/src/app/landing/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-"use client";
-
-import React from "react";
-
-export default function Page() {
-  return <div>hello</div>;
-}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index d095188..eebac2c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,9 +3,53 @@ import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
-import { ExtendableCard } from "@/components/extendableCard";
+import { ProjectCard } from "@/components/projectCard";
+import { getTopProjects } from "@/lib/data/projectQuery";
+import { createSupabaseClient } from "@/lib/supabase/serverComponentClient";
+import { Suspense } from "react";
 
-export default function Home() {
+const TopProjects = async () => {
+  const supabase = createSupabaseClient();
+  const { data: topProjectsData, error: topProjectsError } = await getTopProjects(supabase);
+
+  if (topProjectsError) {
+    return <div>Error loading top projects: {topProjectsError}</div>;
+  }
+
+  if (!topProjectsData || topProjectsData.length === 0) {
+    return <div>No top projects available.</div>;
+  }
+
+  return (
+    <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+      {topProjectsData.map((project) => (
+        <Link href={`/deals/${project.id}`} key={project.id}>
+          <ProjectCard
+            name={project.projectName}
+            description={project.projectShortDescription}
+            imageUri={project.cardImage}
+            joinDate={new Date(project.publishedTime).toLocaleDateString()}
+            location={project.Business.location}
+            tags={project.ItemTag.map((item) => item.Tag.value)}
+            minInvestment={project.ProjectInvestmentDetail[0]?.minInvestment || 0}
+            totalInvestor={0}
+            totalRaised={project.ProjectInvestmentDetail[0]?.totalInvestment || 0}
+          />
+        </Link>
+      ))}
+    </div>
+  );
+};
+
+const ProjectsLoader = () => (
+  <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+    {[...Array(4)].map((_, index) => (
+      <div key={index} className="h-64 bg-gray-200 animate-pulse rounded-lg"></div>
+    ))}
+  </div>
+);
+
+export default async function Home() {
   return (
     <main>
       <div className="relative mx-auto">
@@ -81,58 +125,9 @@ export default function Home() {
             <p className="text-xl md:text-2xl font-bold">Hottest Deals</p>
             <p className="text-md md:text-lg">The deals attracting the most interest right now</p>
           </span>
-          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-            <Link href={"/overview"}>
-              <ExtendableCard
-                name={"NVDA"}
-                description={"Founded in 1993, NVIDIA is a key innovator of computer graphics and AI technology"}
-                joinDate={"December 2021"}
-                location={"Bangkok, Thailand"}
-                tags={[]}
-                minInvestment={10000}
-                totalInvestor={58400}
-                totalRaised={9000000}
-                imageUri={"https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Google_%22G%22_logo.svg/768px-Google_%22G%22_logo.svg.png"}
-              />
-            </Link>
-            <ExtendableCard
-              name={"Apple Inc."}
-              description={
-                "Founded in 1976, Apple Inc. is a leading innovator in consumer electronics, software, and online services, known for products like the iPhone, MacBook, and the App Store."
-              }
-              joinDate={"February 2020"}
-              location={"Cupertino, California, USA"}
-              tags={[]}
-              minInvestment={10000}
-              totalInvestor={58400}
-              totalRaised={9000000}
-              imageUri={"https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Google_%22G%22_logo.svg/768px-Google_%22G%22_logo.svg.png"}
-            />
-            <ExtendableCard
-              name={"Google LLC"}
-              description={
-                "Founded in 1998, Google LLC specializes in internet-related services and products, including search engines, online advertising, cloud computing, and the Android operating system."
-              }
-              joinDate={"April 2019"}
-              location={"Mountain View, California, USA"}
-              tags={[]}
-              minInvestment={10000}
-              totalInvestor={5000}
-              totalRaised={1500000000}
-              imageUri={"https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Google_%22G%22_logo.svg/768px-Google_%22G%22_logo.svg.png"}
-            />
-            <ExtendableCard
-              name={"Microsoft Corporation"}
-              description={"Microsoft Corporation is a multinational technology company."}
-              joinDate={"January 2018"}
-              location={"California, USA"}
-              tags={[]}
-              minInvestment={250}
-              totalInvestor={5000}
-              totalRaised={1500000}
-              imageUri={"https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Google_%22G%22_logo.svg/768px-Google_%22G%22_logo.svg.png"}
-            />
-          </div>
+          <Suspense fallback={<ProjectsLoader />}>
+            <TopProjects />
+          </Suspense>
           <div className="self-center py-5 scale-75 md:scale-100">
             <Button>
               <Link href={"/deals"}>View all</Link>
diff --git a/src/components/auth/logoutButton.tsx b/src/components/auth/logoutButton.tsx
index d4cd348..d84b562 100644
--- a/src/components/auth/logoutButton.tsx
+++ b/src/components/auth/logoutButton.tsx
@@ -1,15 +1,23 @@
 "use client";
 
 import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
+import { usePathname } from "next/navigation";
 import { useRouter } from "next/navigation";
 
 export function LogoutButton() {
   const supabase = createSupabaseClient();
+  const pathname = usePathname();
   const router = useRouter();
 
   const handleLogout = async () => {
     await supabase.auth.signOut();
-    router.push("/");
+
+    if (pathname === "/") {
+      window.location.reload();
+    } else {
+      await router.push("/");
+      window.location.reload();
+    }
   };
 
   return <button onClick={handleLogout}>Logout</button>;
diff --git a/src/components/auth/signupButton.tsx b/src/components/auth/signupButton.tsx
new file mode 100644
index 0000000..4e7e339
--- /dev/null
+++ b/src/components/auth/signupButton.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import Image from "next/image";
+import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
+import { Button } from "@/components/ui/button";
+
+export function SignupButton(props: { nextUrl?: string }) {
+  const supabase = createSupabaseClient();
+
+  const handleSignup = async () => {
+    await supabase.auth.signInWithOAuth({
+      provider: "google",
+      options: {
+        redirectTo: `${location.origin}/auth/callback?next=${props.nextUrl || ""}`,
+      },
+    });
+  };
+
+  return (
+    <Button className="bg-foreground gap-2 rounded-xl" onClick={handleSignup}>
+      <Image src={"/logo/google.svg"} width={30} height={30} alt={"Google"} />
+      Sign Up with Google
+    </Button>
+  );
+}
diff --git a/src/components/auth/signupForm.tsx b/src/components/auth/signupForm.tsx
new file mode 100644
index 0000000..aaca740
--- /dev/null
+++ b/src/components/auth/signupForm.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
+import { useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { useRouter } from "next/navigation";
+import toast from "react-hot-toast";
+
+export function SignupForm() {
+  const router = useRouter();
+  const supabase = createSupabaseClient();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+
+  const handleSignup = async (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+
+    if (password !== confirmPassword) {
+      alert("Passwords do not match!");
+      return;
+    }
+
+    const { error } = await supabase.auth.signUp({
+      email,
+      password,
+    });
+
+    if (error) {
+      toast.error(error.message);
+    } else {
+      toast.success("Account created successfully!");
+      router.push("/");
+    }
+  };
+
+  return (
+    <div className="flex flex-col space-y-2">
+      <Input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
+      <Input
+        id="password"
+        type="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        placeholder="Password"
+      />
+      <Input
+        id="confirmPassword"
+        type="password"
+        value={confirmPassword}
+        onChange={(e) => setConfirmPassword(e.target.value)}
+        placeholder="Confirm Password"
+      />
+      <Button id="signup" onClick={handleSignup}>
+        Sign Up
+      </Button>
+    </div>
+  );
+}
diff --git a/src/components/navigationBar/nav.tsx b/src/components/navigationBar/nav.tsx
index 229532b..f7679a4 100644
--- a/src/components/navigationBar/nav.tsx
+++ b/src/components/navigationBar/nav.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import Link from "next/link";
 import Image from "next/image";
@@ -7,8 +5,6 @@ import Image from "next/image";
 import { cn } from "@/lib/utils";
 import { Separator } from "@/components/ui/separator";
 import { ThemeToggle } from "@/components/theme-toggle";
-import { Button } from "@/components/ui/button";
-import { useRouter } from "next/navigation";
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -16,36 +12,10 @@ import {
   NavigationMenuLink,
   NavigationMenuList,
   NavigationMenuTrigger,
-  navigationMenuTriggerStyle,
 } from "@/components/ui/navigation-menu";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Search, Bell, Heart, Wallet } from "lucide-react";
+import { SearchBar } from "./serchBar";
+import { ProfileBar } from "./profileBar";
 
-import { LogoutButton } from "@/components/auth/logoutButton";
-
-import useSession from "@/lib/supabase/useSession";
-
-const landings = [
-  {
-    id: 1,
-    title: "Landing 01",
-    route: "/project-management",
-  },
-  {
-    id: 2,
-    title: "Landing 02",
-    route: "/crm-landing",
-  },
-];
 const ListItem = React.forwardRef<React.ElementRef<"a">, React.ComponentPropsWithoutRef<"a">>(
   ({ className, title, children, ...props }, ref) => {
     return (
@@ -69,81 +39,7 @@ const ListItem = React.forwardRef<React.ElementRef<"a">, React.ComponentPropsWit
 );
 ListItem.displayName = "ListItem";
 
-const unAuthenticatedComponents = () => {
-  return (
-    <div className="flex gap-2 pl-2">
-      <Link href="/auth">
-        <Button variant="secondary" className="border-2 border-border">
-          Login
-        </Button>
-      </Link>
-      <Button>Sign up</Button>
-    </div>
-  );
-};
-
-const authenticatedComponents = () => {
-  let notifications = 100;
-  const displayValue = notifications >= 100 ? "..." : notifications;
-  return (
-    <div className="flex gap-3 pl-2 items-center">
-      <Link href={"/notification"}>
-        {" "}
-        <div className="relative inline-block">
-          <Bell className="h-6 w-6" />
-          <span className="absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-red-600 rounded-full">
-            {displayValue}
-          </span>
-        </div>
-      </Link>
-      <Heart />
-      <Wallet />
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="outline" size="icon" className="overflow-hidden rounded-full">
-            <Avatar>
-              <AvatarImage src="https://api.dicebear.com/9.x/pixel-art/svg" />
-              <AvatarFallback>1</AvatarFallback>
-            </Avatar>
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          <DropdownMenuLabel>My Account</DropdownMenuLabel>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem>Settings</DropdownMenuItem>
-          <DropdownMenuItem>Support</DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem>
-            <LogoutButton />
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  );
-};
-
 export function NavigationBar() {
-  const { session, loading } = useSession();
-  const user = session?.user;
-  const [sessionLoaded, setSessionLoaded] = React.useState(false);
-  const [searchActive, setSearchActive] = React.useState(false);
-  const router = useRouter();
-
-  React.useEffect(() => {
-    if (!loading) {
-      setSessionLoaded(true);
-    }
-  }, [loading]);
-
-  const handleKeyDown = async (k: React.KeyboardEvent<HTMLInputElement>) => {
-    if (k.key === "Enter") {
-      const query = (k.target as HTMLInputElement).value.trim();
-      if (query) {
-        router.push(`/find?query=${encodeURIComponent(query)}`);
-      }
-    }
-  };
-
   const businessComponents = [
     {
       title: "Business",
@@ -232,17 +128,7 @@ export function NavigationBar() {
                 </NavigationMenuItem>
 
                 <NavigationMenuItem className="pl-5 flex">
-                  <Search onClick={() => setSearchActive(!searchActive)} className="cursor-pointer" />
-                  {/* search bar's input */}
-                  <input
-                    type="text"
-                    placeholder="Enter business name..."
-                    className={cn(
-                      "ml-2 border rounded-md px-2 py-1 transition-all duration-300 ease-in-out ",
-                      searchActive ? "w-48 opacity-100" : "w-0 opacity-0"
-                    )}
-                    onKeyDown={handleKeyDown}
-                  />
+                  <SearchBar />
                 </NavigationMenuItem>
               </NavigationMenuList>
             </NavigationMenu>
@@ -250,17 +136,7 @@ export function NavigationBar() {
             <div className="flex gap-2 pl-2">
               <ThemeToggle />
               <Separator orientation="vertical" className="mx-3" />
-              {sessionLoaded ? (
-                user ? (
-                  authenticatedComponents()
-                ) : (
-                  unAuthenticatedComponents()
-                )
-              ) : (
-                <div>
-                  <Skeleton className="rounded-lg h-full w-[160px]" />
-                </div>
-              )}
+              <ProfileBar />
             </div>
           </div>
         </div>
diff --git a/src/components/navigationBar/profileBar.tsx b/src/components/navigationBar/profileBar.tsx
new file mode 100644
index 0000000..41b31b9
--- /dev/null
+++ b/src/components/navigationBar/profileBar.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Bell, Heart, Wallet } from "lucide-react";
+import { LogoutButton } from "@/components/auth/logoutButton";
+import useSession from "@/lib/supabase/useSession";
+
+const UnAuthenticatedComponents = () => {
+  return (
+    <div className="flex gap-2 pl-2">
+      <Link href="/auth">
+        <Button variant="secondary" className="border-2 border-border">
+          Login
+        </Button>
+      </Link>
+      <Link href="/auth/signup">
+        <Button>Sign up</Button>
+      </Link>
+    </div>
+  );
+};
+
+const AuthenticatedComponents = () => {
+  let notifications = 100;
+  const displayValue = notifications >= 100 ? "..." : notifications;
+  return (
+    <div className="flex gap-3 pl-2 items-center">
+      <Link href={"/notification"}>
+        <div className="relative inline-block">
+          <Bell className="h-6 w-6" />
+          <span className="absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-red-600 rounded-full">
+            {displayValue}
+          </span>
+        </div>
+      </Link>
+      <Heart />
+      <Wallet />
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" size="icon" className="overflow-hidden rounded-full">
+            <Avatar>
+              <AvatarImage src="https://api.dicebear.com/9.x/pixel-art/svg" />
+              <AvatarFallback>1</AvatarFallback>
+            </Avatar>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem>
+            <Link href="/profile">Profile</Link>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>Settings</DropdownMenuItem>
+          <DropdownMenuItem>Support</DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            <LogoutButton />
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+};
+
+export function ProfileBar() {
+  const { session } = useSession();
+  const user = session?.user;
+  const [sessionLoaded, setSessionLoaded] = useState(false);
+
+  useEffect(() => {
+    if (!session) {
+      setSessionLoaded(true);
+    }
+  }, [session]);
+
+  return (
+    <>
+      {sessionLoaded ? (
+        user ? (
+          <AuthenticatedComponents />
+        ) : (
+          <UnAuthenticatedComponents />
+        )
+      ) : (
+        <div>
+          <Skeleton className="rounded-lg h-full w-[160px]" />
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/components/navigationBar/serchBar.tsx b/src/components/navigationBar/serchBar.tsx
new file mode 100644
index 0000000..026e52b
--- /dev/null
+++ b/src/components/navigationBar/serchBar.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import * as React from "react";
+import { useRouter } from "next/navigation";
+import { Search } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export function SearchBar() {
+  const [searchActive, setSearchActive] = React.useState(false);
+  const router = useRouter();
+
+  const handleKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      const query = (e.target as HTMLInputElement).value.trim();
+      if (query) {
+        router.push(`/find?query=${encodeURIComponent(query)}`);
+      }
+    }
+  };
+
+  return (
+    <div className="flex items-center">
+      <Search onClick={() => setSearchActive(!searchActive)} className="cursor-pointer" />
+      <input
+        type="text"
+        placeholder="Enter business name..."
+        className={cn(
+          "ml-2 border rounded-md px-2 py-1 transition-all duration-300 ease-in-out",
+          searchActive ? "w-48 opacity-100" : "w-0 opacity-0"
+        )}
+        onKeyDown={handleKeyDown}
+      />
+    </div>
+  );
+}
diff --git a/src/components/extendableCard.tsx b/src/components/projectCard.tsx
similarity index 96%
rename from src/components/extendableCard.tsx
rename to src/components/projectCard.tsx
index 7af4377..5734f04 100644
--- a/src/components/extendableCard.tsx
+++ b/src/components/projectCard.tsx
@@ -8,7 +8,7 @@ interface XMap {
   [tag: string]: string;
 }
 
-interface ExtendableCardProps {
+interface ProjectCardProps {
   name: string;
   description: string;
   joinDate: string;
@@ -21,7 +21,7 @@ interface ExtendableCardProps {
   className?: string;
 }
 
-export function ExtendableCard(props: ExtendableCardProps) {
+export function ProjectCard(props: ProjectCardProps) {
   return (
     <div
       className={cn(
@@ -35,14 +35,14 @@ export function ExtendableCard(props: ExtendableCardProps) {
             <Image
               src={props.imageUri}
               alt="Card image"
-              layout="fill"
+              fill
               className="rounded-t-xl bg-background dark:bg-background h-full"
             />
           ) : (
             <Image
               src="/money.png"
               alt="Card image"
-              layout="fill"
+              fill
               className="rounded-t-xl bg-background dark:bg-background h-full"
             />
           )}
diff --git a/src/components/ui/carousel.tsx b/src/components/ui/carousel.tsx
index ec505d0..59831f9 100644
--- a/src/components/ui/carousel.tsx
+++ b/src/components/ui/carousel.tsx
@@ -1,124 +1,108 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from "embla-carousel-react"
-import { ArrowLeft, ArrowRight } from "lucide-react"
+import * as React from "react";
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
 
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
 
-type CarouselApi = UseEmblaCarouselType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
 
 type CarouselProps = {
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin
-  orientation?: "horizontal" | "vertical"
-  setApi?: (api: CarouselApi) => void
-}
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: "horizontal" | "vertical";
+  setApi?: (api: CarouselApi) => void;
+};
 
 type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
-  api: ReturnType<typeof useEmblaCarousel>[1]
-  scrollPrev: () => void
-  scrollNext: () => void
-  canScrollPrev: boolean
-  canScrollNext: boolean
-} & CarouselProps
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
 
-const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
 
 function useCarousel() {
-  const context = React.useContext(CarouselContext)
+  const context = React.useContext(CarouselContext);
 
   if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />")
+    throw new Error("useCarousel must be used within a <Carousel />");
   }
 
-  return context
+  return context;
 }
 
-const Carousel = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & CarouselProps
->(
-  (
-    {
-      orientation = "horizontal",
-      opts,
-      setApi,
-      plugins,
-      className,
-      children,
-      ...props
-    },
-    ref
-  ) => {
+const Carousel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & CarouselProps>(
+  ({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
     const [carouselRef, api] = useEmblaCarousel(
       {
         ...opts,
         axis: orientation === "horizontal" ? "x" : "y",
       },
       plugins
-    )
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-    const [canScrollNext, setCanScrollNext] = React.useState(false)
+    );
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
 
     const onSelect = React.useCallback((api: CarouselApi) => {
       if (!api) {
-        return
+        return;
       }
 
-      setCanScrollPrev(api.canScrollPrev())
-      setCanScrollNext(api.canScrollNext())
-    }, [])
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    }, []);
 
     const scrollPrev = React.useCallback(() => {
-      api?.scrollPrev()
-    }, [api])
+      api?.scrollPrev();
+    }, [api]);
 
     const scrollNext = React.useCallback(() => {
-      api?.scrollNext()
-    }, [api])
+      api?.scrollNext();
+    }, [api]);
 
     const handleKeyDown = React.useCallback(
       (event: React.KeyboardEvent<HTMLDivElement>) => {
         if (event.key === "ArrowLeft") {
-          event.preventDefault()
-          scrollPrev()
+          event.preventDefault();
+          scrollPrev();
         } else if (event.key === "ArrowRight") {
-          event.preventDefault()
-          scrollNext()
+          event.preventDefault();
+          scrollNext();
         }
       },
       [scrollPrev, scrollNext]
-    )
+    );
 
     React.useEffect(() => {
       if (!api || !setApi) {
-        return
+        return;
       }
 
-      setApi(api)
-    }, [api, setApi])
+      setApi(api);
+    }, [api, setApi]);
 
     React.useEffect(() => {
       if (!api) {
-        return
+        return;
       }
 
-      onSelect(api)
-      api.on("reInit", onSelect)
-      api.on("select", onSelect)
+      onSelect(api);
+      api.on("reInit", onSelect);
+      api.on("select", onSelect);
 
       return () => {
-        api?.off("select", onSelect)
-      }
-    }, [api, onSelect])
+        api?.off("select", onSelect);
+      };
+    }, [api, onSelect]);
 
     return (
       <CarouselContext.Provider
@@ -126,137 +110,113 @@ const Carousel = React.forwardRef<
           carouselRef,
           api: api,
           opts,
-          orientation:
-            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
           scrollPrev,
           scrollNext,
           canScrollPrev,
           canScrollNext,
-        }}
-      >
+        }}>
         <div
           ref={ref}
           onKeyDownCapture={handleKeyDown}
           className={cn("relative", className)}
           role="region"
           aria-roledescription="carousel"
-          {...props}
-        >
+          {...props}>
           {children}
         </div>
       </CarouselContext.Provider>
-    )
+    );
   }
-)
-Carousel.displayName = "Carousel"
+);
+Carousel.displayName = "Carousel";
 
-const CarouselContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel()
+const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { carouselRef, orientation } = useCarousel();
 
-  return (
-    <div ref={carouselRef} className="overflow-hidden">
+    return (
+      <div ref={carouselRef} className="overflow-hidden">
+        <div
+          ref={ref}
+          className={cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+CarouselContent.displayName = "CarouselContent";
+
+const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { orientation } = useCarousel();
+
+    return (
       <div
         ref={ref}
-        className={cn(
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className
-        )}
+        role="group"
+        aria-roledescription="slide"
+        className={cn("min-w-0 shrink-0 grow-0", orientation === "horizontal" ? "pl-4" : "pt-4", className)}
         {...props}
       />
-    </div>
-  )
-})
-CarouselContent.displayName = "CarouselContent"
+    );
+  }
+);
+CarouselItem.displayName = "CarouselItem";
 
-const CarouselItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel()
+const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 
-  return (
-    <div
-      ref={ref}
-      role="group"
-      aria-roledescription="slide"
-      className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-CarouselItem.displayName = "CarouselItem"
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          "absolute  h-8 w-8 rounded-full",
+          orientation === "horizontal"
+            ? "-left-12 top-1/2 -translate-y-1/2"
+            : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+          className
+        )}
+        disabled={!canScrollPrev}
+        onClick={scrollPrev}
+        {...props}>
+        <ArrowLeft className="h-4 w-4" />
+        <span className="sr-only">Previous slide</span>
+      </Button>
+    );
+  }
+);
+CarouselPrevious.displayName = "CarouselPrevious";
 
-const CarouselPrevious = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
 
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute  h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-left-12 top-1/2 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}
-    >
-      <ArrowLeft className="h-4 w-4" />
-      <span className="sr-only">Previous slide</span>
-    </Button>
-  )
-})
-CarouselPrevious.displayName = "CarouselPrevious"
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          "absolute h-8 w-8 rounded-full",
+          orientation === "horizontal"
+            ? "-right-12 top-1/2 -translate-y-1/2"
+            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+          className
+        )}
+        disabled={!canScrollNext}
+        onClick={scrollNext}
+        {...props}>
+        <ArrowRight className="h-4 w-4" />
+        <span className="sr-only">Next slide</span>
+      </Button>
+    );
+  }
+);
+CarouselNext.displayName = "CarouselNext";
 
-const CarouselNext = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel()
-
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-right-12 top-1/2 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}
-    >
-      <ArrowRight className="h-4 w-4" />
-      <span className="sr-only">Next slide</span>
-    </Button>
-  )
-})
-CarouselNext.displayName = "CarouselNext"
-
-export {
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-}
+export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext };
diff --git a/src/lib/data/dropdownQuery.ts b/src/lib/data/dropdownQuery.ts
new file mode 100644
index 0000000..f6ac3dc
--- /dev/null
+++ b/src/lib/data/dropdownQuery.ts
@@ -0,0 +1,16 @@
+import { SupabaseClient } from "@supabase/supabase-js";
+
+
+function getAllTagsQuery(client: SupabaseClient) {
+  return client.from("Tag").select("id, value");
+}
+
+function getALlFundedStatusQuery(client: SupabaseClient) {
+  return client.from("FundedStatus").select("id, value, description");
+}
+
+function getAllBusinessTypeQuery(client: SupabaseClient) {
+  return client.from("BusinessType").select("id, value, description");
+}
+
+export { getAllTagsQuery, getALlFundedStatusQuery, getAllBusinessTypeQuery };
\ No newline at end of file
diff --git a/src/lib/data/projectQuery.ts b/src/lib/data/projectQuery.ts
new file mode 100644
index 0000000..c6d0d71
--- /dev/null
+++ b/src/lib/data/projectQuery.ts
@@ -0,0 +1,157 @@
+import { SupabaseClient } from "@supabase/supabase-js";
+
+async function getTopProjects(client: SupabaseClient, numberOfRecords: number = 4) {
+    try {
+      const { data, error } = await client
+        .from("Project")
+        .select(
+          `
+            id,
+            projectName,
+            businessId,
+            publishedTime,
+            projectShortDescription,
+            cardImage,
+            ProjectInvestmentDetail (
+              minInvestment,
+              totalInvestment,
+              targetInvestment,
+              investmentDeadline
+            ),
+            ItemTag (
+              Tag (
+                id,
+                value
+              )
+            ),
+            Business (
+              location
+            )
+          `
+        )
+        .order("publishedTime", { ascending: false })
+        .limit(numberOfRecords);
+
+      if (error) {
+        console.error("Error fetching top projects:", error.message);
+        return { data: null, error: error.message };
+      }
+
+      return { data, error: null };
+    } catch (err) {
+      console.error("Unexpected error:", err);
+      return { data: null, error: "An unexpected error occurred." };
+    }
+  }
+
+async function getProjectData(client: SupabaseClient, projectId: number) {
+  const query = client.from("Project").select(
+    `
+      project_name:projectName,
+      project_short_description:projectShortDescription,
+      project_description:projectDescription,
+      published_time:publishedTime,
+      ...ProjectInvestmentDetail!inner (
+        min_investment:minInvestment,
+        total_investment:totalInvestment,
+        target_investment:targetInvestment,
+        investment_deadline:investmentDeadline
+      ),
+      tags:ItemTag!inner (
+        ...Tag!inner (
+          tag_name:value
+        )
+      )
+    `
+  ).eq("id", projectId).single()
+
+  const {data, error} = await query;
+  return { data, error }
+}
+
+export interface FilterParams {
+  searchTerm?: string;
+  tagsFilter?: string[];
+  projectStatus?: string;
+  projectStatusFilter?: string;
+  businessTypeFilter?: string;
+  sortByTimeFilter?: string;
+}
+
+export interface FilterProjectQueryParams extends FilterParams {
+  page: number,
+  pageSize: number
+}
+
+function searchProjectsQuery(client: SupabaseClient, {searchTerm, tagsFilter, projectStatus, businessTypeFilter, sortByTimeFilter, page = 1, pageSize = 4}: FilterProjectQueryParams) {
+  const start = (page - 1) * pageSize;
+  const end = start + pageSize - 1;
+  
+  let query = client.from("Project").select(
+    `
+    project_id:id,
+    project_name:projectName,
+    published_time:publishedTime,
+    project_short_description:projectShortDescription,
+    card_image_url:cardImage,
+    ...ProjectStatus!Project_projectStatusId_fkey!inner (
+      project_status:value
+    ),
+    ...ProjectInvestmentDetail!inner (
+      min_investment:minInvestment,
+      total_investment:totalInvestment,
+      target_investment:targetInvestment,
+      investment_deadline:investmentDeadline
+    ),
+    tags:ItemTag!inner (
+      ...Tag!inner (
+        tag_name:value
+      )
+    ),
+    ...Business!inner (
+      ...businessType!inner (
+        business_type:value
+      ),
+      business_location:location
+    )
+    `
+  ).order("publishedTime", { ascending: false }).range(start, end)
+
+  if (sortByTimeFilter === "all") {
+    sortByTimeFilter = undefined;
+  }
+
+  if (projectStatus === "all") {
+    projectStatus = undefined;
+  }
+
+  if (businessTypeFilter === "all") {
+    businessTypeFilter = undefined;
+  }
+
+  if (tagsFilter?.length === 0) {
+    tagsFilter = undefined;
+  }
+
+  if (searchTerm) {
+    query = query.ilike('projectName', `%${searchTerm}%`)
+  }
+
+  if (tagsFilter) {
+    query = query.in('ItemTag.Tag.value', tagsFilter)
+  }
+
+  if (projectStatus) {
+    query = query.eq("ProjectStatus.value", projectStatus)
+  }
+
+  if (businessTypeFilter) {
+    query = query.eq("Business.businessType.value", businessTypeFilter)
+  }
+
+  return query;
+}
+
+
+export { getTopProjects, getProjectData, searchProjectsQuery };
+
diff --git a/src/lib/data/query.ts b/src/lib/data/query.ts
new file mode 100644
index 0000000..2af3209
--- /dev/null
+++ b/src/lib/data/query.ts
@@ -0,0 +1,35 @@
+import { SupabaseClient } from "@supabase/supabase-js";
+
+function getBusinesses(client: SupabaseClient, query: string | null) {
+  return client.from("Business").select("id, businessName, joinedDate").ilike("businessName", `%${query}%`);
+}
+
+function getProjects(client: SupabaseClient, businessIds: string[]) {
+  return client
+    .from("Project")
+    .select(
+      `
+            id,
+            projectName,
+            businessId,
+            publishedTime,
+            projectShortDescription,
+            ProjectInvestmentDetail (
+                minInvestment,
+                totalInvestment,
+                targetInvestment
+            )
+        `
+    )
+    .in("businessId", businessIds);
+}
+
+function getTags(client: SupabaseClient, projectIds: string[]) {
+  return client.from("ItemTag").select("itemId, Tag (value)").in("itemId", projectIds);
+}
+
+function getInvestmentCounts(client: SupabaseClient, projectIds: string[]) {
+  return client.from("InvestmentDeal").select("*", { count: "exact", head: true }).in("projectId", projectIds);
+}
+
+export { getBusinesses, getProjects, getTags, getInvestmentCounts };
\ No newline at end of file
diff --git a/src/lib/data/userQuery.ts b/src/lib/data/userQuery.ts
new file mode 100644
index 0000000..5ddd8f0
--- /dev/null
+++ b/src/lib/data/userQuery.ts
@@ -0,0 +1,23 @@
+import { SupabaseClient } from "@supabase/supabase-js";
+
+async function getUserProfile(client: SupabaseClient, userId: string) {
+  try {
+    const { data, error } = await client
+      .from("Profiles")
+      .select("updated_at, username, full_name, avatar_url, website, bio")
+      .eq("id", userId)
+      .single();
+
+    if (error) {
+      console.error("Error fetching user profile:", error.message);
+      return { data: null, error: error.message };
+    }
+
+    return { data, error: null };
+  } catch (err) {
+    console.error("Unexpected error:", err);
+    return { data: null, error: "An unexpected error occurred." };
+  }
+}
+
+export { getUserProfile };
diff --git a/src/types/database.types.ts b/src/types/database.types.ts
new file mode 100644
index 0000000..59f501f
Binary files /dev/null and b/src/types/database.types.ts differ
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 84287e8..4d932d5 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -74,7 +74,7 @@ const config = {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [require("tailwindcss-animate"), require('@tailwindcss/typography'),],
 } satisfies Config
 
 export default config
\ No newline at end of file