diff --git a/.prettierrc b/.prettierrc
index b81bd4d..75ebcfc 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -2,6 +2,5 @@
   "singleQuote": true,
   "jsxSingleQuote": true,
   "trailingComma": "all",
-	"useTabs": true,
 	"tabWidth": 2
 }
diff --git a/eslint.config.js b/eslint.config.js
index 8d6c546..da3adf5 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -3,51 +3,51 @@ import tseslint from 'typescript-eslint';
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
 
 const compat = new FlatCompat({
-	baseDirectory: import.meta.dirname,
+  baseDirectory: import.meta.dirname,
 });
 
 export default tseslint.config(
-	{
-		ignores: ['.next'],
-	},
-	...compat.extends('next/core-web-vitals'),
-	{
-		files: ['**/*.ts', '**/*.tsx'],
-		extends: [
-			...tseslint.configs.recommended,
-			...tseslint.configs.recommendedTypeChecked,
-			...tseslint.configs.stylisticTypeChecked,
-			eslintPluginPrettierRecommended,
-		],
-		rules: {
-			'@typescript-eslint/array-type': 'off',
-			'@typescript-eslint/consistent-type-definitions': 'off',
-			'@typescript-eslint/consistent-type-imports': [
-				'warn',
-				{ prefer: 'type-imports', fixStyle: 'inline-type-imports' },
-			],
-			'@typescript-eslint/no-unused-vars': [
-				'warn',
-				{ argsIgnorePattern: '^_' },
-			],
-			'@typescript-eslint/require-await': 'off',
-			'@typescript-eslint/no-misused-promises': [
-				'error',
-				{ checksVoidReturn: { attributes: false } },
-			],
-			'@typescript-eslint/no-explicit-any': 'warn',
-			'@typescript-eslint/no-floating-promises': 'warn',
-			'@typescript-eslint/no-unsafe-argument': 'warn',
-		},
-	},
-	{
-		linterOptions: {
-			reportUnusedDisableDirectives: true,
-		},
-		languageOptions: {
-			parserOptions: {
-				projectService: true,
-			},
-		},
-	},
+  {
+    ignores: ['.next'],
+  },
+  ...compat.extends('next/core-web-vitals'),
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    extends: [
+      ...tseslint.configs.recommended,
+      ...tseslint.configs.recommendedTypeChecked,
+      ...tseslint.configs.stylisticTypeChecked,
+      //eslintPluginPrettierRecommended,
+    ],
+    rules: {
+      '@typescript-eslint/array-type': 'off',
+      '@typescript-eslint/consistent-type-definitions': 'off',
+      '@typescript-eslint/consistent-type-imports': [
+        'warn',
+        { prefer: 'type-imports', fixStyle: 'inline-type-imports' },
+      ],
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        { argsIgnorePattern: '^_' },
+      ],
+      '@typescript-eslint/require-await': 'off',
+      '@typescript-eslint/no-misused-promises': [
+        'error',
+        { checksVoidReturn: { attributes: false } },
+      ],
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-floating-promises': 'warn',
+      '@typescript-eslint/no-unsafe-argument': 'warn',
+    },
+  },
+  {
+    linterOptions: {
+      reportUnusedDisableDirectives: true,
+    },
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+      },
+    },
+  },
 );
diff --git a/next.config.js b/next.config.js
index 18b0525..937da13 100644
--- a/next.config.js
+++ b/next.config.js
@@ -3,65 +3,68 @@
  */
 import './src/env.js';
 import { withSentryConfig } from '@sentry/nextjs';
+import { withPlausibleProxy } from 'next-plausible';
 
 /** @type {import("next").NextConfig} */
-const config = {
-	output: 'standalone',
-	images: {
-		remotePatterns: [
-			{
-				protocol: 'https',
-				hostname: '*.gbrown.org',
-			},
-		],
-	},
-	serverExternalPackages: ['require-in-the-middle'],
-	experimental: {
-		serverActions: {
-			bodySizeLimit: '10mb',
-		},
-	},
-	turbopack: {
-		rules: {
-			'*.svg': {
-				loaders: [
-					{
-						loader: '@svgr/webpack',
-						options: {
-							icon: true,
-						},
-					},
-				],
-				as: '*.js',
-			},
-		},
-	},
-};
+const config = withPlausibleProxy({
+  customDomain: 'https://plausible.gbrown.org',
+})({
+  output: 'standalone',
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '*.gbrown.org',
+      },
+    ],
+  },
+  serverExternalPackages: ['require-in-the-middle'],
+  experimental: {
+    serverActions: {
+      bodySizeLimit: '10mb',
+    },
+  },
+  turbopack: {
+    rules: {
+      '*.svg': {
+        loaders: [
+          {
+            loader: '@svgr/webpack',
+            options: {
+              icon: true,
+            },
+          },
+        ],
+        as: '*.js',
+      },
+    },
+  },
+});
 
 const sentryConfig = {
-	// For all available options, see:
-	// https://www.npmjs.com/package/@sentry/webpack-plugin#options
-	org: 'gib',
-	project: 't3-supabase-template',
-	sentryUrl: process.env.NEXT_PUBLIC_SENTRY_URL,
-	authToken: process.env.SENTRY_AUTH_TOKEN,
-	// Only print logs for uploading source maps in CI
-	silent: !process.env.CI,
-	// For all available options, see:
-	// https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
-	// Upload a larger set of source maps for prettier stack traces (increases build time)
-	widenClientFileUpload: true,
-	// Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
-	// This can increase your server load as well as your hosting bill.
-	// Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
-	// side errors will fail.
-	tunnelRoute: '/monitoring',
-	// Automatically tree-shake Sentry logger statements to reduce bundle size
-	disableLogger: true,
-	// Capture React Component Names
-	reactComponentAnnotation: {
-		enabled: true,
-	},
+  // For all available options, see:
+  // https://www.npmjs.com/package/@sentry/webpack-plugin#options
+  org: 'gib',
+  project: 't3-supabase-template',
+  sentryUrl: process.env.NEXT_PUBLIC_SENTRY_URL,
+  authToken: process.env.SENTRY_AUTH_TOKEN,
+  // Only print logs for uploading source maps in CI
+  silent: !process.env.CI,
+  // For all available options, see:
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+  // Upload a larger set of source maps for prettier stack traces (increases build time)
+  widenClientFileUpload: true,
+  // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
+  // This can increase your server load as well as your hosting bill.
+  // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
+  // side errors will fail.
+  tunnelRoute: '/monitoring',
+  // Automatically tree-shake Sentry logger statements to reduce bundle size
+  disableLogger: true,
+  // Capture React Component Names
+  reactComponentAnnotation: {
+    enabled: true,
+  },
 };
 
 export default withSentryConfig(config, sentryConfig);
diff --git a/package.json b/package.json
index 23b0397..4c99e27 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "clsx": "^2.1.1",
     "lucide-react": "^0.510.0",
     "next": "^15.3.3",
+    "next-plausible": "^3.12.4",
     "next-themes": "^0.4.6",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2a77fd9..99803b3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -53,6 +53,9 @@ importers:
       next:
         specifier: ^15.3.3
         version: 15.3.3(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      next-plausible:
+        specifier: ^3.12.4
+        version: 3.12.4(next@15.3.3(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       next-themes:
         specifier: ^0.4.6
         version: 0.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -2758,6 +2761,13 @@ packages:
   neo-async@2.6.2:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
 
+  next-plausible@3.12.4:
+    resolution: {integrity: sha512-cD3+ixJxf8yBYvsideTxqli3fvrB7R4BXcvsNJz8Sm2X1QN039WfiXjCyNWkub4h5++rRs6fHhchUMnOuJokcg==}
+    peerDependencies:
+      next: '^11.1.0 || ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 '
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   next-themes@0.4.6:
     resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
     peerDependencies:
@@ -6327,6 +6337,12 @@ snapshots:
 
   neo-async@2.6.2: {}
 
+  next-plausible@3.12.4(next@15.3.3(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      next: 15.3.3(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
   next-themes@0.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
       react: 19.1.0
diff --git a/postcss.config.js b/postcss.config.js
index 1970487..a34a3d5 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,5 +1,5 @@
 export default {
-	plugins: {
-		'@tailwindcss/postcss': {},
-	},
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
 };
diff --git a/prettier.config.js b/prettier.config.js
index 4b043fd..09f0482 100644
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -1,4 +1,4 @@
 /** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
 export default {
-	plugins: ['prettier-plugin-tailwindcss'],
+  plugins: ['prettier-plugin-tailwindcss'],
 };
diff --git a/public/icons/gitea.svg b/public/icons/gitea.svg
new file mode 100644
index 0000000..d9eb11a
--- /dev/null
+++ b/public/icons/gitea.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 512 512"><path d="M414.4 376.5 200 379.6l-1.4-256.7 103.5-15.2 108.8-1.5z" style="fill:#fff"/><path d="M502.6 103.7c-3.3-3.3-7.8-3.3-7.8-3.3s-95.5 5.4-144.9 6.5c-10.8.2-21.6.5-32.3.6V203c-4.5-2.1-9-4.3-13.5-6.4 0-29.6-.1-88.9-.1-88.9-23.6.3-72.7-1.8-72.7-1.8s-115.2-5.8-127.7-6.9c-8-.5-18.3-1.7-31.8 1.2-7.1 1.5-27.3 6-43.8 21.9C-8.7 154.8.7 206.7 1.9 214.5c1.4 9.5 5.6 36 25.8 59 37.3 45.7 117.6 44.6 117.6 44.6s9.9 23.5 24.9 45.2c20.4 27 41.3 48 61.7 50.5 51.3 0 153.9-.1 153.9-.1s9.8.1 23-8.4c11.4-6.9 21.6-19.1 21.6-19.1s10.5-11.2 25.2-36.9c4.5-7.9 8.2-15.6 11.5-22.8 0 0 45-95.4 45-188.2-1-28-7.9-33-9.5-34.6M97.7 269.9c-21.1-6.9-30.1-15.2-30.1-15.2S52 243.8 44.2 222.3c-13.4-36-1.1-58-1.1-58s6.8-18.3 31.4-24.4c11.2-3 25.2-2.5 25.2-2.5s5.8 48.4 12.8 76.7c5.9 23.8 20.2 63.3 20.2 63.3s-21.3-2.6-35-7.5m289.4-4.5c-5.2 12.6-44.8 92.1-44.8 92.1s-5 11.8-16 12.5c-4.7.3-8.4-1-8.4-1s-.2-.1-4.3-1.7l-92-44.8s-8.9-4.6-10.4-12.7c-1.8-6.6 2.2-14.7 2.2-14.7l44.2-91.1s3.9-7.9 9.9-10.6c.5-.2 1.9-.8 3.7-1.2 6.6-1.7 14.7 2.3 14.7 2.3l18.4 8.9c-3.7 7.6-7.5 15.2-11.2 22.9-5.5-.1-10.5 2.9-13.1 7.7-2.8 5.1-2.2 11.5 1.5 16.1-6.6 13.8-13.3 27.5-19.9 41.1-6.7.1-12.5 4.7-14.1 11.2-1.5 6.5 1.6 13.3 7.4 16.3 6.3 3.3 14.3 1.5 18.5-4.4 4.2-5.8 3.5-13.8-1.5-18.8l19.5-40c1.2.1 3 .2 5-.4 3.3-.7 5.8-2.9 5.8-2.9 3.4 1.5 7 3.1 10.8 5 3.9 2 7.6 4 10.9 5.9.7.4 1.5.9 2.3 1.5 1.3 1.1 2.8 2.5 3.8 4.5 1.5 4.5-1.5 12.1-1.5 12.1-1.9 6.2-15 33.1-15 33.1-6.6-.2-12.5 4.1-14.4 10.2-2.1 6.6.9 14.1 7.2 17.3 6.4 3.3 14.2 1.4 18.3-4.3 4.1-5.5 3.7-13.3-.9-18.4l4.6-9.2c4.1-8.5 11-24.8 11-24.8.7-1.4 4.6-8.4 2.2-17.3-2-9.3-10.3-13.6-10.3-13.6-9.9-6.4-23.8-12.4-23.8-12.4s0-3.3-.9-5.8-2.3-4.2-3.2-5.1c3.6-7.6 7.4-15.1 11-22.6l61.8 29.9s10.3 4.6 12.5 13.2c1.5 6-.4 11.4-1.5 14" style="fill:#609926"/></svg>
\ No newline at end of file
diff --git a/scripts/next.config.build.js b/scripts/next.config.build.js
index 39d14aa..6bcbd94 100644
--- a/scripts/next.config.build.js
+++ b/scripts/next.config.build.js
@@ -7,61 +7,61 @@ import { withSentryConfig } from '@sentry/nextjs';
 
 /** @type {import("next").NextConfig} */
 const config = {
-	output: 'standalone',
-	images: {
-		remotePatterns: [
-			{
-				protocol: 'https',
-				hostname: '*.gbrown.org',
-			},
-		],
-	},
-	serverExternalPackages: ['require-in-the-middle'],
-	experimental: {
-		serverActions: {
-			bodySizeLimit: '10mb',
-		},
-	},
-	typescript: {
-		ignoreBuildErrors: true,
-	},
-	eslint: {
-		ignoreDuringBuilds: true,
-	},
-	//turbopack: {
-	//rules: {
-	//'*.svg': {
-	//loaders: ['@svgr/webpack'],
-	//as: '*.js',
-	//},
-	//},
-	//},
+  output: 'standalone',
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '*.gbrown.org',
+      },
+    ],
+  },
+  serverExternalPackages: ['require-in-the-middle'],
+  experimental: {
+    serverActions: {
+      bodySizeLimit: '10mb',
+    },
+  },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  //turbopack: {
+  //rules: {
+  //'*.svg': {
+  //loaders: ['@svgr/webpack'],
+  //as: '*.js',
+  //},
+  //},
+  //},
 };
 
 const sentryConfig = {
-	// For all available options, see:
-	// https://www.npmjs.com/package/@sentry/webpack-plugin#options
-	org: 'gib',
-	project: 't3-supabase-template',
-	sentryUrl: process.env.SENTRY_URL,
-	authToken: process.env.SENTRY_AUTH_TOKEN,
-	// Only print logs for uploading source maps in CI
-	silent: !process.env.CI,
-	// For all available options, see:
-	// https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
-	// Upload a larger set of source maps for prettier stack traces (increases build time)
-	widenClientFileUpload: true,
-	// Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
-	// This can increase your server load as well as your hosting bill.
-	// Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
-	// side errors will fail.
-	tunnelRoute: '/monitoring',
-	// Automatically tree-shake Sentry logger statements to reduce bundle size
-	disableLogger: true,
-	// Capture React Component Names
-	reactComponentAnnotation: {
-		enabled: true,
-	},
+  // For all available options, see:
+  // https://www.npmjs.com/package/@sentry/webpack-plugin#options
+  org: 'gib',
+  project: 't3-supabase-template',
+  sentryUrl: process.env.SENTRY_URL,
+  authToken: process.env.SENTRY_AUTH_TOKEN,
+  // Only print logs for uploading source maps in CI
+  silent: !process.env.CI,
+  // For all available options, see:
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+  // Upload a larger set of source maps for prettier stack traces (increases build time)
+  widenClientFileUpload: true,
+  // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
+  // This can increase your server load as well as your hosting bill.
+  // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
+  // side errors will fail.
+  tunnelRoute: '/monitoring',
+  // Automatically tree-shake Sentry logger statements to reduce bundle size
+  disableLogger: true,
+  // Capture React Component Names
+  reactComponentAnnotation: {
+    enabled: true,
+  },
 };
 
 export default withSentryConfig(config, sentryConfig);
diff --git a/scripts/next.config.default.js b/scripts/next.config.default.js
index dd1537d..d1cec6a 100644
--- a/scripts/next.config.default.js
+++ b/scripts/next.config.default.js
@@ -7,55 +7,55 @@ import { withSentryConfig } from '@sentry/nextjs';
 
 /** @type {import("next").NextConfig} */
 const config = {
-	output: 'standalone',
-	images: {
-		remotePatterns: [
-			{
-				protocol: 'https',
-				hostname: '*.gbrown.org',
-			},
-		],
-	},
-	serverExternalPackages: ['require-in-the-middle'],
-	experimental: {
-		serverActions: {
-			bodySizeLimit: '10mb',
-		},
-	},
-	//turbopack: {
-	//rules: {
-	//'*.svg': {
-	//loaders: ['@svgr/webpack'],
-	//as: '*.js',
-	//},
-	//},
-	//},
+  output: 'standalone',
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '*.gbrown.org',
+      },
+    ],
+  },
+  serverExternalPackages: ['require-in-the-middle'],
+  experimental: {
+    serverActions: {
+      bodySizeLimit: '10mb',
+    },
+  },
+  //turbopack: {
+  //rules: {
+  //'*.svg': {
+  //loaders: ['@svgr/webpack'],
+  //as: '*.js',
+  //},
+  //},
+  //},
 };
 
 const sentryConfig = {
-	// For all available options, see:
-	// https://www.npmjs.com/package/@sentry/webpack-plugin#options
-	org: 'gib',
-	project: 't3-supabase-template',
-	sentryUrl: process.env.SENTRY_URL,
-	authToken: process.env.SENTRY_AUTH_TOKEN,
-	// Only print logs for uploading source maps in CI
-	silent: !process.env.CI,
-	// For all available options, see:
-	// https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
-	// Upload a larger set of source maps for prettier stack traces (increases build time)
-	widenClientFileUpload: true,
-	// Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
-	// This can increase your server load as well as your hosting bill.
-	// Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
-	// side errors will fail.
-	tunnelRoute: '/monitoring',
-	// Automatically tree-shake Sentry logger statements to reduce bundle size
-	disableLogger: true,
-	// Capture React Component Names
-	reactComponentAnnotation: {
-		enabled: true,
-	},
+  // For all available options, see:
+  // https://www.npmjs.com/package/@sentry/webpack-plugin#options
+  org: 'gib',
+  project: 't3-supabase-template',
+  sentryUrl: process.env.SENTRY_URL,
+  authToken: process.env.SENTRY_AUTH_TOKEN,
+  // Only print logs for uploading source maps in CI
+  silent: !process.env.CI,
+  // For all available options, see:
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+  // Upload a larger set of source maps for prettier stack traces (increases build time)
+  widenClientFileUpload: true,
+  // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
+  // This can increase your server load as well as your hosting bill.
+  // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
+  // side errors will fail.
+  tunnelRoute: '/monitoring',
+  // Automatically tree-shake Sentry logger statements to reduce bundle size
+  disableLogger: true,
+  // Capture React Component Names
+  reactComponentAnnotation: {
+    enabled: true,
+  },
 };
 
 export default withSentryConfig(config, sentryConfig);
diff --git a/sentry.server.config.ts b/sentry.server.config.ts
index 098e696..86a556b 100644
--- a/sentry.server.config.ts
+++ b/sentry.server.config.ts
@@ -5,11 +5,11 @@
 import * as Sentry from '@sentry/nextjs';
 
 Sentry.init({
-	dsn: 'https://0468176d5291bc2b914261147bfef117@sentry.gbrown.org/6',
+  dsn: 'https://0468176d5291bc2b914261147bfef117@sentry.gbrown.org/6',
 
-	// Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
-	tracesSampleRate: 1,
+  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+  tracesSampleRate: 1,
 
-	// Setting this option to true will print useful information to the console while you're setting up Sentry.
-	debug: false,
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
 });
diff --git a/src/app/(auth-pages)/auth/callback/route.ts b/src/app/(auth-pages)/auth/callback/route.ts
index 4f89b38..e810e51 100644
--- a/src/app/(auth-pages)/auth/callback/route.ts
+++ b/src/app/(auth-pages)/auth/callback/route.ts
@@ -6,38 +6,38 @@ import { type NextRequest } from 'next/server';
 import { redirect } from 'next/navigation';
 
 export const GET = async (request: NextRequest) => {
-	const { searchParams, origin } = new URL(request.url);
-	const code = searchParams.get('code');
-	const token_hash = searchParams.get('token');
-	const type = searchParams.get('type') as EmailOtpType | null;
-	const redirectTo = searchParams.get('redirect_to') ?? '/';
-	const supabase = await createServerClient();
+  const { searchParams, origin } = new URL(request.url);
+  const code = searchParams.get('code');
+  const token_hash = searchParams.get('token');
+  const type = searchParams.get('type') as EmailOtpType | null;
+  const redirectTo = searchParams.get('redirect_to') ?? '/';
+  const supabase = await createServerClient();
 
-	if (code) {
-		const { error } = await supabase.auth.exchangeCodeForSession(code);
-		if (error) {
-			console.error('OAuth error:', error);
-			return redirect(`/sign-in?error=${encodeURIComponent(error.message)}`);
-		}
-		return redirect(redirectTo);
-	}
+  if (code) {
+    const { error } = await supabase.auth.exchangeCodeForSession(code);
+    if (error) {
+      console.error('OAuth error:', error);
+      return redirect(`/sign-in?error=${encodeURIComponent(error.message)}`);
+    }
+    return redirect(redirectTo);
+  }
 
-	if (token_hash && type) {
-		const { error } = await supabase.auth.verifyOtp({
-			type,
-			token_hash,
-		});
-		if (!error) {
-			if (type === 'signup' || type === 'magiclink' || type === 'email')
-				return redirect('/');
-			if (type === 'recovery' || type === 'email_change')
-				return redirect('/profile');
-			if (type === 'invite') return redirect('/sign-up');
-		}
-		return redirect(
-			`/?error=${encodeURIComponent(error?.message ?? 'Unknown error')}`,
-		);
-	}
+  if (token_hash && type) {
+    const { error } = await supabase.auth.verifyOtp({
+      type,
+      token_hash,
+    });
+    if (!error) {
+      if (type === 'signup' || type === 'magiclink' || type === 'email')
+        return redirect('/');
+      if (type === 'recovery' || type === 'email_change')
+        return redirect('/profile');
+      if (type === 'invite') return redirect('/sign-up');
+    }
+    return redirect(
+      `/?error=${encodeURIComponent(error?.message ?? 'Unknown error')}`,
+    );
+  }
 
-	return redirect('/');
+  return redirect('/');
 };
diff --git a/src/app/(auth-pages)/auth/success/page.tsx b/src/app/(auth-pages)/auth/success/page.tsx
index 673b7e4..e6660ab 100644
--- a/src/app/(auth-pages)/auth/success/page.tsx
+++ b/src/app/(auth-pages)/auth/success/page.tsx
@@ -6,34 +6,34 @@ import { useEffect } from 'react';
 import { Loader2 } from 'lucide-react';
 
 const AuthSuccessPage = () => {
-	const { refreshUserData } = useAuth();
-	const router = useRouter();
+  const { refreshUserData } = useAuth();
+  const router = useRouter();
 
-	useEffect(() => {
-		const handleAuthSuccess = async () => {
-			// Refresh the auth context to pick up the new session
-			await refreshUserData();
+  useEffect(() => {
+    const handleAuthSuccess = async () => {
+      // Refresh the auth context to pick up the new session
+      await refreshUserData();
 
-			// Small delay to ensure state is updated
-			setTimeout(() => {
-				router.push('/');
-			}, 100);
-		};
+      // Small delay to ensure state is updated
+      setTimeout(() => {
+        router.push('/');
+      }, 100);
+    };
 
-		handleAuthSuccess().catch((error) => {
-			console.error(`Error: ${error instanceof Error ? error.message : error}`);
-		});
-	}, [refreshUserData, router]);
+    handleAuthSuccess().catch((error) => {
+      console.error(`Error: ${error instanceof Error ? error.message : error}`);
+    });
+  }, [refreshUserData, router]);
 
-	// Show loading while processing
-	return (
-		<div className='flex items-center justify-center min-h-screen'>
-			<div className='flex flex-col items-center space-y-4'>
-				<Loader2 className='h-8 w-8 animate-spin' />
-				<p>Completing sign in...</p>
-			</div>
-		</div>
-	);
+  // Show loading while processing
+  return (
+    <div className='flex items-center justify-center min-h-screen'>
+      <div className='flex flex-col items-center space-y-4'>
+        <Loader2 className='h-8 w-8 animate-spin' />
+        <p>Completing sign in...</p>
+      </div>
+    </div>
+  );
 };
 
 export default AuthSuccessPage;
diff --git a/src/app/(auth-pages)/forgot-password/page.tsx b/src/app/(auth-pages)/forgot-password/page.tsx
index dbc55f0..aa2c7c3 100644
--- a/src/app/(auth-pages)/forgot-password/page.tsx
+++ b/src/app/(auth-pages)/forgot-password/page.tsx
@@ -72,58 +72,63 @@ const ForgotPassword = () => {
 	};
 
 	return (
-		<Card className='min-w-xs md:min-w-sm'>
-			<CardHeader>
-				<CardTitle className='text-2xl font-medium'>Reset Password</CardTitle>
-				<CardDescription className='text-sm text-foreground'>
-					Don&apos;t have an account?{' '}
-					<Link className='font-medium underline' href='/sign-up'>
-						Sign up
-					</Link>
-				</CardDescription>
-			</CardHeader>
-			<CardContent>
-				<Form {...form}>
-					<form
-						onSubmit={form.handleSubmit(handleForgotPassword)}
-						className='flex flex-col min-w-64 space-y-6'
-					>
-						<FormField
-							control={form.control}
-							name='email'
-							render={({ field }) => (
-								<FormItem>
-									<FormLabel>Email</FormLabel>
-									<FormControl>
-										<Input
-											type='email'
-											placeholder='you@example.com'
-											{...field}
-										/>
-									</FormControl>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-						<SubmitButton
-							disabled={isLoading}
-							pendingText='Resetting Password...'
-						>
-							Reset Password
-						</SubmitButton>
-						{statusMessage &&
-							(statusMessage.includes('Error') ||
-							statusMessage.includes('error') ||
-							statusMessage.includes('failed') ||
-							statusMessage.includes('invalid') ? (
-								<StatusMessage message={{ error: statusMessage }} />
-							) : (
-								<StatusMessage message={{ success: statusMessage }} />
-							))}
-					</form>
-				</Form>
-			</CardContent>
-		</Card>
+
+    <div className='w-full mx-auto text-center pt-2 md:pt-10'>
+      <div className='mx-auto flex flex-col items-center justify-center'>
+        <Card className='min-w-xs sm:min-w-sm sm:max-w-xs max-w-lg'>
+          <CardHeader>
+            <CardTitle className='text-2xl font-medium'>Reset Password</CardTitle>
+            <CardDescription className='text-sm text-foreground'>
+              Don&apos;t have an account?{' '}
+              <Link className='font-medium underline' href='/sign-up'>
+                Sign up
+              </Link>
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Form {...form}>
+              <form
+                onSubmit={form.handleSubmit(handleForgotPassword)}
+                className='flex flex-col min-w-64 space-y-6'
+              >
+                <FormField
+                  control={form.control}
+                  name='email'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Email</FormLabel>
+                      <FormControl>
+                        <Input
+                          type='email'
+                          placeholder='you@example.com'
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <SubmitButton
+                  disabled={isLoading}
+                  pendingText='Resetting Password...'
+                >
+                  Reset Password
+                </SubmitButton>
+                {statusMessage &&
+                  (statusMessage.includes('Error') ||
+                  statusMessage.includes('error') ||
+                  statusMessage.includes('failed') ||
+                  statusMessage.includes('invalid') ? (
+                    <StatusMessage message={{ error: statusMessage }} />
+                  ) : (
+                    <StatusMessage message={{ success: statusMessage }} />
+                  ))}
+              </form>
+            </Form>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
 	);
 };
 export default ForgotPassword;
diff --git a/src/app/(auth-pages)/sign-in/page.tsx b/src/app/(auth-pages)/sign-in/page.tsx
index f22cef5..524d99c 100644
--- a/src/app/(auth-pages)/sign-in/page.tsx
+++ b/src/app/(auth-pages)/sign-in/page.tsx
@@ -24,8 +24,7 @@ import { useAuth } from '@/components/context';
 import { useEffect, useState } from 'react';
 import { StatusMessage, SubmitButton } from '@/components/default';
 import { Separator } from '@/components/ui';
-import { SignInWithMicrosoft } from '@/components/default/auth/SignInWithMicrosoft';
-import { SignInWithApple } from '@/components/default/auth/SignInWithApple';
+import { SignInWithApple, SignInWithMicrosoft } from '@/components/default/auth';
 
 const formSchema = z.object({
 	email: z.string().email({
@@ -78,93 +77,98 @@ const Login = () => {
 	};
 
 	return (
-		<Card className='min-w-xs md:min-w-sm'>
-			<CardHeader>
-				<CardTitle className='text-3xl font-medium'>Sign In</CardTitle>
-				<CardDescription className='text-foreground'>
-					Don&apos;t have an account?{' '}
-					<Link className='font-medium underline' href='/sign-up'>
-						Sign up
-					</Link>
-				</CardDescription>
-			</CardHeader>
-			<CardContent>
-				<Form {...form}>
-					<form
-						onSubmit={form.handleSubmit(handleSignIn)}
-						className='flex flex-col min-w-64 space-y-6 pb-4'
-					>
-						<FormField
-							control={form.control}
-							name='email'
-							render={({ field }) => (
-								<FormItem>
-									<FormLabel className='text-lg'>Email</FormLabel>
-									<FormControl>
-										<Input
-											type='email'
-											placeholder='you@example.com'
-											{...field}
-										/>
-									</FormControl>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
 
-						<FormField
-							control={form.control}
-							name='password'
-							render={({ field }) => (
-								<FormItem>
-									<div className='flex justify-between'>
-										<FormLabel className='text-lg'>Password</FormLabel>
-										<Link
-											className='text-xs text-foreground underline text-right'
-											href='/forgot-password'
-										>
-											Forgot Password?
-										</Link>
-									</div>
-									<FormControl>
-										<Input
-											type='password'
-											placeholder='Your password'
-											{...field}
-										/>
-									</FormControl>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-						{statusMessage &&
-							(statusMessage.includes('Error') ||
-							statusMessage.includes('error') ||
-							statusMessage.includes('failed') ||
-							statusMessage.includes('invalid') ? (
-								<StatusMessage message={{ error: statusMessage }} />
-							) : (
-								<StatusMessage message={{ message: statusMessage }} />
-							))}
-						<SubmitButton
-							disabled={isLoading}
-							pendingText='Signing In...'
-							className='text-[1.0rem] cursor-pointer'
-						>
-							Sign in
-						</SubmitButton>
-					</form>
-				</Form>
+    <div className='w-full mx-auto text-center pt-2 md:pt-10'>
+      <div className='mx-auto flex flex-col items-center justify-center'>
+        <Card className='min-w-xs md:min-w-sm sm:max-w-xs max-w-lg'>
+          <CardHeader>
+            <CardTitle className='text-3xl font-medium'>Sign In</CardTitle>
+            <CardDescription className='text-foreground'>
+              Don&apos;t have an account?{' '}
+              <Link className='font-medium underline' href='/sign-up'>
+                Sign up
+              </Link>
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Form {...form}>
+              <form
+                onSubmit={form.handleSubmit(handleSignIn)}
+                className='flex flex-col min-w-64 space-y-6 pb-4'
+              >
+                <FormField
+                  control={form.control}
+                  name='email'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel className='text-lg'>Email</FormLabel>
+                      <FormControl>
+                        <Input
+                          type='email'
+                          placeholder='you@example.com'
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
 
-				<div className='flex items-center w-full gap-4'>
-					<Separator className='flex-1 bg-accent py-0.5' />
-					<span className='text-sm text-muted-foreground'>or</span>
-					<Separator className='flex-1 bg-accent py-0.5' />
-				</div>
-				<SignInWithMicrosoft />
-				<SignInWithApple />
-			</CardContent>
-		</Card>
+                <FormField
+                  control={form.control}
+                  name='password'
+                  render={({ field }) => (
+                    <FormItem>
+                      <div className='flex justify-between'>
+                        <FormLabel className='text-lg'>Password</FormLabel>
+                        <Link
+                          className='text-xs text-foreground underline text-right'
+                          href='/forgot-password'
+                        >
+                          Forgot Password?
+                        </Link>
+                      </div>
+                      <FormControl>
+                        <Input
+                          type='password'
+                          placeholder='Your password'
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                {statusMessage &&
+                  (statusMessage.includes('Error') ||
+                  statusMessage.includes('error') ||
+                  statusMessage.includes('failed') ||
+                  statusMessage.includes('invalid') ? (
+                    <StatusMessage message={{ error: statusMessage }} />
+                  ) : (
+                    <StatusMessage message={{ message: statusMessage }} />
+                  ))}
+                <SubmitButton
+                  disabled={isLoading}
+                  pendingText='Signing In...'
+                  className='text-[1.0rem] cursor-pointer'
+                >
+                  Sign in
+                </SubmitButton>
+              </form>
+            </Form>
+
+            <div className='flex items-center w-full gap-4'>
+              <Separator className='flex-1 bg-accent py-0.5' />
+              <span className='text-sm text-muted-foreground'>or</span>
+              <Separator className='flex-1 bg-accent py-0.5' />
+            </div>
+            <SignInWithMicrosoft />
+            <SignInWithApple />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
 	);
 };
 
diff --git a/src/app/(auth-pages)/sign-up/page.tsx b/src/app/(auth-pages)/sign-up/page.tsx
index 0da1249..cead871 100644
--- a/src/app/(auth-pages)/sign-up/page.tsx
+++ b/src/app/(auth-pages)/sign-up/page.tsx
@@ -99,112 +99,116 @@ const SignUp = () => {
 	};
 
 	return (
-		<Card className='min-w-xs md:min-w-sm'>
-			<CardHeader>
-				<CardTitle className='text-3xl font-medium'>Sign Up</CardTitle>
-				<CardDescription className='text-foreground'>
-					Already have an account?{' '}
-					<Link className='text-primary font-medium underline' href='/sign-in'>
-						Sign in
-					</Link>
-				</CardDescription>
-			</CardHeader>
-			<CardContent>
-				<Form {...form}>
-					<form
-						onSubmit={form.handleSubmit(handleSignUp)}
-						className='flex flex-col mx-auto space-y-4 mb-4'
-					>
-						<FormField
-							control={form.control}
-							name='name'
-							render={({ field }) => (
-								<FormItem>
-									<FormLabel className='text-lg'>Name</FormLabel>
-									<FormControl>
-										<Input type='text' placeholder='Full Name' {...field} />
-									</FormControl>
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name='email'
-							render={({ field }) => (
-								<FormItem>
-									<FormLabel className='text-lg'>Email</FormLabel>
-									<FormControl>
-										<Input
-											type='email'
-											placeholder='you@example.com'
-											{...field}
-										/>
-									</FormControl>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name='password'
-							render={({ field }) => (
-								<FormItem>
-									<FormLabel className='text-lg'>Password</FormLabel>
-									<FormControl>
-										<Input
-											type='password'
-											placeholder='Your password'
-											{...field}
-										/>
-									</FormControl>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name='confirmPassword'
-							render={({ field }) => (
-								<FormItem>
-									<FormLabel className='text-lg'>Confirm Password</FormLabel>
-									<FormControl>
-										<Input
-											type='password'
-											placeholder='Confirm password'
-											{...field}
-										/>
-									</FormControl>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-						{statusMessage &&
-							(statusMessage.includes('Error') ||
-							statusMessage.includes('error') ||
-							statusMessage.includes('failed') ||
-							statusMessage.includes('invalid') ? (
-								<StatusMessage message={{ error: statusMessage }} />
-							) : (
-								<StatusMessage message={{ success: statusMessage }} />
-							))}
-						<SubmitButton
-							className='text-[1.0rem] cursor-pointer'
-							disabled={isLoading}
-							pendingText='Signing Up...'
-						>
-							Sign Up
-						</SubmitButton>
-					</form>
-				</Form>
-				<div className='flex items-center w-full gap-4'>
-					<Separator className='flex-1 bg-accent py-0.5' />
-					<span className='text-sm text-muted-foreground'>or</span>
-					<Separator className='flex-1 bg-accent py-0.5' />
-				</div>
-				<SignInWithMicrosoft />
-				<SignInWithApple />
-			</CardContent>
-		</Card>
+    <div className='w-full mx-auto text-center pt-2 md:pt-10'>
+      <div className='mx-auto flex flex-col items-center justify-center'>
+        <Card className='min-w-xs md:min-w-sm sm:max-w-xs lg:max-w-lg'>
+          <CardHeader>
+            <CardTitle className='text-3xl font-medium'>Sign Up</CardTitle>
+            <CardDescription className='text-foreground'>
+              Already have an account?{' '}
+              <Link className='text-primary font-medium underline' href='/sign-in'>
+                Sign in
+              </Link>
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Form {...form}>
+              <form
+                onSubmit={form.handleSubmit(handleSignUp)}
+                className='flex flex-col mx-auto space-y-4 mb-4'
+              >
+                <FormField
+                  control={form.control}
+                  name='name'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel className='text-lg'>Name</FormLabel>
+                      <FormControl>
+                        <Input type='text' placeholder='Full Name' {...field} />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name='email'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel className='text-lg'>Email</FormLabel>
+                      <FormControl>
+                        <Input
+                          type='email'
+                          placeholder='you@example.com'
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name='password'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel className='text-lg'>Password</FormLabel>
+                      <FormControl>
+                        <Input
+                          type='password'
+                          placeholder='Your password'
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name='confirmPassword'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel className='text-lg'>Confirm Password</FormLabel>
+                      <FormControl>
+                        <Input
+                          type='password'
+                          placeholder='Confirm password'
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                {statusMessage &&
+                  (statusMessage.includes('Error') ||
+                  statusMessage.includes('error') ||
+                  statusMessage.includes('failed') ||
+                  statusMessage.includes('invalid') ? (
+                    <StatusMessage message={{ error: statusMessage }} />
+                  ) : (
+                    <StatusMessage message={{ success: statusMessage }} />
+                  ))}
+                <SubmitButton
+                  className='text-[1.0rem] cursor-pointer'
+                  disabled={isLoading}
+                  pendingText='Signing Up...'
+                >
+                  Sign Up
+                </SubmitButton>
+              </form>
+            </Form>
+            <div className='flex items-center w-full gap-4'>
+              <Separator className='flex-1 bg-accent py-0.5' />
+              <span className='text-sm text-muted-foreground'>or</span>
+              <Separator className='flex-1 bg-accent py-0.5' />
+            </div>
+            <SignInWithMicrosoft type='signUp' />
+            <SignInWithApple type='signUp' />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
 	);
 };
 export default SignUp;
diff --git a/src/app/(sentry)/api/sentry/example/route.ts b/src/app/(sentry)/api/sentry/example/route.ts
deleted file mode 100644
index 797a67e..0000000
--- a/src/app/(sentry)/api/sentry/example/route.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { NextResponse } from 'next/server';
-
-export const dynamic = 'force-dynamic';
-class SentryExampleAPIError extends Error {
-	constructor(message: string | undefined) {
-		super(message);
-		this.name = 'SentryExampleAPIError';
-	}
-}
-// A faulty API route to test Sentry's error monitoring
-export function GET() {
-	throw new SentryExampleAPIError(
-		'This error is raised on the backend called by the example page.',
-	);
-	return NextResponse.json({ data: 'Testing Sentry Error...' });
-}
diff --git a/src/app/api/sentry/example/route.ts b/src/app/api/sentry/example/route.ts
new file mode 100644
index 0000000..d9a4a24
--- /dev/null
+++ b/src/app/api/sentry/example/route.ts
@@ -0,0 +1,16 @@
+import { NextResponse } from 'next/server';
+
+export const dynamic = 'force-dynamic';
+class SentryExampleAPIError extends Error {
+  constructor(message: string | undefined) {
+    super(message);
+    this.name = 'SentryExampleAPIError';
+  }
+}
+// A faulty API route to test Sentry's error monitoring
+export function GET() {
+  throw new SentryExampleAPIError(
+    'This error is raised on the backend called by the example page.',
+  );
+  return NextResponse.json({ data: 'Testing Sentry Error...' });
+}
diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx
index 203045c..68d54e0 100644
--- a/src/app/global-error.tsx
+++ b/src/app/global-error.tsx
@@ -3,7 +3,7 @@
 import '@/styles/globals.css';
 import { cn } from '@/lib/utils';
 import { AuthProvider, ThemeProvider } from '@/components/context';
-import Navigation from '@/components/default/navigation';
+import Header from '@/components/default/header';
 import Footer from '@/components/default/footer';
 import { Button, Toaster } from '@/components/ui';
 import * as Sentry from '@sentry/nextjs';
@@ -12,53 +12,53 @@ import { useEffect } from 'react';
 import { Geist } from 'next/font/google';
 
 const geist = Geist({
-	subsets: ['latin'],
-	variable: '--font-geist-sans',
+  subsets: ['latin'],
+  variable: '--font-geist-sans',
 });
 
 type GlobalErrorProps = {
-	error: Error & { digest?: string };
-	reset?: () => void;
+  error: Error & { digest?: string };
+  reset?: () => void;
 };
 
 const GlobalError = ({ error, reset = undefined }: GlobalErrorProps) => {
-	useEffect(() => {
-		Sentry.captureException(error);
-	}, [error]);
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
 
-	return (
-		<html lang='en' className={`${geist.variable}`} suppressHydrationWarning>
-			<body
-				className={cn('bg-background text-foreground font-sans antialiased')}
-			>
-				<ThemeProvider
-					attribute='class'
-					defaultTheme='system'
-					enableSystem
-					disableTransitionOnChange
-				>
-					<AuthProvider>
-						<main className='min-h-screen flex flex-col items-center'>
-							<div className='flex-1 w-full flex flex-col gap-20 items-center'>
-								<Navigation />
-								<div
-									className='flex flex-col gap-20 max-w-5xl
+  return (
+    <html lang='en' className={`${geist.variable}`} suppressHydrationWarning>
+      <body
+        className={cn('bg-background text-foreground font-sans antialiased')}
+      >
+        <ThemeProvider
+          attribute='class'
+          defaultTheme='system'
+          enableSystem
+          disableTransitionOnChange
+        >
+          <AuthProvider>
+            <main className='min-h-screen flex flex-col items-center'>
+              <div className='flex-1 w-full flex flex-col gap-20 items-center'>
+                <Header />
+                <div
+                  className='flex flex-col gap-20 max-w-5xl
                     p-5 w-full items-center'
-								>
-									<NextError statusCode={0} />
-									{reset !== undefined && (
-										<Button onClick={() => reset()}>Try again</Button>
-									)}
-								</div>
-							</div>
-							<Footer />
-						</main>
-						<Toaster />
-					</AuthProvider>
-				</ThemeProvider>
-			</body>
-		</html>
-	);
+                >
+                  <NextError statusCode={0} />
+                  {reset !== undefined && (
+                    <Button onClick={() => reset()}>Try again</Button>
+                  )}
+                </div>
+              </div>
+              <Footer />
+            </main>
+            <Toaster />
+          </AuthProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
 };
 
 export default GlobalError;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index e3542a7..5384ec9 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,451 +3,421 @@ import '@/styles/globals.css';
 import { Geist } from 'next/font/google';
 import { cn } from '@/lib/utils';
 import {
-	AuthProvider,
-	ThemeProvider,
-	TVModeProvider,
+  AuthProvider,
+  ThemeProvider,
+  TVModeProvider,
 } from '@/components/context';
-import Navigation from '@/components/default/navigation';
+import PlausibleProvider from 'next-plausible';
+import Header from '@/components/default/header';
 import Footer from '@/components/default/footer';
 import { Toaster } from '@/components/ui';
 import * as Sentry from '@sentry/nextjs';
 
 export const generateMetadata = (): Metadata => {
-	return {
-		title: {
-			template: '%s | Tech Tracker',
-			default: 'Tech Tracker',
-		},
-		description: 'Created by Gib with Next.js & Supabase!',
-		applicationName: 'Tech Tracker',
-		keywords:
-			'Tech Tracker, City of Gulfport, Information Technology, T3 Template, ' +
-			'Next.js, Supabase, Tailwind, TypeScript, React, T3, Gib',
-		authors: [{ name: 'Gib', url: 'https://gbrown.org' }],
-		creator: 'Gib Brown',
-		publisher: 'Gib Brown',
-		formatDetection: {
-			email: false,
-			address: false,
-			telephone: false,
-		},
-		robots: {
-			index: true,
-			follow: true,
-			nocache: false,
-			googleBot: {
-				index: true,
-				follow: true,
-				noimageindex: false,
-				'max-video-preview': -1,
-				'max-image-preview': 'large',
-				'max-snippet': -1,
+  return {
+    title: {
+      template: '%s | Tech Tracker',
+      default: 'Tech Tracker',
+    },
+    description:
+      'App used by COG IT employees to \
+			update their status throughout the day.',
+    applicationName: 'Tech Tracker',
+    keywords:
+      'Tech Tracker, City of Gulfport, Information Technology, T3 Template, ' +
+      'Next.js, Supabase, Tailwind, TypeScript, React, T3, Gib',
+    authors: [{ name: 'Gib', url: 'https://gbrown.org' }],
+    creator: 'Gib Brown',
+    publisher: 'Gib Brown',
+    formatDetection: {
+      email: false,
+      address: false,
+      telephone: false,
+    },
+    robots: {
+      index: true,
+      follow: true,
+      nocache: false,
+      googleBot: {
+        index: true,
+        follow: true,
+        noimageindex: false,
+        'max-video-preview': -1,
+        'max-image-preview': 'large',
+        'max-snippet': -1,
+      },
+    },
+    icons: {
+      icon: [
+        { url: '/favicon.ico', type: 'image/x-icon', sizes: 'any' },
+        {
+          url: '/favicon-16x16.png',
+          type: 'image/png',
+          sizes: '16x16',
+        },
+        {
+          url: '/favicon-32x32.png',
+          type: 'image/png',
+          sizes: '32x32',
+        },
+        { url: '/favicon.png', type: 'image/png', sizes: '96x96' },
+        {
+          url: '/favicon.ico',
+          type: 'image/x-icon',
+          sizes: 'any',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: '/favicon-16x16.png',
+          type: 'image/png',
+          sizes: '16x16',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: '/favicon-32x32.png',
+          type: 'image/png',
+          sizes: '32x32',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: '/favicon-96x96.png',
+          type: 'image/png',
+          sizes: '96x96',
+          media: '(prefers-color-scheme: dark)',
+        },
+
+        {
+          url: '/appicon/icon-36x36.png',
+          type: 'image/png',
+          sizes: '36x36',
+        },
+        {
+          url: '/appicon/icon-48x48.png',
+          type: 'image/png',
+          sizes: '48x48',
+        },
+        {
+          url: '/appicon/icon-72x72.png',
+          type: 'image/png',
+          sizes: '72x72',
+        },
+        {
+          url: '/appicon/icon-96x96.png',
+          type: 'image/png',
+          sizes: '96x96',
+        },
+        {
+          url: '/appicon/icon-144x144.png',
+          type: 'image/png',
+          sizes: '144x144',
+        },
+        {
+          url: '/appicon/icon.png',
+          type: 'image/png',
+          sizes: '192x192',
+        },
+        {
+          url: '/appicon/icon-36x36.png',
+          type: 'image/png',
+          sizes: '36x36',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: '/appicon/icon-48x48.png',
+          type: 'image/png',
+          sizes: '48x48',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: '/appicon/icon-72x72.png',
+          type: 'image/png',
+          sizes: '72x72',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: '/appicon/icon-96x96.png',
+          type: 'image/png',
+          sizes: '96x96',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: '/appicon/icon-144x144.png',
+          type: 'image/png',
+          sizes: '144x144',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: '/appicon/icon.png',
+          type: 'image/png',
+          sizes: '192x192',
+          media: '(prefers-color-scheme: dark)',
+        },
+      ],
+      shortcut: [
+        {
+          url: '/appicon/icon-36x36.png',
+          type: 'image/png',
+          sizes: '36x36',
+        },
+        {
+          url: '/appicon/icon-48x48.png',
+          type: 'image/png',
+          sizes: '48x48',
+        },
+        {
+          url: '/appicon/icon-72x72.png',
+          type: 'image/png',
+          sizes: '72x72',
+        },
+        {
+          url: '/appicon/icon-96x96.png',
+          type: 'image/png',
+          sizes: '96x96',
+        },
+        {
+          url: '/appicon/icon-144x144.png',
+          type: 'image/png',
+          sizes: '144x144',
+        },
+        {
+          url: '/appicon/icon.png',
+          type: 'image/png',
+          sizes: '192x192',
+        },
+        {
+          url: '/appicon/icon-36x36.png',
+          type: 'image/png',
+          sizes: '36x36',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: '/appicon/icon-48x48.png',
+          type: 'image/png',
+          sizes: '48x48',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: '/appicon/icon-72x72.png',
+          type: 'image/png',
+          sizes: '72x72',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: '/appicon/icon-96x96.png',
+          type: 'image/png',
+          sizes: '96x96',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: '/appicon/icon-144x144.png',
+          type: 'image/png',
+          sizes: '144x144',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: '/appicon/icon.png',
+          type: 'image/png',
+          sizes: '192x192',
+          media: '(prefers-color-scheme: dark)',
+        },
+      ],
+      apple: [
+        {
+          url: 'appicon/icon-57x57.png',
+          type: 'image/png',
+          sizes: '57x57',
+        },
+        {
+          url: 'appicon/icon-60x60.png',
+          type: 'image/png',
+          sizes: '60x60',
+        },
+        {
+          url: 'appicon/icon-72x72.png',
+          type: 'image/png',
+          sizes: '72x72',
+        },
+        {
+          url: 'appicon/icon-76x76.png',
+          type: 'image/png',
+          sizes: '76x76',
+        },
+        {
+          url: 'appicon/icon-114x114.png',
+          type: 'image/png',
+          sizes: '114x114',
+        },
+        {
+          url: 'appicon/icon-120x120.png',
+          type: 'image/png',
+          sizes: '120x120',
+        },
+        {
+          url: 'appicon/icon-144x144.png',
+          type: 'image/png',
+          sizes: '144x144',
+        },
+        {
+          url: 'appicon/icon-152x152.png',
+          type: 'image/png',
+          sizes: '152x152',
+        },
+        {
+          url: 'appicon/icon-180x180.png',
+          type: 'image/png',
+          sizes: '180x180',
+        },
+        {
+          url: 'appicon/icon.png',
+          type: 'image/png',
+          sizes: '192x192',
+        },
+        {
+          url: 'appicon/icon-57x57.png',
+          type: 'image/png',
+          sizes: '57x57',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: 'appicon/icon-60x60.png',
+          type: 'image/png',
+          sizes: '60x60',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: 'appicon/icon-72x72.png',
+          type: 'image/png',
+          sizes: '72x72',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: 'appicon/icon-76x76.png',
+          type: 'image/png',
+          sizes: '76x76',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: 'appicon/icon-114x114.png',
+          type: 'image/png',
+          sizes: '114x114',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: 'appicon/icon-120x120.png',
+          type: 'image/png',
+          sizes: '120x120',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: 'appicon/icon-144x144.png',
+          type: 'image/png',
+          sizes: '144x144',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: 'appicon/icon-152x152.png',
+          type: 'image/png',
+          sizes: '152x152',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: 'appicon/icon-180x180.png',
+          type: 'image/png',
+          sizes: '180x180',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: 'appicon/icon.png',
+          type: 'image/png',
+          sizes: '192x192',
+          media: '(prefers-color-scheme: dark)',
+        },
+      ],
+      other: [
+        {
+          rel: 'apple-touch-icon-precomposed',
+          url: '/appicon/icon-precomposed.png',
+          type: 'image/png',
+          sizes: '180x180',
+        },
+      ],
+    },
+    other: {
+      ...Sentry.getTraceData(),
+    },
+    appleWebApp: {
+      title: 'Tech Tracker',
+      statusBarStyle: 'black-translucent',
+      startupImage: [
+        '/icons/apple/splash-768x1004.png',
+        {
+          url: '/icons/apple/splash-1536x2008.png',
+          media: '(device-width: 768px) and (device-height: 1024px)',
+        },
+      ],
+    },
+    verification: {
+      google: 'google',
+      yandex: 'yandex',
+      yahoo: 'yahoo',
+    },
+    category: 'technology',
+    /*
+		appLinks: {
+			ios: {
+				url: 'https://techtracker.gbrown.org/ios',
+				app_store_id: 'com.gbrown.techtracker',
+			},
+			android: {
+				package: 'https://techtracker.gbrown.org/android',
+				app_name: 'app_t3_template',
+			},
+			web: {
+				url: 'https://techtracker.gbrown.org',
+				should_fallback: true,
 			},
 		},
-		icons: {
-			icon: [
-				{ url: '/favicon.ico', type: 'image/x-icon', sizes: 'any' },
-				{
-					url: '/favicon-16x16.png',
-					type: 'image/png',
-					sizes: '16x16',
-				},
-				{
-					url: '/favicon-32x32.png',
-					type: 'image/png',
-					sizes: '32x32',
-				},
-				{ url: '/favicon.png', type: 'image/png', sizes: '96x96' },
-				{
-					url: '/favicon.ico',
-					type: 'image/x-icon',
-					sizes: 'any',
-					media: '(prefers-color-scheme: dark)',
-				},
-				{
-					url: '/favicon-16x16.png',
-					type: 'image/png',
-					sizes: '16x16',
-					media: '(prefers-color-scheme: dark)',
-				},
-				{
-					url: '/favicon-32x32.png',
-					type: 'image/png',
-					sizes: '32x32',
-					media: '(prefers-color-scheme: dark)',
-				},
-				{
-					url: '/favicon-96x96.png',
-					type: 'image/png',
-					sizes: '96x96',
-					media: '(prefers-color-scheme: dark)',
-				},
-
-				{
-					url: '/appicon/icon-36x36.png',
-					type: 'image/png',
-					sizes: '36x36',
-				},
-				{
-					url: '/appicon/icon-48x48.png',
-					type: 'image/png',
-					sizes: '48x48',
-				},
-				{
-					url: '/appicon/icon-72x72.png',
-					type: 'image/png',
-					sizes: '72x72',
-				},
-				{
-					url: '/appicon/icon-96x96.png',
-					type: 'image/png',
-					sizes: '96x96',
-				},
-				{
-					url: '/appicon/icon-144x144.png',
-					type: 'image/png',
-					sizes: '144x144',
-				},
-				{
-					url: '/appicon/icon.png',
-					type: 'image/png',
-					sizes: '192x192',
-				},
-				{
-					url: '/appicon/icon-36x36.png',
-					type: 'image/png',
-					sizes: '36x36',
-					media: '(prefers-color-scheme: dark)',
-				},
-				{
-					url: '/appicon/icon-48x48.png',
-					type: 'image/png',
-					sizes: '48x48',
-					media: '(prefers-color-scheme: dark)',
-				},
-				{
-					url: '/appicon/icon-72x72.png',
-					type: 'image/png',
-					sizes: '72x72',
-					media: '(prefers-color-scheme: dark)',
-				},
-				{
-					url: '/appicon/icon-96x96.png',
-					type: 'image/png',
-					sizes: '96x96',
-					media: '(prefers-color-scheme: dark)',
-				},
-				{
-					url: '/appicon/icon-144x144.png',
-					type: 'image/png',
-					sizes: '144x144',
-					media: '(prefers-color-scheme: dark)',
-				},
-				{
-					url: '/appicon/icon.png',
-					type: 'image/png',
-					sizes: '192x192',
-					media: '(prefers-color-scheme: dark)',
-				},
-			],
-			shortcut: [
-				{
-					url: '/appicon/icon-36x36.png',
-					type: 'image/png',
-					sizes: '36x36',
-				},
-				{
-					url: '/appicon/icon-48x48.png',
-					type: 'image/png',
-					sizes: '48x48',
-				},
-				{
-					url: '/appicon/icon-72x72.png',
-					type: 'image/png',
-					sizes: '72x72',
-				},
-				{
-					url: '/appicon/icon-96x96.png',
-					type: 'image/png',
-					sizes: '96x96',
-				},
-				{
-					url: '/appicon/icon-144x144.png',
-					type: 'image/png',
-					sizes: '144x144',
-				},
-				{
-					url: '/appicon/icon.png',
-					type: 'image/png',
-					sizes: '192x192',
-				},
-				{
-					url: '/appicon/icon-36x36.png',
-					type: 'image/png',
-					sizes: '36x36',
-					media: '(prefers-color-scheme: dark)',
-				},
-				{
-					url: '/appicon/icon-48x48.png',
-					type: 'image/png',
-					sizes: '48x48',
-					media: '(prefers-color-scheme: dark)',
-				},
-				{
-					url: '/appicon/icon-72x72.png',
-					type: 'image/png',
-					sizes: '72x72',
-					media: '(prefers-color-scheme: dark)',
-				},
-				{
-					url: '/appicon/icon-96x96.png',
-					type: 'image/png',
-					sizes: '96x96',
-					media: '(prefers-color-scheme: dark)',
-				},
-				{
-					url: '/appicon/icon-144x144.png',
-					type: 'image/png',
-					sizes: '144x144',
-					media: '(prefers-color-scheme: dark)',
-				},
-				{
-					url: '/appicon/icon.png',
-					type: 'image/png',
-					sizes: '192x192',
-					media: '(prefers-color-scheme: dark)',
-				},
-			],
-			apple: [
-				{
-					url: 'appicon/icon-57x57.png',
-					type: 'image/png',
-					sizes: '57x57',
-				},
-				{
-					url: 'appicon/icon-60x60.png',
-					type: 'image/png',
-					sizes: '60x60',
-				},
-				{
-					url: 'appicon/icon-72x72.png',
-					type: 'image/png',
-					sizes: '72x72',
-				},
-				{
-					url: 'appicon/icon-76x76.png',
-					type: 'image/png',
-					sizes: '76x76',
-				},
-				{
-					url: 'appicon/icon-114x114.png',
-					type: 'image/png',
-					sizes: '114x114',
-				},
-				{
-					url: 'appicon/icon-120x120.png',
-					type: 'image/png',
-					sizes: '120x120',
-				},
-				{
-					url: 'appicon/icon-144x144.png',
-					type: 'image/png',
-					sizes: '144x144',
-				},
-				{
-					url: 'appicon/icon-152x152.png',
-					type: 'image/png',
-					sizes: '152x152',
-				},
-				{
-					url: 'appicon/icon-180x180.png',
-					type: 'image/png',
-					sizes: '180x180',
-				},
-				{
-					url: 'appicon/icon.png',
-					type: 'image/png',
-					sizes: '192x192',
-				},
-				{
-					url: 'appicon/icon-57x57.png',
-					type: 'image/png',
-					sizes: '57x57',
-					media: '(prefers-color-scheme: dark)',
-				},
-				{
-					url: 'appicon/icon-60x60.png',
-					type: 'image/png',
-					sizes: '60x60',
-					media: '(prefers-color-scheme: dark)',
-				},
-				{
-					url: 'appicon/icon-72x72.png',
-					type: 'image/png',
-					sizes: '72x72',
-					media: '(prefers-color-scheme: dark)',
-				},
-				{
-					url: 'appicon/icon-76x76.png',
-					type: 'image/png',
-					sizes: '76x76',
-					media: '(prefers-color-scheme: dark)',
-				},
-				{
-					url: 'appicon/icon-114x114.png',
-					type: 'image/png',
-					sizes: '114x114',
-					media: '(prefers-color-scheme: dark)',
-				},
-				{
-					url: 'appicon/icon-120x120.png',
-					type: 'image/png',
-					sizes: '120x120',
-					media: '(prefers-color-scheme: dark)',
-				},
-				{
-					url: 'appicon/icon-144x144.png',
-					type: 'image/png',
-					sizes: '144x144',
-					media: '(prefers-color-scheme: dark)',
-				},
-				{
-					url: 'appicon/icon-152x152.png',
-					type: 'image/png',
-					sizes: '152x152',
-					media: '(prefers-color-scheme: dark)',
-				},
-				{
-					url: 'appicon/icon-180x180.png',
-					type: 'image/png',
-					sizes: '180x180',
-					media: '(prefers-color-scheme: dark)',
-				},
-				{
-					url: 'appicon/icon.png',
-					type: 'image/png',
-					sizes: '192x192',
-					media: '(prefers-color-scheme: dark)',
-				},
-			],
-			other: [
-				{
-					rel: 'apple-touch-icon-precomposed',
-					url: '/appicon/icon-precomposed.png',
-					type: 'image/png',
-					sizes: '180x180',
-				},
-			],
-		},
-		other: {
-			...Sentry.getTraceData(),
-		},
-		//twitter: {
-			//card: 'app',
-			//title: 'Tech Tracker',
-			//description: 'Created by Gib with Next.js & Supabase!',
-			//siteId: '',
-			//creator: '@cs_gib',
-			//creatorId: '',
-			//images: {
-				//url: 'https://git.gbrown.org/gib/T3-Template/raw/main/public/icons/apple/icon.png',
-				//alt: 'Tech Tracker',
-			//},
-			//app: {
-				//name: 'Tech Tracker',
-				//id: {
-					//iphone: '',
-					//ipad: '',
-					//googleplay: '',
-				//},
-				//url: {
-					//iphone: '',
-					//ipad: '',
-					//googleplay: '',
-				//},
-			//},
-		//},
-		//verification: {
-			//google: 'google',
-			//yandex: 'yandex',
-			//yahoo: 'yahoo',
-		//},
-		//itunes: {
-			//appId: '',
-			//appArgument: '',
-		//},
-		//appleWebApp: {
-			//title: 'Tech Tracker',
-			//statusBarStyle: 'black-translucent',
-			//startupImage: [
-				//'/icons/apple/splash-768x1004.png',
-				//{
-					//url: '/icons/apple/splash-1536x2008.png',
-					//media: '(device-width: 768px) and (device-height: 1024px)',
-				//},
-			//],
-		//},
-		//appLinks: {
-			//ios: {
-				//url: 'https://techtracker.gbrown.org/ios',
-				//app_store_id: 'com.gbrown.techtracker',
-			//},
-			//android: {
-				//package: 'https://techtracker.gbrown.org/android',
-				//app_name: 'app_t3_template',
-			//},
-			//web: {
-				//url: 'https://techtracker.gbrown.org',
-				//should_fallback: true,
-			//},
-		//},
-		//facebook: {
-			//appId: '',
-		//},
-		//pinterest: {
-			//richPin: true,
-		//},
-		category: 'technology',
-	};
+		 */
+  };
 };
 
 const geist = Geist({
-	subsets: ['latin'],
-	variable: '--font-geist-sans',
+  subsets: ['latin'],
+  variable: '--font-geist-sans',
 });
 
 const RootLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
-	return (
-		<html lang='en' className={`${geist.variable}`} suppressHydrationWarning>
-			<body
-				className={cn('bg-background text-foreground font-sans antialiased')}
-			>
-				<ThemeProvider
-					attribute='class'
-					defaultTheme='system'
-					enableSystem
-					disableTransitionOnChange
-				>
-					<AuthProvider>
-						<TVModeProvider>
-							<main className='min-h-screen flex flex-col items-center'>
-								<div className='flex-1 w-full flex flex-col gap-20 items-center'>
-									<Navigation />
-									<div
-										className='flex flex-col gap-20 max-w-5xl
-                      p-5 w-full items-center'
-									>
-										{children}
-									</div>
-								</div>
-								<Footer />
-							</main>
-							<Toaster />
-						</TVModeProvider>
-					</AuthProvider>
-				</ThemeProvider>
-			</body>
-		</html>
-	);
+  return (
+    <html lang='en' className={`${geist.variable}`} suppressHydrationWarning>
+      <body
+        className={cn('bg-background text-foreground font-sans antialiased')}
+      >
+        <ThemeProvider
+          attribute='class'
+          defaultTheme='system'
+          enableSystem
+          disableTransitionOnChange
+        >
+          <AuthProvider>
+            <PlausibleProvider
+              domain='techtracker.gbrown.org'
+              customDomain='https://plausible.gbrown.org'
+              trackOutboundLinks={true}
+              selfHosted={true}
+            >
+              <TVModeProvider>
+                <div className='min-h-screen'>
+                  <Header />
+                  {children}
+                  <Toaster />
+                </div>
+                <Footer />
+              </TVModeProvider>
+            </PlausibleProvider>
+          </AuthProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
 };
 export default RootLayout;
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5d4d1fd..6ad8201 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,96 +1,15 @@
 'use server';
 
-import { FetchDataSteps } from '@/components/default/tutorial';
-import { InfoIcon } from 'lucide-react';
 import { getUser } from '@/lib/actions';
 import type { User } from '@/utils/supabase';
-import { TestSentryCard } from '@/components/default/sentry';
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-	Separator,
-} from '@/components/ui';
-import {
-	SignInSignUp,
-	SignInWithApple,
-	SignInWithMicrosoft,
-} from '@/components/default/auth';
+import { redirect } from 'next/navigation';
 
 const HomePage = async () => {
-	const response = await getUser();
-	if (!response.success || !response.data) {
-		return (
-			<main className='w-full items-center justify-center'>
-				<div className='flex flex-col p-5 items-center justify-center space-y-6'>
-					<Card className='md:min-w-2xl'>
-						<CardHeader className='flex flex-col items-center'>
-							<CardTitle className='text-3xl'>
-								Welcome to the T3 Supabase Template!
-							</CardTitle>
-							<CardDescription className='text-[1.0rem] mb-2'>
-								A great place to start is by creating a new user account &
-								ensuring you can sign up! If you already have an account, go
-								ahead and sign in!
-							</CardDescription>
-							<SignInSignUp
-								className='flex gap-4 w-full justify-center'
-								signInSize='xl'
-								signUpSize='xl'
-							/>
-							<div className='flex items-center w-full gap-4'>
-								<Separator className='flex-1 bg-accent py-0.5' />
-								<span className='text-sm text-muted-foreground'>or</span>
-								<Separator className='flex-1 bg-accent py-0.5' />
-							</div>
-							<div className='flex gap-4'>
-								<SignInWithMicrosoft buttonSize='lg' />
-								<SignInWithApple buttonSize='lg' />
-							</div>
-						</CardHeader>
-						<Separator className='bg-accent' />
-						<CardContent className='flex flex-col px-5 py-2 items-center justify-center'>
-							<CardTitle className='text-lg mb-6 w-2/3 text-center'>
-								You can also test out your connection to Sentry if you want to
-								start there!
-							</CardTitle>
-							<TestSentryCard />
-						</CardContent>
-					</Card>
-				</div>
-			</main>
-		);
-	}
-	const user: User = response.data;
-	return (
-		<div className='flex-1 w-full flex flex-col gap-12'>
-			<div className='w-full'>
-				<div
-					className='bg-accent text-sm p-3 px-5
-						rounded-md text-foreground flex gap-3 items-center'
-				>
-					<InfoIcon size='16' strokeWidth={2} />
-					This is a protected component that you can only see as an
-					authenticated user
-				</div>
-			</div>
-			<div className='flex flex-col gap-2 items-start'>
-				<h2 className='font-bold text-3xl mb-4'>Your user details</h2>
-				<pre
-					className='text-sm font-mono p-3 rounded
-						border max-h-50 overflow-auto'
-				>
-					{JSON.stringify(user, null, 2)}
-				</pre>
-			</div>
-			<TestSentryCard />
-			<div>
-				<h2 className='font-bold text-2xl mb-4'>Next steps</h2>
-				<FetchDataSteps />
-			</div>
-		</div>
-	);
+  const response = await getUser();
+  if (!response.success || !response.data) {
+    redirect('/sign-in');
+  }
+  const user: User = response.data;
+  return <NoSession />;
 };
 export default HomePage;
diff --git a/src/components/context/Auth.tsx b/src/components/context/Auth.tsx
index 7d975bd..f76062a 100644
--- a/src/components/context/Auth.tsx
+++ b/src/components/context/Auth.tsx
@@ -1,195 +1,195 @@
 'use client';
 import React, {
-	type ReactNode,
-	createContext,
-	useCallback,
-	useContext,
-	useEffect,
-	useRef,
-	useState,
+  type ReactNode,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
 } from 'react';
 import {
-	getProfile,
-	getSignedUrl,
-	getUser,
-	updateProfile as updateProfileAction,
+  getProfile,
+  getSignedUrl,
+  getUser,
+  updateProfile as updateProfileAction,
 } from '@/lib/hooks';
 import { type User, type Profile, createClient } from '@/utils/supabase';
 import { toast } from 'sonner';
 
 type AuthContextType = {
-	user: User | null;
-	profile: Profile | null;
-	avatarUrl: string | null;
-	isLoading: boolean;
-	isAuthenticated: boolean;
-	updateProfile: (data: {
-		full_name?: string;
-		email?: string;
-		avatar_url?: string;
-	}) => Promise<{ success: boolean; data?: Profile; error?: unknown }>;
-	refreshUserData: () => Promise<void>;
+  user: User | null;
+  profile: Profile | null;
+  avatarUrl: string | null;
+  isLoading: boolean;
+  isAuthenticated: boolean;
+  updateProfile: (data: {
+    full_name?: string;
+    email?: string;
+    avatar_url?: string;
+  }) => Promise<{ success: boolean; data?: Profile; error?: unknown }>;
+  refreshUserData: () => Promise<void>;
 };
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
 
 export const AuthProvider = ({ children }: { children: ReactNode }) => {
-	const [user, setUser] = useState<User | null>(null);
-	const [profile, setProfile] = useState<Profile | null>(null);
-	const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
-	const [isLoading, setIsLoading] = useState(true);
-	const [isInitialized, setIsInitialized] = useState(false);
-	const fetchingRef = useRef(false);
+  const [user, setUser] = useState<User | null>(null);
+  const [profile, setProfile] = useState<Profile | null>(null);
+  const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isInitialized, setIsInitialized] = useState(false);
+  const fetchingRef = useRef(false);
 
-	const fetchUserData = useCallback(
-		async (showLoading = true) => {
-			if (fetchingRef.current) return;
-			fetchingRef.current = true;
+  const fetchUserData = useCallback(
+    async (showLoading = true) => {
+      if (fetchingRef.current) return;
+      fetchingRef.current = true;
 
-			try {
-				// Only show loading for initial load or manual refresh
-				if (showLoading) {
-					setIsLoading(true);
-				}
+      try {
+        // Only show loading for initial load or manual refresh
+        if (showLoading) {
+          setIsLoading(true);
+        }
 
-				const userResponse = await getUser();
-				const profileResponse = await getProfile();
+        const userResponse = await getUser();
+        const profileResponse = await getProfile();
 
-				if (!userResponse.success || !profileResponse.success) {
-					setUser(null);
-					setProfile(null);
-					setAvatarUrl(null);
-					return;
-				}
+        if (!userResponse.success || !profileResponse.success) {
+          setUser(null);
+          setProfile(null);
+          setAvatarUrl(null);
+          return;
+        }
 
-				setUser(userResponse.data);
-				setProfile(profileResponse.data);
+        setUser(userResponse.data);
+        setProfile(profileResponse.data);
 
-				// Get avatar URL if available
-				if (profileResponse.data.avatar_url) {
-					const avatarResponse = await getSignedUrl({
-						bucket: 'avatars',
-						url: profileResponse.data.avatar_url,
-					});
-					if (avatarResponse.success) {
-						setAvatarUrl(avatarResponse.data);
-					} else {
-						setAvatarUrl(null);
-					}
-				} else {
-					setAvatarUrl(null);
-				}
-			} catch (error) {
-				console.error(
-					'Auth fetch error: ',
-					error instanceof Error
-						? `${error.message}`
-						: 'Failed to load user data!',
-				);
-				if (!isInitialized) {
-					toast.error('Failed to load user data!');
-				}
-			} finally {
-				if (showLoading) {
-					setIsLoading(false);
-				}
-				setIsInitialized(true);
-				fetchingRef.current = false;
-			}
-		},
-		[isInitialized],
-	);
+        // Get avatar URL if available
+        if (profileResponse.data.avatar_url) {
+          const avatarResponse = await getSignedUrl({
+            bucket: 'avatars',
+            url: profileResponse.data.avatar_url,
+          });
+          if (avatarResponse.success) {
+            setAvatarUrl(avatarResponse.data);
+          } else {
+            setAvatarUrl(null);
+          }
+        } else {
+          setAvatarUrl(null);
+        }
+      } catch (error) {
+        console.error(
+          'Auth fetch error: ',
+          error instanceof Error
+            ? `${error.message}`
+            : 'Failed to load user data!',
+        );
+        if (!isInitialized) {
+          toast.error('Failed to load user data!');
+        }
+      } finally {
+        if (showLoading) {
+          setIsLoading(false);
+        }
+        setIsInitialized(true);
+        fetchingRef.current = false;
+      }
+    },
+    [isInitialized],
+  );
 
-	useEffect(() => {
-		const supabase = createClient();
+  useEffect(() => {
+    const supabase = createClient();
 
-		// Initial fetch with loading
-		fetchUserData(true).catch((error) => {
-			console.error('💥 Initial fetch error:', error);
-		});
+    // Initial fetch with loading
+    fetchUserData(true).catch((error) => {
+      console.error('💥 Initial fetch error:', error);
+    });
 
-		const {
-			data: { subscription },
-		} = supabase.auth.onAuthStateChange(async (event, _session) => {
-			console.log('Auth state change:', event); // Debug log
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange(async (event, _session) => {
+      console.log('Auth state change:', event); // Debug log
 
-			if (event === 'SIGNED_IN') {
-				// Background refresh without loading state
-				await fetchUserData(false);
-			} else if (event === 'SIGNED_OUT') {
-				setUser(null);
-				setProfile(null);
-				setAvatarUrl(null);
-				setIsLoading(false);
-			} else if (event === 'TOKEN_REFRESHED') {
-				// Silent refresh - don't show loading
-				await fetchUserData(false);
-			}
-		});
+      if (event === 'SIGNED_IN') {
+        // Background refresh without loading state
+        await fetchUserData(false);
+      } else if (event === 'SIGNED_OUT') {
+        setUser(null);
+        setProfile(null);
+        setAvatarUrl(null);
+        setIsLoading(false);
+      } else if (event === 'TOKEN_REFRESHED') {
+        // Silent refresh - don't show loading
+        await fetchUserData(false);
+      }
+    });
 
-		return () => {
-			subscription.unsubscribe();
-		};
-	}, [fetchUserData]);
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [fetchUserData]);
 
-	const updateProfile = useCallback(
-		async (data: {
-			full_name?: string;
-			email?: string;
-			avatar_url?: string;
-		}) => {
-			try {
-				const result = await updateProfileAction(data);
-				if (!result.success) {
-					throw new Error(result.error ?? 'Failed to update profile');
-				}
-				setProfile(result.data);
+  const updateProfile = useCallback(
+    async (data: {
+      full_name?: string;
+      email?: string;
+      avatar_url?: string;
+    }) => {
+      try {
+        const result = await updateProfileAction(data);
+        if (!result.success) {
+          throw new Error(result.error ?? 'Failed to update profile');
+        }
+        setProfile(result.data);
 
-				// If avatar was updated, refresh the avatar URL
-				if (data.avatar_url && result.data.avatar_url) {
-					const avatarResponse = await getSignedUrl({
-						bucket: 'avatars',
-						url: result.data.avatar_url,
-						transform: { width: 128, height: 128 },
-					});
-					if (avatarResponse.success) {
-						setAvatarUrl(avatarResponse.data);
-					}
-				}
-				toast.success('Profile updated successfully!');
-				return { success: true, data: result.data };
-			} catch (error) {
-				console.error('Error updating profile:', error);
-				toast.error(
-					error instanceof Error ? error.message : 'Failed to update profile',
-				);
-				return { success: false, error };
-			}
-		},
-		[],
-	);
+        // If avatar was updated, refresh the avatar URL
+        if (data.avatar_url && result.data.avatar_url) {
+          const avatarResponse = await getSignedUrl({
+            bucket: 'avatars',
+            url: result.data.avatar_url,
+            transform: { width: 128, height: 128 },
+          });
+          if (avatarResponse.success) {
+            setAvatarUrl(avatarResponse.data);
+          }
+        }
+        toast.success('Profile updated successfully!');
+        return { success: true, data: result.data };
+      } catch (error) {
+        console.error('Error updating profile:', error);
+        toast.error(
+          error instanceof Error ? error.message : 'Failed to update profile',
+        );
+        return { success: false, error };
+      }
+    },
+    [],
+  );
 
-	const refreshUserData = useCallback(async () => {
-		await fetchUserData(true); // Manual refresh shows loading
-	}, [fetchUserData]);
+  const refreshUserData = useCallback(async () => {
+    await fetchUserData(true); // Manual refresh shows loading
+  }, [fetchUserData]);
 
-	const value = {
-		user,
-		profile,
-		avatarUrl,
-		isLoading,
-		isAuthenticated: !!user,
-		updateProfile,
-		refreshUserData,
-	};
+  const value = {
+    user,
+    profile,
+    avatarUrl,
+    isLoading,
+    isAuthenticated: !!user,
+    updateProfile,
+    refreshUserData,
+  };
 
-	return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 };
 
 export const useAuth = () => {
-	const context = useContext(AuthContext);
-	if (context === undefined) {
-		throw new Error('useAuth must be used within an AuthProvider');
-	}
-	return context;
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
 };
diff --git a/src/components/context/TVMode.tsx b/src/components/context/TVMode.tsx
index 8ae4dfa..d5f19a6 100644
--- a/src/components/context/TVMode.tsx
+++ b/src/components/context/TVMode.tsx
@@ -8,72 +8,72 @@ import { type ComponentProps } from 'react';
 import { type VariantProps } from 'class-variance-authority';
 
 type TVModeContextProps = {
-	tvMode: boolean;
-	toggleTVMode: () => void;
+  tvMode: boolean;
+  toggleTVMode: () => void;
 };
 
 type TVToggleProps = {
-	className?: ComponentProps<'button'>['className'];
-	buttonSize?: VariantProps<typeof buttonVariants>['size'];
-	buttonVariant?: VariantProps<typeof buttonVariants>['variant'];
-	imageWidth?: number;
-	imageHeight?: number;
+  className?: ComponentProps<'button'>['className'];
+  buttonSize?: VariantProps<typeof buttonVariants>['size'];
+  buttonVariant?: VariantProps<typeof buttonVariants>['variant'];
+  imageWidth?: number;
+  imageHeight?: number;
 };
 
 const TVModeContext = createContext<TVModeContextProps | undefined>(undefined);
 
 export const TVModeProvider = ({ children }: { children: ReactNode }) => {
-	const [tvMode, setTVMode] = useState(false);
-	const toggleTVMode = () => {
-		setTVMode((prev) => !prev);
-	};
-	return (
-		<TVModeContext.Provider value={{ tvMode, toggleTVMode }}>
-			{children}
-		</TVModeContext.Provider>
-	);
+  const [tvMode, setTVMode] = useState(false);
+  const toggleTVMode = () => {
+    setTVMode((prev) => !prev);
+  };
+  return (
+    <TVModeContext.Provider value={{ tvMode, toggleTVMode }}>
+      {children}
+    </TVModeContext.Provider>
+  );
 };
 
 export const useTVMode = () => {
-	const context = useContext(TVModeContext);
-	if (!context) {
-		throw new Error('useTVMode must be used within a TVModeProvider');
-	}
-	return context;
+  const context = useContext(TVModeContext);
+  if (!context) {
+    throw new Error('useTVMode must be used within a TVModeProvider');
+  }
+  return context;
 };
 
 export const TVToggle = ({
-	className = 'my-auto cursor-pointer',
-	buttonSize = 'default',
-	buttonVariant = 'link',
-	imageWidth = 25,
-	imageHeight = 25,
+  className = 'my-auto cursor-pointer',
+  buttonSize = 'default',
+  buttonVariant = 'link',
+  imageWidth = 25,
+  imageHeight = 25,
 }: TVToggleProps) => {
-	const { tvMode, toggleTVMode } = useTVMode();
-	const { isAuthenticated } = useAuth();
-	if (!isAuthenticated) return <div />;
-	return (
-		<Button
-			onClick={toggleTVMode}
-			className={className}
-			size={buttonSize}
-			variant={buttonVariant}
-		>
-			{tvMode ? (
-				<Image
-					src='/icons/tv/exit.svg'
-					alt='Exit TV Mode'
-					width={imageWidth}
-					height={imageHeight}
-				/>
-			) : (
-				<Image
-					src='/icons/tv/enter.svg'
-					alt='Exit TV Mode'
-					width={imageWidth}
-					height={imageHeight}
-				/>
-			)}
-		</Button>
-	);
+  const { tvMode, toggleTVMode } = useTVMode();
+  const { isAuthenticated } = useAuth();
+  if (!isAuthenticated) return <div />;
+  return (
+    <Button
+      onClick={toggleTVMode}
+      className={className}
+      size={buttonSize}
+      variant={buttonVariant}
+    >
+      {tvMode ? (
+        <Image
+          src='/icons/tv/exit.svg'
+          alt='Exit TV Mode'
+          width={imageWidth}
+          height={imageHeight}
+        />
+      ) : (
+        <Image
+          src='/icons/tv/enter.svg'
+          alt='Exit TV Mode'
+          width={imageWidth}
+          height={imageHeight}
+        />
+      )}
+    </Button>
+  );
 };
diff --git a/src/components/context/Theme.tsx b/src/components/context/Theme.tsx
index 143d05a..a54995e 100644
--- a/src/components/context/Theme.tsx
+++ b/src/components/context/Theme.tsx
@@ -6,62 +6,62 @@ import { useTheme } from 'next-themes';
 import { Button } from '@/components/ui';
 
 export const ThemeProvider = ({
-	children,
-	...props
+  children,
+  ...props
 }: React.ComponentProps<typeof NextThemesProvider>) => {
-	const [mounted, setMounted] = React.useState(false);
+  const [mounted, setMounted] = React.useState(false);
 
-	React.useEffect(() => {
-		setMounted(true);
-	}, []);
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
 
-	if (!mounted) return null;
+  if (!mounted) return null;
 
-	return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 };
 
 type ThemeToggleProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-	size?: number;
+  size?: number;
 };
 
 export const ThemeToggle = ({ size = 1, ...props }: ThemeToggleProps) => {
-	const { setTheme, resolvedTheme } = useTheme();
-	const [mounted, setMounted] = React.useState(false);
+  const { setTheme, resolvedTheme } = useTheme();
+  const [mounted, setMounted] = React.useState(false);
 
-	React.useEffect(() => {
-		setMounted(true);
-	}, []);
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
 
-	if (!mounted) {
-		return (
-			<Button variant='outline' size='icon' {...props}>
-				<span style={{ height: `${size}rem`, width: `${size}rem` }} />
-			</Button>
-		);
-	}
+  if (!mounted) {
+    return (
+      <Button variant='outline' size='icon' {...props}>
+        <span style={{ height: `${size}rem`, width: `${size}rem` }} />
+      </Button>
+    );
+  }
 
-	const toggleTheme = () => {
-		if (resolvedTheme === 'dark') setTheme('light');
-		else setTheme('dark');
-	};
+  const toggleTheme = () => {
+    if (resolvedTheme === 'dark') setTheme('light');
+    else setTheme('dark');
+  };
 
-	return (
-		<Button
-			variant='outline'
-			size='icon'
-			className='cursor-pointer'
-			onClick={toggleTheme}
-			{...props}
-		>
-			<Sun
-				style={{ height: `${size}rem`, width: `${size}rem` }}
-				className='rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0'
-			/>
-			<Moon
-				style={{ height: `${size}rem`, width: `${size}rem` }}
-				className='absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100'
-			/>
-			<span className='sr-only'>Toggle theme</span>
-		</Button>
-	);
+  return (
+    <Button
+      variant='outline'
+      size='icon'
+      className='cursor-pointer'
+      onClick={toggleTheme}
+      {...props}
+    >
+      <Sun
+        style={{ height: `${size}rem`, width: `${size}rem` }}
+        className='rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0'
+      />
+      <Moon
+        style={{ height: `${size}rem`, width: `${size}rem` }}
+        className='absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100'
+      />
+      <span className='sr-only'>Toggle theme</span>
+    </Button>
+  );
 };
diff --git a/src/components/default/StatusMessage.tsx b/src/components/default/StatusMessage.tsx
index 62cc3ec..9dde835 100644
--- a/src/components/default/StatusMessage.tsx
+++ b/src/components/default/StatusMessage.tsx
@@ -1,25 +1,25 @@
 export type Message =
-	| { success: string }
-	| { error: string }
-	| { message: string };
+  | { success: string }
+  | { error: string }
+  | { message: string };
 
 export const StatusMessage = ({ message }: { message: Message }) => {
-	return (
-		<div
-			className='flex flex-col gap-2 w-full max-w-md
+  return (
+    <div
+      className='flex flex-col gap-2 w-full max-w-md
         text-sm bg-accent rounded-md p-2 px-4'
-		>
-			{'success' in message && (
-				<div className='dark:text-green-500 text-green-700'>
-					{message.success}
-				</div>
-			)}
-			{'error' in message && (
-				<div className='text-destructive'>{message.error}</div>
-			)}
-			{'message' in message && (
-				<div className='text-foreground'>{message.message}</div>
-			)}
-		</div>
-	);
+    >
+      {'success' in message && (
+        <div className='dark:text-green-500 text-green-700'>
+          {message.success}
+        </div>
+      )}
+      {'error' in message && (
+        <div className='text-destructive'>{message.error}</div>
+      )}
+      {'message' in message && (
+        <div className='text-foreground'>{message.message}</div>
+      )}
+    </div>
+  );
 };
diff --git a/src/components/default/SubmitButton.tsx b/src/components/default/SubmitButton.tsx
index 20cef64..cf124b5 100644
--- a/src/components/default/SubmitButton.tsx
+++ b/src/components/default/SubmitButton.tsx
@@ -6,34 +6,34 @@ import { useFormStatus } from 'react-dom';
 import { Loader2 } from 'lucide-react';
 
 type Props = ComponentProps<typeof Button> & {
-	disabled?: boolean;
-	pendingText?: string;
+  disabled?: boolean;
+  pendingText?: string;
 };
 
 export const SubmitButton = ({
-	children,
-	disabled = false,
-	pendingText = 'Submitting...',
-	...props
+  children,
+  disabled = false,
+  pendingText = 'Submitting...',
+  ...props
 }: Props) => {
-	const { pending } = useFormStatus();
+  const { pending } = useFormStatus();
 
-	return (
-		<Button
-			className='cursor-pointer'
-			type='submit'
-			aria-disabled={pending}
-			disabled={disabled}
-			{...props}
-		>
-			{pending || disabled ? (
-				<>
-					<Loader2 className='mr-2 h-4 w-4 animate-spin' />
-					{pendingText}
-				</>
-			) : (
-				children
-			)}
-		</Button>
-	);
+  return (
+    <Button
+      className='cursor-pointer'
+      type='submit'
+      aria-disabled={pending}
+      disabled={disabled}
+      {...props}
+    >
+      {pending || disabled ? (
+        <>
+          <Loader2 className='mr-2 h-4 w-4 animate-spin' />
+          {pendingText}
+        </>
+      ) : (
+        children
+      )}
+    </Button>
+  );
 };
diff --git a/src/components/default/auth/NoSession.tsx b/src/components/default/auth/NoSession.tsx
new file mode 100644
index 0000000..3631e78
--- /dev/null
+++ b/src/components/default/auth/NoSession.tsx
@@ -0,0 +1,11 @@
+import { SignUpCard } from './cards/SignUp';
+
+export default function NoSession() {
+  return (
+    <div className='w-full mx-auto text-center pt-2 md:pt-10'>
+      <div className='mx-auto flex flex-col items-center justify-center'>
+        <SignUpCard />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/default/auth/SignInSignUp.tsx b/src/components/default/auth/SignInSignUp.tsx
deleted file mode 100644
index 6b88eef..0000000
--- a/src/components/default/auth/SignInSignUp.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import { Button, type buttonVariants } from '@/components/ui';
-import { type ComponentProps } from 'react';
-import { type VariantProps } from 'class-variance-authority';
-
-type SignInSignUpProps = {
-	className?: ComponentProps<'div'>['className'];
-	signInSize?: VariantProps<typeof buttonVariants>['size'];
-	signUpSize?: VariantProps<typeof buttonVariants>['size'];
-	signInVariant?: VariantProps<typeof buttonVariants>['variant'];
-	signUpVariant?: VariantProps<typeof buttonVariants>['variant'];
-};
-
-export const SignInSignUp = ({
-	className = 'flex gap-2',
-	signInSize = 'default',
-	signUpSize = 'sm',
-	signInVariant = 'outline',
-	signUpVariant = 'default',
-}: SignInSignUpProps) => {
-	return (
-		<div className={className}>
-			<Button asChild size={signInSize} variant={signInVariant}>
-				<Link href='/sign-in'>Sign In</Link>
-			</Button>
-			<Button asChild size={signUpSize} variant={signUpVariant}>
-				<Link href='/sign-up'>Sign Up</Link>
-			</Button>
-		</div>
-	);
-};
diff --git a/src/components/default/auth/SignInWithApple.tsx b/src/components/default/auth/SignInWithApple.tsx
deleted file mode 100644
index f06d1b9..0000000
--- a/src/components/default/auth/SignInWithApple.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-'use client';
-import { signInWithApple } from '@/lib/actions';
-import { StatusMessage, SubmitButton } from '@/components/default';
-import { useAuth } from '@/components/context';
-import { useRouter } from 'next/navigation';
-import { useState } from 'react';
-import Image from 'next/image';
-import { type buttonVariants } from '@/components/ui';
-import { type ComponentProps } from 'react';
-import { type VariantProps } from 'class-variance-authority';
-
-type SignInWithAppleProps = {
-	className?: ComponentProps<'div'>['className'];
-	buttonSize?: VariantProps<typeof buttonVariants>['size'];
-	buttonVariant?: VariantProps<typeof buttonVariants>['variant'];
-};
-
-export const SignInWithApple = ({
-	className = 'my-4',
-	buttonSize = 'default',
-	buttonVariant = 'default',
-}: SignInWithAppleProps) => {
-	const router = useRouter();
-	const { isLoading, refreshUserData } = useAuth();
-	const [statusMessage, setStatusMessage] = useState('');
-	const [isSigningIn, setIsSigningIn] = useState(false);
-
-	const handleSignInWithApple = async (e: React.FormEvent) => {
-		e.preventDefault();
-		try {
-			setStatusMessage('');
-			setIsSigningIn(true);
-
-			const result = await signInWithApple();
-
-			if (result?.success && result.data) {
-				// Redirect to Apple OAuth page
-				window.location.href = result.data;
-			} else {
-				setStatusMessage(`Error signing in with Apple!`);
-			}
-		} catch (error) {
-			setStatusMessage(
-				`Error: ${error instanceof Error ? error.message : 'Could not sign in!'}`,
-			);
-		} finally {
-			setIsSigningIn(false);
-			await refreshUserData();
-			router.push('');
-		}
-	};
-
-	return (
-		<form onSubmit={handleSignInWithApple} className={className}>
-			<SubmitButton
-				size={buttonSize}
-				variant={buttonVariant}
-				className='w-full cursor-pointer'
-				disabled={isLoading || isSigningIn}
-				pendingText='Redirecting...'
-				type='submit'
-			>
-				<div className='flex items-center gap-2'>
-					<Image
-						src='/icons/apple.svg'
-						alt='Apple logo'
-						className='invert-75 dark:invert-25'
-						width={22}
-						height={22}
-					/>
-					<p className='text-[1.0rem]'>Sign In with Apple</p>
-				</div>
-			</SubmitButton>
-			{statusMessage && <StatusMessage message={{ error: statusMessage }} />}
-		</form>
-	);
-};
diff --git a/src/components/default/auth/SignInWithMicrosoft.tsx b/src/components/default/auth/SignInWithMicrosoft.tsx
deleted file mode 100644
index 3c90a0b..0000000
--- a/src/components/default/auth/SignInWithMicrosoft.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-'use client';
-import { signInWithMicrosoft } from '@/lib/actions';
-import { StatusMessage, SubmitButton } from '@/components/default';
-import { useAuth } from '@/components/context';
-import { useState } from 'react';
-import Image from 'next/image';
-import { type buttonVariants } from '@/components/ui';
-import { type ComponentProps } from 'react';
-import { type VariantProps } from 'class-variance-authority';
-
-type SignInWithMicrosoftProps = {
-	className?: ComponentProps<'div'>['className'];
-	buttonSize?: VariantProps<typeof buttonVariants>['size'];
-	buttonVariant?: VariantProps<typeof buttonVariants>['variant'];
-};
-
-export const SignInWithMicrosoft = ({
-	className = 'my-4',
-	buttonSize = 'default',
-	buttonVariant = 'default',
-}: SignInWithMicrosoftProps) => {
-	const { isLoading } = useAuth();
-	const [statusMessage, setStatusMessage] = useState('');
-	const [isSigningIn, setIsSigningIn] = useState(false);
-
-	const handleSignInWithMicrosoft = async (e: React.FormEvent) => {
-		e.preventDefault();
-		try {
-			setStatusMessage('');
-			setIsSigningIn(true);
-
-			const result = await signInWithMicrosoft();
-
-			if (result?.success && result.data) {
-				// Redirect to Microsoft OAuth page
-				window.location.href = result.data;
-			} else {
-				setStatusMessage(`Error: Could not sign in with Microsoft!`);
-			}
-		} catch (error) {
-			setStatusMessage(
-				`Error: ${error instanceof Error ? error.message : 'Could not sign in!'}`,
-			);
-		}
-	};
-
-	return (
-		<form onSubmit={handleSignInWithMicrosoft} className={className}>
-			<SubmitButton
-				size={buttonSize}
-				variant={buttonVariant}
-				className='w-full cursor-pointer'
-				disabled={isLoading || isSigningIn}
-				pendingText='Redirecting...'
-				type='submit'
-			>
-				<div className='flex items-center gap-2'>
-					<Image
-						src='/icons/microsoft.svg'
-						alt='Microsoft logo'
-						width={20}
-						height={20}
-					/>
-					<p className='text-[1.0rem]'>Sign In with Microsoft</p>
-				</div>
-			</SubmitButton>
-			{statusMessage && <StatusMessage message={{ error: statusMessage }} />}
-		</form>
-	);
-};
diff --git a/src/components/default/auth/buttons/SignInSignUp.tsx b/src/components/default/auth/buttons/SignInSignUp.tsx
new file mode 100644
index 0000000..ea7a12f
--- /dev/null
+++ b/src/components/default/auth/buttons/SignInSignUp.tsx
@@ -0,0 +1,33 @@
+'use client';
+
+import Link from 'next/link';
+import { Button, type buttonVariants } from '@/components/ui';
+import { type ComponentProps } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+
+type SignInSignUpProps = {
+  className?: ComponentProps<'div'>['className'];
+  signInSize?: VariantProps<typeof buttonVariants>['size'];
+  signUpSize?: VariantProps<typeof buttonVariants>['size'];
+  signInVariant?: VariantProps<typeof buttonVariants>['variant'];
+  signUpVariant?: VariantProps<typeof buttonVariants>['variant'];
+};
+
+export const SignInSignUp = ({
+  className = 'flex gap-2',
+  signInSize = 'default',
+  signUpSize = 'sm',
+  signInVariant = 'outline',
+  signUpVariant = 'default',
+}: SignInSignUpProps) => {
+  return (
+    <div className={className}>
+      <Button asChild size={signInSize} variant={signInVariant}>
+        <Link href='/sign-in'>Sign In</Link>
+      </Button>
+      <Button asChild size={signUpSize} variant={signUpVariant}>
+        <Link href='/sign-up'>Sign Up</Link>
+      </Button>
+    </div>
+  );
+};
diff --git a/src/components/default/auth/buttons/SignInWithApple.tsx b/src/components/default/auth/buttons/SignInWithApple.tsx
new file mode 100644
index 0000000..ebf3b8e
--- /dev/null
+++ b/src/components/default/auth/buttons/SignInWithApple.tsx
@@ -0,0 +1,77 @@
+'use client';
+import { signInWithApple } from '@/lib/actions';
+import { StatusMessage, SubmitButton } from '@/components/default';
+import { useAuth } from '@/components/context';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import Image from 'next/image';
+import { type buttonVariants } from '@/components/ui';
+import { type ComponentProps } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+
+type SignInWithAppleProps = {
+  className?: ComponentProps<'div'>['className'];
+  buttonSize?: VariantProps<typeof buttonVariants>['size'];
+  buttonVariant?: VariantProps<typeof buttonVariants>['variant'];
+};
+
+export const SignInWithApple = ({
+  className = 'my-4',
+  buttonSize = 'default',
+  buttonVariant = 'default',
+}: SignInWithAppleProps) => {
+  const router = useRouter();
+  const { isLoading, refreshUserData } = useAuth();
+  const [statusMessage, setStatusMessage] = useState('');
+  const [isSigningIn, setIsSigningIn] = useState(false);
+
+  const handleSignInWithApple = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      setStatusMessage('');
+      setIsSigningIn(true);
+
+      const result = await signInWithApple();
+
+      if (result?.success && result.data) {
+        // Redirect to Apple OAuth page
+        window.location.href = result.data;
+      } else {
+        setStatusMessage(`Error signing in with Apple!`);
+      }
+    } catch (error) {
+      setStatusMessage(
+        `Error: ${error instanceof Error ? error.message : 'Could not sign in!'}`,
+      );
+    } finally {
+      setIsSigningIn(false);
+      await refreshUserData();
+      router.push('');
+    }
+  };
+
+  return (
+    <form onSubmit={handleSignInWithApple} className={className}>
+      <SubmitButton
+        size={buttonSize}
+        variant={buttonVariant}
+        className='w-full cursor-pointer'
+        disabled={isLoading || isSigningIn}
+        pendingText='Redirecting...'
+        type='submit'
+      >
+        <div className='flex items-center gap-2'>
+          <Image
+            src='/icons/apple.svg'
+            alt='Apple logo'
+            className='invert-75 dark:invert-25'
+            width={22}
+            height={22}
+          />
+          <p className='text-[1.0rem]'>Sign In with Apple</p>
+        </div>
+      </SubmitButton>
+      {statusMessage && <StatusMessage message={{ error: statusMessage }} />}
+    </form>
+  );
+};
diff --git a/src/components/default/auth/buttons/SignInWithMicrosoft.tsx b/src/components/default/auth/buttons/SignInWithMicrosoft.tsx
new file mode 100644
index 0000000..df3fbfa
--- /dev/null
+++ b/src/components/default/auth/buttons/SignInWithMicrosoft.tsx
@@ -0,0 +1,70 @@
+'use client';
+import { signInWithMicrosoft } from '@/lib/actions';
+import { StatusMessage, SubmitButton } from '@/components/default';
+import { useAuth } from '@/components/context';
+import { useState } from 'react';
+import Image from 'next/image';
+import { type buttonVariants } from '@/components/ui';
+import { type ComponentProps } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+
+type SignInWithMicrosoftProps = {
+  className?: ComponentProps<'div'>['className'];
+  buttonSize?: VariantProps<typeof buttonVariants>['size'];
+  buttonVariant?: VariantProps<typeof buttonVariants>['variant'];
+};
+
+export const SignInWithMicrosoft = ({
+  className = 'my-4',
+  buttonSize = 'default',
+  buttonVariant = 'default',
+}: SignInWithMicrosoftProps) => {
+  const { isLoading } = useAuth();
+  const [statusMessage, setStatusMessage] = useState('');
+  const [isSigningIn, setIsSigningIn] = useState(false);
+
+  const handleSignInWithMicrosoft = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      setStatusMessage('');
+      setIsSigningIn(true);
+
+      const result = await signInWithMicrosoft();
+
+      if (result?.success && result.data) {
+        // Redirect to Microsoft OAuth page
+        window.location.href = result.data;
+      } else {
+        setStatusMessage(`Error: Could not sign in with Microsoft!`);
+      }
+    } catch (error) {
+      setStatusMessage(
+        `Error: ${error instanceof Error ? error.message : 'Could not sign in!'}`,
+      );
+    }
+  };
+
+  return (
+    <form onSubmit={handleSignInWithMicrosoft} className={className}>
+      <SubmitButton
+        size={buttonSize}
+        variant={buttonVariant}
+        className='w-full cursor-pointer'
+        disabled={isLoading || isSigningIn}
+        pendingText='Redirecting...'
+        type='submit'
+      >
+        <div className='flex items-center gap-2'>
+          <Image
+            src='/icons/microsoft.svg'
+            alt='Microsoft logo'
+            width={20}
+            height={20}
+          />
+          <p className='text-[1.0rem]'>Sign In with Microsoft</p>
+        </div>
+      </SubmitButton>
+      {statusMessage && <StatusMessage message={{ error: statusMessage }} />}
+    </form>
+  );
+};
diff --git a/src/components/default/auth/cards/ForgotPassword.tsx b/src/components/default/auth/cards/ForgotPassword.tsx
new file mode 100644
index 0000000..f1ca888
--- /dev/null
+++ b/src/components/default/auth/cards/ForgotPassword.tsx
@@ -0,0 +1,128 @@
+'use client';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+} from '@/components/ui';
+import Link from 'next/link';
+import { forgotPassword } from '@/lib/actions';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '@/components/context';
+import { useEffect, useState } from 'react';
+import { StatusMessage, SubmitButton } from '@/components/default';
+
+const formSchema = z.object({
+  email: z.string().email({
+    message: 'Please enter a valid email address.',
+  }),
+});
+
+export const ForgotPasswordCard = () => {
+  const router = useRouter();
+  const { isAuthenticated, isLoading, refreshUserData } = useAuth();
+  const [statusMessage, setStatusMessage] = useState('');
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      email: '',
+    },
+  });
+
+  // Redirect if already authenticated
+  useEffect(() => {
+    if (isAuthenticated) {
+      router.push('/');
+    }
+  }, [isAuthenticated, router]);
+
+  const handleForgotPassword = async (values: z.infer<typeof formSchema>) => {
+    try {
+      setStatusMessage('');
+      const formData = new FormData();
+      formData.append('email', values.email);
+      const result = await forgotPassword(formData);
+      if (result?.success) {
+        await refreshUserData();
+        setStatusMessage(
+          result?.data ?? 'Check your email for a link to reset your password.',
+        );
+        form.reset();
+        router.push('');
+      } else {
+        setStatusMessage(`Error: ${result.error}`);
+      }
+    } catch (error) {
+      setStatusMessage(
+        `Error: ${error instanceof Error ? error.message : 'Could not sign in!'}`,
+      );
+    }
+  };
+
+  return (
+    <Card className='min-w-xs md:min-w-sm'>
+      <CardHeader>
+        <CardTitle className='text-2xl font-medium'>Reset Password</CardTitle>
+        <CardDescription className='text-sm text-foreground'>
+          Don&apos;t have an account?{' '}
+          <Link className='font-medium underline' href='/sign-up'>
+            Sign up
+          </Link>
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(handleForgotPassword)}
+            className='flex flex-col min-w-64 space-y-6'
+          >
+            <FormField
+              control={form.control}
+              name='email'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input
+                      type='email'
+                      placeholder='you@example.com'
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <SubmitButton
+              disabled={isLoading}
+              pendingText='Resetting Password...'
+            >
+              Reset Password
+            </SubmitButton>
+            {statusMessage &&
+              (statusMessage.includes('Error') ||
+              statusMessage.includes('error') ||
+              statusMessage.includes('failed') ||
+              statusMessage.includes('invalid') ? (
+                <StatusMessage message={{ error: statusMessage }} />
+              ) : (
+                <StatusMessage message={{ success: statusMessage }} />
+              ))}
+          </form>
+        </Form>
+      </CardContent>
+    </Card>
+  );
+};
diff --git a/src/components/default/auth/cards/Profile.tsx b/src/components/default/auth/cards/Profile.tsx
new file mode 100644
index 0000000..47c91f3
--- /dev/null
+++ b/src/components/default/auth/cards/Profile.tsx
@@ -0,0 +1,121 @@
+'use client';
+import { useAuth } from '@/components/context';
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+import {
+  AvatarUpload,
+  ProfileForm,
+  ResetPasswordForm,
+  SignOut,
+} from '@/components/default/profile';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  Separator,
+} from '@/components/ui';
+import { Loader2 } from 'lucide-react';
+import { resetPassword } from '@/lib/actions';
+import { toast } from 'sonner';
+import { type Result } from '@/lib/actions';
+
+export const ProfileCard = () => {
+  const {
+    profile,
+    isLoading,
+    isAuthenticated,
+    updateProfile,
+    refreshUserData,
+  } = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated) {
+      router.push('/sign-in');
+    }
+  }, [isLoading, isAuthenticated, router]);
+
+  const handleAvatarUploaded = async (path: string) => {
+    await updateProfile({ avatar_url: path });
+    await refreshUserData();
+  };
+
+  const handleProfileSubmit = async (values: {
+    full_name: string;
+    email: string;
+  }) => {
+    try {
+      await updateProfile({
+        full_name: values.full_name,
+        email: values.email,
+      });
+    } catch {
+      toast.error('Error updating profile!: ');
+    }
+  };
+
+  const handleResetPasswordSubmit = async (
+    formData: FormData,
+  ): Promise<Result<null>> => {
+    try {
+      const result = await resetPassword(formData);
+      if (!result.success) {
+        toast.error(`Error resetting password: ${result.error}`);
+        return { success: false, error: result.error };
+      }
+      return { success: true, data: null };
+    } catch (error) {
+      toast.error(
+        `Error resetting password!: ${(error as string) ?? 'Unknown error'}`,
+      );
+      return { success: false, error: 'Unknown error' };
+    }
+  };
+
+  // Show loading state while checking authentication
+  if (isLoading) {
+    return (
+      <div className='flex justify-center items-center min-h-[50vh]'>
+        <Loader2 className='h-8 w-8 animate-spin text-gray-500' />
+      </div>
+    );
+  }
+
+  // If not authenticated and not loading, this will show briefly before redirect
+  if (!isAuthenticated) {
+    return (
+      <div className='flex p-5 items-center justify-center'>
+        <h1>Unauthorized - Redirecting...</h1>
+      </div>
+    );
+  }
+
+  return (
+    <div className='max-w-2xl min-w-sm mx-auto p-4'>
+      <Card className='mb-8'>
+        <CardHeader className='pb-2'>
+          <CardTitle className='text-2xl'>Your Profile</CardTitle>
+          <CardDescription>
+            Manage your personal information and how it appears to others
+          </CardDescription>
+        </CardHeader>
+        {isLoading && !profile ? (
+          <div className='flex justify-center py-8'>
+            <Loader2 className='h-8 w-8 animate-spin text-gray-500' />
+          </div>
+        ) : (
+          <div className='space-y-8'>
+            <AvatarUpload onAvatarUploaded={handleAvatarUploaded} />
+            <Separator />
+            <ProfileForm onSubmit={handleProfileSubmit} />
+            <Separator />
+            <ResetPasswordForm onSubmit={handleResetPasswordSubmit} />
+            <Separator />
+            <SignOut />
+          </div>
+        )}
+      </Card>
+    </div>
+  );
+};
diff --git a/src/components/default/auth/cards/SignIn.tsx b/src/components/default/auth/cards/SignIn.tsx
new file mode 100644
index 0000000..285d396
--- /dev/null
+++ b/src/components/default/auth/cards/SignIn.tsx
@@ -0,0 +1,171 @@
+'use client';
+
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+} from '@/components/ui';
+import Link from 'next/link';
+import { signIn } from '@/lib/actions';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '@/components/context';
+import { useEffect, useState } from 'react';
+import { StatusMessage, SubmitButton } from '@/components/default';
+import { Separator } from '@/components/ui';
+import {
+  SignInWithApple,
+  SignInWithMicrosoft,
+} from '@/components/default/auth';
+
+const formSchema = z.object({
+  email: z.string().email({
+    message: 'Please enter a valid email address.',
+  }),
+  password: z.string().min(8, {
+    message: 'Password must be at least 8 characters.',
+  }),
+});
+
+export const SignInCard = () => {
+  const router = useRouter();
+  const { isAuthenticated, isLoading, refreshUserData } = useAuth();
+  const [statusMessage, setStatusMessage] = useState('');
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      email: '',
+      password: '',
+    },
+  });
+
+  // Redirect if already authenticated
+  useEffect(() => {
+    if (isAuthenticated) {
+      router.push('/');
+    }
+  }, [isAuthenticated, router]);
+
+  const handleSignIn = async (values: z.infer<typeof formSchema>) => {
+    try {
+      setStatusMessage('');
+      const formData = new FormData();
+      formData.append('email', values.email);
+      formData.append('password', values.password);
+      const result = await signIn(formData);
+      if (result?.success) {
+        await refreshUserData();
+        form.reset();
+        router.push('');
+      } else {
+        setStatusMessage(`Error: ${result.error}`);
+      }
+    } catch (error) {
+      setStatusMessage(
+        `Error: ${error instanceof Error ? error.message : 'Could not sign in!'}`,
+      );
+    }
+  };
+
+  return (
+    <Card className='min-w-xs max-w-lg md:min-w-sm'>
+      <CardHeader>
+        <CardTitle className='text-3xl font-medium'>Sign In</CardTitle>
+        <CardDescription className='text-foreground'>
+          Don&apos;t have an account?{' '}
+          <Link className='font-medium underline' href='/sign-up'>
+            Sign up
+          </Link>
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(handleSignIn)}
+            className='flex flex-col min-w-64 space-y-6 pb-4'
+          >
+            <FormField
+              control={form.control}
+              name='email'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className='text-lg'>Email</FormLabel>
+                  <FormControl>
+                    <Input
+                      type='email'
+                      placeholder='you@example.com'
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name='password'
+              render={({ field }) => (
+                <FormItem>
+                  <div className='flex justify-between'>
+                    <FormLabel className='text-lg'>Password</FormLabel>
+                    <Link
+                      className='text-xs text-foreground underline text-right'
+                      href='/forgot-password'
+                    >
+                      Forgot Password?
+                    </Link>
+                  </div>
+                  <FormControl>
+                    <Input
+                      type='password'
+                      placeholder='Your password'
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {statusMessage &&
+              (statusMessage.includes('Error') ||
+              statusMessage.includes('error') ||
+              statusMessage.includes('failed') ||
+              statusMessage.includes('invalid') ? (
+                <StatusMessage message={{ error: statusMessage }} />
+              ) : (
+                <StatusMessage message={{ message: statusMessage }} />
+              ))}
+            <SubmitButton
+              disabled={isLoading}
+              pendingText='Signing In...'
+              className='text-[1.0rem] cursor-pointer'
+            >
+              Sign in
+            </SubmitButton>
+          </form>
+        </Form>
+
+        <div className='flex items-center w-full gap-4'>
+          <Separator className='flex-1 bg-accent py-0.5' />
+          <span className='text-sm text-muted-foreground'>or</span>
+          <Separator className='flex-1 bg-accent py-0.5' />
+        </div>
+        <SignInWithMicrosoft />
+        <SignInWithApple />
+      </CardContent>
+    </Card>
+  );
+};
diff --git a/src/components/default/auth/cards/SignUp.tsx b/src/components/default/auth/cards/SignUp.tsx
new file mode 100644
index 0000000..f1663a8
--- /dev/null
+++ b/src/components/default/auth/cards/SignUp.tsx
@@ -0,0 +1,209 @@
+'use client';
+
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import Link from 'next/link';
+import { signUp } from '@/lib/actions';
+import { StatusMessage, SubmitButton } from '@/components/default';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '@/components/context';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+  Separator,
+} from '@/components/ui';
+import { useEffect, useState } from 'react';
+import {
+  SignInWithApple,
+  SignInWithMicrosoft,
+} from '@/components/default/auth';
+
+const formSchema = z
+  .object({
+    name: z.string().min(2, {
+      message: 'Name must be at least 2 characters.',
+    }),
+    email: z.string().email({
+      message: 'Please enter a valid email address.',
+    }),
+    password: z.string().min(8, {
+      message: 'Password must be at least 8 characters.',
+    }),
+    confirmPassword: z.string().min(8, {
+      message: 'Password must be at least 8 characters.',
+    }),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: 'Passwords do not match!',
+    path: ['confirmPassword'],
+  });
+
+export const SignUpCard = () => {
+  const router = useRouter();
+  const { isAuthenticated, isLoading, refreshUserData } = useAuth();
+  const [statusMessage, setStatusMessage] = useState('');
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: '',
+      email: '',
+      password: '',
+      confirmPassword: '',
+    },
+    mode: 'onChange',
+  });
+
+  // Redirect if already authenticated
+  useEffect(() => {
+    if (isAuthenticated) {
+      router.push('/');
+    }
+  }, [isAuthenticated, router]);
+
+  const handleSignUp = async (values: z.infer<typeof formSchema>) => {
+    try {
+      setStatusMessage('');
+      const formData = new FormData();
+      formData.append('name', values.name);
+      formData.append('email', values.email);
+      formData.append('password', values.password);
+      const result = await signUp(formData);
+      if (result?.success) {
+        await refreshUserData();
+        setStatusMessage(
+          result.data ??
+            'Thanks for signing up! Please check your email for a verification link.',
+        );
+        form.reset();
+        router.push('');
+      } else {
+        setStatusMessage(`Error: ${result.error}`);
+      }
+    } catch (error) {
+      setStatusMessage(
+        `Error: ${error instanceof Error ? error.message : 'Could not sign in!'}`,
+      );
+    }
+  };
+
+  return (
+    <Card className='min-w-xs md:min-w-sm'>
+      <CardHeader>
+        <CardTitle className='text-3xl font-medium'>Sign Up</CardTitle>
+        <CardDescription className='text-foreground'>
+          Already have an account?{' '}
+          <Link className='text-primary font-medium underline' href='/sign-in'>
+            Sign in
+          </Link>
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(handleSignUp)}
+            className='flex flex-col mx-auto space-y-4 mb-4'
+          >
+            <FormField
+              control={form.control}
+              name='name'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className='text-lg'>Name</FormLabel>
+                  <FormControl>
+                    <Input type='text' placeholder='Full Name' {...field} />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='email'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className='text-lg'>Email</FormLabel>
+                  <FormControl>
+                    <Input
+                      type='email'
+                      placeholder='you@example.com'
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='password'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className='text-lg'>Password</FormLabel>
+                  <FormControl>
+                    <Input
+                      type='password'
+                      placeholder='Your password'
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='confirmPassword'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className='text-lg'>Confirm Password</FormLabel>
+                  <FormControl>
+                    <Input
+                      type='password'
+                      placeholder='Confirm password'
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {statusMessage &&
+              (statusMessage.includes('Error') ||
+              statusMessage.includes('error') ||
+              statusMessage.includes('failed') ||
+              statusMessage.includes('invalid') ? (
+                <StatusMessage message={{ error: statusMessage }} />
+              ) : (
+                <StatusMessage message={{ success: statusMessage }} />
+              ))}
+            <SubmitButton
+              className='text-[1.0rem] cursor-pointer'
+              disabled={isLoading}
+              pendingText='Signing Up...'
+            >
+              Sign Up
+            </SubmitButton>
+          </form>
+        </Form>
+        <div className='flex items-center w-full gap-4'>
+          <Separator className='flex-1 bg-accent py-0.5' />
+          <span className='text-sm text-muted-foreground'>or</span>
+          <Separator className='flex-1 bg-accent py-0.5' />
+        </div>
+        <SignInWithMicrosoft />
+        <SignInWithApple />
+      </CardContent>
+    </Card>
+  );
+};
diff --git a/src/components/default/auth/index.ts b/src/components/default/auth/index.ts
index 646a9d9..4fb68ac 100644
--- a/src/components/default/auth/index.ts
+++ b/src/components/default/auth/index.ts
@@ -1,3 +1,8 @@
-export * from './SignInSignUp';
-export * from './SignInWithApple';
-export * from './SignInWithMicrosoft';
+export * from './NoSession';
+export * from './buttons/SignInSignUp';
+export * from './buttons/SignInWithApple';
+export * from './buttons/SignInWithMicrosoft';
+export * from './cards/ForgotPassword';
+export * from './cards/Profile';
+export * from './cards/SignIn';
+export * from './cards/SignUp';
diff --git a/src/components/default/footer/index.tsx b/src/components/default/footer/index.tsx
index 5cc359f..7520e85 100644
--- a/src/components/default/footer/index.tsx
+++ b/src/components/default/footer/index.tsx
@@ -1,20 +1,43 @@
 'use server';
 
+import Link from 'next/link';
+import Image from 'next/image';
+
 const Footer = () => {
-	return (
-		<footer className='w-full flex items-center justify-center border-t mx-auto text-center text-xs gap-8 py-16'>
-			<p>
-				Powered by{' '}
-				<a
-					href='https://supabase.com/?utm_source=create-next-app&utm_medium=template&utm_term=nextjs'
-					target='_blank'
-					className='font-bold hover:underline'
-					rel='noreferrer'
-				>
-					Supabase
-				</a>
-			</p>
-		</footer>
-	);
+  return (
+    <footer className='w-full h-16 flex items-center justify-between border-t bg-background px-8 mt-auto'>
+      <div className='flex items-center'>
+        <Link
+          href='https://git.gibbyb.com/gib/tech-tracker-next'
+          className='text-sm font-semibold px-3 py-2 rounded-lg
+						bg-gradient-to-tl from-[#35363F] to-[#24191A] hover:text-sky-200
+						hover:bg-gradient-to-tr hover:from-[#35363F] hover:to-[#23242F]
+						flex items-center gap-2 transition-all duration-200'
+        >
+          <Image src='/icons/gitea.svg' alt='Gitea' width={20} height={20} />
+          <span>View Source Code on Gitea</span>
+        </Link>
+      </div>
+      <div className='flex-1 flex justify-center'>
+      				<div className='text-xs text-center space-y-1'>
+      					<p>
+      						<strong>Tech Tracker</strong> - Built for City of Gulfport IT Department
+      					</p>
+      					<p className='text-muted-foreground'>
+      						Open Source • MIT Licensed • Self-Hosted • 
+      						<a
+      							href='https://supabase.com'
+      							target='_blank'
+      							className='hover:underline ml-1'
+      							rel='noreferrer'
+      						>
+      							Powered by Supabase
+      						</a>
+      					</p>
+      				</div>
+      </div>
+      <div className='w-[160px]'></div> {/* Spacer to balance the layout */}
+    </footer>
+  );
 };
 export default Footer;
diff --git a/src/components/default/header/auth/AvatarDropdown.tsx b/src/components/default/header/auth/AvatarDropdown.tsx
new file mode 100644
index 0000000..f416da4
--- /dev/null
+++ b/src/components/default/header/auth/AvatarDropdown.tsx
@@ -0,0 +1,87 @@
+'use client';
+
+import Link from 'next/link';
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui';
+import { useAuth } from '@/components/context';
+import { useRouter } from 'next/navigation';
+import { signOut } from '@/lib/actions';
+import { User } from 'lucide-react';
+
+const AvatarDropdown = () => {
+  const { profile, avatarUrl, isLoading, refreshUserData } = useAuth();
+  const router = useRouter();
+
+  const handleSignOut = async () => {
+    const result = await signOut();
+    if (result?.success) {
+      await refreshUserData();
+      router.push('/sign-in');
+    }
+  };
+
+  const getInitials = (name: string | null | undefined): string => {
+    if (!name) return '';
+    return name
+      .split(' ')
+      .map((n) => n[0])
+      .join('')
+      .toUpperCase();
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <Avatar className='cursor-pointer'>
+          {avatarUrl ? (
+            <AvatarImage
+              src={avatarUrl}
+              alt={getInitials(profile?.full_name)}
+              width={64}
+              height={64}
+            />
+          ) : (
+            <AvatarFallback className='text-sm'>
+              {profile?.full_name ? (
+                getInitials(profile.full_name)
+              ) : (
+                <User size={32} />
+              )}
+            </AvatarFallback>
+          )}
+        </Avatar>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuLabel>{profile?.full_name}</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem asChild>
+          <Link
+            href='/profile'
+            className='w-full justify-center cursor-pointer'
+          >
+            Edit profile
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator className='h-[2px]' />
+        <DropdownMenuItem asChild>
+          <button
+            onClick={handleSignOut}
+            className='w-full justify-center cursor-pointer'
+          >
+            Sign Out
+          </button>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+export default AvatarDropdown;
diff --git a/src/components/default/navigation/auth/index.tsx b/src/components/default/header/auth/index.tsx
similarity index 55%
rename from src/components/default/navigation/auth/index.tsx
rename to src/components/default/header/auth/index.tsx
index 7bfc63f..f2e9259 100644
--- a/src/components/default/navigation/auth/index.tsx
+++ b/src/components/default/header/auth/index.tsx
@@ -5,13 +5,13 @@ import { SignInSignUp } from '@/components/default/auth';
 import { useAuth } from '@/components/context';
 
 const NavigationAuth = () => {
-	const { isAuthenticated } = useAuth();
-	return isAuthenticated ? (
-		<div className='flex items-center gap-4'>
-			<AvatarDropdown />
-		</div>
-	) : (
-		<SignInSignUp />
-	);
+  const { isAuthenticated } = useAuth();
+  return isAuthenticated ? (
+    <div className='flex items-center gap-4'>
+      <AvatarDropdown />
+    </div>
+  ) : (
+    <SignInSignUp />
+  );
 };
 export default NavigationAuth;
diff --git a/src/components/default/header/index.tsx b/src/components/default/header/index.tsx
new file mode 100644
index 0000000..e07332f
--- /dev/null
+++ b/src/components/default/header/index.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+import NavigationAuth from './auth';
+import { ThemeToggle, TVToggle, useTVMode } from '@/components/context';
+
+const Header = () => {
+  const { tvMode } = useTVMode();
+  return tvMode ? (
+    <div className='absolute top-4 right-2'>
+      <div className='flex flex-row my-auto items-center pt-2 pr-0 md:pt-4'>
+        <TVToggle />
+      </div>
+    </div>
+  ) : (
+    <header className='w-full py-2 pt-6 md:py-5'>
+      <div className='absolute top-4 right-6'>
+        <div className='flex flex-row my-auto items-center pt-2 pr-0 md:pt-4 md:pr-8'>
+          <TVToggle />
+          <ThemeToggle className='mx-2' />
+        </div>
+      </div>
+      <Link
+        href='/'
+        scroll={false}
+        className='flex flex-row items-center text-center
+					justify-center sm:ml-0 p-4 mt-10 sm:mt-0'
+      >
+        <Image
+          src='/favicon.png'
+          alt='Tech Tracker Logo'
+          width={100}
+          height={100}
+          className='max-w-[40px] md:max-w-[120px]'
+        />
+        <h1
+          className='title-text text-sm md:text-4xl lg:text-8xl
+					bg-gradient-to-r from-[#bec8e6] via-[#F0EEE4] to-[#FFF8E7]
+					font-bold pl-2 md:pl-12 text-transparent bg-clip-text'
+        >
+          Tech Tracker
+        </h1>
+      </Link>
+    </header>
+  );
+};
+export default Header;
diff --git a/src/components/default/index.tsx b/src/components/default/index.tsx
index 601bae7..21b32b1 100644
--- a/src/components/default/index.tsx
+++ b/src/components/default/index.tsx
@@ -1,5 +1,5 @@
 export {
-	StatusMessage,
-	type Message,
+  StatusMessage,
+  type Message,
 } from '@/components/default/StatusMessage';
 export { SubmitButton } from '@/components/default/SubmitButton';
diff --git a/src/components/default/navigation/auth/AvatarDropdown.tsx b/src/components/default/navigation/auth/AvatarDropdown.tsx
deleted file mode 100644
index a2933fc..0000000
--- a/src/components/default/navigation/auth/AvatarDropdown.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import {
-	Avatar,
-	AvatarFallback,
-	AvatarImage,
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuLabel,
-	DropdownMenuSeparator,
-	DropdownMenuTrigger,
-} from '@/components/ui';
-import { useAuth } from '@/components/context';
-import { useRouter } from 'next/navigation';
-import { signOut } from '@/lib/actions';
-import { User } from 'lucide-react';
-
-const AvatarDropdown = () => {
-	const { profile, avatarUrl, isLoading, refreshUserData } = useAuth();
-	const router = useRouter();
-
-	const handleSignOut = async () => {
-		const result = await signOut();
-		if (result?.success) {
-			await refreshUserData();
-			router.push('/sign-in');
-		}
-	};
-
-	const getInitials = (name: string | null | undefined): string => {
-		if (!name) return '';
-		return name
-			.split(' ')
-			.map((n) => n[0])
-			.join('')
-			.toUpperCase();
-	};
-
-	return (
-		<DropdownMenu>
-			<DropdownMenuTrigger>
-				<Avatar className='cursor-pointer'>
-					{avatarUrl ? (
-						<AvatarImage
-							src={avatarUrl}
-							alt={getInitials(profile?.full_name)}
-							width={64}
-							height={64}
-						/>
-					) : (
-						<AvatarFallback className='text-sm'>
-							{profile?.full_name ? (
-								getInitials(profile.full_name)
-							) : (
-								<User size={32} />
-							)}
-						</AvatarFallback>
-					)}
-				</Avatar>
-			</DropdownMenuTrigger>
-			<DropdownMenuContent>
-				<DropdownMenuLabel>{profile?.full_name}</DropdownMenuLabel>
-				<DropdownMenuSeparator />
-				<DropdownMenuItem asChild>
-					<Link
-						href='/profile'
-						className='w-full justify-center cursor-pointer'
-					>
-						Edit profile
-					</Link>
-				</DropdownMenuItem>
-				<DropdownMenuSeparator className='h-[2px]' />
-				<DropdownMenuItem asChild>
-					<button
-						onClick={handleSignOut}
-						className='w-full justify-center cursor-pointer'
-					>
-						Sign Out
-					</button>
-				</DropdownMenuItem>
-			</DropdownMenuContent>
-		</DropdownMenu>
-	);
-};
-export default AvatarDropdown;
diff --git a/src/components/default/navigation/index.tsx b/src/components/default/navigation/index.tsx
deleted file mode 100644
index 4370360..0000000
--- a/src/components/default/navigation/index.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-'use client'
-
-import Image from 'next/image';
-import Link from 'next/link';
-import NavigationAuth from './auth';
-import { ThemeToggle, TVToggle, useTVMode } from '@/components/context';
-
-const Navigation = () => {
-	const { tvMode } = useTVMode();
-	if (tvMode) {
-		return (
-			<div className='absolute top-4 right-2'>
-				<div className='flex flex-row my-auto items-center pt-2 pr-0 md:pt-4'>
-					<TVToggle />
-				</div>
-			</div>
-		);
-	}
-	return (
-		<nav
-			className='w-full flex justify-center
-      border-b border-b-foreground/10 h-16'
-		>
-			<div
-				className='w-full max-w-5xl flex justify-between
-        items-center p-3 px-5 text-sm'
-			>
-				<div className='flex gap-5 items-center font-semibold'>
-					<Link className='flex flex-row my-auto gap-2' href='/'>
-						<Image src='/favicon.png' alt='T3 Logo' width={50} height={50} />
-						<h1 className='my-auto text-2xl'>Tech Tracker</h1>
-					</Link>
-				</div>
-				<div className='flex items-center gap-2'>
-					<TVToggle />
-					<ThemeToggle />
-					<NavigationAuth />
-				</div>
-			</div>
-		</nav>
-	);
-};
-export default Navigation;
diff --git a/src/components/default/profile/AvatarUpload.tsx b/src/components/default/profile/AvatarUpload.tsx
index abd4da8..1696a6c 100644
--- a/src/components/default/profile/AvatarUpload.tsx
+++ b/src/components/default/profile/AvatarUpload.tsx
@@ -1,112 +1,112 @@
 import { useFileUpload } from '@/lib/hooks/useFileUpload';
 import { useAuth } from '@/components/context';
 import {
-	Avatar,
-	AvatarFallback,
-	AvatarImage,
-	CardContent,
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  CardContent,
 } from '@/components/ui';
 import { Loader2, Pencil, Upload, User } from 'lucide-react';
 
 type AvatarUploadProps = {
-	onAvatarUploaded: (path: string) => Promise<void>;
+  onAvatarUploaded: (path: string) => Promise<void>;
 };
 
 export const AvatarUpload = ({ onAvatarUploaded }: AvatarUploadProps) => {
-	const { profile, avatarUrl } = useAuth();
-	const { isUploading, fileInputRef, uploadToStorage } = useFileUpload();
+  const { profile, avatarUrl } = useAuth();
+  const { isUploading, fileInputRef, uploadToStorage } = useFileUpload();
 
-	const handleAvatarClick = () => {
-		fileInputRef.current?.click();
-	};
+  const handleAvatarClick = () => {
+    fileInputRef.current?.click();
+  };
 
-	const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
-		const file = e.target.files?.[0];
-		if (!file) return;
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
 
-		const result = await uploadToStorage({
-			file,
-			bucket: 'avatars',
-			resize: true,
-			options: {
-				maxWidth: 500,
-				maxHeight: 500,
-				quality: 0.8,
-			},
-			replace: { replace: true, path: profile?.avatar_url ?? file.name },
-		});
-		if (result.success && result.data) {
-			await onAvatarUploaded(result.data);
-		}
-	};
+    const result = await uploadToStorage({
+      file,
+      bucket: 'avatars',
+      resize: true,
+      options: {
+        maxWidth: 500,
+        maxHeight: 500,
+        quality: 0.8,
+      },
+      replace: { replace: true, path: profile?.avatar_url ?? file.name },
+    });
+    if (result.success && result.data) {
+      await onAvatarUploaded(result.data);
+    }
+  };
 
-	const getInitials = (name: string | null | undefined): string => {
-		if (!name) return '';
-		return name
-			.split(' ')
-			.map((n) => n[0])
-			.join('')
-			.toUpperCase();
-	};
+  const getInitials = (name: string | null | undefined): string => {
+    if (!name) return '';
+    return name
+      .split(' ')
+      .map((n) => n[0])
+      .join('')
+      .toUpperCase();
+  };
 
-	return (
-		<CardContent>
-			<div className='flex flex-col items-center'>
-				<div
-					className='relative group cursor-pointer mb-4'
-					onClick={handleAvatarClick}
-				>
-					<Avatar className='h-32 w-32'>
-						{avatarUrl ? (
-							<AvatarImage
-								src={avatarUrl}
-								alt={getInitials(profile?.full_name)}
-								width={128}
-								height={128}
-							/>
-						) : (
-							<AvatarFallback className='text-4xl'>
-								{profile?.full_name ? (
-									getInitials(profile.full_name)
-								) : (
-									<User size={32} />
-								)}
-							</AvatarFallback>
-						)}
-					</Avatar>
-					<div
-						className='absolute inset-0 rounded-full bg-black/0 group-hover:bg-black/50
+  return (
+    <CardContent>
+      <div className='flex flex-col items-center'>
+        <div
+          className='relative group cursor-pointer mb-4'
+          onClick={handleAvatarClick}
+        >
+          <Avatar className='h-32 w-32'>
+            {avatarUrl ? (
+              <AvatarImage
+                src={avatarUrl}
+                alt={getInitials(profile?.full_name)}
+                width={128}
+                height={128}
+              />
+            ) : (
+              <AvatarFallback className='text-4xl'>
+                {profile?.full_name ? (
+                  getInitials(profile.full_name)
+                ) : (
+                  <User size={32} />
+                )}
+              </AvatarFallback>
+            )}
+          </Avatar>
+          <div
+            className='absolute inset-0 rounded-full bg-black/0 group-hover:bg-black/50
               transition-all flex items-center justify-center'
-					>
-						<Upload
-							className='text-white opacity-0 group-hover:opacity-100
+          >
+            <Upload
+              className='text-white opacity-0 group-hover:opacity-100
                 transition-opacity'
-							size={24}
-						/>
-					</div>
-					<div className='absolute inset-1 transition-all flex items-end justify-end'>
-						<Pencil
-							className='text-white opacity-100 group-hover:opacity-0
+              size={24}
+            />
+          </div>
+          <div className='absolute inset-1 transition-all flex items-end justify-end'>
+            <Pencil
+              className='text-white opacity-100 group-hover:opacity-0
                 transition-opacity'
-							size={24}
-						/>
-					</div>
-				</div>
-				<input
-					ref={fileInputRef}
-					type='file'
-					accept='image/*'
-					className='hidden'
-					onChange={handleFileChange}
-					disabled={isUploading}
-				/>
-				{isUploading && (
-					<div className='flex items-center text-sm text-gray-500 mt-2'>
-						<Loader2 className='h-4 w-4 mr-2 animate-spin' />
-						Uploading...
-					</div>
-				)}
-			</div>
-		</CardContent>
-	);
+              size={24}
+            />
+          </div>
+        </div>
+        <input
+          ref={fileInputRef}
+          type='file'
+          accept='image/*'
+          className='hidden'
+          onChange={handleFileChange}
+          disabled={isUploading}
+        />
+        {isUploading && (
+          <div className='flex items-center text-sm text-gray-500 mt-2'>
+            <Loader2 className='h-4 w-4 mr-2 animate-spin' />
+            Uploading...
+          </div>
+        )}
+      </div>
+    </CardContent>
+  );
 };
diff --git a/src/components/default/profile/ProfileForm.tsx b/src/components/default/profile/ProfileForm.tsx
index f144741..3610def 100644
--- a/src/components/default/profile/ProfileForm.tsx
+++ b/src/components/default/profile/ProfileForm.tsx
@@ -2,99 +2,99 @@ import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import {
-	CardContent,
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-	Input,
+  CardContent,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
 } from '@/components/ui';
 import { useEffect } from 'react';
 import { useAuth } from '@/components/context';
 import { SubmitButton } from '@/components/default';
 
 const formSchema = z.object({
-	full_name: z.string().min(5, {
-		message: 'Full name is required & must be at least 5 characters.',
-	}),
-	email: z.string().email(),
+  full_name: z.string().min(5, {
+    message: 'Full name is required & must be at least 5 characters.',
+  }),
+  email: z.string().email(),
 });
 
 type ProfileFormProps = {
-	onSubmit: (values: z.infer<typeof formSchema>) => Promise<void>;
+  onSubmit: (values: z.infer<typeof formSchema>) => Promise<void>;
 };
 
 export const ProfileForm = ({ onSubmit }: ProfileFormProps) => {
-	const { profile, isLoading } = useAuth();
+  const { profile, isLoading } = useAuth();
 
-	const form = useForm<z.infer<typeof formSchema>>({
-		resolver: zodResolver(formSchema),
-		defaultValues: {
-			full_name: profile?.full_name ?? '',
-			email: profile?.email ?? '',
-		},
-	});
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      full_name: profile?.full_name ?? '',
+      email: profile?.email ?? '',
+    },
+  });
 
-	// Update form values when profile changes
-	useEffect(() => {
-		if (profile) {
-			form.reset({
-				full_name: profile.full_name ?? '',
-				email: profile.email ?? '',
-			});
-		}
-	}, [profile, form]);
+  // Update form values when profile changes
+  useEffect(() => {
+    if (profile) {
+      form.reset({
+        full_name: profile.full_name ?? '',
+        email: profile.email ?? '',
+      });
+    }
+  }, [profile, form]);
 
-	const handleSubmit = async (values: z.infer<typeof formSchema>) => {
-		await onSubmit(values);
-	};
+  const handleSubmit = async (values: z.infer<typeof formSchema>) => {
+    await onSubmit(values);
+  };
 
-	return (
-		<CardContent>
-			<Form {...form}>
-				<form onSubmit={form.handleSubmit(handleSubmit)} className='space-y-6'>
-					<FormField
-						control={form.control}
-						name='full_name'
-						render={({ field }) => (
-							<FormItem>
-								<FormLabel>Full Name</FormLabel>
-								<FormControl>
-									<Input {...field} />
-								</FormControl>
-								<FormDescription>Your public display name.</FormDescription>
-								<FormMessage />
-							</FormItem>
-						)}
-					/>
+  return (
+    <CardContent>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(handleSubmit)} className='space-y-6'>
+          <FormField
+            control={form.control}
+            name='full_name'
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Full Name</FormLabel>
+                <FormControl>
+                  <Input {...field} />
+                </FormControl>
+                <FormDescription>Your public display name.</FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
 
-					<FormField
-						control={form.control}
-						name='email'
-						render={({ field }) => (
-							<FormItem>
-								<FormLabel>Email</FormLabel>
-								<FormControl>
-									<Input {...field} />
-								</FormControl>
-								<FormDescription>
-									Your email address associated with your account.
-								</FormDescription>
-								<FormMessage />
-							</FormItem>
-						)}
-					/>
+          <FormField
+            control={form.control}
+            name='email'
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                  <Input {...field} />
+                </FormControl>
+                <FormDescription>
+                  Your email address associated with your account.
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
 
-					<div className='flex justify-center'>
-						<SubmitButton disabled={isLoading} pendingText='Saving...'>
-							Save Changes
-						</SubmitButton>
-					</div>
-				</form>
-			</Form>
-		</CardContent>
-	);
+          <div className='flex justify-center'>
+            <SubmitButton disabled={isLoading} pendingText='Saving...'>
+              Save Changes
+            </SubmitButton>
+          </div>
+        </form>
+      </Form>
+    </CardContent>
+  );
 };
diff --git a/src/components/default/profile/ResetPasswordForm.tsx b/src/components/default/profile/ResetPasswordForm.tsx
index 2d1e5c4..14ec06f 100644
--- a/src/components/default/profile/ResetPasswordForm.tsx
+++ b/src/components/default/profile/ResetPasswordForm.tsx
@@ -2,18 +2,18 @@ import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import {
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-	Input,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
 } from '@/components/ui';
 import { SubmitButton } from '@/components/default';
 import { useState } from 'react';
@@ -21,127 +21,127 @@ import { type Result } from '@/lib/actions';
 import { StatusMessage } from '@/components/default';
 
 const formSchema = z
-	.object({
-		password: z.string().min(8, {
-			message: 'Password must be at least 8 characters.',
-		}),
-		confirmPassword: z.string(),
-	})
-	.refine((data) => data.password === data.confirmPassword, {
-		message: 'Passwords do not match.',
-		path: ['confirmPassword'],
-	});
+  .object({
+    password: z.string().min(8, {
+      message: 'Password must be at least 8 characters.',
+    }),
+    confirmPassword: z.string(),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: 'Passwords do not match.',
+    path: ['confirmPassword'],
+  });
 
 type ResetPasswordFormProps = {
-	onSubmit: (formData: FormData) => Promise<Result<null>>;
-	message?: string;
+  onSubmit: (formData: FormData) => Promise<Result<null>>;
+  message?: string;
 };
 
 export const ResetPasswordForm = ({
-	onSubmit,
-	message,
+  onSubmit,
+  message,
 }: ResetPasswordFormProps) => {
-	const [isLoading, setIsLoading] = useState(false);
-	const [statusMessage, setStatusMessage] = useState(message ?? '');
+  const [isLoading, setIsLoading] = useState(false);
+  const [statusMessage, setStatusMessage] = useState(message ?? '');
 
-	const form = useForm<z.infer<typeof formSchema>>({
-		resolver: zodResolver(formSchema),
-		defaultValues: {
-			password: '',
-			confirmPassword: '',
-		},
-	});
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      password: '',
+      confirmPassword: '',
+    },
+  });
 
-	const handleUpdatePassword = async (values: z.infer<typeof formSchema>) => {
-		setIsLoading(true);
-		try {
-			// Convert form values to FormData for your server action
-			const formData = new FormData();
-			formData.append('password', values.password);
-			formData.append('confirmPassword', values.confirmPassword);
+  const handleUpdatePassword = async (values: z.infer<typeof formSchema>) => {
+    setIsLoading(true);
+    try {
+      // Convert form values to FormData for your server action
+      const formData = new FormData();
+      formData.append('password', values.password);
+      formData.append('confirmPassword', values.confirmPassword);
 
-			const result = await onSubmit(formData);
-			if (result?.success) {
-				setStatusMessage('Password updated successfully!');
-				form.reset(); // Clear the form on success
-			} else {
-				setStatusMessage('Error: Unable to update password!');
-			}
-		} catch (error) {
-			setStatusMessage(
-				error instanceof Error ? error.message : 'Password was not updated!',
-			);
-		} finally {
-			setIsLoading(false);
-		}
-	};
+      const result = await onSubmit(formData);
+      if (result?.success) {
+        setStatusMessage('Password updated successfully!');
+        form.reset(); // Clear the form on success
+      } else {
+        setStatusMessage('Error: Unable to update password!');
+      }
+    } catch (error) {
+      setStatusMessage(
+        error instanceof Error ? error.message : 'Password was not updated!',
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
-	return (
-		<div>
-			<CardHeader className='pb-5'>
-				<CardTitle className='text-2xl'>Change Password</CardTitle>
-				<CardDescription>
-					Update your password to keep your account secure
-				</CardDescription>
-			</CardHeader>
-			<CardContent>
-				<Form {...form}>
-					<form
-						onSubmit={form.handleSubmit(handleUpdatePassword)}
-						className='space-y-6'
-					>
-						<FormField
-							control={form.control}
-							name='password'
-							render={({ field }) => (
-								<FormItem>
-									<FormLabel>New Password</FormLabel>
-									<FormControl>
-										<Input type='password' {...field} />
-									</FormControl>
-									<FormDescription>
-										Enter your new password. Must be at least 8 characters.
-									</FormDescription>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name='confirmPassword'
-							render={({ field }) => (
-								<FormItem>
-									<FormLabel>Confirm Password</FormLabel>
-									<FormControl>
-										<Input type='password' {...field} />
-									</FormControl>
-									<FormDescription>
-										Please re-enter your new password to confirm.
-									</FormDescription>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-						{statusMessage &&
-							(statusMessage.includes('Error') ||
-							statusMessage.includes('error') ||
-							statusMessage.includes('failed') ||
-							statusMessage.includes('invalid') ? (
-								<StatusMessage message={{ error: statusMessage }} />
-							) : (
-								<StatusMessage message={{ message: statusMessage }} />
-							))}
-						<div className='flex justify-center'>
-							<SubmitButton
-								disabled={isLoading}
-								pendingText='Updating Password...'
-							>
-								Update Password
-							</SubmitButton>
-						</div>
-					</form>
-				</Form>
-			</CardContent>
-		</div>
-	);
+  return (
+    <div>
+      <CardHeader className='pb-5'>
+        <CardTitle className='text-2xl'>Change Password</CardTitle>
+        <CardDescription>
+          Update your password to keep your account secure
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(handleUpdatePassword)}
+            className='space-y-6'
+          >
+            <FormField
+              control={form.control}
+              name='password'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>New Password</FormLabel>
+                  <FormControl>
+                    <Input type='password' {...field} />
+                  </FormControl>
+                  <FormDescription>
+                    Enter your new password. Must be at least 8 characters.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='confirmPassword'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Confirm Password</FormLabel>
+                  <FormControl>
+                    <Input type='password' {...field} />
+                  </FormControl>
+                  <FormDescription>
+                    Please re-enter your new password to confirm.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {statusMessage &&
+              (statusMessage.includes('Error') ||
+              statusMessage.includes('error') ||
+              statusMessage.includes('failed') ||
+              statusMessage.includes('invalid') ? (
+                <StatusMessage message={{ error: statusMessage }} />
+              ) : (
+                <StatusMessage message={{ message: statusMessage }} />
+              ))}
+            <div className='flex justify-center'>
+              <SubmitButton
+                disabled={isLoading}
+                pendingText='Updating Password...'
+              >
+                Update Password
+              </SubmitButton>
+            </div>
+          </form>
+        </Form>
+      </CardContent>
+    </div>
+  );
 };
diff --git a/src/components/default/profile/SignOut.tsx b/src/components/default/profile/SignOut.tsx
index effe26e..78327b2 100644
--- a/src/components/default/profile/SignOut.tsx
+++ b/src/components/default/profile/SignOut.tsx
@@ -7,28 +7,28 @@ import { useAuth } from '@/components/context';
 import { signOut } from '@/lib/actions';
 
 export const SignOut = () => {
-	const { isLoading, refreshUserData } = useAuth();
-	const router = useRouter();
+  const { isLoading, refreshUserData } = useAuth();
+  const router = useRouter();
 
-	const handleSignOut = async () => {
-		const result = await signOut();
-		if (result?.success) {
-			await refreshUserData();
-			router.push('/sign-in');
-		}
-	};
-	return (
-		<div className='flex justify-center'>
-			<CardHeader className='md:w-5/6 w-full'>
-				<SubmitButton
-					className='text-[1.0rem] font-semibold cursor-pointer
+  const handleSignOut = async () => {
+    const result = await signOut();
+    if (result?.success) {
+      await refreshUserData();
+      router.push('/sign-in');
+    }
+  };
+  return (
+    <div className='flex justify-center'>
+      <CardHeader className='md:w-5/6 w-full'>
+        <SubmitButton
+          className='text-[1.0rem] font-semibold cursor-pointer
             hover:bg-red-700/60 dark:hover:bg-red-300/80'
-					disabled={isLoading}
-					onClick={handleSignOut}
-				>
-					Sign Out
-				</SubmitButton>
-			</CardHeader>
-		</div>
-	);
+          disabled={isLoading}
+          onClick={handleSignOut}
+        >
+          Sign Out
+        </SubmitButton>
+      </CardHeader>
+    </div>
+  );
 };
diff --git a/src/components/default/sentry/TestSentry.tsx b/src/components/default/sentry/TestSentry.tsx
index 92dbab4..83eaf44 100644
--- a/src/components/default/sentry/TestSentry.tsx
+++ b/src/components/default/sentry/TestSentry.tsx
@@ -3,124 +3,124 @@
 import * as Sentry from '@sentry/nextjs';
 import { useState, useEffect } from 'react';
 import {
-	Button,
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-	Separator,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Separator,
 } from '@/components/ui';
 import Link from 'next/link';
 import { CheckCircle, MessageCircleWarning } from 'lucide-react';
 
 class SentryExampleFrontendError extends Error {
-	constructor(message: string | undefined) {
-		super(message);
-		this.name = 'SentryExampleFrontendError';
-	}
+  constructor(message: string | undefined) {
+    super(message);
+    this.name = 'SentryExampleFrontendError';
+  }
 }
 
 export const TestSentryCard = () => {
-	const [hasSentError, setHasSentError] = useState(false);
-	const [isConnected, setIsConnected] = useState(true);
+  const [hasSentError, setHasSentError] = useState(false);
+  const [isConnected, setIsConnected] = useState(true);
 
-	useEffect(() => {
-		const checkConnectivity = async () => {
-			console.log('Checking Sentry SDK connectivity...');
-			const result = await Sentry.diagnoseSdkConnectivity();
-			setIsConnected(result !== 'sentry-unreachable');
-		};
-		checkConnectivity().catch((error) => {
-			console.error('Error trying to connect to Sentry: ', error);
-		});
-	}, []);
+  useEffect(() => {
+    const checkConnectivity = async () => {
+      console.log('Checking Sentry SDK connectivity...');
+      const result = await Sentry.diagnoseSdkConnectivity();
+      setIsConnected(result !== 'sentry-unreachable');
+    };
+    checkConnectivity().catch((error) => {
+      console.error('Error trying to connect to Sentry: ', error);
+    });
+  }, []);
 
-	const createError = async () => {
-		await Sentry.startSpan(
-			{
-				name: 'Example Frontend Span',
-				op: 'test',
-			},
-			async () => {
-				const res = await fetch('/api/sentry/example');
-				if (!res.ok) {
-					setHasSentError(true);
-					throw new SentryExampleFrontendError(
-						'This error is raised in our TestSentry component on the main page.',
-					);
-				}
-			},
-		);
-	};
+  const createError = async () => {
+    await Sentry.startSpan(
+      {
+        name: 'Example Frontend Span',
+        op: 'test',
+      },
+      async () => {
+        const res = await fetch('/api/sentry/example');
+        if (!res.ok) {
+          setHasSentError(true);
+          throw new SentryExampleFrontendError(
+            'This error is raised in our TestSentry component on the main page.',
+          );
+        }
+      },
+    );
+  };
 
-	return (
-		<Card>
-			<CardHeader>
-				<div className='flex flex-row my-auto space-x-4'>
-					<svg
-						height='40'
-						width='40'
-						fill='none'
-						xmlns='http://www.w3.org/2000/svg'
-					>
-						<path
-							d='M21.85 2.995a3.698 3.698 0 0 1 1.353 1.354l16.303 28.278a3.703 3.703 0 0 1-1.354 5.053 3.694 3.694 0 0 1-1.848.496h-3.828a31.149 31.149 0 0 0 0-3.09h3.815a.61.61 0 0 0 .537-.917L20.523 5.893a.61.61 0 0 0-1.057 0l-3.739 6.494a28.948 28.948 0 0 1 9.63 10.453 28.988 28.988 0 0 1 3.499 13.78v1.542h-9.852v-1.544a19.106 19.106 0 0 0-2.182-8.85 19.08 19.08 0 0 0-6.032-6.829l-1.85 3.208a15.377 15.377 0 0 1 6.382 12.484v1.542H3.696A3.694 3.694 0 0 1 0 34.473c0-.648.17-1.286.494-1.849l2.33-4.074a8.562 8.562 0 0 1 2.689 1.536L3.158 34.17a.611.611 0 0 0 .538.917h8.448a12.481 12.481 0 0 0-6.037-9.09l-1.344-.772 4.908-8.545 1.344.77a22.16 22.16 0 0 1 7.705 7.444 22.193 22.193 0 0 1 3.316 10.193h3.699a25.892 25.892 0 0 0-3.811-12.033 25.856 25.856 0 0 0-9.046-8.796l-1.344-.772 5.269-9.136a3.698 3.698 0 0 1 3.2-1.849c.648 0 1.285.17 1.847.495Z'
-							fill='currentcolor'
-						/>
-					</svg>
-					<CardTitle className='text-3xl my-auto'>Test Sentry</CardTitle>
-				</div>
-				<CardDescription className='text-[1.0rem]'>
-					Click the button below & view the sample error on{' '}
-					<Link
-						href={`${process.env.NEXT_PUBLIC_SENTRY_URL}`}
-						className='text-accent-foreground underline hover:text-primary'
-					>
-						the Sentry website
-					</Link>
-					. Navigate to the {"'"}Issues{"'"} page & you should see the sample
-					error!
-				</CardDescription>
-			</CardHeader>
-			<CardContent>
-				<div className='flex flex-row gap-4 my-auto'>
-					<Button
-						type='button'
-						onClick={createError}
-						className='cursor-pointer text-md my-auto py-6'
-					>
-						<span>Throw Sample Error</span>
-					</Button>
-					{hasSentError ? (
-						<div className='rounded-md bg-green-500/80 dark:bg-green-500/50 py-2 px-4 flex flex-row gap-2 my-auto'>
-							<CheckCircle size={30} className='my-auto' />
-							<p className='text-lg'>Sample error was sent to Sentry!</p>
-						</div>
-					) : !isConnected ? (
-						<div className='rounded-md bg-red-600/50 dark:bg-red-500/50 py-2 px-4 flex flex-row gap-2 my-auto'>
-							<MessageCircleWarning size={40} className='my-auto' />
-							<p>
-								Wait! The Sentry SDK is not able to reach Sentry right now -
-								this may be due to an adblocker. For more information, see{' '}
-								<Link
-									href='https://docs.sentry.io/platforms/javascript/guides/nextjs/troubleshooting/#the-sdk-is-not-sending-any-data'
-									className='text-accent-foreground underline hover:text-primary'
-								>
-									the troubleshooting guide.
-								</Link>
-							</p>
-						</div>
-					) : (
-						<div className='success_placeholder' />
-					)}
-				</div>
-				<Separator className='my-4 bg-accent' />
-				<p className='description'>
-					Warning! Sometimes Adblockers will prevent errors from being sent to
-					Sentry.
-				</p>
-			</CardContent>
-		</Card>
-	);
+  return (
+    <Card>
+      <CardHeader>
+        <div className='flex flex-row my-auto space-x-4'>
+          <svg
+            height='40'
+            width='40'
+            fill='none'
+            xmlns='http://www.w3.org/2000/svg'
+          >
+            <path
+              d='M21.85 2.995a3.698 3.698 0 0 1 1.353 1.354l16.303 28.278a3.703 3.703 0 0 1-1.354 5.053 3.694 3.694 0 0 1-1.848.496h-3.828a31.149 31.149 0 0 0 0-3.09h3.815a.61.61 0 0 0 .537-.917L20.523 5.893a.61.61 0 0 0-1.057 0l-3.739 6.494a28.948 28.948 0 0 1 9.63 10.453 28.988 28.988 0 0 1 3.499 13.78v1.542h-9.852v-1.544a19.106 19.106 0 0 0-2.182-8.85 19.08 19.08 0 0 0-6.032-6.829l-1.85 3.208a15.377 15.377 0 0 1 6.382 12.484v1.542H3.696A3.694 3.694 0 0 1 0 34.473c0-.648.17-1.286.494-1.849l2.33-4.074a8.562 8.562 0 0 1 2.689 1.536L3.158 34.17a.611.611 0 0 0 .538.917h8.448a12.481 12.481 0 0 0-6.037-9.09l-1.344-.772 4.908-8.545 1.344.77a22.16 22.16 0 0 1 7.705 7.444 22.193 22.193 0 0 1 3.316 10.193h3.699a25.892 25.892 0 0 0-3.811-12.033 25.856 25.856 0 0 0-9.046-8.796l-1.344-.772 5.269-9.136a3.698 3.698 0 0 1 3.2-1.849c.648 0 1.285.17 1.847.495Z'
+              fill='currentcolor'
+            />
+          </svg>
+          <CardTitle className='text-3xl my-auto'>Test Sentry</CardTitle>
+        </div>
+        <CardDescription className='text-[1.0rem]'>
+          Click the button below & view the sample error on{' '}
+          <Link
+            href={`${process.env.NEXT_PUBLIC_SENTRY_URL}`}
+            className='text-accent-foreground underline hover:text-primary'
+          >
+            the Sentry website
+          </Link>
+          . Navigate to the {"'"}Issues{"'"} page & you should see the sample
+          error!
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className='flex flex-row gap-4 my-auto'>
+          <Button
+            type='button'
+            onClick={createError}
+            className='cursor-pointer text-md my-auto py-6'
+          >
+            <span>Throw Sample Error</span>
+          </Button>
+          {hasSentError ? (
+            <div className='rounded-md bg-green-500/80 dark:bg-green-500/50 py-2 px-4 flex flex-row gap-2 my-auto'>
+              <CheckCircle size={30} className='my-auto' />
+              <p className='text-lg'>Sample error was sent to Sentry!</p>
+            </div>
+          ) : !isConnected ? (
+            <div className='rounded-md bg-red-600/50 dark:bg-red-500/50 py-2 px-4 flex flex-row gap-2 my-auto'>
+              <MessageCircleWarning size={40} className='my-auto' />
+              <p>
+                Wait! The Sentry SDK is not able to reach Sentry right now -
+                this may be due to an adblocker. For more information, see{' '}
+                <Link
+                  href='https://docs.sentry.io/platforms/javascript/guides/nextjs/troubleshooting/#the-sdk-is-not-sending-any-data'
+                  className='text-accent-foreground underline hover:text-primary'
+                >
+                  the troubleshooting guide.
+                </Link>
+              </p>
+            </div>
+          ) : (
+            <div className='success_placeholder' />
+          )}
+        </div>
+        <Separator className='my-4 bg-accent' />
+        <p className='description'>
+          Warning! Sometimes Adblockers will prevent errors from being sent to
+          Sentry.
+        </p>
+      </CardContent>
+    </Card>
+  );
 };
diff --git a/src/components/default/tutorial/CodeBlock.tsx b/src/components/default/tutorial/CodeBlock.tsx
deleted file mode 100644
index 32b7126..0000000
--- a/src/components/default/tutorial/CodeBlock.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { Button } from '@/components/ui';
-
-const CopyIcon = () => (
-	<svg
-		xmlns='http://www.w3.org/2000/svg'
-		width='20'
-		height='20'
-		viewBox='0 0 24 24'
-		fill='none'
-		stroke='currentColor'
-		strokeWidth='2'
-		strokeLinecap='round'
-		strokeLinejoin='round'
-	>
-		<rect x='9' y='9' width='13' height='13' rx='2' ry='2'></rect>
-		<path d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'></path>
-	</svg>
-);
-
-const CheckIcon = () => (
-	<svg
-		xmlns='http://www.w3.org/2000/svg'
-		width='20'
-		height='20'
-		viewBox='0 0 24 24'
-		fill='none'
-		stroke='currentColor'
-		strokeWidth='2'
-		strokeLinecap='round'
-		strokeLinejoin='round'
-	>
-		<polyline points='20 6 9 17 4 12'></polyline>
-	</svg>
-);
-
-export function CodeBlock({ code }: { code: string }) {
-	const [icon, setIcon] = useState(CopyIcon);
-
-	const copy = async () => {
-		await navigator?.clipboard?.writeText(code);
-		setIcon(CheckIcon);
-		setTimeout(() => setIcon(CopyIcon), 2000);
-	};
-
-	return (
-		<pre className='bg-muted rounded-md p-6 my-6 relative'>
-			<Button
-				size='icon'
-				onClick={copy}
-				variant={'outline'}
-				className='absolute right-2 top-2'
-			>
-				{icon}
-			</Button>
-			<code className='text-xs p-3'>{code}</code>
-		</pre>
-	);
-}
diff --git a/src/components/default/tutorial/FetchDataSteps.tsx b/src/components/default/tutorial/FetchDataSteps.tsx
deleted file mode 100644
index f4dfabd..0000000
--- a/src/components/default/tutorial/FetchDataSteps.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { TutorialStep, CodeBlock } from '@/components/default/tutorial';
-
-const create = `create table notes (
-  id bigserial primary key,
-  title text
-);
-
-insert into notes(title)
-values
-  ('Today I created a Supabase project.'),
-  ('I added some data and queried it from Next.js.'),
-  ('It was awesome!');
-`.trim();
-
-const server = `import { createClient } from '@/utils/supabase/server'
-
-export default async function Page() {
-  const supabase = await createClient()
-  const { data: notes } = await supabase.from('notes').select()
-
-  return <pre>{JSON.stringify(notes, null, 2)}</pre>
-}
-`.trim();
-
-const client = `'use client'
-
-import { createClient } from '@/utils/supabase/client'
-import { useEffect, useState } from 'react'
-
-export default function Page() {
-  const [notes, setNotes] = useState<any[] | null>(null)
-  const supabase = createClient()
-
-  useEffect(() => {
-    const getData = async () => {
-      const { data } = await supabase.from('notes').select()
-      setNotes(data)
-    }
-    getData()
-  }, [])
-
-  return <pre>{JSON.stringify(notes, null, 2)}</pre>
-}
-`.trim();
-
-export const FetchDataSteps = () => {
-	return (
-		<ol className='flex flex-col gap-6'>
-			<TutorialStep title='Create some tables and insert some data'>
-				<p>
-					Head over to the{' '}
-					<a
-						href='https://supabase.com/dashboard/project/_/editor'
-						className='font-bold hover:underline text-foreground/80'
-						target='_blank'
-						rel='noreferrer'
-					>
-						Table Editor
-					</a>{' '}
-					for your Supabase project to create a table and insert some example
-					data. If you&apos;re stuck for creativity, you can copy and paste the
-					following into the{' '}
-					<a
-						href='https://supabase.com/dashboard/project/_/sql/new'
-						className='font-bold hover:underline text-foreground/80'
-						target='_blank'
-						rel='noreferrer'
-					>
-						SQL Editor
-					</a>{' '}
-					and click RUN!
-				</p>
-				<CodeBlock code={create} />
-			</TutorialStep>
-
-			<TutorialStep title='Query Supabase data from Next.js'>
-				<p>
-					To create a Supabase client and query data from an Async Server
-					Component, create a new page.tsx file at{' '}
-					<span className='relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs font-medium text-secondary-foreground border'>
-						/app/notes/page.tsx
-					</span>{' '}
-					and add the following.
-				</p>
-				<CodeBlock code={server} />
-				<p>Alternatively, you can use a Client Component.</p>
-				<CodeBlock code={client} />
-			</TutorialStep>
-
-			<TutorialStep title='Build in a weekend and scale to millions!'>
-				<p>You&apos;re ready to launch your product to the world! 🚀</p>
-			</TutorialStep>
-		</ol>
-	);
-};
diff --git a/src/components/default/tutorial/TutorialStep.tsx b/src/components/default/tutorial/TutorialStep.tsx
deleted file mode 100644
index 7a3f92d..0000000
--- a/src/components/default/tutorial/TutorialStep.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Checkbox } from '@/components/ui';
-
-export const TutorialStep = ({
-	title,
-	children,
-}: {
-	title: string;
-	children: React.ReactNode;
-}) => {
-	return (
-		<li className='relative'>
-			<Checkbox
-				id={title}
-				name={title}
-				className={`absolute top-[3px] mr-2 peer`}
-			/>
-			<label
-				htmlFor={title}
-				className={`relative text-base text-foreground peer-checked:line-through font-medium`}
-			>
-				<span className='ml-8'>{title}</span>
-				<div
-					className={`ml-8 text-sm peer-checked:line-through font-normal text-muted-foreground`}
-				>
-					{children}
-				</div>
-			</label>
-		</li>
-	);
-};
diff --git a/src/components/default/tutorial/index.tsx b/src/components/default/tutorial/index.tsx
deleted file mode 100644
index b2a82b0..0000000
--- a/src/components/default/tutorial/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export { CodeBlock } from './CodeBlock';
-export { FetchDataSteps } from './FetchDataSteps';
-export { TutorialStep } from './TutorialStep';
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
index cb3b90a..52e6be0 100644
--- a/src/components/ui/avatar.tsx
+++ b/src/components/ui/avatar.tsx
@@ -6,48 +6,48 @@ import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { cn } from '@/lib/utils';
 
 function Avatar({
-	className,
-	...props
+  className,
+  ...props
 }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
-	return (
-		<AvatarPrimitive.Root
-			data-slot='avatar'
-			className={cn(
-				'relative flex size-8 shrink-0 overflow-hidden rounded-full',
-				className,
-			)}
-			{...props}
-		/>
-	);
+  return (
+    <AvatarPrimitive.Root
+      data-slot='avatar'
+      className={cn(
+        'relative flex size-8 shrink-0 overflow-hidden rounded-full',
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 
 function AvatarImage({
-	className,
-	...props
+  className,
+  ...props
 }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
-	return (
-		<AvatarPrimitive.Image
-			data-slot='avatar-image'
-			className={cn('aspect-square size-full', className)}
-			{...props}
-		/>
-	);
+  return (
+    <AvatarPrimitive.Image
+      data-slot='avatar-image'
+      className={cn('aspect-square size-full', className)}
+      {...props}
+    />
+  );
 }
 
 function AvatarFallback({
-	className,
-	...props
+  className,
+  ...props
 }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
-	return (
-		<AvatarPrimitive.Fallback
-			data-slot='avatar-fallback'
-			className={cn(
-				'bg-muted flex size-full items-center justify-center rounded-full',
-				className,
-			)}
-			{...props}
-		/>
-	);
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot='avatar-fallback'
+      className={cn(
+        'bg-muted flex size-full items-center justify-center rounded-full',
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 
 export { Avatar, AvatarImage, AvatarFallback };
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
index 3438196..8375444 100644
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -5,42 +5,42 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
 const badgeVariants = cva(
-	'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
-	{
-		variants: {
-			variant: {
-				default:
-					'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
-				secondary:
-					'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
-				destructive:
-					'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-				outline:
-					'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
-			},
-		},
-		defaultVariants: {
-			variant: 'default',
-		},
-	},
+  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+        destructive:
+          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
 );
 
 function Badge({
-	className,
-	variant,
-	asChild = false,
-	...props
+  className,
+  variant,
+  asChild = false,
+  ...props
 }: React.ComponentProps<'span'> &
-	VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-	const Comp = asChild ? Slot : 'span';
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'span';
 
-	return (
-		<Comp
-			data-slot='badge'
-			className={cn(badgeVariants({ variant }), className)}
-			{...props}
-		/>
-	);
+  return (
+    <Comp
+      data-slot='badge'
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
 }
 
 export { Badge, badgeVariants };
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 3b08136..b012b53 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -5,58 +5,58 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
-	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-	{
-		variants: {
-			variant: {
-				default:
-					'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
-				destructive:
-					'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-				outline:
-					'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
-				secondary:
-					'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
-				ghost:
-					'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-				link: 'text-primary underline-offset-4 hover:underline',
-			},
-			size: {
-				default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-				sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-				lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-				xl: 'h-12 rounded-md px-8 has-[>svg]:px-6',
-				xxl: 'h-14 rounded-md px-10 has-[>svg]:px-8',
-				icon: 'size-9',
-				smicon: 'size-6',
-			},
-		},
-		defaultVariants: {
-			variant: 'default',
-			size: 'default',
-		},
-	},
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        xl: 'h-12 rounded-md px-8 has-[>svg]:px-6',
+        xxl: 'h-14 rounded-md px-10 has-[>svg]:px-8',
+        icon: 'size-9',
+        smicon: 'size-6',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
 );
 
 function Button({
-	className,
-	variant,
-	size,
-	asChild = false,
-	...props
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
 }: React.ComponentProps<'button'> &
-	VariantProps<typeof buttonVariants> & {
-		asChild?: boolean;
-	}) {
-	const Comp = asChild ? Slot : 'button';
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : 'button';
 
-	return (
-		<Comp
-			data-slot='button'
-			className={cn(buttonVariants({ variant, size, className }))}
-			{...props}
-		/>
-	);
+  return (
+    <Comp
+      data-slot='button'
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
 }
 
 export { Button, buttonVariants };
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 74ce9ae..32a06b1 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -3,90 +3,90 @@ import * as React from 'react';
 import { cn } from '@/lib/utils';
 
 function Card({ className, ...props }: React.ComponentProps<'div'>) {
-	return (
-		<div
-			data-slot='card'
-			className={cn(
-				'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
-				className,
-			)}
-			{...props}
-		/>
-	);
+  return (
+    <div
+      data-slot='card'
+      className={cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 
 function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
-	return (
-		<div
-			data-slot='card-header'
-			className={cn(
-				'@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
-				className,
-			)}
-			{...props}
-		/>
-	);
+  return (
+    <div
+      data-slot='card-header'
+      className={cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 
 function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
-	return (
-		<div
-			data-slot='card-title'
-			className={cn('leading-none font-semibold', className)}
-			{...props}
-		/>
-	);
+  return (
+    <div
+      data-slot='card-title'
+      className={cn('leading-none font-semibold', className)}
+      {...props}
+    />
+  );
 }
 
 function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
-	return (
-		<div
-			data-slot='card-description'
-			className={cn('text-muted-foreground text-sm', className)}
-			{...props}
-		/>
-	);
+  return (
+    <div
+      data-slot='card-description'
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
 }
 
 function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
-	return (
-		<div
-			data-slot='card-action'
-			className={cn(
-				'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
-				className,
-			)}
-			{...props}
-		/>
-	);
+  return (
+    <div
+      data-slot='card-action'
+      className={cn(
+        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 
 function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
-	return (
-		<div
-			data-slot='card-content'
-			className={cn('px-6', className)}
-			{...props}
-		/>
-	);
+  return (
+    <div
+      data-slot='card-content'
+      className={cn('px-6', className)}
+      {...props}
+    />
+  );
 }
 
 function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
-	return (
-		<div
-			data-slot='card-footer'
-			className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
-			{...props}
-		/>
-	);
+  return (
+    <div
+      data-slot='card-footer'
+      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
+      {...props}
+    />
+  );
 }
 
 export {
-	Card,
-	CardHeader,
-	CardFooter,
-	CardTitle,
-	CardAction,
-	CardDescription,
-	CardContent,
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
 };
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
index 33f9527..fde2498 100644
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -7,26 +7,26 @@ import { CheckIcon } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
 function Checkbox({
-	className,
-	...props
+  className,
+  ...props
 }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
-	return (
-		<CheckboxPrimitive.Root
-			data-slot='checkbox'
-			className={cn(
-				'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
-				className,
-			)}
-			{...props}
-		>
-			<CheckboxPrimitive.Indicator
-				data-slot='checkbox-indicator'
-				className='flex items-center justify-center text-current transition-none'
-			>
-				<CheckIcon className='size-3.5' />
-			</CheckboxPrimitive.Indicator>
-		</CheckboxPrimitive.Root>
-	);
+  return (
+    <CheckboxPrimitive.Root
+      data-slot='checkbox'
+      className={cn(
+        'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot='checkbox-indicator'
+        className='flex items-center justify-center text-current transition-none'
+      >
+        <CheckIcon className='size-3.5' />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
 }
 
 export { Checkbox };
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index 7dde1e2..7a8804e 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -7,251 +7,251 @@ import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
 function DropdownMenu({
-	...props
+  ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-	return <DropdownMenuPrimitive.Root data-slot='dropdown-menu' {...props} />;
+  return <DropdownMenuPrimitive.Root data-slot='dropdown-menu' {...props} />;
 }
 
 function DropdownMenuPortal({
-	...props
+  ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
-	return (
-		<DropdownMenuPrimitive.Portal data-slot='dropdown-menu-portal' {...props} />
-	);
+  return (
+    <DropdownMenuPrimitive.Portal data-slot='dropdown-menu-portal' {...props} />
+  );
 }
 
 function DropdownMenuTrigger({
-	...props
+  ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
-	return (
-		<DropdownMenuPrimitive.Trigger
-			data-slot='dropdown-menu-trigger'
-			{...props}
-		/>
-	);
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot='dropdown-menu-trigger'
+      {...props}
+    />
+  );
 }
 
 function DropdownMenuContent({
-	className,
-	sideOffset = 4,
-	...props
+  className,
+  sideOffset = 4,
+  ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
-	return (
-		<DropdownMenuPrimitive.Portal>
-			<DropdownMenuPrimitive.Content
-				data-slot='dropdown-menu-content'
-				sideOffset={sideOffset}
-				className={cn(
-					'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
-					className,
-				)}
-				{...props}
-			/>
-		</DropdownMenuPrimitive.Portal>
-	);
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot='dropdown-menu-content'
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
 }
 
 function DropdownMenuGroup({
-	...props
+  ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
-	return (
-		<DropdownMenuPrimitive.Group data-slot='dropdown-menu-group' {...props} />
-	);
+  return (
+    <DropdownMenuPrimitive.Group data-slot='dropdown-menu-group' {...props} />
+  );
 }
 
 function DropdownMenuItem({
-	className,
-	inset,
-	variant = 'default',
-	...props
+  className,
+  inset,
+  variant = 'default',
+  ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-	inset?: boolean;
-	variant?: 'default' | 'destructive';
+  inset?: boolean;
+  variant?: 'default' | 'destructive';
 }) {
-	return (
-		<DropdownMenuPrimitive.Item
-			data-slot='dropdown-menu-item'
-			data-inset={inset}
-			data-variant={variant}
-			className={cn(
-				"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-				className,
-			)}
-			{...props}
-		/>
-	);
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot='dropdown-menu-item'
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 
 function DropdownMenuCheckboxItem({
-	className,
-	children,
-	checked,
-	...props
+  className,
+  children,
+  checked,
+  ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
-	return (
-		<DropdownMenuPrimitive.CheckboxItem
-			data-slot='dropdown-menu-checkbox-item'
-			className={cn(
-				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-				className,
-			)}
-			checked={checked}
-			{...props}
-		>
-			<span className='pointer-events-none absolute left-2 flex size-3.5 items-center justify-center'>
-				<DropdownMenuPrimitive.ItemIndicator>
-					<CheckIcon className='size-4' />
-				</DropdownMenuPrimitive.ItemIndicator>
-			</span>
-			{children}
-		</DropdownMenuPrimitive.CheckboxItem>
-	);
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot='dropdown-menu-checkbox-item'
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className='pointer-events-none absolute left-2 flex size-3.5 items-center justify-center'>
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className='size-4' />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
 }
 
 function DropdownMenuRadioGroup({
-	...props
+  ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
-	return (
-		<DropdownMenuPrimitive.RadioGroup
-			data-slot='dropdown-menu-radio-group'
-			{...props}
-		/>
-	);
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot='dropdown-menu-radio-group'
+      {...props}
+    />
+  );
 }
 
 function DropdownMenuRadioItem({
-	className,
-	children,
-	...props
+  className,
+  children,
+  ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
-	return (
-		<DropdownMenuPrimitive.RadioItem
-			data-slot='dropdown-menu-radio-item'
-			className={cn(
-				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-				className,
-			)}
-			{...props}
-		>
-			<span className='pointer-events-none absolute left-2 flex size-3.5 items-center justify-center'>
-				<DropdownMenuPrimitive.ItemIndicator>
-					<CircleIcon className='size-2 fill-current' />
-				</DropdownMenuPrimitive.ItemIndicator>
-			</span>
-			{children}
-		</DropdownMenuPrimitive.RadioItem>
-	);
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot='dropdown-menu-radio-item'
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className='pointer-events-none absolute left-2 flex size-3.5 items-center justify-center'>
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className='size-2 fill-current' />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
 }
 
 function DropdownMenuLabel({
-	className,
-	inset,
-	...props
+  className,
+  inset,
+  ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-	inset?: boolean;
+  inset?: boolean;
 }) {
-	return (
-		<DropdownMenuPrimitive.Label
-			data-slot='dropdown-menu-label'
-			data-inset={inset}
-			className={cn(
-				'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
-				className,
-			)}
-			{...props}
-		/>
-	);
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot='dropdown-menu-label'
+      data-inset={inset}
+      className={cn(
+        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 
 function DropdownMenuSeparator({
-	className,
-	...props
+  className,
+  ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
-	return (
-		<DropdownMenuPrimitive.Separator
-			data-slot='dropdown-menu-separator'
-			className={cn('bg-border -mx-1 my-1 h-px', className)}
-			{...props}
-		/>
-	);
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot='dropdown-menu-separator'
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  );
 }
 
 function DropdownMenuShortcut({
-	className,
-	...props
+  className,
+  ...props
 }: React.ComponentProps<'span'>) {
-	return (
-		<span
-			data-slot='dropdown-menu-shortcut'
-			className={cn(
-				'text-muted-foreground ml-auto text-xs tracking-widest',
-				className,
-			)}
-			{...props}
-		/>
-	);
+  return (
+    <span
+      data-slot='dropdown-menu-shortcut'
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 
 function DropdownMenuSub({
-	...props
+  ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-	return <DropdownMenuPrimitive.Sub data-slot='dropdown-menu-sub' {...props} />;
+  return <DropdownMenuPrimitive.Sub data-slot='dropdown-menu-sub' {...props} />;
 }
 
 function DropdownMenuSubTrigger({
-	className,
-	inset,
-	children,
-	...props
+  className,
+  inset,
+  children,
+  ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-	inset?: boolean;
+  inset?: boolean;
 }) {
-	return (
-		<DropdownMenuPrimitive.SubTrigger
-			data-slot='dropdown-menu-sub-trigger'
-			data-inset={inset}
-			className={cn(
-				'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
-				className,
-			)}
-			{...props}
-		>
-			{children}
-			<ChevronRightIcon className='ml-auto size-4' />
-		</DropdownMenuPrimitive.SubTrigger>
-	);
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot='dropdown-menu-sub-trigger'
+      data-inset={inset}
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className='ml-auto size-4' />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
 }
 
 function DropdownMenuSubContent({
-	className,
-	...props
+  className,
+  ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
-	return (
-		<DropdownMenuPrimitive.SubContent
-			data-slot='dropdown-menu-sub-content'
-			className={cn(
-				'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
-				className,
-			)}
-			{...props}
-		/>
-	);
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot='dropdown-menu-sub-content'
+      className={cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 
 export {
-	DropdownMenu,
-	DropdownMenuPortal,
-	DropdownMenuTrigger,
-	DropdownMenuContent,
-	DropdownMenuGroup,
-	DropdownMenuLabel,
-	DropdownMenuItem,
-	DropdownMenuCheckboxItem,
-	DropdownMenuRadioGroup,
-	DropdownMenuRadioItem,
-	DropdownMenuSeparator,
-	DropdownMenuShortcut,
-	DropdownMenuSub,
-	DropdownMenuSubTrigger,
-	DropdownMenuSubContent,
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
 };
diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
index 7ef26b9..5dd2131 100644
--- a/src/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@@ -4,13 +4,13 @@ import * as React from 'react';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { Slot } from '@radix-ui/react-slot';
 import {
-	Controller,
-	FormProvider,
-	useFormContext,
-	useFormState,
-	type ControllerProps,
-	type FieldPath,
-	type FieldValues,
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
 } from 'react-hook-form';
 
 import { cn } from '@/lib/utils';
@@ -19,150 +19,150 @@ import { Label } from '@/components/ui/label';
 const Form = FormProvider;
 
 type FormFieldContextValue<
-	TFieldValues extends FieldValues = FieldValues,
-	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
-	name: TName;
+  name: TName;
 };
 
 const FormFieldContext = React.createContext<FormFieldContextValue>(
-	{} as FormFieldContextValue,
+  {} as FormFieldContextValue,
 );
 
 const FormField = <
-	TFieldValues extends FieldValues = FieldValues,
-	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
-	...props
+  ...props
 }: ControllerProps<TFieldValues, TName>) => {
-	return (
-		<FormFieldContext.Provider value={{ name: props.name }}>
-			<Controller {...props} />
-		</FormFieldContext.Provider>
-	);
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
 };
 
 const useFormField = () => {
-	const fieldContext = React.useContext(FormFieldContext);
-	const itemContext = React.useContext(FormItemContext);
-	const { getFieldState } = useFormContext();
-	const formState = useFormState({ name: fieldContext.name });
-	const fieldState = getFieldState(fieldContext.name, formState);
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
 
-	if (!fieldContext) {
-		throw new Error('useFormField should be used within <FormField>');
-	}
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>');
+  }
 
-	const { id } = itemContext;
+  const { id } = itemContext;
 
-	return {
-		id,
-		name: fieldContext.name,
-		formItemId: `${id}-form-item`,
-		formDescriptionId: `${id}-form-item-description`,
-		formMessageId: `${id}-form-item-message`,
-		...fieldState,
-	};
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
 };
 
 type FormItemContextValue = {
-	id: string;
+  id: string;
 };
 
 const FormItemContext = React.createContext<FormItemContextValue>(
-	{} as FormItemContextValue,
+  {} as FormItemContextValue,
 );
 
 function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
-	const id = React.useId();
+  const id = React.useId();
 
-	return (
-		<FormItemContext.Provider value={{ id }}>
-			<div
-				data-slot='form-item'
-				className={cn('grid gap-2', className)}
-				{...props}
-			/>
-		</FormItemContext.Provider>
-	);
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot='form-item'
+        className={cn('grid gap-2', className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  );
 }
 
 function FormLabel({
-	className,
-	...props
+  className,
+  ...props
 }: React.ComponentProps<typeof LabelPrimitive.Root>) {
-	const { error, formItemId } = useFormField();
+  const { error, formItemId } = useFormField();
 
-	return (
-		<Label
-			data-slot='form-label'
-			data-error={!!error}
-			className={cn('data-[error=true]:text-destructive', className)}
-			htmlFor={formItemId}
-			{...props}
-		/>
-	);
+  return (
+    <Label
+      data-slot='form-label'
+      data-error={!!error}
+      className={cn('data-[error=true]:text-destructive', className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
 }
 
 function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
-	const { error, formItemId, formDescriptionId, formMessageId } =
-		useFormField();
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
 
-	return (
-		<Slot
-			data-slot='form-control'
-			id={formItemId}
-			aria-describedby={
-				!error
-					? `${formDescriptionId}`
-					: `${formDescriptionId} ${formMessageId}`
-			}
-			aria-invalid={!!error}
-			{...props}
-		/>
-	);
+  return (
+    <Slot
+      data-slot='form-control'
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
 }
 
 function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
-	const { formDescriptionId } = useFormField();
+  const { formDescriptionId } = useFormField();
 
-	return (
-		<p
-			data-slot='form-description'
-			id={formDescriptionId}
-			className={cn('text-muted-foreground text-sm', className)}
-			{...props}
-		/>
-	);
+  return (
+    <p
+      data-slot='form-description'
+      id={formDescriptionId}
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
 }
 
 function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
-	const { error, formMessageId } = useFormField();
-	const body = error ? String(error?.message ?? '') : props.children;
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? '') : props.children;
 
-	if (!body) {
-		return null;
-	}
+  if (!body) {
+    return null;
+  }
 
-	return (
-		<p
-			data-slot='form-message'
-			id={formMessageId}
-			className={cn('text-destructive text-sm', className)}
-			{...props}
-		>
-			{body}
-		</p>
-	);
+  return (
+    <p
+      data-slot='form-message'
+      id={formMessageId}
+      className={cn('text-destructive text-sm', className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
 }
 
 export {
-	useFormField,
-	Form,
-	FormItem,
-	FormLabel,
-	FormControl,
-	FormDescription,
-	FormMessage,
-	FormField,
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
 };
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 4b19a66..485626a 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -3,19 +3,19 @@ import * as React from 'react';
 import { cn } from '@/lib/utils';
 
 function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
-	return (
-		<input
-			type={type}
-			data-slot='input'
-			className={cn(
-				'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-				'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-				'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-				className,
-			)}
-			{...props}
-		/>
-	);
+  return (
+    <input
+      type={type}
+      data-slot='input'
+      className={cn(
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 
 export { Input };
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
index 74e46d3..6bc5f71 100644
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@@ -6,19 +6,19 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 import { cn } from '@/lib/utils';
 
 function Label({
-	className,
-	...props
+  className,
+  ...props
 }: React.ComponentProps<typeof LabelPrimitive.Root>) {
-	return (
-		<LabelPrimitive.Root
-			data-slot='label'
-			className={cn(
-				'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
-				className,
-			)}
-			{...props}
-		/>
-	);
+  return (
+    <LabelPrimitive.Root
+      data-slot='label'
+      className={cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 
 export { Label };
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
index c1faffa..39eb020 100644
--- a/src/components/ui/separator.tsx
+++ b/src/components/ui/separator.tsx
@@ -6,23 +6,23 @@ import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import { cn } from '@/lib/utils';
 
 function Separator({
-	className,
-	orientation = 'horizontal',
-	decorative = true,
-	...props
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
 }: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
-	return (
-		<SeparatorPrimitive.Root
-			data-slot='separator-root'
-			decorative={decorative}
-			orientation={orientation}
-			className={cn(
-				'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
-				className,
-			)}
-			{...props}
-		/>
-	);
+  return (
+    <SeparatorPrimitive.Root
+      data-slot='separator-root'
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 
 export { Separator };
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
index fe13844..a3612b5 100644
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -4,22 +4,22 @@ import { useTheme } from 'next-themes';
 import { Toaster as Sonner, ToasterProps } from 'sonner';
 
 const Toaster = ({ ...props }: ToasterProps) => {
-	const { theme = 'system' } = useTheme();
+  const { theme = 'system' } = useTheme();
 
-	return (
-		<Sonner
-			theme={theme as ToasterProps['theme']}
-			className='toaster group'
-			style={
-				{
-					'--normal-bg': 'var(--popover)',
-					'--normal-text': 'var(--popover-foreground)',
-					'--normal-border': 'var(--border)',
-				} as React.CSSProperties
-			}
-			{...props}
-		/>
-	);
+  return (
+    <Sonner
+      theme={theme as ToasterProps['theme']}
+      className='toaster group'
+      style={
+        {
+          '--normal-bg': 'var(--popover)',
+          '--normal-text': 'var(--popover-foreground)',
+          '--normal-border': 'var(--border)',
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  );
 };
 
 export { Toaster };
diff --git a/src/env.js b/src/env.js
index c067f13..202e134 100644
--- a/src/env.js
+++ b/src/env.js
@@ -2,57 +2,57 @@ import { createEnv } from '@t3-oss/env-nextjs';
 import { z } from 'zod';
 
 export const env = createEnv({
-	/**
-	 * Specify your server-side environment variables schema here.
-	 * This way you can ensure the app isn't built with invalid env vars.
-	 */
-	server: {
-		NODE_ENV: z
-			.enum(['development', 'test', 'production'])
-			.default('development'),
-		SENTRY_AUTH_TOKEN: z.string().min(1),
-		CI: z.enum(['true', 'false']).default('false'),
-	},
+  /**
+   * Specify your server-side environment variables schema here.
+   * This way you can ensure the app isn't built with invalid env vars.
+   */
+  server: {
+    NODE_ENV: z
+      .enum(['development', 'test', 'production'])
+      .default('development'),
+    SENTRY_AUTH_TOKEN: z.string().min(1),
+    CI: z.enum(['true', 'false']).default('false'),
+  },
 
-	/**
-	 * Specify your client-side environment variables schema here.
-	 * This way you can ensure the app isn't built with invalid env vars.
-	 * To expose them to the client, prefix them with `NEXT_PUBLIC_`.
-	 */
-	client: {
-		NEXT_PUBLIC_SUPABASE_URL: z.string().url(),
-		NEXT_PUBLIC_SUPABASE_ANON_KEY: z.string().min(1),
-		NEXT_PUBLIC_SITE_URL: z.string().url().default('http://localhost:3000'),
-		NEXT_PUBLIC_SENTRY_DSN: z.string().min(1),
-		NEXT_PUBLIC_SENTRY_URL: z
-			.string()
-			.url()
-			.default('https://sentry.gbrown.org'),
-	},
+  /**
+   * Specify your client-side environment variables schema here.
+   * This way you can ensure the app isn't built with invalid env vars.
+   * To expose them to the client, prefix them with `NEXT_PUBLIC_`.
+   */
+  client: {
+    NEXT_PUBLIC_SUPABASE_URL: z.string().url(),
+    NEXT_PUBLIC_SUPABASE_ANON_KEY: z.string().min(1),
+    NEXT_PUBLIC_SITE_URL: z.string().url().default('http://localhost:3000'),
+    NEXT_PUBLIC_SENTRY_DSN: z.string().min(1),
+    NEXT_PUBLIC_SENTRY_URL: z
+      .string()
+      .url()
+      .default('https://sentry.gbrown.org'),
+  },
 
-	/**
-	 * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
-	 * middlewares) or client-side so we need to destruct manually.
-	 */
-	runtimeEnv: {
-		NODE_ENV: process.env.NODE_ENV,
-		SENTRY_AUTH_TOKEN: process.env.SENTRY_AUTH_TOKEN,
-		CI: process.env.CI,
+  /**
+   * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
+   * middlewares) or client-side so we need to destruct manually.
+   */
+  runtimeEnv: {
+    NODE_ENV: process.env.NODE_ENV,
+    SENTRY_AUTH_TOKEN: process.env.SENTRY_AUTH_TOKEN,
+    CI: process.env.CI,
 
-		NEXT_PUBLIC_SUPABASE_URL: process.env.NEXT_PUBLIC_SUPABASE_URL,
-		NEXT_PUBLIC_SUPABASE_ANON_KEY: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
-		NEXT_PUBLIC_SITE_URL: process.env.NEXT_PUBLIC_SITE_URL,
-		NEXT_PUBLIC_SENTRY_DSN: process.env.NEXT_PUBLIC_SENTRY_DSN,
-		NEXT_PUBLIC_SENTRY_URL: process.env.NEXT_PUBLIC_SENTRY_URL,
-	},
-	/**
-	 * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially
-	 * useful for Docker builds.
-	 */
-	skipValidation: !!process.env.SKIP_ENV_VALIDATION,
-	/**
-	 * Makes it so that empty strings are treated as undefined. `SOME_VAR: z.string()` and
-	 * `SOME_VAR=''` will throw an error.
-	 */
-	emptyStringAsUndefined: true,
+    NEXT_PUBLIC_SUPABASE_URL: process.env.NEXT_PUBLIC_SUPABASE_URL,
+    NEXT_PUBLIC_SUPABASE_ANON_KEY: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
+    NEXT_PUBLIC_SITE_URL: process.env.NEXT_PUBLIC_SITE_URL,
+    NEXT_PUBLIC_SENTRY_DSN: process.env.NEXT_PUBLIC_SENTRY_DSN,
+    NEXT_PUBLIC_SENTRY_URL: process.env.NEXT_PUBLIC_SENTRY_URL,
+  },
+  /**
+   * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially
+   * useful for Docker builds.
+   */
+  skipValidation: !!process.env.SKIP_ENV_VALIDATION,
+  /**
+   * Makes it so that empty strings are treated as undefined. `SOME_VAR: z.string()` and
+   * `SOME_VAR=''` will throw an error.
+   */
+  emptyStringAsUndefined: true,
 });
diff --git a/src/instrumentation-client.ts b/src/instrumentation-client.ts
index 8a5feb6..7f44f8d 100644
--- a/src/instrumentation-client.ts
+++ b/src/instrumentation-client.ts
@@ -4,31 +4,31 @@
 import * as Sentry from '@sentry/nextjs';
 
 Sentry.init({
-	dsn: process.env.NEXT_PUBLIC_SENTRY_DSN!,
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN!,
 
-	// Adds request headers and IP for users, for more info visit:
-	// https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
-	sendDefaultPii: true,
+  // Adds request headers and IP for users, for more info visit:
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
+  sendDefaultPii: true,
 
-	// Set tracesSampleRate to 1.0 to capture 100%
-	// of transactions for tracing.
-	// We recommend adjusting this value in production
-	// Learn more at
-	// https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
-	tracesSampleRate: 1.0,
-	// Replay may only be enabled for the client-side
-	integrations: [Sentry.replayIntegration()],
+  // Set tracesSampleRate to 1.0 to capture 100%
+  // of transactions for tracing.
+  // We recommend adjusting this value in production
+  // Learn more at
+  // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
+  tracesSampleRate: 1.0,
+  // Replay may only be enabled for the client-side
+  integrations: [Sentry.replayIntegration()],
 
-	// Capture Replay for 10% of all sessions,
-	// plus for 100% of sessions with an error
-	// Learn more at
-	// https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration
-	replaysSessionSampleRate: 0.1,
-	replaysOnErrorSampleRate: 1.0,
+  // Capture Replay for 10% of all sessions,
+  // plus for 100% of sessions with an error
+  // Learn more at
+  // https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
 
-	// Note: if you want to override the automatic release value, do not set a
-	// `release` value here - use the environment variable `SENTRY_RELEASE`, so
-	// that it will also get attached to your source maps
+  // Note: if you want to override the automatic release value, do not set a
+  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
+  // that it will also get attached to your source maps
 });
 
 // This export will instrument router navigations, and is only relevant if you enable tracing.
diff --git a/src/instrumentation.ts b/src/instrumentation.ts
index bee05f3..b77a16f 100644
--- a/src/instrumentation.ts
+++ b/src/instrumentation.ts
@@ -2,9 +2,9 @@ import * as Sentry from '@sentry/nextjs';
 import type { Instrumentation } from 'next';
 
 export const register = async () => {
-	await import('../sentry.server.config');
+  await import('../sentry.server.config');
 };
 
 export const onRequestError: Instrumentation.onRequestError = (...args) => {
-	Sentry.captureRequestError(...args);
+  Sentry.captureRequestError(...args);
 };
diff --git a/src/lib/actions/auth.ts b/src/lib/actions/auth.ts
index 3c2c586..1864833 100644
--- a/src/lib/actions/auth.ts
+++ b/src/lib/actions/auth.ts
@@ -7,149 +7,149 @@ import type { User } from '@/utils/supabase';
 import type { Result } from '.';
 
 export const signUp = async (
-	formData: FormData,
+  formData: FormData,
 ): Promise<Result<string | null>> => {
-	const name = formData.get('name') as string;
-	const email = formData.get('email') as string;
-	const password = formData.get('password') as string;
-	const supabase = await createServerClient();
-	const origin = (await headers()).get('origin');
+  const name = formData.get('name') as string;
+  const email = formData.get('email') as string;
+  const password = formData.get('password') as string;
+  const supabase = await createServerClient();
+  const origin = (await headers()).get('origin');
 
-	if (!email || !password) {
-		return { success: false, error: 'Email and password are required' };
-	}
+  if (!email || !password) {
+    return { success: false, error: 'Email and password are required' };
+  }
 
-	const { error } = await supabase.auth.signUp({
-		email,
-		password,
-		options: {
-			emailRedirectTo: `${origin}/auth/callback`,
-			data: {
-				full_name: name,
-				email,
-				provider: 'email',
-			},
-		},
-	});
+  const { error } = await supabase.auth.signUp({
+    email,
+    password,
+    options: {
+      emailRedirectTo: `${origin}/auth/callback`,
+      data: {
+        full_name: name,
+        email,
+        provider: 'email',
+      },
+    },
+  });
 
-	if (error) {
-		return { success: false, error: error.message };
-	} else {
-		return {
-			success: true,
-			data: 'Thanks for signing up! Please check your email for a verification link.',
-		};
-	}
+  if (error) {
+    return { success: false, error: error.message };
+  } else {
+    return {
+      success: true,
+      data: 'Thanks for signing up! Please check your email for a verification link.',
+    };
+  }
 };
 
 export const signIn = async (formData: FormData): Promise<Result<null>> => {
-	const email = formData.get('email') as string;
-	const password = formData.get('password') as string;
-	const supabase = await createServerClient();
+  const email = formData.get('email') as string;
+  const password = formData.get('password') as string;
+  const supabase = await createServerClient();
 
-	const { error } = await supabase.auth.signInWithPassword({
-		email,
-		password,
-	});
-	if (error) {
-		return { success: false, error: error.message };
-	} else {
-		return { success: true, data: null };
-	}
+  const { error } = await supabase.auth.signInWithPassword({
+    email,
+    password,
+  });
+  if (error) {
+    return { success: false, error: error.message };
+  } else {
+    return { success: true, data: null };
+  }
 };
 
 export const signInWithMicrosoft = async (): Promise<Result<string>> => {
-	const supabase = await createServerClient();
-	const origin = (await headers()).get('origin');
-	const { data, error } = await supabase.auth.signInWithOAuth({
-		provider: 'azure',
-		options: {
-			scopes: 'openid, profile email offline_access',
-			redirectTo: `${origin}/auth/callback?redirect_to=/auth/success`,
-		},
-	});
-	if (error) return { success: false, error: error.message };
-	return { success: true, data: data.url };
+  const supabase = await createServerClient();
+  const origin = (await headers()).get('origin');
+  const { data, error } = await supabase.auth.signInWithOAuth({
+    provider: 'azure',
+    options: {
+      scopes: 'openid, profile email offline_access',
+      redirectTo: `${origin}/auth/callback?redirect_to=/auth/success`,
+    },
+  });
+  if (error) return { success: false, error: error.message };
+  return { success: true, data: data.url };
 };
 
 export const signInWithApple = async (): Promise<Result<string>> => {
-	const supabase = await createServerClient();
-	const origin = process.env.BASE_URL!;
-	const { data, error } = await supabase.auth.signInWithOAuth({
-		provider: 'apple',
-		options: {
-			redirectTo: `${origin}/auth/callback?redirect_to=/auth/success`,
-		},
-	});
-	if (error) return { success: false, error: error.message };
-	return { success: true, data: data.url };
+  const supabase = await createServerClient();
+  const origin = process.env.BASE_URL!;
+  const { data, error } = await supabase.auth.signInWithOAuth({
+    provider: 'apple',
+    options: {
+      redirectTo: `${origin}/auth/callback?redirect_to=/auth/success`,
+    },
+  });
+  if (error) return { success: false, error: error.message };
+  return { success: true, data: data.url };
 };
 
 export const forgotPassword = async (
-	formData: FormData,
+  formData: FormData,
 ): Promise<Result<string | null>> => {
-	const email = formData.get('email') as string;
-	const supabase = await createServerClient();
-	const origin = (await headers()).get('origin');
+  const email = formData.get('email') as string;
+  const supabase = await createServerClient();
+  const origin = (await headers()).get('origin');
 
-	if (!email) {
-		return { success: false, error: 'Email is required' };
-	}
+  if (!email) {
+    return { success: false, error: 'Email is required' };
+  }
 
-	const { error } = await supabase.auth.resetPasswordForEmail(email, {
-		redirectTo: `${origin}/auth/callback?redirect_to=/reset-password`,
-	});
+  const { error } = await supabase.auth.resetPasswordForEmail(email, {
+    redirectTo: `${origin}/auth/callback?redirect_to=/profile`,
+  });
 
-	if (error) {
-		return { success: false, error: 'Could not reset password' };
-	}
-	return {
-		success: true,
-		data: 'Check your email for a link to reset your password.',
-	};
+  if (error) {
+    return { success: false, error: 'Could not reset password' };
+  }
+  return {
+    success: true,
+    data: 'Check your email for a link to reset your password.',
+  };
 };
 
 export const resetPassword = async (
-	formData: FormData,
+  formData: FormData,
 ): Promise<Result<null>> => {
-	const password = formData.get('password') as string;
-	const confirmPassword = formData.get('confirmPassword') as string;
-	if (!password || !confirmPassword) {
-		return {
-			success: false,
-			error: 'Password and confirm password are required!',
-		};
-	}
-	const supabase = await createServerClient();
-	if (password !== confirmPassword) {
-		return { success: false, error: 'Passwords do not match!' };
-	}
-	const { error } = await supabase.auth.updateUser({
-		password,
-	});
-	if (error) {
-		return {
-			success: false,
-			error: `Password update failed: ${error.message}`,
-		};
-	}
-	return { success: true, data: null };
+  const password = formData.get('password') as string;
+  const confirmPassword = formData.get('confirmPassword') as string;
+  if (!password || !confirmPassword) {
+    return {
+      success: false,
+      error: 'Password and confirm password are required!',
+    };
+  }
+  const supabase = await createServerClient();
+  if (password !== confirmPassword) {
+    return { success: false, error: 'Passwords do not match!' };
+  }
+  const { error } = await supabase.auth.updateUser({
+    password,
+  });
+  if (error) {
+    return {
+      success: false,
+      error: `Password update failed: ${error.message}`,
+    };
+  }
+  return { success: true, data: null };
 };
 
 export const signOut = async (): Promise<Result<null>> => {
-	const supabase = await createServerClient();
-	const { error } = await supabase.auth.signOut();
-	if (error) return { success: false, error: error.message };
-	return { success: true, data: null };
+  const supabase = await createServerClient();
+  const { error } = await supabase.auth.signOut();
+  if (error) return { success: false, error: error.message };
+  return { success: true, data: null };
 };
 
 export const getUser = async (): Promise<Result<User>> => {
-	try {
-		const supabase = await createServerClient();
-		const { data, error } = await supabase.auth.getUser();
-		if (error) throw error;
-		return { success: true, data: data.user };
-	} catch {
-		return { success: false, error: `Could not get user!` };
-	}
+  try {
+    const supabase = await createServerClient();
+    const { data, error } = await supabase.auth.getUser();
+    if (error) throw error;
+    return { success: true, data: data.user };
+  } catch {
+    return { success: false, error: `Could not get user!` };
+  }
 };
diff --git a/src/lib/actions/index.ts b/src/lib/actions/index.ts
index ea1fa1c..13e5fc8 100644
--- a/src/lib/actions/index.ts
+++ b/src/lib/actions/index.ts
@@ -3,5 +3,5 @@ export * from './storage';
 export * from './public';
 
 export type Result<T> =
-	| { success: true; data: T }
-	| { success: false; error: string };
+  | { success: true; data: T }
+  | { success: false; error: string };
diff --git a/src/lib/actions/public.ts b/src/lib/actions/public.ts
index e5212f9..2fdf3fb 100644
--- a/src/lib/actions/public.ts
+++ b/src/lib/actions/public.ts
@@ -6,75 +6,75 @@ import { getUser } from '@/lib/actions';
 import type { Result } from '.';
 
 export const getProfile = async (): Promise<Result<Profile>> => {
-	try {
-		const user = await getUser();
-		if (!user.success || user.data === undefined)
-			throw new Error('User not found');
-		const supabase = await createServerClient();
-		const { data, error } = await supabase
-			.from('profiles')
-			.select('*')
-			.eq('id', user.data.id)
-			.single();
-		if (error) throw error;
-		return { success: true, data: data as Profile };
-	} catch (error) {
-		return {
-			success: false,
-			error:
-				error instanceof Error
-					? error.message
-					: 'Unknown error getting profile',
-		};
-	}
+  try {
+    const user = await getUser();
+    if (!user.success || user.data === undefined)
+      throw new Error('User not found');
+    const supabase = await createServerClient();
+    const { data, error } = await supabase
+      .from('profiles')
+      .select('*')
+      .eq('id', user.data.id)
+      .single();
+    if (error) throw error;
+    return { success: true, data: data as Profile };
+  } catch (error) {
+    return {
+      success: false,
+      error:
+        error instanceof Error
+          ? error.message
+          : 'Unknown error getting profile',
+    };
+  }
 };
 
 type updateProfileProps = {
-	full_name?: string;
-	email?: string;
-	avatar_url?: string;
+  full_name?: string;
+  email?: string;
+  avatar_url?: string;
 };
 
 export const updateProfile = async ({
-	full_name,
-	email,
-	avatar_url,
+  full_name,
+  email,
+  avatar_url,
 }: updateProfileProps): Promise<Result<Profile>> => {
-	try {
-		if (
-			full_name === undefined &&
-			email === undefined &&
-			avatar_url === undefined
-		)
-			throw new Error('No profile data provided');
+  try {
+    if (
+      full_name === undefined &&
+      email === undefined &&
+      avatar_url === undefined
+    )
+      throw new Error('No profile data provided');
 
-		const userResponse = await getUser();
-		if (!userResponse.success || userResponse.data === undefined)
-			throw new Error('User not found');
+    const userResponse = await getUser();
+    if (!userResponse.success || userResponse.data === undefined)
+      throw new Error('User not found');
 
-		const supabase = await createServerClient();
-		const { data, error } = await supabase
-			.from('profiles')
-			.update({
-				...(full_name !== undefined && { full_name }),
-				...(email !== undefined && { email }),
-				...(avatar_url !== undefined && { avatar_url }),
-			})
-			.eq('id', userResponse.data.id)
-			.select()
-			.single();
-		if (error) throw error;
-		return {
-			success: true,
-			data: data as Profile,
-		};
-	} catch (error) {
-		return {
-			success: false,
-			error:
-				error instanceof Error
-					? error.message
-					: 'Unknown error updating profile',
-		};
-	}
+    const supabase = await createServerClient();
+    const { data, error } = await supabase
+      .from('profiles')
+      .update({
+        ...(full_name !== undefined && { full_name }),
+        ...(email !== undefined && { email }),
+        ...(avatar_url !== undefined && { avatar_url }),
+      })
+      .eq('id', userResponse.data.id)
+      .select()
+      .single();
+    if (error) throw error;
+    return {
+      success: true,
+      data: data as Profile,
+    };
+  } catch (error) {
+    return {
+      success: false,
+      error:
+        error instanceof Error
+          ? error.message
+          : 'Unknown error updating profile',
+    };
+  }
 };
diff --git a/src/lib/actions/storage.ts b/src/lib/actions/storage.ts
index 2c7906b..9612ff1 100755
--- a/src/lib/actions/storage.ts
+++ b/src/lib/actions/storage.ts
@@ -4,253 +4,253 @@ import { createServerClient } from '@/utils/supabase';
 import type { Result } from '.';
 
 export type GetStorageProps = {
-	bucket: string;
-	url: string;
-	seconds?: number;
-	transform?: {
-		width?: number;
-		height?: number;
-		quality?: number;
-		format?: 'origin';
-		resize?: 'cover' | 'contain' | 'fill';
-	};
-	download?: boolean | string;
+  bucket: string;
+  url: string;
+  seconds?: number;
+  transform?: {
+    width?: number;
+    height?: number;
+    quality?: number;
+    format?: 'origin';
+    resize?: 'cover' | 'contain' | 'fill';
+  };
+  download?: boolean | string;
 };
 
 export type UploadStorageProps = {
-	bucket: string;
-	path: string;
-	file: File;
-	options?: {
-		cacheControl?: string;
-		contentType?: string;
-	};
+  bucket: string;
+  path: string;
+  file: File;
+  options?: {
+    cacheControl?: string;
+    contentType?: string;
+  };
 };
 
 export type ReplaceStorageProps = {
-	bucket: string;
-	path: string;
-	file: File;
-	options?: {
-		cacheControl?: string;
-		contentType?: string;
-	};
+  bucket: string;
+  path: string;
+  file: File;
+  options?: {
+    cacheControl?: string;
+    contentType?: string;
+  };
 };
 
 export type resizeImageProps = {
-	file: File;
-	options?: {
-		maxWidth?: number;
-		maxHeight?: number;
-		quality?: number;
-	};
+  file: File;
+  options?: {
+    maxWidth?: number;
+    maxHeight?: number;
+    quality?: number;
+  };
 };
 
 export const getSignedUrl = async ({
-	bucket,
-	url,
-	seconds = 3600,
-	transform = {},
-	download = false,
+  bucket,
+  url,
+  seconds = 3600,
+  transform = {},
+  download = false,
 }: GetStorageProps): Promise<Result<string>> => {
-	try {
-		const supabase = await createServerClient();
-		const { data, error } = await supabase.storage
-			.from(bucket)
-			.createSignedUrl(url, seconds, {
-				download,
-				transform,
-			});
+  try {
+    const supabase = await createServerClient();
+    const { data, error } = await supabase.storage
+      .from(bucket)
+      .createSignedUrl(url, seconds, {
+        download,
+        transform,
+      });
 
-		if (error) throw error;
-		if (!data?.signedUrl) throw new Error('No signed URL returned');
+    if (error) throw error;
+    if (!data?.signedUrl) throw new Error('No signed URL returned');
 
-		return { success: true, data: data.signedUrl };
-	} catch (error) {
-		return {
-			success: false,
-			error:
-				error instanceof Error
-					? error.message
-					: 'Unknown error getting signed URL',
-		};
-	}
+    return { success: true, data: data.signedUrl };
+  } catch (error) {
+    return {
+      success: false,
+      error:
+        error instanceof Error
+          ? error.message
+          : 'Unknown error getting signed URL',
+    };
+  }
 };
 
 export const getPublicUrl = async ({
-	bucket,
-	url,
-	transform = {},
-	download = false,
+  bucket,
+  url,
+  transform = {},
+  download = false,
 }: GetStorageProps): Promise<Result<string>> => {
-	try {
-		const supabase = await createServerClient();
-		const { data } = supabase.storage.from(bucket).getPublicUrl(url, {
-			download,
-			transform,
-		});
+  try {
+    const supabase = await createServerClient();
+    const { data } = supabase.storage.from(bucket).getPublicUrl(url, {
+      download,
+      transform,
+    });
 
-		if (!data?.publicUrl) throw new Error('No public URL returned');
+    if (!data?.publicUrl) throw new Error('No public URL returned');
 
-		return { success: true, data: data.publicUrl };
-	} catch (error) {
-		return {
-			success: false,
-			error:
-				error instanceof Error
-					? error.message
-					: 'Unknown error getting public URL',
-		};
-	}
+    return { success: true, data: data.publicUrl };
+  } catch (error) {
+    return {
+      success: false,
+      error:
+        error instanceof Error
+          ? error.message
+          : 'Unknown error getting public URL',
+    };
+  }
 };
 
 export const uploadFile = async ({
-	bucket,
-	path,
-	file,
-	options = {},
+  bucket,
+  path,
+  file,
+  options = {},
 }: UploadStorageProps): Promise<Result<string>> => {
-	try {
-		const supabase = await createServerClient();
-		const { data, error } = await supabase.storage
-			.from(bucket)
-			.upload(path, file, options);
+  try {
+    const supabase = await createServerClient();
+    const { data, error } = await supabase.storage
+      .from(bucket)
+      .upload(path, file, options);
 
-		if (error) throw error;
-		if (!data?.path) throw new Error('No path returned from upload');
+    if (error) throw error;
+    if (!data?.path) throw new Error('No path returned from upload');
 
-		return { success: true, data: data.path };
-	} catch (error) {
-		return {
-			success: false,
-			error:
-				error instanceof Error ? error.message : 'Unknown error uploading file',
-		};
-	}
+    return { success: true, data: data.path };
+  } catch (error) {
+    return {
+      success: false,
+      error:
+        error instanceof Error ? error.message : 'Unknown error uploading file',
+    };
+  }
 };
 
 export const replaceFile = async ({
-	bucket,
-	path,
-	file,
-	options = {},
+  bucket,
+  path,
+  file,
+  options = {},
 }: ReplaceStorageProps): Promise<Result<string>> => {
-	try {
-		const supabase = await createServerClient();
-		const { data, error } = await supabase.storage
-			.from(bucket)
-			.update(path, file, { ...options, upsert: true });
-		if (error) throw error;
-		if (!data?.path) throw new Error('No path returned from upload');
-		return { success: true, data: data.path };
-	} catch (error) {
-		return {
-			success: false,
-			error:
-				error instanceof Error ? error.message : 'Unknown error replacing file',
-		};
-	}
+  try {
+    const supabase = await createServerClient();
+    const { data, error } = await supabase.storage
+      .from(bucket)
+      .update(path, file, { ...options, upsert: true });
+    if (error) throw error;
+    if (!data?.path) throw new Error('No path returned from upload');
+    return { success: true, data: data.path };
+  } catch (error) {
+    return {
+      success: false,
+      error:
+        error instanceof Error ? error.message : 'Unknown error replacing file',
+    };
+  }
 };
 
 // Add a helper to delete files
 export const deleteFile = async ({
-	bucket,
-	path,
+  bucket,
+  path,
 }: {
-	bucket: string;
-	path: string[];
+  bucket: string;
+  path: string[];
 }): Promise<Result<null>> => {
-	try {
-		const supabase = await createServerClient();
-		const { error } = await supabase.storage.from(bucket).remove(path);
+  try {
+    const supabase = await createServerClient();
+    const { error } = await supabase.storage.from(bucket).remove(path);
 
-		if (error) throw error;
+    if (error) throw error;
 
-		return { success: true, data: null };
-	} catch (error) {
-		return {
-			success: false,
-			error:
-				error instanceof Error ? error.message : 'Unknown error deleting file',
-		};
-	}
+    return { success: true, data: null };
+  } catch (error) {
+    return {
+      success: false,
+      error:
+        error instanceof Error ? error.message : 'Unknown error deleting file',
+    };
+  }
 };
 
 // Add a helper to list files in a bucket
 export const listFiles = async ({
-	bucket,
-	path = '',
-	options = {},
+  bucket,
+  path = '',
+  options = {},
 }: {
-	bucket: string;
-	path?: string;
-	options?: {
-		limit?: number;
-		offset?: number;
-		sortBy?: { column: string; order: 'asc' | 'desc' };
-	};
+  bucket: string;
+  path?: string;
+  options?: {
+    limit?: number;
+    offset?: number;
+    sortBy?: { column: string; order: 'asc' | 'desc' };
+  };
 }): Promise<Result<Array<{ name: string; id: string; metadata: unknown }>>> => {
-	try {
-		const supabase = await createServerClient();
-		const { data, error } = await supabase.storage
-			.from(bucket)
-			.list(path, options);
+  try {
+    const supabase = await createServerClient();
+    const { data, error } = await supabase.storage
+      .from(bucket)
+      .list(path, options);
 
-		if (error) throw error;
-		if (!data) throw new Error('No data returned from list operation');
+    if (error) throw error;
+    if (!data) throw new Error('No data returned from list operation');
 
-		return { success: true, data };
-	} catch (error) {
-		console.error('Could not list files!', error);
-		return {
-			success: false,
-			error:
-				error instanceof Error ? error.message : 'Unknown error listing files',
-		};
-	}
+    return { success: true, data };
+  } catch (error) {
+    console.error('Could not list files!', error);
+    return {
+      success: false,
+      error:
+        error instanceof Error ? error.message : 'Unknown error listing files',
+    };
+  }
 };
 
 export const resizeImage = async ({
-	file,
-	options = {},
+  file,
+  options = {},
 }: resizeImageProps): Promise<File> => {
-	const { maxWidth = 800, maxHeight = 800, quality = 0.8 } = options;
-	return new Promise((resolve) => {
-		const reader = new FileReader();
-		reader.readAsDataURL(file);
-		reader.onload = (event) => {
-			const img = new Image();
-			img.src = event.target?.result as string;
-			img.onload = () => {
-				let width = img.width;
-				let height = img.height;
-				if (width > height) {
-					if (width > maxWidth) {
-						height = Math.round((height * maxWidth) / width);
-						width = maxWidth;
-					}
-				} else if (height > maxHeight) {
-					width = Math.round((width * maxHeight) / height);
-					height = maxHeight;
-				}
-				const canvas = document.createElement('canvas');
-				canvas.width = width;
-				canvas.height = height;
-				const ctx = canvas.getContext('2d');
-				ctx?.drawImage(img, 0, 0, width, height);
-				canvas.toBlob(
-					(blob) => {
-						if (!blob) return;
-						const resizedFile = new File([blob], file.name, {
-							type: 'imgage/jpeg',
-							lastModified: Date.now(),
-						});
-						resolve(resizedFile);
-					},
-					'image/jpeg',
-					quality,
-				);
-			};
-		};
-	});
+  const { maxWidth = 800, maxHeight = 800, quality = 0.8 } = options;
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = (event) => {
+      const img = new Image();
+      img.src = event.target?.result as string;
+      img.onload = () => {
+        let width = img.width;
+        let height = img.height;
+        if (width > height) {
+          if (width > maxWidth) {
+            height = Math.round((height * maxWidth) / width);
+            width = maxWidth;
+          }
+        } else if (height > maxHeight) {
+          width = Math.round((width * maxHeight) / height);
+          height = maxHeight;
+        }
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext('2d');
+        ctx?.drawImage(img, 0, 0, width, height);
+        canvas.toBlob(
+          (blob) => {
+            if (!blob) return;
+            const resizedFile = new File([blob], file.name, {
+              type: 'imgage/jpeg',
+              lastModified: Date.now(),
+            });
+            resolve(resizedFile);
+          },
+          'image/jpeg',
+          quality,
+        );
+      };
+    };
+  });
 };
diff --git a/src/lib/hooks/auth.ts b/src/lib/hooks/auth.ts
index e4f1ef3..c381904 100644
--- a/src/lib/hooks/auth.ts
+++ b/src/lib/hooks/auth.ts
@@ -4,145 +4,148 @@ import type { User } from '@/utils/supabase';
 import type { Result } from '.';
 
 export const signUp = async (
-	formData: FormData,
+  formData: FormData,
 ): Promise<Result<string | null>> => {
-	const name = formData.get('name') as string;
-	const email = formData.get('email') as string;
-	const password = formData.get('password') as string;
-	const supabase = createClient();
-	const origin = process.env.NEXT_PUBLIC_SITE_URL!;
+  const name = formData.get('name') as string;
+  const email = formData.get('email') as string;
+  const password = formData.get('password') as string;
+  const supabase = createClient();
+  const origin = process.env.NEXT_PUBLIC_SITE_URL!;
 
-	if (!email || !password) {
-		return { success: false, error: 'Email and password are required' };
-	}
+  if (!email || !password) {
+    return { success: false, error: 'Email and password are required' };
+  }
 
-	const { error } = await supabase.auth.signUp({
-		email,
-		password,
-		options: {
-			emailRedirectTo: `${origin}/auth/callback`,
-			data: {
-				full_name: name,
-				email,
-				provider: 'email',
-			},
-		},
-	});
-	if (error) {
-		return { success: false, error: error.message };
-	} else {
-		return {
-			success: true,
-			data: 'Thanks for signing up! Please check your email for a verification link.',
-		};
-	}
+  const { error } = await supabase.auth.signUp({
+    email,
+    password,
+    options: {
+      emailRedirectTo: `${origin}/auth/callback`,
+      data: {
+        full_name: name,
+        email,
+        provider: 'email',
+      },
+    },
+  });
+  if (error) {
+    return { success: false, error: error.message };
+  } else {
+    return {
+      success: true,
+      data: 'Thanks for signing up! Please check your email for a verification link.',
+    };
+  }
 };
 
 export const signIn = async (formData: FormData): Promise<Result<null>> => {
-	const email = formData.get('email') as string;
-	const password = formData.get('password') as string;
-	const supabase = createClient();
+  const email = formData.get('email') as string;
+  const password = formData.get('password') as string;
+  const supabase = createClient();
 
-	const { error } = await supabase.auth.signInWithPassword({
-		email,
-		password,
-	});
-	if (error) {
-		return { success: false, error: error.message };
-	} else {
-		return { success: true, data: null };
-	}
+  const { error } = await supabase.auth.signInWithPassword({
+    email,
+    password,
+  });
+  if (error) {
+    return { success: false, error: error.message };
+  } else {
+    return { success: true, data: null };
+  }
 };
 
 export const signInWithMicrosoft = async (): Promise<Result<string>> => {
-	const supabase = createClient();
-	const { data, error } = await supabase.auth.signInWithOAuth({
-		provider: 'azure',
-		options: {
-			scopes: 'openid, profile email offline_access',
-		},
-	});
-	if (error) return { success: false, error: error.message };
-	return { success: true, data: data.url };
+  const supabase = createClient();
+  const origin = process.env.NEXT_PUBLIC_SITE_URL!;
+  const { data, error } = await supabase.auth.signInWithOAuth({
+    provider: 'azure',
+    options: {
+      scopes: 'openid, profile email offline_access',
+      redirectTo: `${origin}/auth/callback?redirect_to=/auth/success`,
+    },
+  });
+  if (error) return { success: false, error: error.message };
+  return { success: true, data: data.url };
 };
 
 export const signInWithApple = async (): Promise<Result<string>> => {
-	const supabase = createClient();
-	const { data, error } = await supabase.auth.signInWithOAuth({
-		provider: 'apple',
-		options: {
-			scopes: 'openid, profile email offline_access',
-		},
-	});
-	if (error) return { success: false, error: error.message };
-	return { success: true, data: data.url };
+  const supabase = createClient();
+  const origin = process.env.NEXT_PUBLIC_SITE_URL!;
+  const { data, error } = await supabase.auth.signInWithOAuth({
+    provider: 'apple',
+    options: {
+      redirectTo: `${origin}/auth/callback?redirect_to=/auth/success`,
+    },
+  });
+  if (error) return { success: false, error: error.message };
+  return { success: true, data: data.url };
 };
 
 export const forgotPassword = async (
-	formData: FormData,
+  formData: FormData,
 ): Promise<Result<string | null>> => {
-	const email = formData.get('email') as string;
-	const supabase = createClient();
-	const origin = process.env.NEXT_PUBLIC_SITE_URL!;
+  const email = formData.get('email') as string;
+  const supabase = createClient();
+  const origin = process.env.NEXT_PUBLIC_SITE_URL!;
 
-	if (!email) {
-		return { success: false, error: 'Email is required' };
-	}
+  if (!email) {
+    return { success: false, error: 'Email is required' };
+  }
 
-	const { error } = await supabase.auth.resetPasswordForEmail(email, {
-		redirectTo: `${origin}/auth/callback?redirect_to=/reset-password`,
-	});
+  const { error } = await supabase.auth.resetPasswordForEmail(email, {
+    redirectTo: `${origin}/auth/callback?redirect_to=/profile`,
+  });
 
-	if (error) {
-		return { success: false, error: 'Could not reset password' };
-	}
-	return {
-		success: true,
-		data: 'Check your email for a link to reset your password.',
-	};
+  if (error) {
+    return { success: false, error: 'Could not reset password' };
+  }
+  return {
+    success: true,
+    data: 'Check your email for a link to reset your password.',
+  };
 };
 
 export const resetPassword = async (
-	formData: FormData,
+  formData: FormData,
 ): Promise<Result<null>> => {
-	const password = formData.get('password') as string;
-	const confirmPassword = formData.get('confirmPassword') as string;
-	if (!password || !confirmPassword) {
-		return {
-			success: false,
-			error: 'Password and confirm password are required!',
-		};
-	}
-	const supabase = createClient();
-	if (password !== confirmPassword) {
-		return { success: false, error: 'Passwords do not match!' };
-	}
-	const { error } = await supabase.auth.updateUser({
-		password,
-	});
-	if (error) {
-		return {
-			success: false,
-			error: `Password update failed: ${error.message}`,
-		};
-	}
-	return { success: true, data: null };
+  const password = formData.get('password') as string;
+  const confirmPassword = formData.get('confirmPassword') as string;
+  if (!password || !confirmPassword) {
+    return {
+      success: false,
+      error: 'Password and confirm password are required!',
+    };
+  }
+  const supabase = createClient();
+  if (password !== confirmPassword) {
+    return { success: false, error: 'Passwords do not match!' };
+  }
+  const { error } = await supabase.auth.updateUser({
+    password,
+  });
+  if (error) {
+    return {
+      success: false,
+      error: `Password update failed: ${error.message}`,
+    };
+  }
+  return { success: true, data: null };
 };
 
 export const signOut = async (): Promise<Result<null>> => {
-	const supabase = createClient();
-	const { error } = await supabase.auth.signOut();
-	if (error) return { success: false, error: error.message };
-	return { success: true, data: null };
+  const supabase = createClient();
+  const { error } = await supabase.auth.signOut();
+  if (error) return { success: false, error: error.message };
+  return { success: true, data: null };
 };
 
 export const getUser = async (): Promise<Result<User>> => {
-	try {
-		const supabase = createClient();
-		const { data, error } = await supabase.auth.getUser();
-		if (error) throw error;
-		return { success: true, data: data.user };
-	} catch (error) {
-		return { success: false, error: 'Could not get user!' };
-	}
+  try {
+    const supabase = createClient();
+    const { data, error } = await supabase.auth.getUser();
+    if (error) throw error;
+    return { success: true, data: data.user };
+  } catch (error) {
+    return { success: false, error: 'Could not get user!' };
+  }
 };
diff --git a/src/lib/hooks/index.ts b/src/lib/hooks/index.ts
index 5037aeb..e3a9342 100755
--- a/src/lib/hooks/index.ts
+++ b/src/lib/hooks/index.ts
@@ -4,5 +4,5 @@ export * from './storage';
 export * from './useFileUpload';
 
 export type Result<T> =
-	| { success: true; data: T }
-	| { success: false; error: string };
+  | { success: true; data: T }
+  | { success: false; error: string };
diff --git a/src/lib/hooks/public.ts b/src/lib/hooks/public.ts
index a07e4eb..7329d33 100644
--- a/src/lib/hooks/public.ts
+++ b/src/lib/hooks/public.ts
@@ -5,75 +5,75 @@ import { getUser } from '@/lib/hooks';
 import type { Result } from '.';
 
 export const getProfile = async (): Promise<Result<Profile>> => {
-	try {
-		const user = await getUser();
-		if (!user.success || user.data === undefined)
-			throw new Error('User not found');
-		const supabase = createClient();
-		const { data, error } = await supabase
-			.from('profiles')
-			.select('*')
-			.eq('id', user.data.id)
-			.single();
-		if (error) throw error;
-		return { success: true, data: data as Profile };
-	} catch (error) {
-		return {
-			success: false,
-			error:
-				error instanceof Error
-					? error.message
-					: 'Unknown error getting profile',
-		};
-	}
+  try {
+    const user = await getUser();
+    if (!user.success || user.data === undefined)
+      throw new Error('User not found');
+    const supabase = createClient();
+    const { data, error } = await supabase
+      .from('profiles')
+      .select('*')
+      .eq('id', user.data.id)
+      .single();
+    if (error) throw error;
+    return { success: true, data: data as Profile };
+  } catch (error) {
+    return {
+      success: false,
+      error:
+        error instanceof Error
+          ? error.message
+          : 'Unknown error getting profile',
+    };
+  }
 };
 
 type updateProfileProps = {
-	full_name?: string;
-	email?: string;
-	avatar_url?: string;
+  full_name?: string;
+  email?: string;
+  avatar_url?: string;
 };
 
 export const updateProfile = async ({
-	full_name,
-	email,
-	avatar_url,
+  full_name,
+  email,
+  avatar_url,
 }: updateProfileProps): Promise<Result<Profile>> => {
-	try {
-		if (
-			full_name === undefined &&
-			email === undefined &&
-			avatar_url === undefined
-		)
-			throw new Error('No profile data provided');
+  try {
+    if (
+      full_name === undefined &&
+      email === undefined &&
+      avatar_url === undefined
+    )
+      throw new Error('No profile data provided');
 
-		const userResponse = await getUser();
-		if (!userResponse.success || userResponse.data === undefined)
-			throw new Error('User not found');
+    const userResponse = await getUser();
+    if (!userResponse.success || userResponse.data === undefined)
+      throw new Error('User not found');
 
-		const supabase = createClient();
-		const { data, error } = await supabase
-			.from('profiles')
-			.update({
-				...(full_name !== undefined && { full_name }),
-				...(email !== undefined && { email }),
-				...(avatar_url !== undefined && { avatar_url }),
-			})
-			.eq('id', userResponse.data.id)
-			.select()
-			.single();
-		if (error) throw error;
-		return {
-			success: true,
-			data: data as Profile,
-		};
-	} catch (error) {
-		return {
-			success: false,
-			error:
-				error instanceof Error
-					? error.message
-					: 'Unknown error updating profile',
-		};
-	}
+    const supabase = createClient();
+    const { data, error } = await supabase
+      .from('profiles')
+      .update({
+        ...(full_name !== undefined && { full_name }),
+        ...(email !== undefined && { email }),
+        ...(avatar_url !== undefined && { avatar_url }),
+      })
+      .eq('id', userResponse.data.id)
+      .select()
+      .single();
+    if (error) throw error;
+    return {
+      success: true,
+      data: data as Profile,
+    };
+  } catch (error) {
+    return {
+      success: false,
+      error:
+        error instanceof Error
+          ? error.message
+          : 'Unknown error updating profile',
+    };
+  }
 };
diff --git a/src/lib/hooks/storage.ts b/src/lib/hooks/storage.ts
index a199fd3..8b11c9d 100644
--- a/src/lib/hooks/storage.ts
+++ b/src/lib/hooks/storage.ts
@@ -4,256 +4,256 @@ import { createClient } from '@/utils/supabase';
 import type { Result } from '.';
 
 export type GetStorageProps = {
-	bucket: string;
-	url: string;
-	seconds?: number;
-	transform?: {
-		width?: number;
-		height?: number;
-		quality?: number;
-		format?: 'origin';
-		resize?: 'cover' | 'contain' | 'fill';
-	};
-	download?: boolean | string;
+  bucket: string;
+  url: string;
+  seconds?: number;
+  transform?: {
+    width?: number;
+    height?: number;
+    quality?: number;
+    format?: 'origin';
+    resize?: 'cover' | 'contain' | 'fill';
+  };
+  download?: boolean | string;
 };
 
 export type UploadStorageProps = {
-	bucket: string;
-	path: string;
-	file: File;
-	options?: {
-		cacheControl?: string;
-		contentType?: string;
-	};
+  bucket: string;
+  path: string;
+  file: File;
+  options?: {
+    cacheControl?: string;
+    contentType?: string;
+  };
 };
 
 export type ReplaceStorageProps = {
-	bucket: string;
-	path: string;
-	file: File;
-	options?: {
-		cacheControl?: string;
-		contentType?: string;
-	};
+  bucket: string;
+  path: string;
+  file: File;
+  options?: {
+    cacheControl?: string;
+    contentType?: string;
+  };
 };
 
 export type resizeImageProps = {
-	file: File;
-	options?: {
-		maxWidth?: number;
-		maxHeight?: number;
-		quality?: number;
-	};
+  file: File;
+  options?: {
+    maxWidth?: number;
+    maxHeight?: number;
+    quality?: number;
+  };
 };
 
 export const getSignedUrl = async ({
-	bucket,
-	url,
-	seconds = 3600,
-	transform = {},
-	download = false,
+  bucket,
+  url,
+  seconds = 3600,
+  transform = {},
+  download = false,
 }: GetStorageProps): Promise<Result<string>> => {
-	try {
-		const supabase = createClient();
-		const { data, error } = await supabase.storage
-			.from(bucket)
-			.createSignedUrl(url, seconds, {
-				download,
-				transform,
-			});
+  try {
+    const supabase = createClient();
+    const { data, error } = await supabase.storage
+      .from(bucket)
+      .createSignedUrl(url, seconds, {
+        download,
+        transform,
+      });
 
-		if (error) throw error;
-		if (!data?.signedUrl) throw new Error('No signed URL returned');
+    if (error) throw error;
+    if (!data?.signedUrl) throw new Error('No signed URL returned');
 
-		return { success: true, data: data.signedUrl };
-	} catch (error) {
-		return {
-			success: false,
-			error:
-				error instanceof Error
-					? error.message
-					: 'Unknown error getting signed URL',
-		};
-	}
+    return { success: true, data: data.signedUrl };
+  } catch (error) {
+    return {
+      success: false,
+      error:
+        error instanceof Error
+          ? error.message
+          : 'Unknown error getting signed URL',
+    };
+  }
 };
 
 export const getPublicUrl = async ({
-	bucket,
-	url,
-	transform = {},
-	download = false,
+  bucket,
+  url,
+  transform = {},
+  download = false,
 }: GetStorageProps): Promise<Result<string>> => {
-	try {
-		const supabase = createClient();
-		const { data } = supabase.storage.from(bucket).getPublicUrl(url, {
-			download,
-			transform,
-		});
+  try {
+    const supabase = createClient();
+    const { data } = supabase.storage.from(bucket).getPublicUrl(url, {
+      download,
+      transform,
+    });
 
-		if (!data?.publicUrl) throw new Error('No public URL returned');
+    if (!data?.publicUrl) throw new Error('No public URL returned');
 
-		return { success: true, data: data.publicUrl };
-	} catch (error) {
-		return {
-			success: false,
-			error:
-				error instanceof Error
-					? error.message
-					: 'Unknown error getting public URL',
-		};
-	}
+    return { success: true, data: data.publicUrl };
+  } catch (error) {
+    return {
+      success: false,
+      error:
+        error instanceof Error
+          ? error.message
+          : 'Unknown error getting public URL',
+    };
+  }
 };
 
 export const uploadFile = async ({
-	bucket,
-	path,
-	file,
-	options = {},
+  bucket,
+  path,
+  file,
+  options = {},
 }: UploadStorageProps): Promise<Result<string>> => {
-	try {
-		const supabase = createClient();
-		const { data, error } = await supabase.storage
-			.from(bucket)
-			.upload(path, file, options);
+  try {
+    const supabase = createClient();
+    const { data, error } = await supabase.storage
+      .from(bucket)
+      .upload(path, file, options);
 
-		if (error) throw error;
-		if (!data?.path) throw new Error('No path returned from upload');
+    if (error) throw error;
+    if (!data?.path) throw new Error('No path returned from upload');
 
-		return { success: true, data: data.path };
-	} catch (error) {
-		return {
-			success: false,
-			error:
-				error instanceof Error ? error.message : 'Unknown error uploading file',
-		};
-	}
+    return { success: true, data: data.path };
+  } catch (error) {
+    return {
+      success: false,
+      error:
+        error instanceof Error ? error.message : 'Unknown error uploading file',
+    };
+  }
 };
 
 export const replaceFile = async ({
-	bucket,
-	path,
-	file,
-	options = {},
+  bucket,
+  path,
+  file,
+  options = {},
 }: ReplaceStorageProps): Promise<Result<string>> => {
-	try {
-		const supabase = createClient();
-		const { data, error } = await supabase.storage
-			.from(bucket)
-			.update(path, file, {
-				...options,
-				upsert: true,
-			});
-		if (error) throw error;
-		if (!data?.path) throw new Error('No path returned from upload');
-		return { success: true, data: data.path };
-	} catch (error) {
-		return {
-			success: false,
-			error:
-				error instanceof Error ? error.message : 'Unknown error replacing file',
-		};
-	}
+  try {
+    const supabase = createClient();
+    const { data, error } = await supabase.storage
+      .from(bucket)
+      .update(path, file, {
+        ...options,
+        upsert: true,
+      });
+    if (error) throw error;
+    if (!data?.path) throw new Error('No path returned from upload');
+    return { success: true, data: data.path };
+  } catch (error) {
+    return {
+      success: false,
+      error:
+        error instanceof Error ? error.message : 'Unknown error replacing file',
+    };
+  }
 };
 
 // Add a helper to delete files
 export const deleteFile = async ({
-	bucket,
-	path,
+  bucket,
+  path,
 }: {
-	bucket: string;
-	path: string[];
+  bucket: string;
+  path: string[];
 }): Promise<Result<null>> => {
-	try {
-		const supabase = createClient();
-		const { error } = await supabase.storage.from(bucket).remove(path);
+  try {
+    const supabase = createClient();
+    const { error } = await supabase.storage.from(bucket).remove(path);
 
-		if (error) throw error;
+    if (error) throw error;
 
-		return { success: true, data: null };
-	} catch (error) {
-		return {
-			success: false,
-			error:
-				error instanceof Error ? error.message : 'Unknown error deleting file',
-		};
-	}
+    return { success: true, data: null };
+  } catch (error) {
+    return {
+      success: false,
+      error:
+        error instanceof Error ? error.message : 'Unknown error deleting file',
+    };
+  }
 };
 
 // Add a helper to list files in a bucket
 export const listFiles = async ({
-	bucket,
-	path = '',
-	options = {},
+  bucket,
+  path = '',
+  options = {},
 }: {
-	bucket: string;
-	path?: string;
-	options?: {
-		limit?: number;
-		offset?: number;
-		sortBy?: { column: string; order: 'asc' | 'desc' };
-	};
+  bucket: string;
+  path?: string;
+  options?: {
+    limit?: number;
+    offset?: number;
+    sortBy?: { column: string; order: 'asc' | 'desc' };
+  };
 }): Promise<Result<Array<{ name: string; id: string; metadata: unknown }>>> => {
-	try {
-		const supabase = createClient();
-		const { data, error } = await supabase.storage
-			.from(bucket)
-			.list(path, options);
+  try {
+    const supabase = createClient();
+    const { data, error } = await supabase.storage
+      .from(bucket)
+      .list(path, options);
 
-		if (error) throw error;
-		if (!data) throw new Error('No data returned from list operation');
+    if (error) throw error;
+    if (!data) throw new Error('No data returned from list operation');
 
-		return { success: true, data };
-	} catch (error) {
-		console.error('Could not list files!', error);
-		return {
-			success: false,
-			error:
-				error instanceof Error ? error.message : 'Unknown error listing files',
-		};
-	}
+    return { success: true, data };
+  } catch (error) {
+    console.error('Could not list files!', error);
+    return {
+      success: false,
+      error:
+        error instanceof Error ? error.message : 'Unknown error listing files',
+    };
+  }
 };
 
 export const resizeImage = async ({
-	file,
-	options = {},
+  file,
+  options = {},
 }: resizeImageProps): Promise<File> => {
-	const { maxWidth = 800, maxHeight = 800, quality = 0.8 } = options;
-	return new Promise((resolve) => {
-		const reader = new FileReader();
-		reader.readAsDataURL(file);
-		reader.onload = (event) => {
-			const img = new Image();
-			img.src = event.target?.result as string;
-			img.onload = () => {
-				let width = img.width;
-				let height = img.height;
-				if (width > height) {
-					if (width > maxWidth) {
-						height = Math.round((height * maxWidth) / width);
-						width = maxWidth;
-					}
-				} else if (height > maxHeight) {
-					width = Math.round((width * maxHeight) / height);
-					height = maxHeight;
-				}
-				const canvas = document.createElement('canvas');
-				canvas.width = width;
-				canvas.height = height;
-				const ctx = canvas.getContext('2d');
-				ctx?.drawImage(img, 0, 0, width, height);
-				canvas.toBlob(
-					(blob) => {
-						if (!blob) return;
-						const resizedFile = new File([blob], file.name, {
-							type: 'imgage/jpeg',
-							lastModified: Date.now(),
-						});
-						resolve(resizedFile);
-					},
-					'image/jpeg',
-					quality,
-				);
-			};
-		};
-	});
+  const { maxWidth = 800, maxHeight = 800, quality = 0.8 } = options;
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = (event) => {
+      const img = new Image();
+      img.src = event.target?.result as string;
+      img.onload = () => {
+        let width = img.width;
+        let height = img.height;
+        if (width > height) {
+          if (width > maxWidth) {
+            height = Math.round((height * maxWidth) / width);
+            width = maxWidth;
+          }
+        } else if (height > maxHeight) {
+          width = Math.round((width * maxHeight) / height);
+          height = maxHeight;
+        }
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext('2d');
+        ctx?.drawImage(img, 0, 0, width, height);
+        canvas.toBlob(
+          (blob) => {
+            if (!blob) return;
+            const resizedFile = new File([blob], file.name, {
+              type: 'imgage/jpeg',
+              lastModified: Date.now(),
+            });
+            resolve(resizedFile);
+          },
+          'image/jpeg',
+          quality,
+        );
+      };
+    };
+  });
 };
diff --git a/src/lib/hooks/useFileUpload.ts b/src/lib/hooks/useFileUpload.ts
index bd35e36..a9659c9 100644
--- a/src/lib/hooks/useFileUpload.ts
+++ b/src/lib/hooks/useFileUpload.ts
@@ -10,96 +10,96 @@ import type { Result } from '.';
 export type Replace = { replace: true; path: string } | false;
 
 export type uploadToStorageProps = {
-	file: File;
-	bucket: string;
-	resize: boolean;
-	options?: {
-		maxWidth?: number;
-		maxHeight?: number;
-		quality?: number;
-	};
-	replace?: Replace;
+  file: File;
+  bucket: string;
+  resize: boolean;
+  options?: {
+    maxWidth?: number;
+    maxHeight?: number;
+    quality?: number;
+  };
+  replace?: Replace;
 };
 
 export const useFileUpload = () => {
-	const [isUploading, setIsUploading] = useState(false);
-	const fileInputRef = useRef<HTMLInputElement>(null);
-	const { profile, isAuthenticated } = useAuth();
+  const [isUploading, setIsUploading] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { profile, isAuthenticated } = useAuth();
 
-	const uploadToStorage = async ({
-		file,
-		bucket,
-		resize = false,
-		options = {},
-		replace = false,
-	}: uploadToStorageProps): Promise<Result<string>> => {
-		try {
-			if (!isAuthenticated) throw new Error('User is not authenticated');
+  const uploadToStorage = async ({
+    file,
+    bucket,
+    resize = false,
+    options = {},
+    replace = false,
+  }: uploadToStorageProps): Promise<Result<string>> => {
+    try {
+      if (!isAuthenticated) throw new Error('User is not authenticated');
 
-			setIsUploading(true);
-			if (replace) {
-				const updateResult = await replaceFile({
-					bucket,
-					path: replace.path,
-					file,
-					options: {
-						contentType: file.type,
-					},
-				});
-				if (!updateResult.success) {
-					return { success: false, error: updateResult.error };
-				} else {
-					return { success: true, data: updateResult.data };
-				}
-			}
+      setIsUploading(true);
+      if (replace) {
+        const updateResult = await replaceFile({
+          bucket,
+          path: replace.path,
+          file,
+          options: {
+            contentType: file.type,
+          },
+        });
+        if (!updateResult.success) {
+          return { success: false, error: updateResult.error };
+        } else {
+          return { success: true, data: updateResult.data };
+        }
+      }
 
-			let fileToUpload = file;
-			if (resize && file.type.startsWith('image/'))
-				fileToUpload = await resizeImage({ file, options });
+      let fileToUpload = file;
+      if (resize && file.type.startsWith('image/'))
+        fileToUpload = await resizeImage({ file, options });
 
-			// Generate a unique filename to avoid collisions
-			const fileExt = file.name.split('.').pop();
-			const fileName = `${Date.now()}-${profile?.id}.${fileExt}`;
+      // Generate a unique filename to avoid collisions
+      const fileExt = file.name.split('.').pop();
+      const fileName = `${Date.now()}-${profile?.id}.${fileExt}`;
 
-			// Upload the file to Supabase storage
-			const uploadResult = await uploadFile({
-				bucket,
-				path: fileName,
-				file: fileToUpload,
-				options: {
-					contentType: file.type,
-				},
-			});
+      // Upload the file to Supabase storage
+      const uploadResult = await uploadFile({
+        bucket,
+        path: fileName,
+        file: fileToUpload,
+        options: {
+          contentType: file.type,
+        },
+      });
 
-			if (!uploadResult.success) {
-				throw new Error(uploadResult.error || `Failed to upload to ${bucket}`);
-			}
+      if (!uploadResult.success) {
+        throw new Error(uploadResult.error || `Failed to upload to ${bucket}`);
+      }
 
-			return { success: true, data: uploadResult.data };
-		} catch (error) {
-			toast.error(
-				error instanceof Error
-					? error.message
-					: `Failed to upload to ${bucket}`,
-			);
-			return {
-				success: false,
-				error: `Error: ${
-					error instanceof Error
-						? error.message
-						: `Failed to upload to ${bucket}`
-				}`,
-			};
-		} finally {
-			setIsUploading(false);
-			// Clear the input value so the same file can be selected again
-			if (fileInputRef.current) fileInputRef.current.value = '';
-		}
-	};
+      return { success: true, data: uploadResult.data };
+    } catch (error) {
+      toast.error(
+        error instanceof Error
+          ? error.message
+          : `Failed to upload to ${bucket}`,
+      );
+      return {
+        success: false,
+        error: `Error: ${
+          error instanceof Error
+            ? error.message
+            : `Failed to upload to ${bucket}`
+        }`,
+      };
+    } finally {
+      setIsUploading(false);
+      // Clear the input value so the same file can be selected again
+      if (fileInputRef.current) fileInputRef.current.value = '';
+    }
+  };
 
-	return {
-		isUploading,
-		fileInputRef,
-		uploadToStorage,
-	};
+  return {
+    isUploading,
+    fileInputRef,
+    uploadToStorage,
+  };
 };
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 7637fb9..2819a83 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -2,5 +2,5 @@ import { clsx, type ClassValue } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
-	return twMerge(clsx(inputs));
+  return twMerge(clsx(inputs));
 }
diff --git a/src/middleware.ts b/src/middleware.ts
index 6379e72..b91a634 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -7,25 +7,25 @@ const bannedIPs = new Set<string>();
 
 // Suspicious patterns that indicate malicious activity
 const MALICIOUS_PATTERNS = [
-	/web-inf/i,
-	/\.jsp/i,
-	/\.php/i,
-	/puttest/i,
-	/WEB-INF/i,
-	/\.xml$/i,
-	/perl/i,
-	/xampp/i,
-	/phpwebgallery/i,
-	/FileManager/i,
-	/standalonemanager/i,
-	/h2console/i,
-	/WebAdmin/i,
-	/login_form\.php/i,
-	/%2e/i,
-	/%u002e/i,
-	/\.%00/i,
-	/\.\./,
-	/lcgi/i,
+  /web-inf/i,
+  /\.jsp/i,
+  /\.php/i,
+  /puttest/i,
+  /WEB-INF/i,
+  /\.xml$/i,
+  /perl/i,
+  /xampp/i,
+  /phpwebgallery/i,
+  /FileManager/i,
+  /standalonemanager/i,
+  /h2console/i,
+  /WebAdmin/i,
+  /login_form\.php/i,
+  /%2e/i,
+  /%u002e/i,
+  /\.%00/i,
+  /\.\./,
+  /lcgi/i,
 ];
 
 // Suspicious HTTP methods
@@ -36,98 +36,98 @@ const MAX_ATTEMPTS = 10; // Max suspicious requests per window
 const BAN_DURATION = 30 * 60 * 1000; // 30 minutes
 
 const getClientIP = (request: NextRequest): string => {
-	const forwarded = request.headers.get('x-forwarded-for');
-	const realIP = request.headers.get('x-real-ip');
+  const forwarded = request.headers.get('x-forwarded-for');
+  const realIP = request.headers.get('x-real-ip');
 
-	if (forwarded) {
-		return forwarded.split(',')[0].trim();
-	}
+  if (forwarded) {
+    return forwarded.split(',')[0].trim();
+  }
 
-	if (realIP) {
-		return realIP;
-	}
+  if (realIP) {
+    return realIP;
+  }
 
-	return request.ip ?? 'unknown';
+  return request.ip ?? 'unknown';
 };
 
 const isPathSuspicious = (pathname: string): boolean => {
-	return MALICIOUS_PATTERNS.some((pattern) => pattern.test(pathname));
+  return MALICIOUS_PATTERNS.some((pattern) => pattern.test(pathname));
 };
 
 const isMethodSuspicious = (method: string): boolean => {
-	return SUSPICIOUS_METHODS.includes(method);
+  return SUSPICIOUS_METHODS.includes(method);
 };
 
 const updateIPAttempts = (ip: string): boolean => {
-	const now = Date.now();
-	const attempts = ipAttempts.get(ip);
+  const now = Date.now();
+  const attempts = ipAttempts.get(ip);
 
-	if (!attempts || now - attempts.lastAttempt > RATE_LIMIT_WINDOW) {
-		ipAttempts.set(ip, { count: 1, lastAttempt: now });
-		return false;
-	}
+  if (!attempts || now - attempts.lastAttempt > RATE_LIMIT_WINDOW) {
+    ipAttempts.set(ip, { count: 1, lastAttempt: now });
+    return false;
+  }
 
-	attempts.count++;
-	attempts.lastAttempt = now;
+  attempts.count++;
+  attempts.lastAttempt = now;
 
-	if (attempts.count > MAX_ATTEMPTS) {
-		bannedIPs.add(ip);
-		// Clean up the attempts record
-		ipAttempts.delete(ip);
+  if (attempts.count > MAX_ATTEMPTS) {
+    bannedIPs.add(ip);
+    // Clean up the attempts record
+    ipAttempts.delete(ip);
 
-		// Auto-unban after duration (in production, use a proper scheduler)
-		setTimeout(() => {
-			bannedIPs.delete(ip);
-		}, BAN_DURATION);
+    // Auto-unban after duration (in production, use a proper scheduler)
+    setTimeout(() => {
+      bannedIPs.delete(ip);
+    }, BAN_DURATION);
 
-		return true;
-	}
+    return true;
+  }
 
-	return false;
+  return false;
 };
 
 export const middleware = async (request: NextRequest) => {
-	const { pathname } = request.nextUrl;
-	const method = request.method;
-	const ip = getClientIP(request);
+  const { pathname } = request.nextUrl;
+  const method = request.method;
+  const ip = getClientIP(request);
 
-	// Check if IP is already banned
-	if (bannedIPs.has(ip)) {
-		console.log(`🚫 Blocked banned IP: ${ip} trying to access ${pathname}`);
-		return new NextResponse('Access denied.', { status: 403 });
-	}
+  // Check if IP is already banned
+  if (bannedIPs.has(ip)) {
+    console.log(`🚫 Blocked banned IP: ${ip} trying to access ${pathname}`);
+    return new NextResponse('Access denied.', { status: 403 });
+  }
 
-	// Check for suspicious activity
-	const isSuspiciousPath = isPathSuspicious(pathname);
-	const isSuspiciousMethod = isMethodSuspicious(method);
+  // Check for suspicious activity
+  const isSuspiciousPath = isPathSuspicious(pathname);
+  const isSuspiciousMethod = isMethodSuspicious(method);
 
-	if (isSuspiciousPath || isSuspiciousMethod) {
-		console.log(`⚠️  Suspicious activity from ${ip}: ${method} ${pathname}`);
+  if (isSuspiciousPath || isSuspiciousMethod) {
+    console.log(`⚠️  Suspicious activity from ${ip}: ${method} ${pathname}`);
 
-		const shouldBan = updateIPAttempts(ip);
+    const shouldBan = updateIPAttempts(ip);
 
-		if (shouldBan) {
-			console.log(`🔨 IP ${ip} has been banned for suspicious activity`);
-			return new NextResponse('Access denied - IP banned', { status: 403 });
-		}
+    if (shouldBan) {
+      console.log(`🔨 IP ${ip} has been banned for suspicious activity`);
+      return new NextResponse('Access denied - IP banned', { status: 403 });
+    }
 
-		// Return 404 to not reveal the blocking mechanism
-		return new NextResponse('Not Found', { status: 404 });
-	}
-	return await updateSession(request);
+    // Return 404 to not reveal the blocking mechanism
+    return new NextResponse('Not Found', { status: 404 });
+  }
+  return await updateSession(request);
 };
 
 export const config = {
-	matcher: [
-		/*
-		 * Match all request paths except:
-		 * - _next/static (static files)
-		 * - _next/image (image optimization files)
-		 * - favicon.ico (favicon file)
-		 * - /monitoring-tunnel (Sentry monitoring)
-		 * - images - .svg, .png, .jpg, .jpeg, .gif, .webp
-		 * Feel free to modify this pattern to include more paths.
-		 */
-		'/((?!_next/static|_next/image|favicon.ico|monitoring-tunnel|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
-	],
+  matcher: [
+    /*
+     * Match all request paths except:
+     * - _next/static (static files)
+     * - _next/image (image optimization files)
+     * - favicon.ico (favicon file)
+     * - /monitoring-tunnel (Sentry monitoring)
+     * - images - .svg, .png, .jpg, .jpeg, .gif, .webp
+     * Feel free to modify this pattern to include more paths.
+     */
+    '/((?!_next/static|_next/image|favicon.ico|monitoring-tunnel|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
+  ],
 };
diff --git a/src/server/docker/volumes/functions/hello/index.ts b/src/server/docker/volumes/functions/hello/index.ts
index 9ac99c5..7ae5cc1 100644
--- a/src/server/docker/volumes/functions/hello/index.ts
+++ b/src/server/docker/volumes/functions/hello/index.ts
@@ -5,9 +5,9 @@
 import { serve } from 'https://deno.land/std@0.177.1/http/server.ts';
 
 serve(async () => {
-	return new Response(`"Hello from Edge Functions!"`, {
-		headers: { 'Content-Type': 'application/json' },
-	});
+  return new Response(`"Hello from Edge Functions!"`, {
+    headers: { 'Content-Type': 'application/json' },
+  });
 });
 
 // To invoke:
diff --git a/src/server/docker/volumes/functions/main/index.ts b/src/server/docker/volumes/functions/main/index.ts
index 820cd5b..291c1e0 100644
--- a/src/server/docker/volumes/functions/main/index.ts
+++ b/src/server/docker/volumes/functions/main/index.ts
@@ -7,88 +7,88 @@ const JWT_SECRET = Deno.env.get('JWT_SECRET');
 const VERIFY_JWT = Deno.env.get('VERIFY_JWT') === 'true';
 
 function getAuthToken(req: Request) {
-	const authHeader = req.headers.get('authorization');
-	if (!authHeader) {
-		throw new Error('Missing authorization header');
-	}
-	const [bearer, token] = authHeader.split(' ');
-	if (bearer !== 'Bearer') {
-		throw new Error(`Auth header is not 'Bearer {token}'`);
-	}
-	return token;
+  const authHeader = req.headers.get('authorization');
+  if (!authHeader) {
+    throw new Error('Missing authorization header');
+  }
+  const [bearer, token] = authHeader.split(' ');
+  if (bearer !== 'Bearer') {
+    throw new Error(`Auth header is not 'Bearer {token}'`);
+  }
+  return token;
 }
 
 async function verifyJWT(jwt: string): Promise<boolean> {
-	const encoder = new TextEncoder();
-	const secretKey = encoder.encode(JWT_SECRET);
-	try {
-		await jose.jwtVerify(jwt, secretKey);
-	} catch (err) {
-		console.error(err);
-		return false;
-	}
-	return true;
+  const encoder = new TextEncoder();
+  const secretKey = encoder.encode(JWT_SECRET);
+  try {
+    await jose.jwtVerify(jwt, secretKey);
+  } catch (err) {
+    console.error(err);
+    return false;
+  }
+  return true;
 }
 
 serve(async (req: Request) => {
-	if (req.method !== 'OPTIONS' && VERIFY_JWT) {
-		try {
-			const token = getAuthToken(req);
-			const isValidJWT = await verifyJWT(token);
+  if (req.method !== 'OPTIONS' && VERIFY_JWT) {
+    try {
+      const token = getAuthToken(req);
+      const isValidJWT = await verifyJWT(token);
 
-			if (!isValidJWT) {
-				return new Response(JSON.stringify({ msg: 'Invalid JWT' }), {
-					status: 401,
-					headers: { 'Content-Type': 'application/json' },
-				});
-			}
-		} catch (e) {
-			console.error(e);
-			return new Response(JSON.stringify({ msg: e.toString() }), {
-				status: 401,
-				headers: { 'Content-Type': 'application/json' },
-			});
-		}
-	}
+      if (!isValidJWT) {
+        return new Response(JSON.stringify({ msg: 'Invalid JWT' }), {
+          status: 401,
+          headers: { 'Content-Type': 'application/json' },
+        });
+      }
+    } catch (e) {
+      console.error(e);
+      return new Response(JSON.stringify({ msg: e.toString() }), {
+        status: 401,
+        headers: { 'Content-Type': 'application/json' },
+      });
+    }
+  }
 
-	const url = new URL(req.url);
-	const { pathname } = url;
-	const path_parts = pathname.split('/');
-	const service_name = path_parts[1];
+  const url = new URL(req.url);
+  const { pathname } = url;
+  const path_parts = pathname.split('/');
+  const service_name = path_parts[1];
 
-	if (!service_name || service_name === '') {
-		const error = { msg: 'missing function name in request' };
-		return new Response(JSON.stringify(error), {
-			status: 400,
-			headers: { 'Content-Type': 'application/json' },
-		});
-	}
+  if (!service_name || service_name === '') {
+    const error = { msg: 'missing function name in request' };
+    return new Response(JSON.stringify(error), {
+      status: 400,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
 
-	const servicePath = `/home/deno/functions/${service_name}`;
-	console.error(`serving the request with ${servicePath}`);
+  const servicePath = `/home/deno/functions/${service_name}`;
+  console.error(`serving the request with ${servicePath}`);
 
-	const memoryLimitMb = 150;
-	const workerTimeoutMs = 1 * 60 * 1000;
-	const noModuleCache = false;
-	const importMapPath = null;
-	const envVarsObj = Deno.env.toObject();
-	const envVars = Object.keys(envVarsObj).map((k) => [k, envVarsObj[k]]);
+  const memoryLimitMb = 150;
+  const workerTimeoutMs = 1 * 60 * 1000;
+  const noModuleCache = false;
+  const importMapPath = null;
+  const envVarsObj = Deno.env.toObject();
+  const envVars = Object.keys(envVarsObj).map((k) => [k, envVarsObj[k]]);
 
-	try {
-		const worker = await EdgeRuntime.userWorkers.create({
-			servicePath,
-			memoryLimitMb,
-			workerTimeoutMs,
-			noModuleCache,
-			importMapPath,
-			envVars,
-		});
-		return await worker.fetch(req);
-	} catch (e) {
-		const error = { msg: e.toString() };
-		return new Response(JSON.stringify(error), {
-			status: 500,
-			headers: { 'Content-Type': 'application/json' },
-		});
-	}
+  try {
+    const worker = await EdgeRuntime.userWorkers.create({
+      servicePath,
+      memoryLimitMb,
+      workerTimeoutMs,
+      noModuleCache,
+      importMapPath,
+      envVars,
+    });
+    return await worker.fetch(req);
+  } catch (e) {
+    const error = { msg: e.toString() };
+    return new Response(JSON.stringify(error), {
+      status: 500,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
 });
diff --git a/src/utils/supabase/client.ts b/src/utils/supabase/client.ts
index a214026..a48c184 100644
--- a/src/utils/supabase/client.ts
+++ b/src/utils/supabase/client.ts
@@ -4,7 +4,7 @@ import { createBrowserClient } from '@supabase/ssr';
 import type { Database } from '@/utils/supabase/types';
 
 export const createClient = () =>
-	createBrowserClient<Database>(
-		process.env.NEXT_PUBLIC_SUPABASE_URL!,
-		process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
-	);
+  createBrowserClient<Database>(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+  );
diff --git a/src/utils/supabase/middleware.ts b/src/utils/supabase/middleware.ts
index cc5921c..b4c2cd3 100644
--- a/src/utils/supabase/middleware.ts
+++ b/src/utils/supabase/middleware.ts
@@ -3,54 +3,54 @@ import { type NextRequest, NextResponse } from 'next/server';
 import type { Database } from '@/utils/supabase/types';
 
 export const updateSession = async (
-	request: NextRequest,
+  request: NextRequest,
 ): Promise<NextResponse> => {
-	try {
-		// Create an unmodified response
-		let response = NextResponse.next({
-			request: {
-				headers: request.headers,
-			},
-		});
+  try {
+    // Create an unmodified response
+    let response = NextResponse.next({
+      request: {
+        headers: request.headers,
+      },
+    });
 
-		const supabase = createServerClient<Database>(
-			process.env.NEXT_PUBLIC_SUPABASE_URL!,
-			process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
-			{
-				cookies: {
-					getAll() {
-						return request.cookies.getAll();
-					},
-					setAll(cookiesToSet) {
-						cookiesToSet.forEach(({ name, value }) =>
-							request.cookies.set(name, value),
-						);
-						response = NextResponse.next({
-							request,
-						});
-						cookiesToSet.forEach(({ name, value, options }) =>
-							response.cookies.set(name, value, options),
-						);
-					},
-				},
-			},
-		);
+    const supabase = createServerClient<Database>(
+      process.env.NEXT_PUBLIC_SUPABASE_URL!,
+      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+      {
+        cookies: {
+          getAll() {
+            return request.cookies.getAll();
+          },
+          setAll(cookiesToSet) {
+            cookiesToSet.forEach(({ name, value }) =>
+              request.cookies.set(name, value),
+            );
+            response = NextResponse.next({
+              request,
+            });
+            cookiesToSet.forEach(({ name, value, options }) =>
+              response.cookies.set(name, value, options),
+            );
+          },
+        },
+      },
+    );
 
-		// This will refresh session if expired - required for Server Components
-		// https://supabase.com/docs/guides/auth/server-side/nextjs
-		const user = await supabase.auth.getUser();
+    // This will refresh session if expired - required for Server Components
+    // https://supabase.com/docs/guides/auth/server-side/nextjs
+    const user = await supabase.auth.getUser();
 
-		// protected routes
-		if (request.nextUrl.pathname.startsWith('/reset-password') && user.error) {
-			return NextResponse.redirect(new URL('/sign-in', request.url));
-		}
+    // protected routes
+    if (request.nextUrl.pathname.startsWith('/reset-password') && user.error) {
+      return NextResponse.redirect(new URL('/sign-in', request.url));
+    }
 
-		return response;
-	} catch (e) {
-		return NextResponse.next({
-			request: {
-				headers: request.headers,
-			},
-		});
-	}
+    return response;
+  } catch (e) {
+    return NextResponse.next({
+      request: {
+        headers: request.headers,
+      },
+    });
+  }
 };
diff --git a/src/utils/supabase/server.ts b/src/utils/supabase/server.ts
index 82a8184..82462a5 100644
--- a/src/utils/supabase/server.ts
+++ b/src/utils/supabase/server.ts
@@ -6,28 +6,28 @@ import type { Database } from '@/utils/supabase/types';
 import { cookies } from 'next/headers';
 
 export const createServerClient = async () => {
-	const cookieStore = await cookies();
+  const cookieStore = await cookies();
 
-	return CreateServerClient<Database>(
-		process.env.NEXT_PUBLIC_SUPABASE_URL!,
-		process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
-		{
-			cookies: {
-				getAll() {
-					return cookieStore.getAll();
-				},
-				setAll(cookiesToSet) {
-					try {
-						cookiesToSet.forEach(({ name, value, options }) => {
-							cookieStore.set(name, value, options);
-						});
-					} catch (error) {
-						// The `set` method was called from a Server Component.
-						// This can be ignored if you have middleware refreshing
-						// user sessions.
-					}
-				},
-			},
-		},
-	);
+  return CreateServerClient<Database>(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        getAll() {
+          return cookieStore.getAll();
+        },
+        setAll(cookiesToSet) {
+          try {
+            cookiesToSet.forEach(({ name, value, options }) => {
+              cookieStore.set(name, value, options);
+            });
+          } catch (error) {
+            // The `set` method was called from a Server Component.
+            // This can be ignored if you have middleware refreshing
+            // user sessions.
+          }
+        },
+      },
+    },
+  );
 };
diff --git a/src/utils/supabase/types.ts b/src/utils/supabase/types.ts
index cec4519..3d2165a 100644
--- a/src/utils/supabase/types.ts
+++ b/src/utils/supabase/types.ts
@@ -1,188 +1,188 @@
 export type Json =
-	| string
-	| number
-	| boolean
-	| null
-	| { [key: string]: Json | undefined }
-	| Json[];
+  | string
+  | number
+  | boolean
+  | null
+  | { [key: string]: Json | undefined }
+  | Json[];
 
 export type Database = {
-	public: {
-		Tables: {
-			profiles: {
-				Row: {
-					avatar_url: string | null;
-					email: string | null;
-					full_name: string | null;
-					id: string;
-					provider: string | null;
-					updated_at: string | null;
-				};
-				Insert: {
-					avatar_url?: string | null;
-					email?: string | null;
-					full_name?: string | null;
-					id: string;
-					provider?: string | null;
-					updated_at?: string | null;
-				};
-				Update: {
-					avatar_url?: string | null;
-					email?: string | null;
-					full_name?: string | null;
-					id?: string;
-					provider?: string | null;
-					updated_at?: string | null;
-				};
-				Relationships: [];
-			};
-			statuses: {
-				Row: {
-					created_at: string;
-					id: string;
-					status: string;
-					updated_by_id: string | null;
-					user_id: string;
-				};
-				Insert: {
-					created_at?: string;
-					id?: string;
-					status: string;
-					updated_by_id?: string | null;
-					user_id: string;
-				};
-				Update: {
-					created_at?: string;
-					id?: string;
-					status?: string;
-					updated_by_id?: string | null;
-					user_id?: string;
-				};
-				Relationships: [];
-			};
-		};
-		Views: {
-			[_ in never]: never;
-		};
-		Functions: {
-			[_ in never]: never;
-		};
-		Enums: {
-			[_ in never]: never;
-		};
-		CompositeTypes: {
-			[_ in never]: never;
-		};
-	};
+  public: {
+    Tables: {
+      profiles: {
+        Row: {
+          avatar_url: string | null;
+          email: string | null;
+          full_name: string | null;
+          id: string;
+          provider: string | null;
+          updated_at: string | null;
+        };
+        Insert: {
+          avatar_url?: string | null;
+          email?: string | null;
+          full_name?: string | null;
+          id: string;
+          provider?: string | null;
+          updated_at?: string | null;
+        };
+        Update: {
+          avatar_url?: string | null;
+          email?: string | null;
+          full_name?: string | null;
+          id?: string;
+          provider?: string | null;
+          updated_at?: string | null;
+        };
+        Relationships: [];
+      };
+      statuses: {
+        Row: {
+          created_at: string;
+          id: string;
+          status: string;
+          updated_by_id: string | null;
+          user_id: string;
+        };
+        Insert: {
+          created_at?: string;
+          id?: string;
+          status: string;
+          updated_by_id?: string | null;
+          user_id: string;
+        };
+        Update: {
+          created_at?: string;
+          id?: string;
+          status?: string;
+          updated_by_id?: string | null;
+          user_id?: string;
+        };
+        Relationships: [];
+      };
+    };
+    Views: {
+      [_ in never]: never;
+    };
+    Functions: {
+      [_ in never]: never;
+    };
+    Enums: {
+      [_ in never]: never;
+    };
+    CompositeTypes: {
+      [_ in never]: never;
+    };
+  };
 };
 
 type DefaultSchema = Database[Extract<keyof Database, 'public'>];
 
 export type Tables<
-	DefaultSchemaTableNameOrOptions extends
-		| keyof (DefaultSchema['Tables'] & DefaultSchema['Views'])
-		| { schema: keyof Database },
-	TableName extends DefaultSchemaTableNameOrOptions extends {
-		schema: keyof Database;
-	}
-		? keyof (Database[DefaultSchemaTableNameOrOptions['schema']]['Tables'] &
-				Database[DefaultSchemaTableNameOrOptions['schema']]['Views'])
-		: never = never,
+  DefaultSchemaTableNameOrOptions extends
+    | keyof (DefaultSchema['Tables'] & DefaultSchema['Views'])
+    | { schema: keyof Database },
+  TableName extends DefaultSchemaTableNameOrOptions extends {
+    schema: keyof Database;
+  }
+    ? keyof (Database[DefaultSchemaTableNameOrOptions['schema']]['Tables'] &
+        Database[DefaultSchemaTableNameOrOptions['schema']]['Views'])
+    : never = never,
 > = DefaultSchemaTableNameOrOptions extends { schema: keyof Database }
-	? (Database[DefaultSchemaTableNameOrOptions['schema']]['Tables'] &
-			Database[DefaultSchemaTableNameOrOptions['schema']]['Views'])[TableName] extends {
-			Row: infer R;
-		}
-		? R
-		: never
-	: DefaultSchemaTableNameOrOptions extends keyof (DefaultSchema['Tables'] &
-				DefaultSchema['Views'])
-		? (DefaultSchema['Tables'] &
-				DefaultSchema['Views'])[DefaultSchemaTableNameOrOptions] extends {
-				Row: infer R;
-			}
-			? R
-			: never
-		: never;
+  ? (Database[DefaultSchemaTableNameOrOptions['schema']]['Tables'] &
+      Database[DefaultSchemaTableNameOrOptions['schema']]['Views'])[TableName] extends {
+      Row: infer R;
+    }
+    ? R
+    : never
+  : DefaultSchemaTableNameOrOptions extends keyof (DefaultSchema['Tables'] &
+        DefaultSchema['Views'])
+    ? (DefaultSchema['Tables'] &
+        DefaultSchema['Views'])[DefaultSchemaTableNameOrOptions] extends {
+        Row: infer R;
+      }
+      ? R
+      : never
+    : never;
 
 export type TablesInsert<
-	DefaultSchemaTableNameOrOptions extends
-		| keyof DefaultSchema['Tables']
-		| { schema: keyof Database },
-	TableName extends DefaultSchemaTableNameOrOptions extends {
-		schema: keyof Database;
-	}
-		? keyof Database[DefaultSchemaTableNameOrOptions['schema']]['Tables']
-		: never = never,
+  DefaultSchemaTableNameOrOptions extends
+    | keyof DefaultSchema['Tables']
+    | { schema: keyof Database },
+  TableName extends DefaultSchemaTableNameOrOptions extends {
+    schema: keyof Database;
+  }
+    ? keyof Database[DefaultSchemaTableNameOrOptions['schema']]['Tables']
+    : never = never,
 > = DefaultSchemaTableNameOrOptions extends { schema: keyof Database }
-	? Database[DefaultSchemaTableNameOrOptions['schema']]['Tables'][TableName] extends {
-			Insert: infer I;
-		}
-		? I
-		: never
-	: DefaultSchemaTableNameOrOptions extends keyof DefaultSchema['Tables']
-		? DefaultSchema['Tables'][DefaultSchemaTableNameOrOptions] extends {
-				Insert: infer I;
-			}
-			? I
-			: never
-		: never;
+  ? Database[DefaultSchemaTableNameOrOptions['schema']]['Tables'][TableName] extends {
+      Insert: infer I;
+    }
+    ? I
+    : never
+  : DefaultSchemaTableNameOrOptions extends keyof DefaultSchema['Tables']
+    ? DefaultSchema['Tables'][DefaultSchemaTableNameOrOptions] extends {
+        Insert: infer I;
+      }
+      ? I
+      : never
+    : never;
 
 export type TablesUpdate<
-	DefaultSchemaTableNameOrOptions extends
-		| keyof DefaultSchema['Tables']
-		| { schema: keyof Database },
-	TableName extends DefaultSchemaTableNameOrOptions extends {
-		schema: keyof Database;
-	}
-		? keyof Database[DefaultSchemaTableNameOrOptions['schema']]['Tables']
-		: never = never,
+  DefaultSchemaTableNameOrOptions extends
+    | keyof DefaultSchema['Tables']
+    | { schema: keyof Database },
+  TableName extends DefaultSchemaTableNameOrOptions extends {
+    schema: keyof Database;
+  }
+    ? keyof Database[DefaultSchemaTableNameOrOptions['schema']]['Tables']
+    : never = never,
 > = DefaultSchemaTableNameOrOptions extends { schema: keyof Database }
-	? Database[DefaultSchemaTableNameOrOptions['schema']]['Tables'][TableName] extends {
-			Update: infer U;
-		}
-		? U
-		: never
-	: DefaultSchemaTableNameOrOptions extends keyof DefaultSchema['Tables']
-		? DefaultSchema['Tables'][DefaultSchemaTableNameOrOptions] extends {
-				Update: infer U;
-			}
-			? U
-			: never
-		: never;
+  ? Database[DefaultSchemaTableNameOrOptions['schema']]['Tables'][TableName] extends {
+      Update: infer U;
+    }
+    ? U
+    : never
+  : DefaultSchemaTableNameOrOptions extends keyof DefaultSchema['Tables']
+    ? DefaultSchema['Tables'][DefaultSchemaTableNameOrOptions] extends {
+        Update: infer U;
+      }
+      ? U
+      : never
+    : never;
 
 export type Enums<
-	DefaultSchemaEnumNameOrOptions extends
-		| keyof DefaultSchema['Enums']
-		| { schema: keyof Database },
-	EnumName extends DefaultSchemaEnumNameOrOptions extends {
-		schema: keyof Database;
-	}
-		? keyof Database[DefaultSchemaEnumNameOrOptions['schema']]['Enums']
-		: never = never,
+  DefaultSchemaEnumNameOrOptions extends
+    | keyof DefaultSchema['Enums']
+    | { schema: keyof Database },
+  EnumName extends DefaultSchemaEnumNameOrOptions extends {
+    schema: keyof Database;
+  }
+    ? keyof Database[DefaultSchemaEnumNameOrOptions['schema']]['Enums']
+    : never = never,
 > = DefaultSchemaEnumNameOrOptions extends { schema: keyof Database }
-	? Database[DefaultSchemaEnumNameOrOptions['schema']]['Enums'][EnumName]
-	: DefaultSchemaEnumNameOrOptions extends keyof DefaultSchema['Enums']
-		? DefaultSchema['Enums'][DefaultSchemaEnumNameOrOptions]
-		: never;
+  ? Database[DefaultSchemaEnumNameOrOptions['schema']]['Enums'][EnumName]
+  : DefaultSchemaEnumNameOrOptions extends keyof DefaultSchema['Enums']
+    ? DefaultSchema['Enums'][DefaultSchemaEnumNameOrOptions]
+    : never;
 
 export type CompositeTypes<
-	PublicCompositeTypeNameOrOptions extends
-		| keyof DefaultSchema['CompositeTypes']
-		| { schema: keyof Database },
-	CompositeTypeName extends PublicCompositeTypeNameOrOptions extends {
-		schema: keyof Database;
-	}
-		? keyof Database[PublicCompositeTypeNameOrOptions['schema']]['CompositeTypes']
-		: never = never,
+  PublicCompositeTypeNameOrOptions extends
+    | keyof DefaultSchema['CompositeTypes']
+    | { schema: keyof Database },
+  CompositeTypeName extends PublicCompositeTypeNameOrOptions extends {
+    schema: keyof Database;
+  }
+    ? keyof Database[PublicCompositeTypeNameOrOptions['schema']]['CompositeTypes']
+    : never = never,
 > = PublicCompositeTypeNameOrOptions extends { schema: keyof Database }
-	? Database[PublicCompositeTypeNameOrOptions['schema']]['CompositeTypes'][CompositeTypeName]
-	: PublicCompositeTypeNameOrOptions extends keyof DefaultSchema['CompositeTypes']
-		? DefaultSchema['CompositeTypes'][PublicCompositeTypeNameOrOptions]
-		: never;
+  ? Database[PublicCompositeTypeNameOrOptions['schema']]['CompositeTypes'][CompositeTypeName]
+  : PublicCompositeTypeNameOrOptions extends keyof DefaultSchema['CompositeTypes']
+    ? DefaultSchema['CompositeTypes'][PublicCompositeTypeNameOrOptions]
+    : never;
 
 export const Constants = {
-	public: {
-		Enums: {},
-	},
+  public: {
+    Enums: {},
+  },
 } as const;
diff --git a/src/utils/supabase/utils.ts b/src/utils/supabase/utils.ts
index 4a5e195..150ad65 100644
--- a/src/utils/supabase/utils.ts
+++ b/src/utils/supabase/utils.ts
@@ -15,12 +15,12 @@ export type StatusUpdate = Database['public']['Tables']['statuses']['Update'];
 
 // Generic helper to get any table's row type
 export type TableRow<T extends keyof Database['public']['Tables']> =
-	Database['public']['Tables'][T]['Row'];
+  Database['public']['Tables'][T]['Row'];
 
 // Generic helper to get any table's insert type
 export type TableInsert<T extends keyof Database['public']['Tables']> =
-	Database['public']['Tables'][T]['Insert'];
+  Database['public']['Tables'][T]['Insert'];
 
 // Generic helper to get any table's update type
 export type TableUpdate<T extends keyof Database['public']['Tables']> =
-	Database['public']['Tables'][T]['Update'];
+  Database['public']['Tables'][T]['Update'];