Initial Commit

2025-12-05 16:40:33 +07:00
parent 0834f12410
commit 94c7d5aec0
91 changed files with 20446 additions and 0 deletions
--- a/.env
+++ b/.env
@@ -0,0 +1,4 @@
+REACT_APP_BACKEND_URL=http://localhost:8000
+WDS_SOCKET_PORT=443
+REACT_APP_ENABLE_VISUAL_EDITS=false
+ENABLE_HEALTH_CHECK=false
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
--- a/components.json
+++ b/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": false,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
--- a/craco.config.js
+++ b/craco.config.js
@@ -0,0 +1,112 @@
+// craco.config.js
+const path = require("path");
+require("dotenv").config();
+
+// Environment variable overrides
+const config = {
+  disableHotReload: process.env.DISABLE_HOT_RELOAD === "true",
+  enableVisualEdits: process.env.REACT_APP_ENABLE_VISUAL_EDITS === "true",
+  enableHealthCheck: process.env.ENABLE_HEALTH_CHECK === "true",
+};
+
+// Conditionally load visual editing modules only if enabled
+let babelMetadataPlugin;
+let setupDevServer;
+
+if (config.enableVisualEdits) {
+  babelMetadataPlugin = require("./plugins/visual-edits/babel-metadata-plugin");
+  setupDevServer = require("./plugins/visual-edits/dev-server-setup");
+}
+
+// Conditionally load health check modules only if enabled
+let WebpackHealthPlugin;
+let setupHealthEndpoints;
+let healthPluginInstance;
+
+if (config.enableHealthCheck) {
+  WebpackHealthPlugin = require("./plugins/health-check/webpack-health-plugin");
+  setupHealthEndpoints = require("./plugins/health-check/health-endpoints");
+  healthPluginInstance = new WebpackHealthPlugin();
+}
+
+const webpackConfig = {
+  webpack: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+    configure: (webpackConfig) => {
+
+      // Disable hot reload completely if environment variable is set
+      if (config.disableHotReload) {
+        // Remove hot reload related plugins
+        webpackConfig.plugins = webpackConfig.plugins.filter(plugin => {
+          return !(plugin.constructor.name === 'HotModuleReplacementPlugin');
+        });
+
+        // Disable watch mode
+        webpackConfig.watch = false;
+        webpackConfig.watchOptions = {
+          ignored: /.*/, // Ignore all files
+        };
+      } else {
+        // Add ignored patterns to reduce watched directories
+        webpackConfig.watchOptions = {
+          ...webpackConfig.watchOptions,
+          ignored: [
+            '**/node_modules/**',
+            '**/.git/**',
+            '**/build/**',
+            '**/dist/**',
+            '**/coverage/**',
+            '**/public/**',
+          ],
+        };
+      }
+
+      // Add health check plugin to webpack if enabled
+      if (config.enableHealthCheck && healthPluginInstance) {
+        webpackConfig.plugins.push(healthPluginInstance);
+      }
+
+      return webpackConfig;
+    },
+  },
+};
+
+// Only add babel plugin if visual editing is enabled
+if (config.enableVisualEdits) {
+  webpackConfig.babel = {
+    plugins: [babelMetadataPlugin],
+  };
+}
+
+// Setup dev server with visual edits and/or health check
+if (config.enableVisualEdits || config.enableHealthCheck) {
+  webpackConfig.devServer = (devServerConfig) => {
+    // Apply visual edits dev server setup if enabled
+    if (config.enableVisualEdits && setupDevServer) {
+      devServerConfig = setupDevServer(devServerConfig);
+    }
+
+    // Add health check endpoints if enabled
+    if (config.enableHealthCheck && setupHealthEndpoints && healthPluginInstance) {
+      const originalSetupMiddlewares = devServerConfig.setupMiddlewares;
+
+      devServerConfig.setupMiddlewares = (middlewares, devServer) => {
+        // Call original setup if exists
+        if (originalSetupMiddlewares) {
+          middlewares = originalSetupMiddlewares(middlewares, devServer);
+        }
+
+        // Setup health endpoints
+        setupHealthEndpoints(devServer, healthPluginInstance);
+
+        return middlewares;
+      };
+    }
+
+    return devServerConfig;
+  };
+}
+
+module.exports = webpackConfig;
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"]
+}
--- a/package.json
+++ b/package.json
@@ -0,0 +1,94 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@fontsource/dm-sans": "^5.2.8",
+    "@fontsource/fraunces": "^5.2.9",
+    "@hookform/resolvers": "^5.0.1",
+    "@radix-ui/react-accordion": "^1.2.8",
+    "@radix-ui/react-alert-dialog": "^1.1.11",
+    "@radix-ui/react-aspect-ratio": "^1.1.4",
+    "@radix-ui/react-avatar": "^1.1.7",
+    "@radix-ui/react-checkbox": "^1.2.3",
+    "@radix-ui/react-collapsible": "^1.1.8",
+    "@radix-ui/react-context-menu": "^2.2.12",
+    "@radix-ui/react-dialog": "^1.1.11",
+    "@radix-ui/react-dropdown-menu": "^2.1.12",
+    "@radix-ui/react-hover-card": "^1.1.11",
+    "@radix-ui/react-label": "^2.1.4",
+    "@radix-ui/react-menubar": "^1.1.12",
+    "@radix-ui/react-navigation-menu": "^1.2.10",
+    "@radix-ui/react-popover": "^1.1.11",
+    "@radix-ui/react-progress": "^1.1.4",
+    "@radix-ui/react-radio-group": "^1.3.4",
+    "@radix-ui/react-scroll-area": "^1.2.6",
+    "@radix-ui/react-select": "^2.2.2",
+    "@radix-ui/react-separator": "^1.1.4",
+    "@radix-ui/react-slider": "^1.3.2",
+    "@radix-ui/react-slot": "^1.2.0",
+    "@radix-ui/react-switch": "^1.2.2",
+    "@radix-ui/react-tabs": "^1.1.9",
+    "@radix-ui/react-toast": "^1.2.11",
+    "@radix-ui/react-toggle": "^1.1.6",
+    "@radix-ui/react-toggle-group": "^1.1.7",
+    "@radix-ui/react-tooltip": "^1.2.4",
+    "@stripe/react-stripe-js": "^2.0.0",
+    "@stripe/stripe-js": "^2.0.0",
+    "axios": "^1.8.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "cra-template": "1.2.0",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.507.0",
+    "next-themes": "^0.4.6",
+    "react": "^19.0.0",
+    "react-day-picker": "8.10.1",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.56.2",
+    "react-icons": "^5.5.0",
+    "react-resizable-panels": "^3.0.1",
+    "react-router-dom": "^7.5.1",
+    "react-scripts": "5.0.1",
+    "sonner": "^2.0.3",
+    "tailwind-merge": "^3.2.0",
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^1.1.2",
+    "zod": "^3.24.4"
+  },
+  "scripts": {
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@craco/craco": "^7.1.0",
+    "@eslint/js": "9.23.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "9.23.0",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-react": "7.37.4",
+    "eslint-plugin-react-hooks": "5.2.0",
+    "globals": "15.15.0",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17"
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+}
--- a/plugins/health-check/health-endpoints.js
+++ b/plugins/health-check/health-endpoints.js
@@ -0,0 +1,213 @@
+// health-endpoints.js
+// API endpoints for health checks and monitoring
+
+const os = require('os');
+
+const SERVER_START_TIME = Date.now();
+
+/**
+ * Setup health check endpoints on the dev server
+ * @param {Object} devServer - Webpack dev server instance
+ * @param {Object} healthPlugin - Instance of WebpackHealthPlugin
+ */
+function setupHealthEndpoints(devServer, healthPlugin) {
+  if (!devServer || !devServer.app) {
+    console.warn('[Health Check] Dev server not available, skipping health endpoints');
+    return;
+  }
+
+  if (!healthPlugin) {
+    console.warn('[Health Check] Health plugin not provided, skipping health endpoints');
+    return;
+  }
+
+  console.log('[Health Check] Setting up health endpoints...');
+
+  // ====================================================================
+  // GET /health - Detailed health status (JSON)
+  // ====================================================================
+  devServer.app.get("/health", (req, res) => {
+    const webpackStatus = healthPlugin.getStatus();
+    const uptime = Date.now() - SERVER_START_TIME;
+    const memUsage = process.memoryUsage();
+
+    res.json({
+      status: webpackStatus.isHealthy ? 'healthy' : 'unhealthy',
+      timestamp: new Date().toISOString(),
+      uptime: {
+        seconds: Math.floor(uptime / 1000),
+        formatted: formatDuration(uptime),
+      },
+      webpack: {
+        state: webpackStatus.state,
+        isHealthy: webpackStatus.isHealthy,
+        hasCompiled: webpackStatus.hasCompiled,
+        errors: webpackStatus.errorCount,
+        warnings: webpackStatus.warningCount,
+        lastCompileTime: webpackStatus.lastCompileTime
+          ? new Date(webpackStatus.lastCompileTime).toISOString()
+          : null,
+        lastSuccessTime: webpackStatus.lastSuccessTime
+          ? new Date(webpackStatus.lastSuccessTime).toISOString()
+          : null,
+        compileDuration: webpackStatus.compileDuration
+          ? `${webpackStatus.compileDuration}ms`
+          : null,
+        totalCompiles: webpackStatus.totalCompiles,
+        firstCompileTime: webpackStatus.firstCompileTime
+          ? new Date(webpackStatus.firstCompileTime).toISOString()
+          : null,
+      },
+      server: {
+        nodeVersion: process.version,
+        platform: os.platform(),
+        arch: os.arch(),
+        cpus: os.cpus().length,
+        memory: {
+          heapUsed: formatBytes(memUsage.heapUsed),
+          heapTotal: formatBytes(memUsage.heapTotal),
+          rss: formatBytes(memUsage.rss),
+          external: formatBytes(memUsage.external),
+        },
+        systemMemory: {
+          total: formatBytes(os.totalmem()),
+          free: formatBytes(os.freemem()),
+          used: formatBytes(os.totalmem() - os.freemem()),
+        },
+      },
+      environment: process.env.NODE_ENV || 'development',
+    });
+  });
+
+  // ====================================================================
+  // GET /health/simple - Simple text response (OK/COMPILING/ERROR)
+  // ====================================================================
+  devServer.app.get("/health/simple", (req, res) => {
+    const webpackStatus = healthPlugin.getSimpleStatus();
+
+    if (webpackStatus.state === 'success') {
+      res.status(200).send('OK');
+    } else if (webpackStatus.state === 'compiling') {
+      res.status(200).send('COMPILING');
+    } else if (webpackStatus.state === 'idle') {
+      res.status(200).send('IDLE');
+    } else {
+      res.status(503).send('ERROR');
+    }
+  });
+
+  // ====================================================================
+  // GET /health/ready - Readiness check (Kubernetes/load balancer)
+  // ====================================================================
+  devServer.app.get("/health/ready", (req, res) => {
+    const webpackStatus = healthPlugin.getSimpleStatus();
+
+    if (webpackStatus.state === 'success') {
+      res.status(200).json({
+        ready: true,
+        state: webpackStatus.state,
+      });
+    } else {
+      res.status(503).json({
+        ready: false,
+        state: webpackStatus.state,
+        reason: webpackStatus.state === 'compiling'
+          ? 'Compilation in progress'
+          : 'Compilation failed',
+      });
+    }
+  });
+
+  // ====================================================================
+  // GET /health/live - Liveness check (Kubernetes)
+  // ====================================================================
+  devServer.app.get("/health/live", (req, res) => {
+    res.status(200).json({
+      alive: true,
+      timestamp: new Date().toISOString(),
+    });
+  });
+
+  // ====================================================================
+  // GET /health/errors - Get current errors and warnings
+  // ====================================================================
+  devServer.app.get("/health/errors", (req, res) => {
+    const webpackStatus = healthPlugin.getStatus();
+
+    res.json({
+      errorCount: webpackStatus.errorCount,
+      warningCount: webpackStatus.warningCount,
+      errors: webpackStatus.errors,
+      warnings: webpackStatus.warnings,
+      state: webpackStatus.state,
+    });
+  });
+
+  // ====================================================================
+  // GET /health/stats - Compilation statistics
+  // ====================================================================
+  devServer.app.get("/health/stats", (req, res) => {
+    const webpackStatus = healthPlugin.getStatus();
+    const uptime = Date.now() - SERVER_START_TIME;
+
+    res.json({
+      totalCompiles: webpackStatus.totalCompiles,
+      averageCompileTime: webpackStatus.totalCompiles > 0
+        ? `${Math.round(uptime / webpackStatus.totalCompiles)}ms`
+        : null,
+      lastCompileDuration: webpackStatus.compileDuration
+        ? `${webpackStatus.compileDuration}ms`
+        : null,
+      firstCompileTime: webpackStatus.firstCompileTime
+        ? new Date(webpackStatus.firstCompileTime).toISOString()
+        : null,
+      serverUptime: formatDuration(uptime),
+    });
+  });
+
+  console.log('[Health Check] ✓ Health endpoints ready:');
+  console.log('  • GET /health         - Detailed status');
+  console.log('  • GET /health/simple  - Simple OK/ERROR');
+  console.log('  • GET /health/ready   - Readiness check');
+  console.log('  • GET /health/live    - Liveness check');
+  console.log('  • GET /health/errors  - Error details');
+  console.log('  • GET /health/stats   - Statistics');
+}
+
+// ====================================================================
+// Helper Functions
+// ====================================================================
+
+/**
+ * Format bytes to human-readable string
+ * @param {number} bytes
+ * @returns {string}
+ */
+function formatBytes(bytes) {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+}
+
+/**
+ * Format duration to human-readable string
+ * @param {number} ms - Duration in milliseconds
+ * @returns {string}
+ */
+function formatDuration(ms) {
+  const seconds = Math.floor(ms / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+
+  if (hours > 0) {
+    return `${hours}h ${minutes % 60}m ${seconds % 60}s`;
+  } else if (minutes > 0) {
+    return `${minutes}m ${seconds % 60}s`;
+  } else {
+    return `${seconds}s`;
+  }
+}
+
+module.exports = setupHealthEndpoints;
--- a/plugins/health-check/webpack-health-plugin.js
+++ b/plugins/health-check/webpack-health-plugin.js
@@ -0,0 +1,120 @@
+// webpack-health-plugin.js
+// Webpack plugin that tracks compilation state and health metrics
+
+class WebpackHealthPlugin {
+  constructor() {
+    this.status = {
+      state: 'idle',           // idle, compiling, success, failed
+      errors: [],
+      warnings: [],
+      lastCompileTime: null,
+      lastSuccessTime: null,
+      compileDuration: 0,
+      totalCompiles: 0,
+      firstCompileTime: null,
+    };
+  }
+
+  apply(compiler) {
+    const pluginName = 'WebpackHealthPlugin';
+
+    // Hook: Compilation started
+    compiler.hooks.compile.tap(pluginName, () => {
+      const now = Date.now();
+      this.status.state = 'compiling';
+      this.status.lastCompileTime = now;
+
+      if (!this.status.firstCompileTime) {
+        this.status.firstCompileTime = now;
+      }
+    });
+
+    // Hook: Compilation completed
+    compiler.hooks.done.tap(pluginName, (stats) => {
+      const info = stats.toJson({
+        all: false,
+        errors: true,
+        warnings: true,
+      });
+
+      this.status.totalCompiles++;
+      this.status.compileDuration = Date.now() - this.status.lastCompileTime;
+
+      if (stats.hasErrors()) {
+        this.status.state = 'failed';
+        this.status.errors = info.errors.map(err => ({
+          message: err.message || String(err),
+          stack: err.stack,
+          moduleName: err.moduleName,
+          loc: err.loc,
+        }));
+      } else {
+        this.status.state = 'success';
+        this.status.lastSuccessTime = Date.now();
+        this.status.errors = [];
+      }
+
+      if (stats.hasWarnings()) {
+        this.status.warnings = info.warnings.map(warn => ({
+          message: warn.message || String(warn),
+          moduleName: warn.moduleName,
+          loc: warn.loc,
+        }));
+      } else {
+        this.status.warnings = [];
+      }
+    });
+
+    // Hook: Compilation failed
+    compiler.hooks.failed.tap(pluginName, (error) => {
+      this.status.state = 'failed';
+      this.status.errors = [{
+        message: error.message,
+        stack: error.stack,
+      }];
+      this.status.compileDuration = Date.now() - this.status.lastCompileTime;
+    });
+
+    // Hook: Invalid (file changed, recompiling)
+    compiler.hooks.invalid.tap(pluginName, () => {
+      this.status.state = 'compiling';
+    });
+  }
+
+  getStatus() {
+    return {
+      ...this.status,
+      // Add computed fields
+      isHealthy: this.status.state === 'success',
+      errorCount: this.status.errors.length,
+      warningCount: this.status.warnings.length,
+      hasCompiled: this.status.totalCompiles > 0,
+    };
+  }
+
+  // Get simplified status for quick checks
+  getSimpleStatus() {
+    return {
+      state: this.status.state,
+      isHealthy: this.status.state === 'success',
+      errorCount: this.status.errors.length,
+      warningCount: this.status.warnings.length,
+    };
+  }
+
+  // Reset statistics (useful for testing)
+  reset() {
+    this.status = {
+      state: 'idle',
+      errors: [],
+      warnings: [],
+      lastCompileTime: null,
+      lastSuccessTime: null,
+      compileDuration: 0,
+      totalCompiles: 0,
+      firstCompileTime: null,
+    };
+  }
+}
+
+module.exports = WebpackHealthPlugin;
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#000000" />
+        <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+        <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+        <title>Membershi Website</title>
+        <script src="#"></script>
+    </head>
+    <body>
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <div id="root"></div>
+        <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+      -->
+    </body>
+</html>
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,32 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', sans-serif;
+  background-color: #FDFCF8;
+  color: #3D405B;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Fraunces', serif;
+  font-weight: 600;
+}
+
+.fraunces {
+  font-family: 'Fraunces', serif;
+}
+
+.dm-sans {
+  font-family: 'DM Sans', sans-serif;
+}
+
+.bg-warm-gradient {
+  background: linear-gradient(135deg, rgba(242, 204, 143, 0.2) 0%, rgba(224, 122, 95, 0.2) 100%);
+}
+
+.bg-soft-mesh {
+  background: radial-gradient(ellipse at top right, rgba(242, 204, 143, 0.4) 0%, #FDFCF8 50%, #FDFCF8 100%);
+}
--- a/src/App.js
+++ b/src/App.js
@@ -0,0 +1,141 @@
+import React from 'react';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { Toaster } from './components/ui/sonner';
+import Landing from './pages/Landing';
+import Register from './pages/Register';
+import Login from './pages/Login';
+import VerifyEmail from './pages/VerifyEmail';
+import Dashboard from './pages/Dashboard';
+import Profile from './pages/Profile';
+import Events from './pages/Events';
+import EventDetails from './pages/EventDetails';
+import Plans from './pages/Plans';
+import PaymentSuccess from './pages/PaymentSuccess';
+import PaymentCancel from './pages/PaymentCancel';
+import AdminDashboard from './pages/admin/AdminDashboard';
+import AdminUsers from './pages/admin/AdminUsers';
+import AdminUserView from './pages/admin/AdminUserView';
+import AdminStaff from './pages/admin/AdminStaff';
+import AdminMembers from './pages/admin/AdminMembers';
+import AdminEvents from './pages/admin/AdminEvents';
+import AdminApprovals from './pages/admin/AdminApprovals';
+import AdminPlans from './pages/admin/AdminPlans';
+import AdminLayout from './layouts/AdminLayout';
+import { AuthProvider, useAuth } from './context/AuthContext';
+
+const PrivateRoute = ({ children, adminOnly = false }) => {
+  const { user, loading } = useAuth();
+  
+  if (loading) {
+    return <div className="min-h-screen flex items-center justify-center">Loading...</div>;
+  }
+  
+  if (!user) {
+    return <Navigate to="/login" />;
+  }
+  
+  if (adminOnly && user.role !== 'admin') {
+    return <Navigate to="/dashboard" />;
+  }
+  
+  return children;
+};
+
+function App() {
+  return (
+    <AuthProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Landing />} />
+          <Route path="/register" element={<Register />} />
+          <Route path="/login" element={<Login />} />
+          <Route path="/verify-email" element={<VerifyEmail />} />
+          <Route path="/plans" element={<Plans />} />
+          <Route path="/payment-success" element={<PaymentSuccess />} />
+          <Route path="/payment-cancel" element={<PaymentCancel />} />
+
+          <Route path="/dashboard" element={
+            <PrivateRoute>
+              <Dashboard />
+            </PrivateRoute>
+          } />
+          <Route path="/profile" element={
+            <PrivateRoute>
+              <Profile />
+            </PrivateRoute>
+          } />
+          <Route path="/events" element={
+            <PrivateRoute>
+              <Events />
+            </PrivateRoute>
+          } />
+          <Route path="/events/:id" element={
+            <PrivateRoute>
+              <EventDetails />
+            </PrivateRoute>
+          } />
+          
+          <Route path="/admin" element={
+            <PrivateRoute adminOnly>
+              <AdminLayout>
+                <AdminDashboard />
+              </AdminLayout>
+            </PrivateRoute>
+          } />
+          <Route path="/admin/staff" element={
+            <PrivateRoute adminOnly>
+              <AdminLayout>
+                <AdminStaff />
+              </AdminLayout>
+            </PrivateRoute>
+          } />
+          <Route path="/admin/members" element={
+            <PrivateRoute adminOnly>
+              <AdminLayout>
+                <AdminMembers />
+              </AdminLayout>
+            </PrivateRoute>
+          } />
+          <Route path="/admin/users" element={
+            <PrivateRoute adminOnly>
+              <AdminLayout>
+                <AdminUsers />
+              </AdminLayout>
+            </PrivateRoute>
+          } />
+          <Route path="/admin/users/:userId" element={
+            <PrivateRoute adminOnly>
+              <AdminLayout>
+                <AdminUserView />
+              </AdminLayout>
+            </PrivateRoute>
+          } />
+          <Route path="/admin/events" element={
+            <PrivateRoute adminOnly>
+              <AdminLayout>
+                <AdminEvents />
+              </AdminLayout>
+            </PrivateRoute>
+          } />
+          <Route path="/admin/approvals" element={
+            <PrivateRoute adminOnly>
+              <AdminLayout>
+                <AdminApprovals />
+              </AdminLayout>
+            </PrivateRoute>
+          } />
+          <Route path="/admin/plans" element={
+            <PrivateRoute adminOnly>
+              <AdminLayout>
+                <AdminPlans />
+              </AdminLayout>
+            </PrivateRoute>
+          } />
+        </Routes>
+        <Toaster position="top-right" />
+      </BrowserRouter>
+    </AuthProvider>
+  );
+}
+
+export default App;
--- a/src/components/AdminSidebar.js
+++ b/src/components/AdminSidebar.js
@@ -0,0 +1,263 @@
+import React, { useState, useEffect } from 'react';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+import api from '../utils/api';
+import { Badge } from './ui/badge';
+import {
+  LayoutDashboard,
+  UserCog,
+  Users,
+  CheckCircle,
+  CreditCard,
+  Calendar,
+  Shield,
+  Settings,
+  ChevronLeft,
+  ChevronRight,
+  LogOut,
+  Menu
+} from 'lucide-react';
+
+const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { user, logout } = useAuth();
+  const [pendingCount, setPendingCount] = useState(0);
+
+  // Fetch pending approvals count
+  useEffect(() => {
+    const fetchPendingCount = async () => {
+      try {
+        const response = await api.get('/admin/users');
+        const pending = response.data.filter(u =>
+          ['pending_approval', 'pre_approved'].includes(u.status)
+        );
+        setPendingCount(pending.length);
+      } catch (error) {
+        console.error('Failed to fetch pending count:', error);
+      }
+    };
+
+    fetchPendingCount();
+    // Refresh count every 30 seconds
+    const interval = setInterval(fetchPendingCount, 30000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const handleLogout = () => {
+    logout();
+    navigate('/login');
+  };
+
+  const navItems = [
+    {
+      name: 'Dashboard',
+      icon: LayoutDashboard,
+      path: '/admin',
+      disabled: false
+    },
+    {
+      name: 'Staff',
+      icon: UserCog,
+      path: '/admin/staff',
+      disabled: false
+    },
+    {
+      name: 'Members',
+      icon: Users,
+      path: '/admin/members',
+      disabled: false
+    },
+    {
+      name: 'Approvals',
+      icon: CheckCircle,
+      path: '/admin/approvals',
+      disabled: false,
+      badge: pendingCount
+    },
+    {
+      name: 'Plans',
+      icon: CreditCard,
+      path: '/admin/plans',
+      disabled: false
+    },
+    {
+      name: 'Events',
+      icon: Calendar,
+      path: '/admin/events',
+      disabled: true
+    },
+    {
+      name: 'Roles',
+      icon: Shield,
+      path: '/admin/roles',
+      disabled: false,
+      superadminOnly: true
+    }
+  ];
+
+  // Filter nav items based on user role
+  const filteredNavItems = navItems.filter(item => {
+    if (item.superadminOnly && user?.role !== 'superadmin') {
+      return false;
+    }
+    return true;
+  });
+
+  const isActive = (path) => {
+    if (path === '/admin') {
+      return location.pathname === '/admin';
+    }
+    return location.pathname.startsWith(path);
+  };
+
+  return (
+    <>
+      {/* Sidebar */}
+      <aside
+        className={`
+          bg-white border-r border-[#EAE0D5] transition-all duration-300 ease-out
+          ${isMobile ? 'fixed inset-y-0 left-0 z-40' : 'relative'}
+          ${isOpen ? 'w-64' : 'w-16'}
+          ${isMobile && !isOpen ? '-translate-x-full' : 'translate-x-0'}
+          flex flex-col
+        `}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 border-b border-[#EAE0D5]">
+          {isOpen && (
+            <h2 className="text-xl font-semibold fraunces text-[#3D405B]">
+              Admin
+            </h2>
+          )}
+          <button
+            onClick={onToggle}
+            className="p-2 rounded-lg hover:bg-[#F2CC8F]/20 transition-colors ml-auto"
+            aria-label={isOpen ? 'Collapse sidebar' : 'Expand sidebar'}
+          >
+            {isMobile ? (
+              <Menu className="h-5 w-5 text-[#3D405B]" />
+            ) : isOpen ? (
+              <ChevronLeft className="h-5 w-5 text-[#3D405B]" />
+            ) : (
+              <ChevronRight className="h-5 w-5 text-[#3D405B]" />
+            )}
+          </button>
+        </div>
+
+        {/* Navigation */}
+        <nav className="flex-1 overflow-y-auto p-4 space-y-2">
+          {filteredNavItems.map((item) => {
+            const Icon = item.icon;
+            const active = isActive(item.path);
+
+            return (
+              <div key={item.name} className="relative group">
+                <Link
+                  to={item.disabled ? '#' : item.path}
+                  onClick={(e) => {
+                    if (item.disabled) {
+                      e.preventDefault();
+                    }
+                  }}
+                  className={`
+                    flex items-center gap-3 px-4 py-3 rounded-lg transition-all relative
+                    ${item.disabled
+                      ? 'opacity-50 cursor-not-allowed text-[#6B708D]'
+                      : active
+                      ? 'bg-[#E07A5F]/10 text-[#E07A5F]'
+                      : 'text-[#3D405B] hover:bg-[#F2CC8F]/20'
+                    }
+                  `}
+                >
+                  {/* Active border */}
+                  {active && !item.disabled && (
+                    <div className="absolute left-0 top-0 bottom-0 w-1 bg-[#E07A5F] rounded-r" />
+                  )}
+
+                  <Icon className="h-5 w-5 flex-shrink-0" />
+
+                  {isOpen && (
+                    <>
+                      <span className="flex-1">{item.name}</span>
+                      {item.disabled && (
+                        <Badge className="bg-[#F2CC8F] text-[#3D405B] text-xs px-2 py-0.5">
+                          Soon
+                        </Badge>
+                      )}
+                      {item.badge > 0 && !item.disabled && (
+                        <Badge className="bg-[#E07A5F] text-white text-xs px-2 py-0.5">
+                          {item.badge}
+                        </Badge>
+                      )}
+                    </>
+                  )}
+
+                  {/* Badge when collapsed */}
+                  {!isOpen && item.badge > 0 && !item.disabled && (
+                    <div className="absolute -top-1 -right-1 bg-[#E07A5F] text-white text-xs rounded-full h-5 w-5 flex items-center justify-center font-medium">
+                      {item.badge}
+                    </div>
+                  )}
+                </Link>
+
+                {/* Tooltip when collapsed */}
+                {!isOpen && (
+                  <div className="absolute left-full ml-2 top-1/2 -translate-y-1/2 px-3 py-2 bg-[#3D405B] text-white text-sm rounded-lg opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap z-50">
+                    {item.name}
+                    {item.badge > 0 && ` (${item.badge})`}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </nav>
+
+        {/* User Section */}
+        <div className="border-t border-[#EAE0D5] p-4 space-y-2">
+          {isOpen && user && (
+            <div className="px-4 py-3 mb-2">
+              <div className="flex items-center gap-3">
+                <div className="h-10 w-10 rounded-full bg-[#F2CC8F] flex items-center justify-center text-[#3D405B] font-semibold">
+                  {user.first_name?.[0]}{user.last_name?.[0]}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-[#3D405B] truncate">
+                    {user.first_name} {user.last_name}
+                  </p>
+                  <p className="text-xs text-[#6B708D] capitalize truncate">
+                    {user.role}
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Logout Button */}
+          <button
+            onClick={handleLogout}
+            className={`
+              flex items-center gap-3 px-4 py-3 rounded-lg w-full
+              text-[#E07A5F] hover:bg-[#E07A5F]/10 transition-colors
+              ${!isOpen && 'justify-center'}
+            `}
+          >
+            <LogOut className="h-5 w-5 flex-shrink-0" />
+            {isOpen && <span>Logout</span>}
+          </button>
+
+          {/* Logout tooltip when collapsed */}
+          {!isOpen && (
+            <div className="relative group">
+              <div className="absolute left-full ml-2 bottom-0 px-3 py-2 bg-[#3D405B] text-white text-sm rounded-lg opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap z-50">
+                Logout
+              </div>
+            </div>
+          )}
+        </div>
+      </aside>
+    </>
+  );
+};
+
+export default AdminSidebar;
--- a/src/components/AttendanceDialog.js
+++ b/src/components/AttendanceDialog.js
@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from 'react';
+import api from '../utils/api';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog';
+import { Button } from './ui/button';
+import { Checkbox } from './ui/checkbox';
+import { toast } from 'sonner';
+
+export const AttendanceDialog = ({ event, open, onOpenChange, onSuccess }) => {
+  const [rsvps, setRsvps] = useState([]);
+  const [attendance, setAttendance] = useState({});
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (open && event) {
+      fetchRSVPs();
+    }
+  }, [open, event]);
+
+  const fetchRSVPs = async () => {
+    try {
+      const response = await api.get(`/admin/events/${event.id}/rsvps`);
+      setRsvps(response.data);
+
+      // Pre-populate with existing attendance
+      const attendanceMap = {};
+      response.data.forEach(rsvp => {
+        attendanceMap[rsvp.user_id] = rsvp.attended || false;
+      });
+      setAttendance(attendanceMap);
+    } catch (error) {
+      toast.error('Failed to fetch RSVPs');
+    }
+  };
+
+  const handleSave = async () => {
+    setLoading(true);
+    try {
+      // Mark attendance for each user
+      for (const [userId, attended] of Object.entries(attendance)) {
+        await api.put(`/admin/events/${event.id}/attendance`, {
+          user_id: userId,
+          attended: attended
+        });
+      }
+
+      toast.success('Attendance updated successfully');
+      onSuccess();
+      onOpenChange(false);
+    } catch (error) {
+      toast.error('Failed to update attendance');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto bg-white">
+        <DialogHeader>
+          <DialogTitle className="text-2xl fraunces text-[#3D405B]">
+            Mark Attendance: {event?.title}
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4 mt-4">
+          {rsvps.length === 0 ? (
+            <p className="text-center text-[#6B708D] py-8">No RSVPs yet</p>
+          ) : (
+            rsvps.map((rsvp) => (
+              <div
+                key={rsvp.user_id}
+                className="flex items-center gap-3 p-4 border-2 border-[#EAE0D5] rounded-xl hover:border-[#E07A5F] transition-colors"
+              >
+                <Checkbox
+                  checked={attendance[rsvp.user_id] || false}
+                  onCheckedChange={(checked) => {
+                    setAttendance({ ...attendance, [rsvp.user_id]: checked });
+                  }}
+                  className="w-5 h-5"
+                />
+                <div className="flex-1">
+                  <p className="font-medium text-[#3D405B]">{rsvp.user_name}</p>
+                  <p className="text-sm text-[#6B708D]">{rsvp.user_email}</p>
+                </div>
+                {rsvp.attended && (
+                  <span className="text-sm text-[#81B29A] font-medium">
+                    ✓ Attended
+                  </span>
+                )}
+              </div>
+            ))
+          )}
+        </div>
+
+        <div className="flex gap-3 mt-6">
+          <Button
+            onClick={handleSave}
+            disabled={loading}
+            className="flex-1 bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full"
+          >
+            {loading ? 'Saving...' : 'Save Attendance'}
+          </Button>
+          <Button
+            onClick={() => onOpenChange(false)}
+            variant="outline"
+            className="flex-1 border-2 border-[#6B708D] text-[#6B708D] hover:bg-[#6B708D] hover:text-white rounded-full"
+          >
+            Cancel
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -0,0 +1,95 @@
+import React from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+import { Button } from './ui/button';
+import { Users, LogOut, LayoutDashboard } from 'lucide-react';
+
+const Navbar = () => {
+  const { user, logout } = useAuth();
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    logout();
+    navigate('/login');
+  };
+
+  return (
+    <nav className="bg-white border-b border-[#EAE0D5] sticky top-0 z-50 backdrop-blur-sm bg-white/90">
+      <div className="max-w-7xl mx-auto px-6 py-4">
+        <div className="flex justify-between items-center">
+          <Link to={user ? "/dashboard" : "/"} className="flex items-center gap-2">
+            <Users className="h-8 w-8 text-[#E07A5F]" strokeWidth={1.5} />
+            <span className="text-2xl font-semibold fraunces text-[#3D405B]">Membership</span>
+          </Link>
+          
+          <div className="flex items-center gap-4">
+            {user ? (
+              <>
+                {user.role === 'admin' && (
+                  <Link to="/admin">
+                    <Button
+                      variant="ghost"
+                      className="text-[#3D405B] hover:text-[#E07A5F] hover:bg-[#F2CC8F]/10"
+                      data-testid="admin-nav-button"
+                    >
+                      <LayoutDashboard className="h-4 w-4 mr-2" />
+                      Admin
+                    </Button>
+                  </Link>
+                )}
+                <Link to="/events">
+                  <Button
+                    variant="ghost"
+                    className="text-[#3D405B] hover:text-[#E07A5F] hover:bg-[#F2CC8F]/10"
+                    data-testid="events-nav-button"
+                  >
+                    Events
+                  </Button>
+                </Link>
+                <Link to="/profile">
+                  <Button
+                    variant="ghost"
+                    className="text-[#3D405B] hover:text-[#E07A5F] hover:bg-[#F2CC8F]/10"
+                    data-testid="profile-nav-button"
+                  >
+                    Profile
+                  </Button>
+                </Link>
+                <Button
+                  onClick={handleLogout}
+                  className="bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full px-6"
+                  data-testid="logout-button"
+                >
+                  <LogOut className="h-4 w-4 mr-2" />
+                  Logout
+                </Button>
+              </>
+            ) : (
+              <>
+                <Link to="/login">
+                  <Button
+                    variant="ghost"
+                    className="text-[#3D405B] hover:text-[#E07A5F] hover:bg-[#F2CC8F]/10"
+                    data-testid="login-nav-button"
+                  >
+                    Login
+                  </Button>
+                </Link>
+                <Link to="/register">
+                  <Button
+                    className="bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full px-6"
+                    data-testid="register-nav-button"
+                  >
+                    Join Us
+                  </Button>
+                </Link>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;
--- a/src/components/PaymentActivationDialog.js
+++ b/src/components/PaymentActivationDialog.js
@@ -0,0 +1,330 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from './ui/dialog';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Textarea } from './ui/textarea';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from './ui/select';
+import api from '../utils/api';
+import { toast } from 'sonner';
+import { Calendar } from 'lucide-react';
+
+const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
+  const [loading, setLoading] = useState(false);
+  const [plans, setPlans] = useState([]);
+  const [selectedPlan, setSelectedPlan] = useState(null);
+  const [useCustomPeriod, setUseCustomPeriod] = useState(false);
+  const [formData, setFormData] = useState({
+    plan_id: '',
+    amount: '',
+    payment_date: new Date().toISOString().split('T')[0], // Today's date
+    payment_method: 'cash',
+    custom_period_start: new Date().toISOString().split('T')[0],
+    custom_period_end: '',
+    notes: ''
+  });
+
+  // Fetch available plans on mount
+  useEffect(() => {
+    const fetchPlans = async () => {
+      try {
+        const response = await api.get('/admin/subscriptions/plans');
+        setPlans(response.data.filter(p => p.active));
+      } catch (error) {
+        toast.error('Failed to fetch subscription plans');
+      }
+    };
+    if (open) {
+      fetchPlans();
+    }
+  }, [open]);
+
+  // Update amount when plan changes (unless manually edited)
+  useEffect(() => {
+    if (selectedPlan && !formData.amount) {
+      setFormData(prev => ({
+        ...prev,
+        amount: (selectedPlan.price_cents / 100).toFixed(2)
+      }));
+    }
+  }, [selectedPlan]);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    // Validation
+    if (!formData.plan_id) {
+      toast.error('Please select a subscription plan');
+      return;
+    }
+    if (!formData.amount || parseFloat(formData.amount) <= 0) {
+      toast.error('Please enter a valid payment amount');
+      return;
+    }
+    if (useCustomPeriod && (!formData.custom_period_start || !formData.custom_period_end)) {
+      toast.error('Please specify both start and end dates for custom period');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const payload = {
+        plan_id: formData.plan_id,
+        amount_cents: Math.round(parseFloat(formData.amount) * 100),
+        payment_date: new Date(formData.payment_date).toISOString(),
+        payment_method: formData.payment_method,
+        use_custom_period: useCustomPeriod,
+        notes: formData.notes || null
+      };
+
+      if (useCustomPeriod) {
+        payload.custom_period_start = new Date(formData.custom_period_start).toISOString();
+        payload.custom_period_end = new Date(formData.custom_period_end).toISOString();
+      }
+
+      await api.post(`/admin/users/${user.id}/activate-payment`, payload);
+
+      toast.success(`${user.first_name} ${user.last_name} activated successfully!`);
+      onOpenChange(false);
+      if (onSuccess) onSuccess();
+
+      // Reset form
+      setFormData({
+        plan_id: '',
+        amount: '',
+        payment_date: new Date().toISOString().split('T')[0],
+        payment_method: 'cash',
+        custom_period_start: new Date().toISOString().split('T')[0],
+        custom_period_end: '',
+        notes: ''
+      });
+      setUseCustomPeriod(false);
+      setSelectedPlan(null);
+    } catch (error) {
+      toast.error(error.response?.data?.detail || 'Failed to activate payment');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (!user) return null;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[600px] bg-white rounded-2xl">
+        <DialogHeader>
+          <DialogTitle className="text-2xl font-semibold fraunces text-[#3D405B]">
+            Activate Manual Payment
+          </DialogTitle>
+          <DialogDescription className="text-[#6B708D]">
+            Record offline payment for {user.first_name} {user.last_name} ({user.email})
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-6 py-4">
+          {/* Subscription Plan Selection */}
+          <div className="space-y-2">
+            <Label htmlFor="plan_id" className="text-[#3D405B] font-medium">
+              Subscription Plan
+            </Label>
+            <Select
+              value={formData.plan_id}
+              onValueChange={(value) => {
+                const plan = plans.find(p => p.id === value);
+                setSelectedPlan(plan);
+                setFormData({
+                  ...formData,
+                  plan_id: value,
+                  amount: plan ? (plan.price_cents / 100).toFixed(2) : ''
+                });
+              }}
+            >
+              <SelectTrigger className="rounded-xl border-2 border-[#EAE0D5]">
+                <SelectValue placeholder="Select subscription plan" />
+              </SelectTrigger>
+              <SelectContent>
+                {plans.map(plan => (
+                  <SelectItem key={plan.id} value={plan.id}>
+                    {plan.name} - ${(plan.price_cents / 100).toFixed(2)}/{plan.billing_cycle}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {selectedPlan && (
+              <p className="text-xs text-[#6B708D]">
+                {selectedPlan.description || `${selectedPlan.billing_cycle} subscription`}
+              </p>
+            )}
+          </div>
+
+          {/* Payment Amount */}
+          <div className="space-y-2">
+            <Label htmlFor="amount" className="text-[#3D405B] font-medium">
+              Payment Amount ($)
+            </Label>
+            <Input
+              id="amount"
+              type="number"
+              step="0.01"
+              min="0"
+              placeholder="Enter amount"
+              value={formData.amount}
+              onChange={(e) => setFormData({...formData, amount: e.target.value})}
+              className="rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+              required
+            />
+            <p className="text-xs text-[#6B708D]">
+              Amount can differ from plan price if offering a discount or partial payment
+            </p>
+          </div>
+
+          {/* Payment Date */}
+          <div className="space-y-2">
+            <Label htmlFor="payment_date" className="text-[#3D405B] font-medium">
+              Payment Date
+            </Label>
+            <div className="relative">
+              <Calendar className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[#6B708D]" />
+              <Input
+                id="payment_date"
+                type="date"
+                value={formData.payment_date}
+                onChange={(e) => setFormData({...formData, payment_date: e.target.value})}
+                className="pl-12 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                required
+              />
+            </div>
+          </div>
+
+          {/* Payment Method */}
+          <div className="space-y-2">
+            <Label htmlFor="payment_method" className="text-[#3D405B] font-medium">
+              Payment Method
+            </Label>
+            <Select
+              value={formData.payment_method}
+              onValueChange={(value) => setFormData({...formData, payment_method: value})}
+            >
+              <SelectTrigger className="rounded-xl border-2 border-[#EAE0D5]">
+                <SelectValue placeholder="Select payment method" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="cash">Cash</SelectItem>
+                <SelectItem value="bank_transfer">Bank Transfer</SelectItem>
+                <SelectItem value="check">Check</SelectItem>
+                <SelectItem value="other">Other</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Subscription Period */}
+          <div className="space-y-3">
+            <Label className="text-[#3D405B] font-medium">Subscription Period</Label>
+
+            <div className="flex items-center gap-2">
+              <input
+                type="checkbox"
+                id="use_custom_period"
+                checked={useCustomPeriod}
+                onChange={(e) => setUseCustomPeriod(e.target.checked)}
+                className="rounded border-[#EAE0D5]"
+              />
+              <Label htmlFor="use_custom_period" className="text-sm text-[#6B708D] font-normal cursor-pointer">
+                Use custom dates instead of plan's billing cycle
+              </Label>
+            </div>
+
+            {useCustomPeriod ? (
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="custom_period_start" className="text-sm text-[#3D405B]">
+                    Start Date
+                  </Label>
+                  <Input
+                    id="custom_period_start"
+                    type="date"
+                    value={formData.custom_period_start}
+                    onChange={(e) => setFormData({...formData, custom_period_start: e.target.value})}
+                    className="rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                    required={useCustomPeriod}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="custom_period_end" className="text-sm text-[#3D405B]">
+                    End Date
+                  </Label>
+                  <Input
+                    id="custom_period_end"
+                    type="date"
+                    value={formData.custom_period_end}
+                    onChange={(e) => setFormData({...formData, custom_period_end: e.target.value})}
+                    className="rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                    required={useCustomPeriod}
+                  />
+                </div>
+              </div>
+            ) : (
+              selectedPlan && (
+                <p className="text-sm text-[#6B708D] bg-[#F2CC8F]/10 p-3 rounded-lg">
+                  Will use plan's billing cycle: <span className="font-medium">{selectedPlan.billing_cycle}</span>
+                  <br />
+                  Starts today, ends {selectedPlan.billing_cycle === 'monthly' ? '30 days' :
+                    selectedPlan.billing_cycle === 'quarterly' ? '90 days' :
+                    selectedPlan.billing_cycle === 'yearly' ? '1 year' :
+                    selectedPlan.billing_cycle === 'lifetime' ? 'lifetime' : '1 year'} from now
+                </p>
+              )
+            )}
+          </div>
+
+          {/* Notes */}
+          <div className="space-y-2">
+            <Label htmlFor="notes" className="text-[#3D405B] font-medium">
+              Notes (Optional)
+            </Label>
+            <Textarea
+              id="notes"
+              placeholder="Additional notes about the payment..."
+              value={formData.notes}
+              onChange={(e) => setFormData({...formData, notes: e.target.value})}
+              className="rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F] min-h-[100px]"
+            />
+          </div>
+
+          <DialogFooter className="gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+              className="rounded-full border-2 border-[#EAE0D5]"
+            >
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              disabled={loading}
+              className="bg-[#81B29A] text-white hover:bg-[#6FA087] rounded-full"
+            >
+              {loading ? 'Activating...' : 'Activate Payment'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default PaymentActivationDialog;
--- a/src/components/PlanDialog.js
+++ b/src/components/PlanDialog.js
@@ -0,0 +1,233 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from './ui/dialog';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Textarea } from './ui/textarea';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from './ui/select';
+import { toast } from 'sonner';
+import { Loader2 } from 'lucide-react';
+import api from '../utils/api';
+
+const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
+  const [loading, setLoading] = useState(false);
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    price_cents: '',
+    billing_cycle: 'yearly',
+    stripe_price_id: '',
+    active: true
+  });
+
+  useEffect(() => {
+    if (plan) {
+      setFormData({
+        name: plan.name,
+        description: plan.description || '',
+        price_cents: plan.price_cents,
+        billing_cycle: plan.billing_cycle,
+        stripe_price_id: plan.stripe_price_id || '',
+        active: plan.active
+      });
+    } else {
+      setFormData({
+        name: '',
+        description: '',
+        price_cents: '',
+        billing_cycle: 'yearly',
+        stripe_price_id: '',
+        active: true
+      });
+    }
+  }, [plan, open]);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+
+    try {
+      const endpoint = plan
+        ? `/admin/subscriptions/plans/${plan.id}`
+        : '/admin/subscriptions/plans';
+
+      const method = plan ? 'put' : 'post';
+
+      await api[method](endpoint, {
+        ...formData,
+        price_cents: parseInt(formData.price_cents)
+      });
+
+      toast.success(plan ? 'Plan updated successfully' : 'Plan created successfully');
+      onSuccess();
+      onOpenChange(false);
+    } catch (error) {
+      toast.error(error.response?.data?.detail || 'Failed to save plan');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const formatPriceForDisplay = (cents) => {
+    return (cents / 100).toFixed(2);
+  };
+
+  const handlePriceChange = (e) => {
+    const dollars = parseFloat(e.target.value) || 0;
+    setFormData({ ...formData, price_cents: Math.round(dollars * 100) });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[600px]">
+        <DialogHeader>
+          <DialogTitle className="fraunces text-2xl">
+            {plan ? 'Edit Plan' : 'Create New Plan'}
+          </DialogTitle>
+          <DialogDescription>
+            {plan ? 'Update plan details below' : 'Enter plan details to create a new subscription plan'}
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-6">
+          {/* Name */}
+          <div>
+            <Label htmlFor="name">Plan Name *</Label>
+            <Input
+              id="name"
+              value={formData.name}
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              placeholder="e.g., Annual Membership"
+              required
+              className="mt-2"
+            />
+          </div>
+
+          {/* Description */}
+          <div>
+            <Label htmlFor="description">Description</Label>
+            <Textarea
+              id="description"
+              value={formData.description}
+              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+              placeholder="Brief description of the plan benefits"
+              rows={3}
+              className="mt-2"
+            />
+          </div>
+
+          {/* Price & Billing Cycle - Side by side */}
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label htmlFor="price">Price (USD) *</Label>
+              <Input
+                id="price"
+                type="number"
+                step="0.01"
+                min="0"
+                value={formatPriceForDisplay(formData.price_cents)}
+                onChange={handlePriceChange}
+                placeholder="50.00"
+                required
+                className="mt-2"
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="billing_cycle">Billing Cycle *</Label>
+              <Select
+                value={formData.billing_cycle}
+                onValueChange={(value) => setFormData({ ...formData, billing_cycle: value })}
+              >
+                <SelectTrigger className="mt-2">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="monthly">Monthly</SelectItem>
+                  <SelectItem value="quarterly">Quarterly</SelectItem>
+                  <SelectItem value="yearly">Yearly</SelectItem>
+                  <SelectItem value="lifetime">Lifetime</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          {/* Stripe Price ID */}
+          <div>
+            <Label htmlFor="stripe_price_id">Stripe Price ID</Label>
+            <Input
+              id="stripe_price_id"
+              value={formData.stripe_price_id}
+              onChange={(e) => setFormData({ ...formData, stripe_price_id: e.target.value })}
+              placeholder="price_xxxxxxxxxxxxx"
+              className="mt-2 font-mono text-sm"
+            />
+            <p className="text-sm text-[#6B708D] mt-1">
+              Optional. Leave empty for manual/test plans.
+            </p>
+          </div>
+
+          {/* Active Toggle */}
+          <div className="flex items-center justify-between">
+            <div>
+              <Label htmlFor="active">Active Status</Label>
+              <p className="text-sm text-[#6B708D]">
+                Inactive plans won't appear for new subscriptions
+              </p>
+            </div>
+            <label className="relative inline-flex items-center cursor-pointer">
+              <input
+                type="checkbox"
+                id="active"
+                checked={formData.active}
+                onChange={(e) => setFormData({ ...formData, active: e.target.checked })}
+                className="sr-only peer"
+              />
+              <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-[#E07A5F]/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#81B29A]"></div>
+            </label>
+          </div>
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+              disabled={loading}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              disabled={loading}
+              className="bg-[#E07A5F] hover:bg-[#D0694E]"
+            >
+              {loading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Saving...
+                </>
+              ) : (
+                plan ? 'Update Plan' : 'Create Plan'
+              )}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default PlanDialog;
--- a/src/components/ui/accordion.jsx
+++ b/src/components/ui/accordion.jsx
@@ -0,0 +1,41 @@
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}>
+      {children}
+      <ChevronDown
+        className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}>
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
--- a/src/components/ui/alert-dialog.jsx
+++ b/src/components/ui/alert-dialog.jsx
@@ -0,0 +1,97 @@
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref} />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props} />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
+    {...props} />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    {...props} />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props} />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+    {...props} />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
--- a/src/components/ui/alert.jsx
+++ b/src/components/ui/alert.jsx
@@ -0,0 +1,47 @@
+import * as React from "react"
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props} />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props} />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props} />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }
--- a/src/components/ui/aspect-ratio.jsx
+++ b/src/components/ui/aspect-ratio.jsx
@@ -0,0 +1,5 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+const AspectRatio = AspectRatioPrimitive.Root
+
+export { AspectRatio }
--- a/src/components/ui/avatar.jsx
+++ b/src/components/ui/avatar.jsx
@@ -0,0 +1,33 @@
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
+    {...props} />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props} />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props} />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }
--- a/src/components/ui/badge.jsx
+++ b/src/components/ui/badge.jsx
@@ -0,0 +1,34 @@
+import * as React from "react"
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  ...props
+}) {
+  return (<div className={cn(badgeVariants({ variant }), className)} {...props} />);
+}
+
+export { Badge, badgeVariants }
--- a/src/components/ui/breadcrumb.jsx
+++ b/src/components/ui/breadcrumb.jsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Breadcrumb = React.forwardRef(
+  ({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />
+)
+Breadcrumb.displayName = "Breadcrumb"
+
+const BreadcrumbList = React.forwardRef(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      className
+    )}
+    {...props} />
+))
+BreadcrumbList.displayName = "BreadcrumbList"
+
+const BreadcrumbItem = React.forwardRef(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...props} />
+))
+BreadcrumbItem.displayName = "BreadcrumbItem"
+
+const BreadcrumbLink = React.forwardRef(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props} />
+  );
+})
+BreadcrumbLink.displayName = "BreadcrumbLink"
+
+const BreadcrumbPage = React.forwardRef(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("font-normal text-foreground", className)}
+    {...props} />
+))
+BreadcrumbPage.displayName = "BreadcrumbPage"
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
+    {...props}>
+    {children ?? <ChevronRight />}
+  </li>
+)
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}>
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+)
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}
--- a/src/components/ui/button.jsx
+++ b/src/components/ui/button.jsx
@@ -0,0 +1,48 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva } 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-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button"
+  return (
+    <Comp
+      className={cn(buttonVariants({ variant, size, className }))}
+      ref={ref}
+      {...props} />
+  );
+})
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
--- a/src/components/ui/calendar.jsx
+++ b/src/components/ui/calendar.jsx
@@ -0,0 +1,71 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { DayPicker } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: cn(
+          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          props.mode === "range"
+            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+            : "[&:has([aria-selected])]:rounded-md"
+        ),
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_start: "day-range-start",
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ className, ...props }) => (
+          <ChevronLeft className={cn("h-4 w-4", className)} {...props} />
+        ),
+        IconRight: ({ className, ...props }) => (
+          <ChevronRight className={cn("h-4 w-4", className)} {...props} />
+        ),
+      }}
+      {...props} />
+  );
+}
+Calendar.displayName = "Calendar"
+
+export { Calendar }
--- a/src/components/ui/card.jsx
+++ b/src/components/ui/card.jsx
@@ -0,0 +1,50 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("rounded-xl border bg-card text-card-foreground shadow", className)}
+    {...props} />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props} />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props} />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props} />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props} />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
--- a/src/components/ui/carousel.jsx
+++ b/src/components/ui/carousel.jsx
@@ -0,0 +1,193 @@
+import * as React from "react"
+import useEmblaCarousel from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+const CarouselContext = React.createContext(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+const Carousel = React.forwardRef((
+  {
+    orientation = "horizontal",
+    opts,
+    setApi,
+    plugins,
+    className,
+    children,
+    ...props
+  },
+  ref
+) => {
+  const [carouselRef, api] = useEmblaCarousel({
+    ...opts,
+    axis: orientation === "horizontal" ? "x" : "y",
+  }, plugins)
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+  const onSelect = React.useCallback((api) => {
+    if (!api) {
+      return
+    }
+
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }, [])
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev()
+  }, [api])
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext()
+  }, [api])
+
+  const handleKeyDown = React.useCallback((event) => {
+    if (event.key === "ArrowLeft") {
+      event.preventDefault()
+      scrollPrev()
+    } else if (event.key === "ArrowRight") {
+      event.preventDefault()
+      scrollNext()
+    }
+  }, [scrollPrev, scrollNext])
+
+  React.useEffect(() => {
+    if (!api || !setApi) {
+      return
+    }
+
+    setApi(api)
+  }, [api, setApi])
+
+  React.useEffect(() => {
+    if (!api) {
+      return
+    }
+
+    onSelect(api)
+    api.on("reInit", onSelect)
+    api.on("select", onSelect)
+
+    return () => {
+      api?.off("select", onSelect)
+    };
+  }, [api, onSelect])
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}>
+      <div
+        ref={ref}
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        {...props}>
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  );
+})
+Carousel.displayName = "Carousel"
+
+const CarouselContent = React.forwardRef(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props} />
+    </div>
+  );
+})
+CarouselContent.displayName = "CarouselContent"
+
+const CarouselItem = React.forwardRef(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props} />
+  );
+})
+CarouselItem.displayName = "CarouselItem"
+
+const CarouselPrevious = React.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn("absolute  h-8 w-8 rounded-full", orientation === "horizontal"
+        ? "-left-12 top-1/2 -translate-y-1/2"
+        : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className)}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}>
+      <ArrowLeft className="h-4 w-4" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  );
+})
+CarouselPrevious.displayName = "CarouselPrevious"
+
+const CarouselNext = React.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn("absolute h-8 w-8 rounded-full", orientation === "horizontal"
+        ? "-right-12 top-1/2 -translate-y-1/2"
+        : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className)}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}>
+      <ArrowRight className="h-4 w-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  );
+})
+CarouselNext.displayName = "CarouselNext"
+
+export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext };
--- a/src/components/ui/checkbox.jsx
+++ b/src/components/ui/checkbox.jsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}>
+    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
--- a/src/components/ui/collapsible.jsx
+++ b/src/components/ui/collapsible.jsx
@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
--- a/src/components/ui/command.jsx
+++ b/src/components/ui/command.jsx
@@ -0,0 +1,116 @@
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+
+const Command = React.forwardRef(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    {...props} />
+))
+Command.displayName = CommandPrimitive.displayName
+
+const CommandDialog = ({
+  children,
+  ...props
+}) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0">
+        <Command
+          className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+const CommandInput = React.forwardRef(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props} />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props} />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef((props, ref) => (
+  <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props} />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator ref={ref} className={cn("-mx-1 h-px bg-border", className)} {...props} />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className
+    )}
+    {...props} />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+      {...props} />
+  );
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
--- a/src/components/ui/context-menu.jsx
+++ b/src/components/ui/context-menu.jsx
@@ -0,0 +1,156 @@
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}>
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 origin-[--radix-context-menu-content-transform-origin]",
+      className
+    )}
+    {...props} />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 origin-[--radix-context-menu-content-transform-origin]",
+        className
+      )}
+      {...props} />
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props} />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-4 w-4 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props} />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props} />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+      {...props} />
+  );
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}
--- a/src/components/ui/dialog.jsx
+++ b/src/components/ui/dialog.jsx
@@ -0,0 +1,94 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props} />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}>
+      {children}
+      <DialogPrimitive.Close
+        className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
+    {...props} />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    {...props} />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    {...props} />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props} />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
--- a/src/components/ui/drawer.jsx
+++ b/src/components/ui/drawer.jsx
@@ -0,0 +1,90 @@
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}) => (
+  <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
+)
+Drawer.displayName = "Drawer"
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerOverlay = React.forwardRef(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props} />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className
+      )}
+      {...props}>
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+))
+DrawerContent.displayName = "DrawerContent"
+
+const DrawerHeader = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props} />
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+const DrawerFooter = ({
+  className,
+  ...props
+}) => (
+  <div className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+const DrawerTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    {...props} />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props} />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}
--- a/src/components/ui/dropdown-menu.jsx
+++ b/src/components/ui/dropdown-menu.jsx
@@ -0,0 +1,156 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}>
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 origin-[--radix-dropdown-menu-content-transform-origin]",
+      className
+    )}
+    {...props} />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "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 origin-[--radix-dropdown-menu-content-transform-origin]",
+        className
+      )}
+      {...props} />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props} />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+    {...props} />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props} />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props} />
+  );
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
--- a/src/components/ui/form.jsx
+++ b/src/components/ui/form.jsx
@@ -0,0 +1,133 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { Controller, FormProvider, useFormContext } from "react-hook-form";
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+const FormFieldContext = React.createContext({})
+
+const FormField = (
+  {
+    ...props
+  }
+) => {
+  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, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+const FormItemContext = React.createContext({})
+
+const FormItem = React.forwardRef(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  );
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props} />
+  );
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props} />
+  );
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-[0.8rem] text-muted-foreground", className)}
+      {...props} />
+  );
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? "") : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-[0.8rem] font-medium text-destructive", className)}
+      {...props}>
+      {body}
+    </p>
+  );
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
--- a/src/components/ui/hover-card.jsx
+++ b/src/components/ui/hover-card.jsx
@@ -0,0 +1,23 @@
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 origin-[--radix-hover-card-content-transform-origin]",
+      className
+    )}
+    {...props} />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }
--- a/src/components/ui/input-otp.jsx
+++ b/src/components/ui/input-otp.jsx
@@ -0,0 +1,53 @@
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+import { Minus } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const InputOTP = React.forwardRef(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn("flex items-center gap-2 has-[:disabled]:opacity-50", containerClassName)}
+    className={cn("disabled:cursor-not-allowed", className)}
+    {...props} />
+))
+InputOTP.displayName = "InputOTP"
+
+const InputOTPGroup = React.forwardRef(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+))
+InputOTPGroup.displayName = "InputOTPGroup"
+
+const InputOTPSlot = React.forwardRef(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-1 ring-ring",
+        className
+      )}
+      {...props}>
+      {char}
+      {hasFakeCaret && (
+        <div
+          className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+})
+InputOTPSlot.displayName = "InputOTPSlot"
+
+const InputOTPSeparator = React.forwardRef(({ ...props }, ref) => (
+  <div ref={ref} role="separator" {...props}>
+    <Minus />
+  </div>
+))
+InputOTPSeparator.displayName = "InputOTPSeparator"
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
--- a/src/components/ui/input.jsx
+++ b/src/components/ui/input.jsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef(({ className, type, ...props }, ref) => {
+  return (
+    <input
+      type={type}
+      className={cn(
+        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props} />
+  );
+})
+Input.displayName = "Input"
+
+export { Input }
--- a/src/components/ui/label.jsx
+++ b/src/components/ui/label.jsx
@@ -0,0 +1,16 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
--- a/src/components/ui/menubar.jsx
+++ b/src/components/ui/menubar.jsx
@@ -0,0 +1,198 @@
+import * as React from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function MenubarMenu({
+  ...props
+}) {
+  return <MenubarPrimitive.Menu {...props} />;
+}
+
+function MenubarGroup({
+  ...props
+}) {
+  return <MenubarPrimitive.Group {...props} />;
+}
+
+function MenubarPortal({
+  ...props
+}) {
+  return <MenubarPrimitive.Portal {...props} />;
+}
+
+function MenubarRadioGroup({
+  ...props
+}) {
+  return <MenubarPrimitive.RadioGroup {...props} />;
+}
+
+function MenubarSub({
+  ...props
+}) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
+}
+
+const Menubar = React.forwardRef(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
+      className
+    )}
+    {...props} />
+))
+Menubar.displayName = MenubarPrimitive.Root.displayName
+
+const MenubarTrigger = React.forwardRef(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      className
+    )}
+    {...props} />
+))
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
+
+const MenubarSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}>
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </MenubarPrimitive.SubTrigger>
+))
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
+
+const MenubarSubContent = React.forwardRef(({ className, ...props }, ref) => (
+  <MenubarPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 origin-[--radix-menubar-content-transform-origin]",
+      className
+    )}
+    {...props} />
+))
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
+
+const MenubarContent = React.forwardRef((
+  { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
+  ref
+) => (
+  <MenubarPrimitive.Portal>
+    <MenubarPrimitive.Content
+      ref={ref}
+      align={align}
+      alignOffset={alignOffset}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in 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 origin-[--radix-menubar-content-transform-origin]",
+        className
+      )}
+      {...props} />
+  </MenubarPrimitive.Portal>
+))
+MenubarContent.displayName = MenubarPrimitive.Content.displayName
+
+const MenubarItem = React.forwardRef(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props} />
+))
+MenubarItem.displayName = MenubarPrimitive.Item.displayName
+
+const MenubarCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (
+  <MenubarPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.CheckboxItem>
+))
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
+
+const MenubarRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (
+  <MenubarPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Circle className="h-4 w-4 fill-current" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.RadioItem>
+))
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
+
+const MenubarLabel = React.forwardRef(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+    {...props} />
+))
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName
+
+const MenubarSeparator = React.forwardRef(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props} />
+))
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
+
+const MenubarShortcut = ({
+  className,
+  ...props
+}) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+      {...props} />
+  );
+}
+MenubarShortcut.displayname = "MenubarShortcut"
+
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarPortal,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarGroup,
+  MenubarSub,
+  MenubarShortcut,
+}
--- a/src/components/ui/navigation-menu.jsx
+++ b/src/components/ui/navigation-menu.jsx
@@ -0,0 +1,104 @@
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const NavigationMenu = React.forwardRef(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className
+    )}
+    {...props}>
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className
+    )}
+    {...props} />
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
+)
+
+const NavigationMenuTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}>
+    {children}{" "}
+    <ChevronDown
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+      aria-hidden="true" />
+  </NavigationMenuPrimitive.Trigger>
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      className
+    )}
+    {...props} />
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link
+
+const NavigationMenuViewport = React.forwardRef(({ className, ...props }, ref) => (
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className
+      )}
+      ref={ref}
+      {...props} />
+  </div>
+))
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    )}
+    {...props}>
+    <div
+      className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+))
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+}
--- a/src/components/ui/pagination.jsx
+++ b/src/components/ui/pagination.jsx
@@ -0,0 +1,100 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button";
+
+const Pagination = ({
+  className,
+  ...props
+}) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props} />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props} />
+))
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+))
+PaginationItem.displayName = "PaginationItem"
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(buttonVariants({
+      variant: isActive ? "outline" : "ghost",
+      size,
+    }), className)}
+    {...props} />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}>
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({
+  className,
+  ...props
+}) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}>
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}>
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+}
--- a/src/components/ui/popover.jsx
+++ b/src/components/ui/popover.jsx
@@ -0,0 +1,27 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverAnchor = PopoverPrimitive.Anchor
+
+const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 origin-[--radix-popover-content-transform-origin]",
+        className
+      )}
+      {...props} />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
--- a/src/components/ui/progress.jsx
+++ b/src/components/ui/progress.jsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+      className
+    )}
+    {...props}>
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }} />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }
--- a/src/components/ui/radio-group.jsx
+++ b/src/components/ui/radio-group.jsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
+  return (<RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />);
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}>
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-3.5 w-3.5 fill-primary" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }
--- a/src/components/ui/resizable.jsx
+++ b/src/components/ui/resizable.jsx
@@ -0,0 +1,40 @@
+import { GripVertical } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    {...props} />
+)
+
+const ResizablePanel = ResizablePrimitive.Panel
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className
+    )}
+    {...props}>
+    {withHandle && (
+      <div
+        className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+)
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
--- a/src/components/ui/scroll-area.jsx
+++ b/src/components/ui/scroll-area.jsx
@@ -0,0 +1,38 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}>
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}>
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
--- a/src/components/ui/select.jsx
+++ b/src/components/ui/select.jsx
@@ -0,0 +1,119 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}>
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
+    {...props}>
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
+    {...props}>
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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 origin-[--radix-select-content-transform-origin]",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}>
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn("p-1", position === "popper" &&
+          "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]")}>
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props} />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}>
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props} />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}
--- a/src/components/ui/separator.jsx
+++ b/src/components/ui/separator.jsx
@@ -0,0 +1,23 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef((
+  { className, orientation = "horizontal", decorative = true, ...props },
+  ref
+) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn(
+      "shrink-0 bg-border",
+      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+      className
+    )}
+    {...props} />
+))
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
--- a/src/components/ui/sheet.jsx
+++ b/src/components/ui/sheet.jsx
@@ -0,0 +1,108 @@
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva } from "class-variance-authority";
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref} />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+const SheetContent = React.forwardRef(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
+      <SheetPrimitive.Close
+        className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+      {children}
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
+    {...props} />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    {...props} />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props} />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props} />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
--- a/src/components/ui/skeleton.jsx
+++ b/src/components/ui/skeleton.jsx
@@ -0,0 +1,14 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-primary/10", className)}
+      {...props} />
+  );
+}
+
+export { Skeleton }
--- a/src/components/ui/slider.jsx
+++ b/src/components/ui/slider.jsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn("relative flex w-full touch-none select-none items-center", className)}
+    {...props}>
+    <SliderPrimitive.Track
+      className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb
+      className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }
--- a/src/components/ui/sonner.jsx
+++ b/src/components/ui/sonner.jsx
@@ -0,0 +1,28 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, toast } from "sonner"
+
+const Toaster = ({
+  ...props
+}) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props} />
+  );
+}
+
+export { Toaster, toast }
--- a/src/components/ui/switch.jsx
+++ b/src/components/ui/switch.jsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}>
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+      )} />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
--- a/src/components/ui/table.jsx
+++ b/src/components/ui/table.jsx
@@ -0,0 +1,86 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props} />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props} />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+    {...props} />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props} />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props} />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props} />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props} />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
--- a/src/components/ui/tabs.jsx
+++ b/src/components/ui/tabs.jsx
@@ -0,0 +1,41 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props} />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className
+    )}
+    {...props} />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props} />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
--- a/src/components/ui/textarea.jsx
+++ b/src/components/ui/textarea.jsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Textarea = React.forwardRef(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props} />
+  );
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }
--- a/src/components/ui/toast.jsx
+++ b/src/components/ui/toast.jsx
@@ -0,0 +1,85 @@
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva } from "class-variance-authority";
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props} />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Toast = React.forwardRef(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props} />
+  );
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props} />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}>
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold [&+div]:text-xs", className)}
+    {...props} />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props} />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+export { ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction };
--- a/src/components/ui/toaster.jsx
+++ b/src/components/ui/toaster.jsx
@@ -0,0 +1,33 @@
+import { useToast } from "@/hooks/use-toast"
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/components/ui/toast"
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        );
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  );
+}
--- a/src/components/ui/toggle-group.jsx
+++ b/src/components/ui/toggle-group.jsx
@@ -0,0 +1,43 @@
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext({
+  size: "default",
+  variant: "default",
+})
+
+const ToggleGroup = React.forwardRef(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex items-center justify-center gap-1", className)}
+    {...props}>
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+))
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+const ToggleGroupItem = React.forwardRef(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(toggleVariants({
+        variant: context.variant || variant,
+        size: context.size || size,
+      }), className)}
+      {...props}>
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+})
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }
--- a/src/components/ui/toggle.jsx
+++ b/src/components/ui/toggle.jsx
@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const Toggle = React.forwardRef(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props} />
+))
+
+Toggle.displayName = TogglePrimitive.Root.displayName
+
+export { Toggle, toggleVariants }
--- a/src/components/ui/tooltip.jsx
+++ b/src/components/ui/tooltip.jsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 origin-[--radix-tooltip-content-transform-origin]",
+        className
+      )}
+      {...props} />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
--- a/src/context/AuthContext.js
+++ b/src/context/AuthContext.js
@@ -0,0 +1,81 @@
+import React, { createContext, useState, useContext, useEffect } from 'react';
+import axios from 'axios';
+
+const AuthContext = createContext();
+
+const API_URL = process.env.REACT_APP_BACKEND_URL;
+
+export const AuthProvider = ({ children }) => {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [token, setToken] = useState(localStorage.getItem('token'));
+
+  useEffect(() => {
+    const initAuth = async () => {
+      const storedToken = localStorage.getItem('token');
+      if (storedToken) {
+        try {
+          const response = await axios.get(`${API_URL}/api/auth/me`, {
+            headers: { Authorization: `Bearer ${storedToken}` }
+          });
+          setUser(response.data);
+          setToken(storedToken);
+        } catch (error) {
+          localStorage.removeItem('token');
+          setToken(null);
+        }
+      }
+      setLoading(false);
+    };
+    initAuth();
+  }, []);
+
+  const login = async (email, password) => {
+    const response = await axios.post(`${API_URL}/api/auth/login`, { email, password });
+    const { access_token, user: userData } = response.data;
+    localStorage.setItem('token', access_token);
+    setToken(access_token);
+    setUser(userData);
+    return userData;
+  };
+
+  const logout = () => {
+    localStorage.removeItem('token');
+    setToken(null);
+    setUser(null);
+  };
+
+  const register = async (userData) => {
+    await axios.post(`${API_URL}/api/auth/register`, userData);
+  };
+
+  const refreshUser = async () => {
+    try {
+      const currentToken = localStorage.getItem('token');
+      if (!currentToken) {
+        throw new Error('No token available');
+      }
+
+      const response = await axios.get(`${API_URL}/api/auth/me`, {
+        headers: { Authorization: `Bearer ${currentToken}` }
+      });
+      setUser(response.data);
+      return response.data;
+    } catch (error) {
+      console.error('Failed to refresh user:', error);
+      // If token expired, logout
+      if (error.response?.status === 401) {
+        logout();
+      }
+      throw error;
+    }
+  };
+
+  return (
+    <AuthContext.Provider value={{ user, token, login, logout, register, refreshUser, loading }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => useContext(AuthContext);
--- a/src/hooks/use-toast.js
+++ b/src/hooks/use-toast.js
@@ -0,0 +1,155 @@
+"use client";
+// Inspired by react-hot-toast library
+import * as React from "react"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST"
+}
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString();
+}
+
+const toastTimeouts = new Map()
+
+const addToRemoveQueue = (toastId) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state, action) => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t),
+      };
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t),
+      };
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+  }
+}
+
+const listeners = []
+
+let memoryState = { toasts: [] }
+
+function dispatch(action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+function toast({
+  ...props
+}) {
+  const id = genId()
+
+  const update = (props) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    };
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  };
+}
+
+export { useToast, toast }
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,115 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+    margin: 0;
+    font-family:
+        -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+        "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+        sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+    font-family:
+        source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+}
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 0 0% 3.9%;
+        --card: 0 0% 100%;
+        --card-foreground: 0 0% 3.9%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 0 0% 3.9%;
+        --primary: 0 0% 9%;
+        --primary-foreground: 0 0% 98%;
+        --secondary: 0 0% 96.1%;
+        --secondary-foreground: 0 0% 9%;
+        --muted: 0 0% 96.1%;
+        --muted-foreground: 0 0% 45.1%;
+        --accent: 0 0% 96.1%;
+        --accent-foreground: 0 0% 9%;
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 0 0% 98%;
+        --border: 0 0% 89.8%;
+        --input: 0 0% 89.8%;
+        --ring: 0 0% 3.9%;
+        --chart-1: 12 76% 61%;
+        --chart-2: 173 58% 39%;
+        --chart-3: 197 37% 24%;
+        --chart-4: 43 74% 66%;
+        --chart-5: 27 87% 67%;
+        --radius: 0.5rem;
+    }
+    .dark {
+        --background: 0 0% 3.9%;
+        --foreground: 0 0% 98%;
+        --card: 0 0% 3.9%;
+        --card-foreground: 0 0% 98%;
+        --popover: 0 0% 3.9%;
+        --popover-foreground: 0 0% 98%;
+        --primary: 0 0% 98%;
+        --primary-foreground: 0 0% 9%;
+        --secondary: 0 0% 14.9%;
+        --secondary-foreground: 0 0% 98%;
+        --muted: 0 0% 14.9%;
+        --muted-foreground: 0 0% 63.9%;
+        --accent: 0 0% 14.9%;
+        --accent-foreground: 0 0% 98%;
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 0 0% 98%;
+        --border: 0 0% 14.9%;
+        --input: 0 0% 14.9%;
+        --ring: 0 0% 83.1%;
+        --chart-1: 220 70% 50%;
+        --chart-2: 160 60% 45%;
+        --chart-3: 30 80% 55%;
+        --chart-4: 280 65% 60%;
+        --chart-5: 340 75% 55%;
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+    body {
+        @apply bg-background text-foreground;
+    }
+}
+
+@layer base {
+    [data-debug-wrapper="true"] {
+        display: contents !important;
+    }
+
+    [data-debug-wrapper="true"] > * {
+        margin-left: inherit;
+        margin-right: inherit;
+        margin-top: inherit;
+        margin-bottom: inherit;
+        padding-left: inherit;
+        padding-right: inherit;
+        padding-top: inherit;
+        padding-bottom: inherit;
+        column-gap: inherit;
+        row-gap: inherit;
+        gap: inherit;
+        border-left-width: inherit;
+        border-right-width: inherit;
+        border-top-width: inherit;
+        border-bottom-width: inherit;
+        border-left-style: inherit;
+        border-right-style: inherit;
+        border-top-style: inherit;
+        border-bottom-style: inherit;
+        border-left-color: inherit;
+        border-right-color: inherit;
+        border-top-color: inherit;
+        border-bottom-color: inherit;
+    }
+}
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import '@fontsource/fraunces/600.css';
+import '@fontsource/dm-sans/400.css';
+import '@fontsource/dm-sans/700.css';
+import './index.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
--- a/src/layouts/AdminLayout.js
+++ b/src/layouts/AdminLayout.js
@@ -0,0 +1,72 @@
+import React, { useState, useEffect } from 'react';
+import AdminSidebar from '../components/AdminSidebar';
+
+const AdminLayout = ({ children }) => {
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [isMobile, setIsMobile] = useState(false);
+
+  // Initialize sidebar state from localStorage
+  useEffect(() => {
+    const savedState = localStorage.getItem('adminSidebarOpen');
+    if (savedState !== null) {
+      setSidebarOpen(JSON.parse(savedState));
+    }
+  }, []);
+
+  // Detect mobile viewport
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
+  // Close sidebar by default on mobile
+  useEffect(() => {
+    if (isMobile) {
+      setSidebarOpen(false);
+    }
+  }, [isMobile]);
+
+  const toggleSidebar = () => {
+    const newState = !sidebarOpen;
+    setSidebarOpen(newState);
+    localStorage.setItem('adminSidebarOpen', JSON.stringify(newState));
+  };
+
+  const closeSidebar = () => {
+    setSidebarOpen(false);
+    localStorage.setItem('adminSidebarOpen', JSON.stringify(false));
+  };
+
+  return (
+    <div className="flex h-screen bg-[#FDFCF8]">
+      {/* Sidebar */}
+      <AdminSidebar
+        isOpen={sidebarOpen}
+        onToggle={toggleSidebar}
+        isMobile={isMobile}
+      />
+
+      {/* Mobile Overlay */}
+      {isMobile && sidebarOpen && (
+        <div
+          className="fixed inset-0 bg-black/50 z-30 transition-opacity"
+          onClick={closeSidebar}
+        />
+      )}
+
+      {/* Main Content Area */}
+      <main className="flex-1 overflow-y-auto">
+        <div className="max-w-7xl mx-auto px-6 py-8">
+          {children}
+        </div>
+      </main>
+    </div>
+  );
+};
+
+export default AdminLayout;
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -0,0 +1,6 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
--- a/src/pages/Dashboard.js
+++ b/src/pages/Dashboard.js
@@ -0,0 +1,230 @@
+import React, { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+import api from '../utils/api';
+import { Card } from '../components/ui/card';
+import { Button } from '../components/ui/button';
+import { Badge } from '../components/ui/badge';
+import Navbar from '../components/Navbar';
+import { Calendar, User, CheckCircle, Clock, AlertCircle } from 'lucide-react';
+
+const Dashboard = () => {
+  const { user } = useAuth();
+  const [events, setEvents] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchUpcomingEvents();
+  }, []);
+
+  const fetchUpcomingEvents = async () => {
+    try {
+      const response = await api.get('/events');
+      const upcomingEvents = response.data.slice(0, 3);
+      setEvents(upcomingEvents);
+    } catch (error) {
+      console.error('Failed to fetch events:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getStatusBadge = (status) => {
+    const statusConfig = {
+      pending_email: { icon: Clock, label: 'Pending Email', className: 'bg-[#F2CC8F] text-[#3D405B]' },
+      pending_approval: { icon: Clock, label: 'Pending Approval', className: 'bg-[#A3B1C6] text-white' },
+      pre_approved: { icon: CheckCircle, label: 'Pre-Approved', className: 'bg-[#81B29A] text-white' },
+      payment_pending: { icon: AlertCircle, label: 'Payment Pending', className: 'bg-[#E07A5F] text-white' },
+      active: { icon: CheckCircle, label: 'Active', className: 'bg-[#81B29A] text-white' },
+      inactive: { icon: AlertCircle, label: 'Inactive', className: 'bg-[#6B708D] text-white' }
+    };
+
+    const config = statusConfig[status] || statusConfig.inactive;
+    const Icon = config.icon;
+
+    return (
+      <Badge className={`${config.className} px-4 py-2 rounded-full flex items-center gap-2`}>
+        <Icon className="h-4 w-4" />
+        {config.label}
+      </Badge>
+    );
+  };
+
+  const getStatusMessage = (status) => {
+    const messages = {
+      pending_email: 'Please check your email to verify your account.',
+      pending_approval: 'Your application is under review by our admin team.',
+      pre_approved: 'Your application is under review by our admin team.',
+      payment_pending: 'Please complete your payment to activate your membership.',
+      active: 'Your membership is active! Enjoy all member benefits.',
+      inactive: 'Your membership is currently inactive.'
+    };
+
+    return messages[status] || '';
+  };
+
+  return (
+    <div className="min-h-screen bg-[#FDFCF8]">
+      <Navbar />
+      
+      <div className="max-w-7xl mx-auto px-6 py-12">
+        {/* Welcome Section */}
+        <div className="mb-12">
+          <h1 className="text-4xl md:text-5xl font-semibold fraunces text-[#3D405B] mb-4">
+            Welcome Back, {user?.first_name}!
+          </h1>
+          <p className="text-lg text-[#6B708D]">
+            Here's an overview of your membership status and upcoming events.
+          </p>
+        </div>
+
+        {/* Status Card */}
+        <Card className="p-8 bg-white rounded-2xl border border-[#EAE0D5] shadow-lg mb-8" data-testid="status-card">
+          <div className="flex items-start justify-between flex-wrap gap-4">
+            <div>
+              <h2 className="text-2xl font-semibold fraunces text-[#3D405B] mb-2">
+                Membership Status
+              </h2>
+              <div className="mb-4">
+                {getStatusBadge(user?.status)}
+              </div>
+              <p className="text-[#6B708D]">
+                {getStatusMessage(user?.status)}
+              </p>
+            </div>
+            <Link to="/profile">
+              <Button
+                className="bg-[#F2CC8F] text-[#3D405B] hover:bg-[#E5B875] rounded-full px-6"
+                data-testid="view-profile-button"
+              >
+                <User className="h-4 w-4 mr-2" />
+                View Profile
+              </Button>
+            </Link>
+          </div>
+        </Card>
+
+        {/* Grid Layout */}
+        <div className="grid lg:grid-cols-3 gap-8">
+          {/* Quick Stats */}
+          <Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5]" data-testid="quick-stats-card">
+            <h3 className="text-xl font-semibold fraunces text-[#3D405B] mb-4">
+              Quick Info
+            </h3>
+            <div className="space-y-4">
+              <div>
+                <p className="text-sm text-[#6B708D]">Email</p>
+                <p className="text-[#3D405B] font-medium">{user?.email}</p>
+              </div>
+              <div>
+                <p className="text-sm text-[#6B708D]">Role</p>
+                <p className="text-[#3D405B] font-medium capitalize">{user?.role}</p>
+              </div>
+              <div>
+                <p className="text-sm text-[#6B708D]">Member Since</p>
+                <p className="text-[#3D405B] font-medium">
+                  {user?.created_at ? new Date(user.created_at).toLocaleDateString() : 'N/A'}
+                </p>
+              </div>
+            </div>
+          </Card>
+
+          {/* Upcoming Events */}
+          <Card className="lg:col-span-2 p-6 bg-white rounded-2xl border border-[#EAE0D5]" data-testid="upcoming-events-card">
+            <div className="flex justify-between items-center mb-6">
+              <h3 className="text-xl font-semibold fraunces text-[#3D405B]">
+                Upcoming Events
+              </h3>
+              <Link to="/events">
+                <Button
+                  variant="ghost"
+                  className="text-[#E07A5F] hover:text-[#D0694E]"
+                  data-testid="view-all-events-button"
+                >
+                  View All
+                </Button>
+              </Link>
+            </div>
+
+            {loading ? (
+              <p className="text-[#6B708D]">Loading events...</p>
+            ) : events.length > 0 ? (
+              <div className="space-y-4">
+                {events.map((event) => (
+                  <Link to={`/events/${event.id}`} key={event.id}>
+                    <div
+                      className="p-4 border border-[#EAE0D5] rounded-xl hover:border-[#E07A5F] hover:shadow-md transition-all cursor-pointer"
+                      data-testid={`event-card-${event.id}`}
+                    >
+                      <div className="flex items-start gap-4">
+                        <div className="bg-[#F2CC8F]/20 p-3 rounded-lg">
+                          <Calendar className="h-6 w-6 text-[#E07A5F]" />
+                        </div>
+                        <div className="flex-1">
+                          <h4 className="font-semibold text-[#3D405B] mb-1">{event.title}</h4>
+                          <p className="text-sm text-[#6B708D] mb-2">
+                            {new Date(event.start_at).toLocaleDateString()} at{' '}
+                            {new Date(event.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                          </p>
+                          <p className="text-sm text-[#6B708D]">{event.location}</p>
+                        </div>
+                      </div>
+                    </div>
+                  </Link>
+                ))}
+              </div>
+            ) : (
+              <div className="text-center py-12">
+                <Calendar className="h-16 w-16 text-[#EAE0D5] mx-auto mb-4" />
+                <p className="text-[#6B708D] mb-4">No upcoming events at the moment.</p>
+                <p className="text-sm text-[#6B708D]">Check back later for new events!</p>
+              </div>
+            )}
+          </Card>
+        </div>
+
+        {/* CTA Section */}
+        {user?.status === 'pending_approval' && (
+          <Card className="mt-8 p-8 bg-gradient-to-br from-[#F2CC8F]/20 to-[#E07A5F]/20 rounded-2xl border border-[#EAE0D5]">
+            <div className="text-center">
+              <h3 className="text-2xl font-semibold fraunces text-[#3D405B] mb-4">
+                Application Under Review
+              </h3>
+              <p className="text-[#6B708D] mb-6">
+                Your membership application is being reviewed by our admin team. You'll be notified once approved!
+              </p>
+            </div>
+          </Card>
+        )}
+
+        {/* Payment Prompt for payment_pending status */}
+        {user?.status === 'payment_pending' && (
+          <Card className="mt-8 p-8 bg-gradient-to-br from-[#E07A5F]/20 to-[#F2CC8F]/20 rounded-2xl border-2 border-[#E07A5F]">
+            <div className="text-center">
+              <div className="mb-4">
+                <AlertCircle className="h-16 w-16 text-[#E07A5F] mx-auto" />
+              </div>
+              <h3 className="text-2xl font-semibold fraunces text-[#3D405B] mb-4">
+                Complete Your Payment
+              </h3>
+              <p className="text-[#6B708D] mb-6">
+                Great news! Your membership application has been approved. Complete your payment to activate your membership and gain full access to all member benefits.
+              </p>
+              <Link to="/plans">
+                <Button
+                  className="bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full px-8 py-6 text-lg font-semibold"
+                  data-testid="complete-payment-cta"
+                >
+                  <CheckCircle className="mr-2 h-5 w-5" />
+                  Complete Payment
+                </Button>
+              </Link>
+            </div>
+          </Card>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;
--- a/src/pages/EventDetails.js
+++ b/src/pages/EventDetails.js
@@ -0,0 +1,201 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import api from '../utils/api';
+import { Card } from '../components/ui/card';
+import { Button } from '../components/ui/button';
+import { Badge } from '../components/ui/badge';
+import { toast } from 'sonner';
+import Navbar from '../components/Navbar';
+import { Calendar, MapPin, Users, ArrowLeft, Check, X, HelpCircle } from 'lucide-react';
+
+const EventDetails = () => {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const [event, setEvent] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [rsvpLoading, setRsvpLoading] = useState(false);
+
+  useEffect(() => {
+    fetchEvent();
+  }, [id]);
+
+  const fetchEvent = async () => {
+    try {
+      const response = await api.get(`/events/${id}`);
+      setEvent(response.data);
+    } catch (error) {
+      toast.error('Failed to load event');
+      navigate('/events');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleRSVP = async (status) => {
+    setRsvpLoading(true);
+    try {
+      await api.post(`/events/${id}/rsvp`, { rsvp_status: status });
+      toast.success(`RSVP updated to: ${status}`);
+      fetchEvent();
+    } catch (error) {
+      toast.error('Failed to update RSVP');
+    } finally {
+      setRsvpLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-[#FDFCF8]">
+        <Navbar />
+        <div className="flex items-center justify-center min-h-[60vh]">
+          <p className="text-[#6B708D]">Loading event...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!event) {
+    return null;
+  }
+
+  return (
+    <div className="min-h-screen bg-[#FDFCF8]">
+      <Navbar />
+      
+      <div className="max-w-4xl mx-auto px-6 py-12">
+        <button
+          onClick={() => navigate('/events')}
+          className="inline-flex items-center text-[#6B708D] hover:text-[#E07A5F] transition-colors mb-8"
+          data-testid="back-to-events-button"
+        >
+          <ArrowLeft className="h-4 w-4 mr-2" />
+          Back to Events
+        </button>
+
+        <Card className="p-8 md:p-12 bg-white rounded-2xl border border-[#EAE0D5] shadow-lg">
+          <div className="mb-8">
+            <div className="flex items-center gap-4 mb-6">
+              <div className="bg-[#F2CC8F]/20 p-4 rounded-xl">
+                <Calendar className="h-10 w-10 text-[#E07A5F]" />
+              </div>
+              {event.user_rsvp_status && (
+                <Badge
+                  className={`px-4 py-2 rounded-full text-sm ${
+                    event.user_rsvp_status === 'yes'
+                      ? 'bg-[#81B29A] text-white'
+                      : event.user_rsvp_status === 'no'
+                      ? 'bg-[#6B708D] text-white'
+                      : 'bg-[#F2CC8F] text-[#3D405B]'
+                  }`}
+                >
+                  {event.user_rsvp_status === 'yes' && 'Going'}
+                  {event.user_rsvp_status === 'no' && 'Not Going'}
+                  {event.user_rsvp_status === 'maybe' && 'Maybe'}
+                </Badge>
+              )}
+            </div>
+
+            <h1 className="text-4xl md:text-5xl font-semibold fraunces text-[#3D405B] mb-6">
+              {event.title}
+            </h1>
+
+            <div className="space-y-4 text-lg">
+              <div className="flex items-center gap-3 text-[#6B708D]">
+                <Calendar className="h-5 w-5" />
+                <span>
+                  {new Date(event.start_at).toLocaleDateString('en-US', {
+                    weekday: 'long',
+                    year: 'numeric',
+                    month: 'long',
+                    day: 'numeric'
+                  })}
+                </span>
+              </div>
+              <div className="flex items-center gap-3 text-[#6B708D]">
+                <Calendar className="h-5 w-5" />
+                <span>
+                  {new Date(event.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} -{' '}
+                  {new Date(event.end_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                </span>
+              </div>
+              <div className="flex items-center gap-3 text-[#6B708D]">
+                <MapPin className="h-5 w-5" />
+                <span>{event.location}</span>
+              </div>
+              <div className="flex items-center gap-3 text-[#6B708D]">
+                <Users className="h-5 w-5" />
+                <span>
+                  {event.rsvp_count || 0} {event.rsvp_count === 1 ? 'person' : 'people'} attending
+                  {event.capacity && ` (Capacity: ${event.capacity})`}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {event.description && (
+            <div className="mb-8 pb-8 border-b border-[#EAE0D5]">
+              <h2 className="text-2xl font-semibold fraunces text-[#3D405B] mb-4">
+                About This Event
+              </h2>
+              <p className="text-[#6B708D] leading-relaxed whitespace-pre-line">
+                {event.description}
+              </p>
+            </div>
+          )}
+
+          <div>
+            <h2 className="text-2xl font-semibold fraunces text-[#3D405B] mb-6">
+              RSVP to This Event
+            </h2>
+            <div className="flex gap-4 flex-wrap">
+              <Button
+                onClick={() => handleRSVP('yes')}
+                disabled={rsvpLoading}
+                className={`rounded-full px-8 py-6 flex items-center gap-2 ${
+                  event.user_rsvp_status === 'yes'
+                    ? 'bg-[#81B29A] text-white'
+                    : 'bg-[#E07A5F] text-white hover:bg-[#D0694E]'
+                }`}
+                data-testid="rsvp-yes-button"
+              >
+                <Check className="h-5 w-5" />
+                I'm Going
+              </Button>
+              <Button
+                onClick={() => handleRSVP('maybe')}
+                disabled={rsvpLoading}
+                variant="outline"
+                className={`rounded-full px-8 py-6 flex items-center gap-2 border-2 ${
+                  event.user_rsvp_status === 'maybe'
+                    ? 'border-[#F2CC8F] bg-[#F2CC8F]/20 text-[#3D405B]'
+                    : 'border-[#3D405B] text-[#3D405B] hover:bg-[#F2CC8F]/10'
+                }`}
+                data-testid="rsvp-maybe-button"
+              >
+                <HelpCircle className="h-5 w-5" />
+                Maybe
+              </Button>
+              <Button
+                onClick={() => handleRSVP('no')}
+                disabled={rsvpLoading}
+                variant="outline"
+                className={`rounded-full px-8 py-6 flex items-center gap-2 border-2 ${
+                  event.user_rsvp_status === 'no'
+                    ? 'border-[#6B708D] bg-[#6B708D]/20 text-[#3D405B]'
+                    : 'border-[#6B708D] text-[#6B708D] hover:bg-[#6B708D]/10'
+                }`}
+                data-testid="rsvp-no-button"
+              >
+                <X className="h-5 w-5" />
+                Can't Attend
+              </Button>
+            </div>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default EventDetails;
--- a/src/pages/Events.js
+++ b/src/pages/Events.js
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import api from '../utils/api';
+import { Card } from '../components/ui/card';
+import { Badge } from '../components/ui/badge';
+import Navbar from '../components/Navbar';
+import { Calendar, MapPin, Users, ArrowRight } from 'lucide-react';
+
+const Events = () => {
+  const [events, setEvents] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchEvents();
+  }, []);
+
+  const fetchEvents = async () => {
+    try {
+      const response = await api.get('/events');
+      setEvents(response.data);
+    } catch (error) {
+      console.error('Failed to fetch events:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getRSVPBadge = (rsvpStatus) => {
+    if (!rsvpStatus) return null;
+
+    const config = {
+      yes: { label: 'Going', className: 'bg-[#81B29A] text-white' },
+      no: { label: 'Not Going', className: 'bg-[#6B708D] text-white' },
+      maybe: { label: 'Maybe', className: 'bg-[#F2CC8F] text-[#3D405B]' }
+    };
+
+    const rsvpConfig = config[rsvpStatus];
+    if (!rsvpConfig) return null;
+
+    return (
+      <Badge className={`${rsvpConfig.className} px-3 py-1 rounded-full text-sm`}>
+        {rsvpConfig.label}
+      </Badge>
+    );
+  };
+
+  return (
+    <div className="min-h-screen bg-[#FDFCF8]">
+      <Navbar />
+      
+      <div className="max-w-7xl mx-auto px-6 py-12">
+        <div className="mb-12">
+          <h1 className="text-4xl md:text-5xl font-semibold fraunces text-[#3D405B] mb-4">
+            Upcoming Events
+          </h1>
+          <p className="text-lg text-[#6B708D]">
+            Browse and RSVP to our community events.
+          </p>
+        </div>
+
+        {loading ? (
+          <div className="text-center py-20">
+            <p className="text-[#6B708D]">Loading events...</p>
+          </div>
+        ) : events.length > 0 ? (
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {events.map((event) => (
+              <Link to={`/events/${event.id}`} key={event.id}>
+                <Card
+                  className="p-6 bg-white rounded-2xl border border-[#EAE0D5] hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer h-full"
+                  data-testid={`event-card-${event.id}`}
+                >
+                  <div className="flex justify-between items-start mb-4">
+                    <div className="bg-[#F2CC8F]/20 p-3 rounded-lg">
+                      <Calendar className="h-6 w-6 text-[#E07A5F]" />
+                    </div>
+                    {getRSVPBadge(event.user_rsvp_status)}
+                  </div>
+
+                  <h3 className="text-xl font-semibold fraunces text-[#3D405B] mb-3">
+                    {event.title}
+                  </h3>
+
+                  {event.description && (
+                    <p className="text-[#6B708D] mb-4 line-clamp-2">
+                      {event.description}
+                    </p>
+                  )}
+
+                  <div className="space-y-2 text-sm">
+                    <div className="flex items-center gap-2 text-[#6B708D]">
+                      <Calendar className="h-4 w-4" />
+                      <span>
+                        {new Date(event.start_at).toLocaleDateString()} at{' '}
+                        {new Date(event.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-2 text-[#6B708D]">
+                      <MapPin className="h-4 w-4" />
+                      <span>{event.location}</span>
+                    </div>
+                    <div className="flex items-center gap-2 text-[#6B708D]">
+                      <Users className="h-4 w-4" />
+                      <span>{event.rsvp_count || 0} attending</span>
+                    </div>
+                  </div>
+
+                  <div className="mt-6 flex items-center text-[#E07A5F] font-medium">
+                    View Details
+                    <ArrowRight className="ml-2 h-4 w-4" />
+                  </div>
+                </Card>
+              </Link>
+            ))}
+          </div>
+        ) : (
+          <div className="text-center py-20">
+            <Calendar className="h-20 w-20 text-[#EAE0D5] mx-auto mb-6" />
+            <h3 className="text-2xl font-semibold fraunces text-[#3D405B] mb-4">
+              No Events Available
+            </h3>
+            <p className="text-[#6B708D]">
+              There are no upcoming events at the moment. Check back later!
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Events;
--- a/src/pages/Landing.js
+++ b/src/pages/Landing.js
@@ -0,0 +1,140 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Button } from '../components/ui/button';
+import { Card } from '../components/ui/card';
+import { Calendar, Users, Heart, ArrowRight } from 'lucide-react';
+import Navbar from '../components/Navbar';
+
+const Landing = () => {
+  return (
+    <div className="min-h-screen bg-[#FDFCF8]">
+      <Navbar />
+      
+      {/* Hero Section */}
+      <section className="relative overflow-hidden">
+        <div className="absolute inset-0 bg-soft-mesh"></div>
+        <div className="max-w-7xl mx-auto px-6 py-20 lg:py-32 relative">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            <div className="space-y-8">
+              <h1 className="text-5xl md:text-7xl font-semibold fraunces text-[#3D405B] leading-tight">
+                Building Friendships, One Event at a Time
+              </h1>
+              <p className="text-lg md:text-xl text-[#6B708D] leading-relaxed">
+                Join our vibrant community of members connecting through shared experiences, events, and meaningful relationships.
+              </p>
+              <div className="flex gap-4 flex-wrap">
+                <Link to="/register">
+                  <Button
+                    className="bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full px-8 py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform"
+                    data-testid="hero-join-button"
+                  >
+                    Become a Member
+                    <ArrowRight className="ml-2 h-5 w-5" />
+                  </Button>
+                </Link>
+                <Link to="/login">
+                  <Button
+                    variant="outline"
+                    className="border-2 border-[#3D405B] text-[#3D405B] hover:bg-[#3D405B] hover:text-white rounded-full px-8 py-6 text-lg font-medium transition-all"
+                    data-testid="hero-login-button"
+                  >
+                    Member Login
+                  </Button>
+                </Link>
+              </div>
+            </div>
+            <div className="relative">
+              <img
+                src="https://images.unsplash.com/photo-1660405251862-c023df45d075?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NDk1ODF8MHwxfHNlYXJjaHwxfHxhY3RpdmUlMjBzZW5pb3IlMjB3b21lbiUyMGdyb3VwJTIwaGlraW5nJTIwbmF0dXJlfGVufDB8fHx8MTc2NDc1NjIwM3ww&ixlib=rb-4.1.0&q=85"
+                alt="Community members enjoying outdoor activities"
+                className="rounded-2xl shadow-2xl w-full h-[500px] object-cover"
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section className="max-w-7xl mx-auto px-6 py-20">
+        <div className="text-center mb-16">
+          <h2 className="text-4xl md:text-5xl font-semibold fraunces text-[#3D405B] mb-4">
+            What We Offer
+          </h2>
+          <p className="text-lg text-[#6B708D] max-w-2xl mx-auto">
+            No matter your age or ability, there is something for everyone in our community.
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-3 gap-8">
+          <Card className="p-8 bg-white rounded-2xl border border-[#EAE0D5] hover:shadow-lg transition-shadow" data-testid="feature-community-card">
+            <div className="bg-[#F2CC8F]/20 w-16 h-16 rounded-full flex items-center justify-center mb-6">
+              <Users className="h-8 w-8 text-[#E07A5F]" strokeWidth={1.5} />
+            </div>
+            <h3 className="text-2xl font-semibold fraunces text-[#3D405B] mb-4">
+              Meet & Greet
+            </h3>
+            <p className="text-[#6B708D] leading-relaxed">
+              Connect with prospective members and get acquainted with our community. Meet the board and ask questions in a welcoming environment.
+            </p>
+          </Card>
+
+          <Card className="p-8 bg-white rounded-2xl border border-[#EAE0D5] hover:shadow-lg transition-shadow" data-testid="feature-events-card">
+            <div className="bg-[#F2CC8F]/20 w-16 h-16 rounded-full flex items-center justify-center mb-6">
+              <Calendar className="h-8 w-8 text-[#E07A5F]" strokeWidth={1.5} />
+            </div>
+            <h3 className="text-2xl font-semibold fraunces text-[#3D405B] mb-4">
+              Social Events
+            </h3>
+            <p className="text-[#6B708D] leading-relaxed">
+              Explore your city with fellow members. From museums to sporting events, board games to pool parties - there's always something happening.
+            </p>
+          </Card>
+
+          <Card className="p-8 bg-white rounded-2xl border border-[#EAE0D5] hover:shadow-lg transition-shadow" data-testid="feature-activities-card">
+            <div className="bg-[#F2CC8F]/20 w-16 h-16 rounded-full flex items-center justify-center mb-6">
+              <Heart className="h-8 w-8 text-[#E07A5F]" strokeWidth={1.5} />
+            </div>
+            <h3 className="text-2xl font-semibold fraunces text-[#3D405B] mb-4">
+              Active Living
+            </h3>
+            <p className="text-[#6B708D] leading-relaxed">
+              Stay active with hiking, swimming, pickleball, kayaking, and more. Activities designed for all abilities and fitness levels.
+            </p>
+          </Card>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="bg-gradient-to-br from-[#F2CC8F]/20 to-[#E07A5F]/20 py-20">
+        <div className="max-w-4xl mx-auto px-6 text-center">
+          <h2 className="text-4xl md:text-5xl font-semibold fraunces text-[#3D405B] mb-6">
+            Ready to Join Our Community?
+          </h2>
+          <p className="text-lg text-[#6B708D] mb-8">
+            Start your membership journey today and connect with amazing people in your area.
+          </p>
+          <Link to="/register">
+            <Button
+              className="bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full px-12 py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform"
+              data-testid="cta-register-button"
+            >
+              Get Started Now
+              <ArrowRight className="ml-2 h-5 w-5" />
+            </Button>
+          </Link>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="bg-[#3D405B] text-white py-12">
+        <div className="max-w-7xl mx-auto px-6 text-center">
+          <p className="text-[#A3B1C6]">
+            © 2025 Membership Platform. Building connections, creating community.
+          </p>
+        </div>
+      </footer>
+    </div>
+  );
+};
+
+export default Landing;
--- a/src/pages/Login.js
+++ b/src/pages/Login.js
@@ -0,0 +1,122 @@
+import React, { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+import { Button } from '../components/ui/button';
+import { Input } from '../components/ui/input';
+import { Label } from '../components/ui/label';
+import { Card } from '../components/ui/card';
+import { toast } from 'sonner';
+import Navbar from '../components/Navbar';
+import { ArrowRight, ArrowLeft } from 'lucide-react';
+
+const Login = () => {
+  const navigate = useNavigate();
+  const { login } = useAuth();
+  const [loading, setLoading] = useState(false);
+  const [formData, setFormData] = useState({
+    email: '',
+    password: ''
+  });
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+
+    try {
+      const user = await login(formData.email, formData.password);
+      toast.success('Login successful!');
+      
+      if (user.role === 'admin') {
+        navigate('/admin');
+      } else {
+        navigate('/dashboard');
+      }
+    } catch (error) {
+      toast.error(error.response?.data?.detail || 'Login failed. Please check your credentials.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-[#FDFCF8]">
+      <Navbar />
+      
+      <div className="max-w-md mx-auto px-6 py-12">
+        <div className="mb-8">
+          <Link to="/" className="inline-flex items-center text-[#6B708D] hover:text-[#E07A5F] transition-colors">
+            <ArrowLeft className="h-4 w-4 mr-2" />
+            Back to Home
+          </Link>
+        </div>
+
+        <Card className="p-8 md:p-12 bg-white rounded-2xl border border-[#EAE0D5] shadow-lg">
+          <div className="mb-8 text-center">
+            <h1 className="text-4xl md:text-5xl font-semibold fraunces text-[#3D405B] mb-4">
+              Welcome Back
+            </h1>
+            <p className="text-lg text-[#6B708D]">
+              Login to access your member dashboard.
+            </p>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-6" data-testid="login-form">
+            <div>
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                name="email"
+                type="email"
+                required
+                value={formData.email}
+                onChange={handleInputChange}
+                placeholder="your.email@example.com"
+                className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                data-testid="login-email-input"
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="password">Password</Label>
+              <Input
+                id="password"
+                name="password"
+                type="password"
+                required
+                value={formData.password}
+                onChange={handleInputChange}
+                placeholder="Enter your password"
+                className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                data-testid="login-password-input"
+              />
+            </div>
+
+            <Button
+              type="submit"
+              disabled={loading}
+              className="w-full bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50"
+              data-testid="login-submit-button"
+            >
+              {loading ? 'Logging in...' : 'Login'}
+              <ArrowRight className="ml-2 h-5 w-5" />
+            </Button>
+
+            <p className="text-center text-[#6B708D]">
+              Don't have an account?{' '}
+              <Link to="/register" className="text-[#E07A5F] hover:underline font-medium">
+                Register here
+              </Link>
+            </p>
+          </form>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default Login;
--- a/src/pages/PaymentCancel.js
+++ b/src/pages/PaymentCancel.js
@@ -0,0 +1,116 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Card } from '../components/ui/card';
+import { Button } from '../components/ui/button';
+import Navbar from '../components/Navbar';
+import { XCircle, ArrowLeft, CreditCard, Mail } from 'lucide-react';
+
+const PaymentCancel = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="min-h-screen bg-[#FDFCF8]">
+      <Navbar />
+
+      <div className="max-w-4xl mx-auto px-6 py-12">
+        <div className="text-center mb-12">
+          {/* Cancel Icon */}
+          <div className="mb-8">
+            <div className="bg-[#6B708D] rounded-full w-24 h-24 mx-auto flex items-center justify-center">
+              <XCircle className="h-12 w-12 text-white" />
+            </div>
+          </div>
+
+          {/* Cancel Message */}
+          <h1 className="text-4xl md:text-5xl font-semibold fraunces text-[#3D405B] mb-4">
+            Payment Cancelled
+          </h1>
+          <p className="text-lg text-[#6B708D] max-w-2xl mx-auto mb-8">
+            Your payment was cancelled. No charges have been made to your account.
+          </p>
+        </div>
+
+        {/* Info Card */}
+        <Card className="p-8 bg-white rounded-2xl border border-[#EAE0D5] shadow-lg mb-8">
+          <h2 className="text-2xl font-semibold fraunces text-[#3D405B] mb-6 text-center">
+            What Happened?
+          </h2>
+
+          <div className="space-y-6 mb-8">
+            <p className="text-[#6B708D] text-center">
+              You cancelled the payment process or closed the checkout page. Your membership has not been activated yet.
+            </p>
+
+            <div className="bg-[#F2CC8F]/20 p-6 rounded-xl">
+              <h3 className="text-lg font-semibold text-[#3D405B] mb-4">
+                Ready to Complete Your Membership?
+              </h3>
+              <ul className="space-y-3">
+                <li className="flex items-start gap-3">
+                  <CreditCard className="h-5 w-5 text-[#E07A5F] flex-shrink-0 mt-0.5" />
+                  <span className="text-[#6B708D]">
+                    Return to the plans page to complete your subscription
+                  </span>
+                </li>
+                <li className="flex items-start gap-3">
+                  <Mail className="h-5 w-5 text-[#E07A5F] flex-shrink-0 mt-0.5" />
+                  <span className="text-[#6B708D]">
+                    Contact us if you experienced any issues during checkout
+                  </span>
+                </li>
+              </ul>
+            </div>
+
+            <div className="bg-[#FDFCF8] p-6 rounded-xl">
+              <p className="text-sm text-[#6B708D] text-center mb-4">
+                <span className="font-medium text-[#3D405B]">Note:</span>{' '}
+                Your membership application is still approved. You can complete payment whenever you're ready.
+              </p>
+            </div>
+          </div>
+
+          {/* Action Buttons */}
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <Button
+              onClick={() => navigate('/plans')}
+              className="bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full px-8 py-6 text-lg font-semibold"
+              data-testid="try-again-button"
+            >
+              <CreditCard className="mr-2 h-5 w-5" />
+              Try Again
+            </Button>
+            <Button
+              onClick={() => navigate('/dashboard')}
+              variant="outline"
+              className="border-2 border-[#6B708D] text-[#6B708D] hover:bg-[#6B708D] hover:text-white rounded-full px-8 py-6 text-lg font-semibold"
+              data-testid="back-to-dashboard-button"
+            >
+              <ArrowLeft className="mr-2 h-5 w-5" />
+              Back to Dashboard
+            </Button>
+          </div>
+        </Card>
+
+        {/* Support Section */}
+        <Card className="p-6 bg-gradient-to-br from-[#F2CC8F]/20 to-[#E07A5F]/20 rounded-2xl border border-[#EAE0D5]">
+          <h3 className="text-lg font-semibold fraunces text-[#3D405B] mb-3 text-center">
+            Need Assistance?
+          </h3>
+          <p className="text-[#6B708D] text-center mb-4">
+            If you encountered any technical issues or have questions about the payment process, our support team is here to help.
+          </p>
+          <div className="text-center">
+            <a
+              href="mailto:support@loaf.org"
+              className="text-[#E07A5F] hover:text-[#D0694E] font-medium text-lg"
+            >
+              support@loaf.org
+            </a>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default PaymentCancel;
--- a/src/pages/PaymentSuccess.js
+++ b/src/pages/PaymentSuccess.js
@@ -0,0 +1,135 @@
+import React, { useEffect } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+import { Card } from '../components/ui/card';
+import { Button } from '../components/ui/button';
+import Navbar from '../components/Navbar';
+import { CheckCircle, Calendar, User } from 'lucide-react';
+
+const PaymentSuccess = () => {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const { refreshUser } = useAuth();
+  const sessionId = searchParams.get('session_id');
+
+  useEffect(() => {
+    // Refresh user data to get updated status after payment
+    if (refreshUser) {
+      refreshUser();
+    }
+  }, [refreshUser]);
+
+  return (
+    <div className="min-h-screen bg-[#FDFCF8]">
+      <Navbar />
+
+      <div className="max-w-4xl mx-auto px-6 py-12">
+        <div className="text-center mb-12">
+          {/* Success Icon */}
+          <div className="mb-8">
+            <div className="bg-[#81B29A] rounded-full w-24 h-24 mx-auto flex items-center justify-center">
+              <CheckCircle className="h-12 w-12 text-white" />
+            </div>
+          </div>
+
+          {/* Success Message */}
+          <h1 className="text-4xl md:text-5xl font-semibold fraunces text-[#3D405B] mb-4">
+            Payment Successful!
+          </h1>
+          <p className="text-lg text-[#6B708D] max-w-2xl mx-auto mb-8">
+            Thank you for your payment. Your LOAF membership is now active!
+          </p>
+        </div>
+
+        {/* Confirmation Card */}
+        <Card className="p-8 bg-white rounded-2xl border border-[#EAE0D5] shadow-lg mb-8">
+          <h2 className="text-2xl font-semibold fraunces text-[#3D405B] mb-6 text-center">
+            Welcome to the LOAF Community!
+          </h2>
+
+          <div className="space-y-6 mb-8">
+            <div className="bg-[#FDFCF8] p-6 rounded-xl">
+              <h3 className="text-lg font-semibold text-[#3D405B] mb-4">
+                What's Next?
+              </h3>
+              <ul className="space-y-3">
+                <li className="flex items-start gap-3">
+                  <CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
+                  <span className="text-[#6B708D]">
+                    Your membership is now active and you have full access to all member benefits
+                  </span>
+                </li>
+                <li className="flex items-start gap-3">
+                  <CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
+                  <span className="text-[#6B708D]">
+                    You can now RSVP and attend members-only events
+                  </span>
+                </li>
+                <li className="flex items-start gap-3">
+                  <CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
+                  <span className="text-[#6B708D]">
+                    Access the community directory and connect with other members
+                  </span>
+                </li>
+                <li className="flex items-start gap-3">
+                  <CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
+                  <span className="text-[#6B708D]">
+                    You'll receive our newsletter with exclusive updates and announcements
+                  </span>
+                </li>
+              </ul>
+            </div>
+
+            {sessionId && (
+              <div className="bg-[#F2CC8F]/20 p-4 rounded-xl">
+                <p className="text-sm text-[#6B708D] text-center">
+                  <span className="font-medium text-[#3D405B]">Transaction ID:</span>{' '}
+                  <span className="font-mono text-xs">{sessionId}</span>
+                </p>
+                <p className="text-xs text-[#6B708D] text-center mt-2">
+                  A confirmation email has been sent to your registered email address.
+                </p>
+              </div>
+            )}
+          </div>
+
+          {/* Action Buttons */}
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <Button
+              onClick={() => navigate('/dashboard')}
+              className="bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full px-8 py-6 text-lg font-semibold"
+              data-testid="go-to-dashboard-button"
+            >
+              <User className="mr-2 h-5 w-5" />
+              Go to Dashboard
+            </Button>
+            <Button
+              onClick={() => navigate('/events')}
+              variant="outline"
+              className="border-2 border-[#E07A5F] text-[#E07A5F] hover:bg-[#E07A5F] hover:text-white rounded-full px-8 py-6 text-lg font-semibold"
+              data-testid="browse-events-button"
+            >
+              <Calendar className="mr-2 h-5 w-5" />
+              Browse Events
+            </Button>
+          </div>
+        </Card>
+
+        {/* Additional Info */}
+        <div className="text-center">
+          <p className="text-sm text-[#6B708D]">
+            Need help? Contact us at{' '}
+            <a
+              href="mailto:support@loaf.org"
+              className="text-[#E07A5F] hover:text-[#D0694E] font-medium"
+            >
+              support@loaf.org
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PaymentSuccess;
--- a/src/pages/Plans.js
+++ b/src/pages/Plans.js
@@ -0,0 +1,196 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+import api from '../utils/api';
+import { Card } from '../components/ui/card';
+import { Button } from '../components/ui/button';
+import Navbar from '../components/Navbar';
+import { CheckCircle, CreditCard, Loader2 } from 'lucide-react';
+import { toast } from 'sonner';
+
+const Plans = () => {
+  const { user } = useAuth();
+  const navigate = useNavigate();
+  const [plans, setPlans] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [processingPlanId, setProcessingPlanId] = useState(null);
+
+  useEffect(() => {
+    fetchPlans();
+  }, []);
+
+  const fetchPlans = async () => {
+    try {
+      const response = await api.get('/subscriptions/plans');
+      setPlans(response.data);
+    } catch (error) {
+      console.error('Failed to fetch plans:', error);
+      toast.error('Failed to load subscription plans');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSubscribe = async (planId) => {
+    if (!user) {
+      navigate('/login');
+      return;
+    }
+
+    setProcessingPlanId(planId);
+
+    try {
+      const response = await api.post('/subscriptions/checkout', {
+        plan_id: planId
+      });
+
+      // Redirect to Stripe Checkout
+      window.location.href = response.data.checkout_url;
+    } catch (error) {
+      console.error('Failed to create checkout session:', error);
+      toast.error(error.response?.data?.detail || 'Failed to start checkout process');
+      setProcessingPlanId(null);
+    }
+  };
+
+  const formatPrice = (cents) => {
+    return `$${(cents / 100).toFixed(2)}`;
+  };
+
+  const getBillingCycleLabel = (billingCycle) => {
+    const labels = {
+      yearly: 'per year',
+      monthly: 'per month'
+    };
+    return labels[billingCycle] || billingCycle;
+  };
+
+  return (
+    <div className="min-h-screen bg-[#FDFCF8]">
+      <Navbar />
+
+      <div className="max-w-7xl mx-auto px-6 py-12">
+        {/* Header */}
+        <div className="mb-12 text-center">
+          <h1 className="text-4xl md:text-5xl font-semibold fraunces text-[#3D405B] mb-4">
+            Membership Plans
+          </h1>
+          <p className="text-lg text-[#6B708D] max-w-2xl mx-auto">
+            Choose the membership plan that works best for you and become part of our vibrant community.
+          </p>
+        </div>
+
+        {loading ? (
+          <div className="text-center py-20">
+            <Loader2 className="h-12 w-12 text-[#E07A5F] mx-auto mb-4 animate-spin" />
+            <p className="text-[#6B708D]">Loading plans...</p>
+          </div>
+        ) : plans.length > 0 ? (
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto">
+            {plans.map((plan) => (
+              <Card
+                key={plan.id}
+                className="p-8 bg-white rounded-2xl border-2 border-[#EAE0D5] hover:border-[#E07A5F] hover:shadow-xl transition-all"
+                data-testid={`plan-card-${plan.id}`}
+              >
+                {/* Plan Header */}
+                <div className="text-center mb-6">
+                  <div className="bg-[#F2CC8F]/20 p-4 rounded-full w-16 h-16 mx-auto mb-4 flex items-center justify-center">
+                    <CreditCard className="h-8 w-8 text-[#E07A5F]" />
+                  </div>
+                  <h2 className="text-2xl font-semibold fraunces text-[#3D405B] mb-2">
+                    {plan.name}
+                  </h2>
+                  {plan.description && (
+                    <p className="text-sm text-[#6B708D] mb-4">
+                      {plan.description}
+                    </p>
+                  )}
+                </div>
+
+                {/* Pricing */}
+                <div className="text-center mb-8">
+                  <div className="text-4xl font-bold fraunces text-[#3D405B] mb-2">
+                    {formatPrice(plan.price_cents)}
+                  </div>
+                  <p className="text-[#6B708D]">
+                    {getBillingCycleLabel(plan.billing_cycle)}
+                  </p>
+                </div>
+
+                {/* Features */}
+                <div className="space-y-3 mb-8">
+                  <div className="flex items-start gap-3">
+                    <CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
+                    <span className="text-sm text-[#3D405B]">Access to all member events</span>
+                  </div>
+                  <div className="flex items-start gap-3">
+                    <CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
+                    <span className="text-sm text-[#3D405B]">Community directory access</span>
+                  </div>
+                  <div className="flex items-start gap-3">
+                    <CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
+                    <span className="text-sm text-[#3D405B]">Exclusive member benefits</span>
+                  </div>
+                  <div className="flex items-start gap-3">
+                    <CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
+                    <span className="text-sm text-[#3D405B]">Newsletter subscription</span>
+                  </div>
+                </div>
+
+                {/* CTA Button */}
+                <Button
+                  onClick={() => handleSubscribe(plan.id)}
+                  disabled={processingPlanId === plan.id}
+                  className="w-full bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full py-6 text-lg font-semibold"
+                  data-testid={`subscribe-button-${plan.id}`}
+                >
+                  {processingPlanId === plan.id ? (
+                    <>
+                      <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                      Processing...
+                    </>
+                  ) : (
+                    'Subscribe Now'
+                  )}
+                </Button>
+              </Card>
+            ))}
+          </div>
+        ) : (
+          <div className="text-center py-20">
+            <CreditCard className="h-20 w-20 text-[#EAE0D5] mx-auto mb-6" />
+            <h3 className="text-2xl font-semibold fraunces text-[#3D405B] mb-4">
+              No Plans Available
+            </h3>
+            <p className="text-[#6B708D]">
+              Membership plans are not currently available. Please check back later!
+            </p>
+          </div>
+        )}
+
+        {/* Info Section */}
+        <div className="mt-16 max-w-3xl mx-auto">
+          <Card className="p-8 bg-gradient-to-br from-[#F2CC8F]/20 to-[#E07A5F]/20 rounded-2xl border border-[#EAE0D5]">
+            <h3 className="text-xl font-semibold fraunces text-[#3D405B] mb-4 text-center">
+              Need Help Choosing?
+            </h3>
+            <p className="text-[#6B708D] text-center mb-4">
+              If you have any questions about our membership plans or need assistance, please contact us.
+            </p>
+            <div className="text-center">
+              <a
+                href="mailto:support@loaf.org"
+                className="text-[#E07A5F] hover:text-[#D0694E] font-medium"
+              >
+                support@loaf.org
+              </a>
+            </div>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Plans;
--- a/src/pages/Profile.js
+++ b/src/pages/Profile.js
@@ -0,0 +1,230 @@
+import React, { useState, useEffect } from 'react';
+import { useAuth } from '../context/AuthContext';
+import api from '../utils/api';
+import { Card } from '../components/ui/card';
+import { Button } from '../components/ui/button';
+import { Input } from '../components/ui/input';
+import { Label } from '../components/ui/label';
+import { toast } from 'sonner';
+import Navbar from '../components/Navbar';
+import { User, Save } from 'lucide-react';
+
+const Profile = () => {
+  const { user } = useAuth();
+  const [loading, setLoading] = useState(false);
+  const [profileData, setProfileData] = useState(null);
+  const [formData, setFormData] = useState({
+    first_name: '',
+    last_name: '',
+    phone: '',
+    address: '',
+    city: '',
+    state: '',
+    zipcode: ''
+  });
+
+  useEffect(() => {
+    fetchProfile();
+  }, []);
+
+  const fetchProfile = async () => {
+    try {
+      const response = await api.get('/users/profile');
+      setProfileData(response.data);
+      setFormData({
+        first_name: response.data.first_name,
+        last_name: response.data.last_name,
+        phone: response.data.phone,
+        address: response.data.address,
+        city: response.data.city,
+        state: response.data.state,
+        zipcode: response.data.zipcode
+      });
+    } catch (error) {
+      toast.error('Failed to load profile');
+    }
+  };
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+
+    try {
+      await api.put('/users/profile', formData);
+      toast.success('Profile updated successfully!');
+      fetchProfile();
+    } catch (error) {
+      toast.error('Failed to update profile');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (!profileData) {
+    return (
+      <div className="min-h-screen bg-[#FDFCF8]">
+        <Navbar />
+        <div className="flex items-center justify-center min-h-[60vh]">
+          <p className="text-[#6B708D]">Loading profile...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-[#FDFCF8]">
+      <Navbar />
+      
+      <div className="max-w-4xl mx-auto px-6 py-12">
+        <div className="mb-8">
+          <h1 className="text-4xl md:text-5xl font-semibold fraunces text-[#3D405B] mb-4">
+            My Profile
+          </h1>
+          <p className="text-lg text-[#6B708D]">
+            Update your personal information below.
+          </p>
+        </div>
+
+        <Card className="p-8 bg-white rounded-2xl border border-[#EAE0D5] shadow-lg">
+          {/* Read-only Information */}
+          <div className="mb-8 pb-8 border-b border-[#EAE0D5]">
+            <h2 className="text-2xl font-semibold fraunces text-[#3D405B] mb-6 flex items-center gap-2">
+              <User className="h-6 w-6 text-[#E07A5F]" />
+              Account Information
+            </h2>
+            <div className="grid md:grid-cols-2 gap-6">
+              <div>
+                <p className="text-sm text-[#6B708D] mb-1">Email</p>
+                <p className="text-[#3D405B] font-medium">{profileData.email}</p>
+              </div>
+              <div>
+                <p className="text-sm text-[#6B708D] mb-1">Status</p>
+                <p className="text-[#3D405B] font-medium capitalize">{profileData.status.replace('_', ' ')}</p>
+              </div>
+              <div>
+                <p className="text-sm text-[#6B708D] mb-1">Role</p>
+                <p className="text-[#3D405B] font-medium capitalize">{profileData.role}</p>
+              </div>
+              <div>
+                <p className="text-sm text-[#6B708D] mb-1">Date of Birth</p>
+                <p className="text-[#3D405B] font-medium">
+                  {new Date(profileData.date_of_birth).toLocaleDateString()}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Editable Form */}
+          <form onSubmit={handleSubmit} className="space-y-6" data-testid="profile-form">
+            <h2 className="text-2xl font-semibold fraunces text-[#3D405B] mb-6">
+              Personal Information
+            </h2>
+
+            <div className="grid md:grid-cols-2 gap-6">
+              <div>
+                <Label htmlFor="first_name">First Name</Label>
+                <Input
+                  id="first_name"
+                  name="first_name"
+                  value={formData.first_name}
+                  onChange={handleInputChange}
+                  className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                  data-testid="first-name-input"
+                />
+              </div>
+              <div>
+                <Label htmlFor="last_name">Last Name</Label>
+                <Input
+                  id="last_name"
+                  name="last_name"
+                  value={formData.last_name}
+                  onChange={handleInputChange}
+                  className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                  data-testid="last-name-input"
+                />
+              </div>
+            </div>
+
+            <div>
+              <Label htmlFor="phone">Phone</Label>
+              <Input
+                id="phone"
+                name="phone"
+                type="tel"
+                value={formData.phone}
+                onChange={handleInputChange}
+                className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                data-testid="phone-input"
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="address">Address</Label>
+              <Input
+                id="address"
+                name="address"
+                value={formData.address}
+                onChange={handleInputChange}
+                className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                data-testid="address-input"
+              />
+            </div>
+
+            <div className="grid md:grid-cols-3 gap-6">
+              <div>
+                <Label htmlFor="city">City</Label>
+                <Input
+                  id="city"
+                  name="city"
+                  value={formData.city}
+                  onChange={handleInputChange}
+                  className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                  data-testid="city-input"
+                />
+              </div>
+              <div>
+                <Label htmlFor="state">State</Label>
+                <Input
+                  id="state"
+                  name="state"
+                  value={formData.state}
+                  onChange={handleInputChange}
+                  className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                  data-testid="state-input"
+                />
+              </div>
+              <div>
+                <Label htmlFor="zipcode">Zipcode</Label>
+                <Input
+                  id="zipcode"
+                  name="zipcode"
+                  value={formData.zipcode}
+                  onChange={handleInputChange}
+                  className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                  data-testid="zipcode-input"
+                />
+              </div>
+            </div>
+
+            <Button
+              type="submit"
+              disabled={loading}
+              className="bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full px-8 py-6 text-lg font-medium shadow-lg disabled:opacity-50"
+              data-testid="save-profile-button"
+            >
+              <Save className="h-5 w-5 mr-2" />
+              {loading ? 'Saving...' : 'Save Changes'}
+            </Button>
+          </form>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default Profile;
--- a/src/pages/Register.js
+++ b/src/pages/Register.js
@@ -0,0 +1,388 @@
+import React, { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+import { Button } from '../components/ui/button';
+import { Input } from '../components/ui/input';
+import { Label } from '../components/ui/label';
+import { Card } from '../components/ui/card';
+import { Checkbox } from '../components/ui/checkbox';
+import { toast } from 'sonner';
+import Navbar from '../components/Navbar';
+import { ArrowRight, ArrowLeft } from 'lucide-react';
+
+const Register = () => {
+  const navigate = useNavigate();
+  const { register } = useAuth();
+  const [loading, setLoading] = useState(false);
+  const [formData, setFormData] = useState({
+    email: '',
+    password: '',
+    first_name: '',
+    last_name: '',
+    phone: '',
+    address: '',
+    city: '',
+    state: '',
+    zipcode: '',
+    date_of_birth: '',
+    lead_sources: [],
+    partner_first_name: '',
+    partner_last_name: '',
+    partner_is_member: false,
+    partner_plan_to_become_member: false,
+    referred_by_member_name: ''
+  });
+
+  const leadSourceOptions = [
+    'Current member',
+    'Friend',
+    'OutSmart Magazine',
+    'Search engine (Google etc.)',
+    "I've known about LOAF for a long time",
+    'Other'
+  ];
+
+  const handleInputChange = (e) => {
+    const { name, value, type, checked } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: type === 'checkbox' ? checked : value
+    }));
+  };
+
+  const handleLeadSourceChange = (source) => {
+    setFormData(prev => {
+      const sources = prev.lead_sources.includes(source)
+        ? prev.lead_sources.filter(s => s !== source)
+        : [...prev.lead_sources, source];
+      return { ...prev, lead_sources: sources };
+    });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+
+    try {
+      // Convert date to ISO format
+      const dataToSubmit = {
+        ...formData,
+        date_of_birth: new Date(formData.date_of_birth).toISOString()
+      };
+
+      await register(dataToSubmit);
+      toast.success('Registration successful! Please check your email to verify your account.');
+      navigate('/login');
+    } catch (error) {
+      toast.error(error.response?.data?.detail || 'Registration failed. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-[#FDFCF8]">
+      <Navbar />
+      
+      <div className="max-w-4xl mx-auto px-6 py-12">
+        <div className="mb-8">
+          <Link to="/" className="inline-flex items-center text-[#6B708D] hover:text-[#E07A5F] transition-colors">
+            <ArrowLeft className="h-4 w-4 mr-2" />
+            Back to Home
+          </Link>
+        </div>
+
+        <Card className="p-8 md:p-12 bg-white rounded-2xl border border-[#EAE0D5] shadow-lg">
+          <div className="mb-8">
+            <h1 className="text-4xl md:text-5xl font-semibold fraunces text-[#3D405B] mb-4">
+              Join Our Community
+            </h1>
+            <p className="text-lg text-[#6B708D]">
+              Fill out the form below to start your membership journey.
+            </p>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-8" data-testid="register-form">
+            {/* Account Information */}
+            <div className="space-y-4">
+              <h2 className="text-2xl font-semibold fraunces text-[#3D405B]">
+                Account Information
+              </h2>
+              <div className="grid md:grid-cols-2 gap-4">
+                <div>
+                  <Label htmlFor="email">Email *</Label>
+                  <Input
+                    id="email"
+                    name="email"
+                    type="email"
+                    required
+                    value={formData.email}
+                    onChange={handleInputChange}
+                    className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                    data-testid="email-input"
+                  />
+                </div>
+                <div>
+                  <Label htmlFor="password">Password *</Label>
+                  <Input
+                    id="password"
+                    name="password"
+                    type="password"
+                    required
+                    minLength={6}
+                    value={formData.password}
+                    onChange={handleInputChange}
+                    className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                    data-testid="password-input"
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Personal Information */}
+            <div className="space-y-4">
+              <h2 className="text-2xl font-semibold fraunces text-[#3D405B]">
+                Personal Information
+              </h2>
+              <div className="grid md:grid-cols-2 gap-4">
+                <div>
+                  <Label htmlFor="first_name">First Name *</Label>
+                  <Input
+                    id="first_name"
+                    name="first_name"
+                    required
+                    value={formData.first_name}
+                    onChange={handleInputChange}
+                    className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                    data-testid="first-name-input"
+                  />
+                </div>
+                <div>
+                  <Label htmlFor="last_name">Last Name *</Label>
+                  <Input
+                    id="last_name"
+                    name="last_name"
+                    required
+                    value={formData.last_name}
+                    onChange={handleInputChange}
+                    className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                    data-testid="last-name-input"
+                  />
+                </div>
+              </div>
+
+              <div className="grid md:grid-cols-2 gap-4">
+                <div>
+                  <Label htmlFor="phone">Phone *</Label>
+                  <Input
+                    id="phone"
+                    name="phone"
+                    type="tel"
+                    required
+                    value={formData.phone}
+                    onChange={handleInputChange}
+                    className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                    data-testid="phone-input"
+                  />
+                </div>
+                <div>
+                  <Label htmlFor="date_of_birth">Date of Birth *</Label>
+                  <Input
+                    id="date_of_birth"
+                    name="date_of_birth"
+                    type="date"
+                    required
+                    value={formData.date_of_birth}
+                    onChange={handleInputChange}
+                    className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                    data-testid="dob-input"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <Label htmlFor="address">Address *</Label>
+                <Input
+                  id="address"
+                  name="address"
+                  required
+                  value={formData.address}
+                  onChange={handleInputChange}
+                  className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                  data-testid="address-input"
+                />
+              </div>
+
+              <div className="grid md:grid-cols-3 gap-4">
+                <div>
+                  <Label htmlFor="city">City *</Label>
+                  <Input
+                    id="city"
+                    name="city"
+                    required
+                    value={formData.city}
+                    onChange={handleInputChange}
+                    className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                    data-testid="city-input"
+                  />
+                </div>
+                <div>
+                  <Label htmlFor="state">State *</Label>
+                  <Input
+                    id="state"
+                    name="state"
+                    required
+                    value={formData.state}
+                    onChange={handleInputChange}
+                    className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                    data-testid="state-input"
+                  />
+                </div>
+                <div>
+                  <Label htmlFor="zipcode">Zipcode *</Label>
+                  <Input
+                    id="zipcode"
+                    name="zipcode"
+                    required
+                    value={formData.zipcode}
+                    onChange={handleInputChange}
+                    className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                    data-testid="zipcode-input"
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* How Did You Hear About Us */}
+            <div className="space-y-4">
+              <h2 className="text-2xl font-semibold fraunces text-[#3D405B]">
+                How Did You Hear About Us? *
+              </h2>
+              <div className="space-y-3">
+                {leadSourceOptions.map((source) => (
+                  <div key={source} className="flex items-center space-x-2">
+                    <Checkbox
+                      id={source}
+                      checked={formData.lead_sources.includes(source)}
+                      onCheckedChange={() => handleLeadSourceChange(source)}
+                      data-testid={`lead-source-${source.toLowerCase().replace(/\s+/g, '-')}`}
+                    />
+                    <Label htmlFor={source} className="text-base cursor-pointer">
+                      {source}
+                    </Label>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Partner Information */}
+            <div className="space-y-4">
+              <h2 className="text-2xl font-semibold fraunces text-[#3D405B]">
+                Partner Information (Optional)
+              </h2>
+              <div className="grid md:grid-cols-2 gap-4">
+                <div>
+                  <Label htmlFor="partner_first_name">Partner First Name</Label>
+                  <Input
+                    id="partner_first_name"
+                    name="partner_first_name"
+                    value={formData.partner_first_name}
+                    onChange={handleInputChange}
+                    className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                    data-testid="partner-first-name-input"
+                  />
+                </div>
+                <div>
+                  <Label htmlFor="partner_last_name">Partner Last Name</Label>
+                  <Input
+                    id="partner_last_name"
+                    name="partner_last_name"
+                    value={formData.partner_last_name}
+                    onChange={handleInputChange}
+                    className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                    data-testid="partner-last-name-input"
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-3">
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="partner_is_member"
+                    name="partner_is_member"
+                    checked={formData.partner_is_member}
+                    onCheckedChange={(checked) => 
+                      setFormData(prev => ({ ...prev, partner_is_member: checked }))
+                    }
+                    data-testid="partner-is-member-checkbox"
+                  />
+                  <Label htmlFor="partner_is_member" className="text-base cursor-pointer">
+                    Is your partner already a member?
+                  </Label>
+                </div>
+
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="partner_plan_to_become_member"
+                    name="partner_plan_to_become_member"
+                    checked={formData.partner_plan_to_become_member}
+                    onCheckedChange={(checked) => 
+                      setFormData(prev => ({ ...prev, partner_plan_to_become_member: checked }))
+                    }
+                    data-testid="partner-plan-member-checkbox"
+                  />
+                  <Label htmlFor="partner_plan_to_become_member" className="text-base cursor-pointer">
+                    Does your partner plan to become a member?
+                  </Label>
+                </div>
+              </div>
+            </div>
+
+            {/* Referral */}
+            <div className="space-y-4">
+              <h2 className="text-2xl font-semibold fraunces text-[#3D405B]">
+                Referral (Optional)
+              </h2>
+              <div>
+                <Label htmlFor="referred_by_member_name">Referred by Member (Name or Email)</Label>
+                <Input
+                  id="referred_by_member_name"
+                  name="referred_by_member_name"
+                  value={formData.referred_by_member_name}
+                  onChange={handleInputChange}
+                  placeholder="If a current member referred you, enter their name or email"
+                  className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                  data-testid="referral-input"
+                />
+                <p className="text-sm text-[#6B708D] mt-2">
+                  If referred by a current member, you may skip the event attendance requirement.
+                </p>
+              </div>
+            </div>
+
+            {/* Submit Button */}
+            <div className="pt-6">
+              <Button
+                type="submit"
+                disabled={loading || formData.lead_sources.length === 0}
+                className="w-full bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50 disabled:cursor-not-allowed"
+                data-testid="submit-register-button"
+              >
+                {loading ? 'Creating Account...' : 'Create Account'}
+                <ArrowRight className="ml-2 h-5 w-5" />
+              </Button>
+              <p className="text-center text-[#6B708D] mt-4">
+                Already have an account?{' '}
+                <Link to="/login" className="text-[#E07A5F] hover:underline font-medium">
+                  Login here
+                </Link>
+              </p>
+            </div>
+          </form>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default Register;
--- a/src/pages/VerifyEmail.js
+++ b/src/pages/VerifyEmail.js
@@ -0,0 +1,105 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigate, useSearchParams, Link } from 'react-router-dom';
+import axios from 'axios';
+import { Button } from '../components/ui/button';
+import { Card } from '../components/ui/card';
+import { CheckCircle, XCircle, Loader2 } from 'lucide-react';
+import Navbar from '../components/Navbar';
+
+const API_URL = process.env.REACT_APP_BACKEND_URL;
+
+const VerifyEmail = () => {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const [status, setStatus] = useState('loading');
+  const [message, setMessage] = useState('');
+  const token = searchParams.get('token');
+
+  useEffect(() => {
+    const verifyEmail = async () => {
+      if (!token) {
+        setStatus('error');
+        setMessage('Invalid verification link.');
+        return;
+      }
+
+      try {
+        const response = await axios.get(`${API_URL}/api/auth/verify-email?token=${token}`);
+        setStatus('success');
+        setMessage(response.data.message);
+      } catch (error) {
+        setStatus('error');
+        setMessage(error.response?.data?.detail || 'Verification failed. Please try again.');
+      }
+    };
+
+    verifyEmail();
+  }, [token]);
+
+  return (
+    <div className="min-h-screen bg-[#FDFCF8]">
+      <Navbar />
+      
+      <div className="max-w-2xl mx-auto px-6 py-20">
+        <Card className="p-12 bg-white rounded-2xl border border-[#EAE0D5] shadow-lg text-center">
+          {status === 'loading' && (
+            <>
+              <Loader2 className="h-20 w-20 text-[#E07A5F] mx-auto mb-6 animate-spin" />
+              <h1 className="text-3xl font-semibold fraunces text-[#3D405B] mb-4">
+                Verifying Your Email...
+              </h1>
+              <p className="text-lg text-[#6B708D]">
+                Please wait while we verify your email address.
+              </p>
+            </>
+          )}
+
+          {status === 'success' && (
+            <>
+              <CheckCircle className="h-20 w-20 text-[#81B29A] mx-auto mb-6" />
+              <h1 className="text-3xl font-semibold fraunces text-[#3D405B] mb-4">
+                Email Verified Successfully!
+              </h1>
+              <p className="text-lg text-[#6B708D] mb-8">
+                {message}
+              </p>
+              <p className="text-base text-[#6B708D] mb-8">
+                Next steps: Attend an event and meet a board member within 90 days. Once you've attended an event, our admin team will review your application.
+              </p>
+              <Link to="/login">
+                <Button
+                  className="bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full px-12 py-6 text-lg font-medium shadow-lg"
+                  data-testid="login-redirect-button"
+                >
+                  Go to Login
+                </Button>
+              </Link>
+            </>
+          )}
+
+          {status === 'error' && (
+            <>
+              <XCircle className="h-20 w-20 text-[#E07A5F] mx-auto mb-6" />
+              <h1 className="text-3xl font-semibold fraunces text-[#3D405B] mb-4">
+                Verification Failed
+              </h1>
+              <p className="text-lg text-[#6B708D] mb-8">
+                {message}
+              </p>
+              <Link to="/">
+                <Button
+                  className="bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full px-12 py-6 text-lg font-medium shadow-lg"
+                  data-testid="home-redirect-button"
+                >
+                  Go to Home
+                </Button>
+              </Link>
+            </>
+          )}
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default VerifyEmail;
--- a/src/pages/admin/AdminApprovals.js
+++ b/src/pages/admin/AdminApprovals.js
@@ -0,0 +1,469 @@
+import React, { useEffect, useState } from 'react';
+import api from '../../utils/api';
+import { Card } from '../../components/ui/card';
+import { Button } from '../../components/ui/button';
+import { Badge } from '../../components/ui/badge';
+import { Input } from '../../components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../components/ui/select';
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableHead,
+  TableRow,
+  TableCell,
+} from '../../components/ui/table';
+import {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+} from '../../components/ui/pagination';
+import { toast } from 'sonner';
+import { CheckCircle, Clock, Search, ArrowUp, ArrowDown } from 'lucide-react';
+import PaymentActivationDialog from '../../components/PaymentActivationDialog';
+
+const AdminApprovals = () => {
+  const [pendingUsers, setPendingUsers] = useState([]);
+  const [filteredUsers, setFilteredUsers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [actionLoading, setActionLoading] = useState(null);
+  const [paymentDialogOpen, setPaymentDialogOpen] = useState(false);
+  const [selectedUserForPayment, setSelectedUserForPayment] = useState(null);
+
+  // Filtering state
+  const [searchQuery, setSearchQuery] = useState('');
+  const [statusFilter, setStatusFilter] = useState('all');
+
+  // Pagination state
+  const [currentPage, setCurrentPage] = useState(1);
+  const [itemsPerPage, setItemsPerPage] = useState(10);
+
+  // Sorting state
+  const [sortBy, setSortBy] = useState('created_at');
+  const [sortOrder, setSortOrder] = useState('desc');
+
+  useEffect(() => {
+    fetchPendingUsers();
+  }, []);
+
+  useEffect(() => {
+    filterAndSortUsers();
+  }, [pendingUsers, searchQuery, statusFilter, sortBy, sortOrder]);
+
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [searchQuery, statusFilter]);
+
+  const fetchPendingUsers = async () => {
+    try {
+      const response = await api.get('/admin/users');
+      const pending = response.data.filter(user =>
+        ['pending_email', 'pending_approval', 'pre_approved', 'payment_pending'].includes(user.status)
+      );
+      setPendingUsers(pending);
+    } catch (error) {
+      toast.error('Failed to fetch pending users');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const filterAndSortUsers = () => {
+    let filtered = [...pendingUsers];
+
+    // Apply status filter
+    if (statusFilter !== 'all') {
+      filtered = filtered.filter(user => user.status === statusFilter);
+    }
+
+    // Apply search query
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      filtered = filtered.filter(user =>
+        user.first_name.toLowerCase().includes(query) ||
+        user.last_name.toLowerCase().includes(query) ||
+        user.email.toLowerCase().includes(query) ||
+        user.phone?.toLowerCase().includes(query)
+      );
+    }
+
+    // Apply sorting
+    filtered.sort((a, b) => {
+      let aVal = a[sortBy];
+      let bVal = b[sortBy];
+
+      if (sortBy === 'created_at') {
+        aVal = new Date(aVal);
+        bVal = new Date(bVal);
+      } else if (sortBy === 'first_name') {
+        aVal = `${a.first_name} ${a.last_name}`;
+        bVal = `${b.first_name} ${b.last_name}`;
+      }
+
+      if (sortOrder === 'asc') {
+        return aVal > bVal ? 1 : -1;
+      } else {
+        return aVal < bVal ? 1 : -1;
+      }
+    });
+
+    setFilteredUsers(filtered);
+  };
+
+  const handleApprove = async (userId) => {
+    setActionLoading(userId);
+    try {
+      await api.put(`/admin/users/${userId}/approve`);
+      toast.success('User validated and approved! Payment email sent.');
+      fetchPendingUsers();
+    } catch (error) {
+      toast.error('Failed to approve user');
+    } finally {
+      setActionLoading(null);
+    }
+  };
+
+  const handleBypassAndApprove = async (userId) => {
+    if (!window.confirm(
+      'This will bypass email verification and approve the user. ' +
+      'Are you sure you want to proceed?'
+    )) {
+      return;
+    }
+
+    setActionLoading(userId);
+    try {
+      await api.put(`/admin/users/${userId}/approve?bypass_email_verification=true`);
+      toast.success('User email verified and approved! Payment email sent.');
+      fetchPendingUsers();
+    } catch (error) {
+      toast.error(error.response?.data?.detail || 'Failed to approve user');
+    } finally {
+      setActionLoading(null);
+    }
+  };
+
+  const handleActivatePayment = (user) => {
+    setSelectedUserForPayment(user);
+    setPaymentDialogOpen(true);
+  };
+
+  const handlePaymentSuccess = () => {
+    fetchPendingUsers(); // Refresh list
+  };
+
+  const getStatusBadge = (status) => {
+    const config = {
+      pending_email: { label: 'Awaiting Email', className: 'bg-[#F2CC8F] text-[#3D405B]' },
+      pending_approval: { label: 'Pending', className: 'bg-[#A3B1C6] text-white' },
+      pre_approved: { label: 'Pre-Approved', className: 'bg-[#81B29A] text-white' },
+      payment_pending: { label: 'Payment Pending', className: 'bg-[#E07A5F] text-white' }
+    };
+
+    const statusConfig = config[status];
+    return (
+      <Badge className={`${statusConfig.className} px-2 py-1 rounded-full text-xs`}>
+        {statusConfig.label}
+      </Badge>
+    );
+  };
+
+  const handleSort = (column) => {
+    if (sortBy === column) {
+      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortBy(column);
+      setSortOrder('asc');
+    }
+  };
+
+  // Pagination calculations
+  const totalPages = Math.ceil(filteredUsers.length / itemsPerPage);
+  const paginatedUsers = filteredUsers.slice(
+    (currentPage - 1) * itemsPerPage,
+    currentPage * itemsPerPage
+  );
+
+  const renderSortIcon = (column) => {
+    if (sortBy !== column) return null;
+    return sortOrder === 'asc' ?
+      <ArrowUp className="h-4 w-4 inline ml-1" /> :
+      <ArrowDown className="h-4 w-4 inline ml-1" />;
+  };
+
+  return (
+    <>
+      {/* Header */}
+      <div className="mb-8">
+        <h1 className="text-4xl md:text-5xl font-semibold fraunces text-[#3D405B] mb-4">
+          Approval Queue
+        </h1>
+        <p className="text-lg text-[#6B708D]">
+          Review and approve pending membership applications.
+        </p>
+      </div>
+
+      {/* Stats Card */}
+      <Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5] mb-8">
+        <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
+          <div>
+            <p className="text-sm text-[#6B708D] mb-2">Total Pending</p>
+            <p className="text-3xl font-semibold fraunces text-[#3D405B]">
+              {pendingUsers.length}
+            </p>
+          </div>
+          <div>
+            <p className="text-sm text-[#6B708D] mb-2">Awaiting Email</p>
+            <p className="text-3xl font-semibold fraunces text-[#3D405B]">
+              {pendingUsers.filter(u => u.status === 'pending_email').length}
+            </p>
+          </div>
+          <div>
+            <p className="text-sm text-[#6B708D] mb-2">Pending Approval</p>
+            <p className="text-3xl font-semibold fraunces text-[#3D405B]">
+              {pendingUsers.filter(u => u.status === 'pending_approval').length}
+            </p>
+          </div>
+          <div>
+            <p className="text-sm text-[#6B708D] mb-2">Pre-Approved</p>
+            <p className="text-3xl font-semibold fraunces text-[#3D405B]">
+              {pendingUsers.filter(u => u.status === 'pre_approved').length}
+            </p>
+          </div>
+          <div>
+            <p className="text-sm text-[#6B708D] mb-2">Payment Pending</p>
+            <p className="text-3xl font-semibold fraunces text-[#3D405B]">
+              {pendingUsers.filter(u => u.status === 'payment_pending').length}
+            </p>
+          </div>
+        </div>
+      </Card>
+
+      {/* Filter Card */}
+      <Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5] mb-8">
+        <div className="grid md:grid-cols-3 gap-4">
+          <div className="relative md:col-span-2">
+            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[#6B708D]" />
+            <Input
+              placeholder="Search by name, email, or phone..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-12 h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+            />
+          </div>
+
+          <Select value={statusFilter} onValueChange={setStatusFilter}>
+            <SelectTrigger className="h-14 rounded-xl border-2 border-[#EAE0D5]">
+              <SelectValue placeholder="Filter by status" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Statuses</SelectItem>
+              <SelectItem value="pending_email">Awaiting Email</SelectItem>
+              <SelectItem value="pending_approval">Pending Approval</SelectItem>
+              <SelectItem value="pre_approved">Pre-Approved</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </Card>
+
+      {/* Table */}
+      {loading ? (
+        <div className="text-center py-20">
+          <p className="text-[#6B708D]">Loading pending applications...</p>
+        </div>
+      ) : filteredUsers.length > 0 ? (
+        <>
+          <Card className="bg-white rounded-2xl border border-[#EAE0D5] overflow-hidden">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead
+                    className="cursor-pointer hover:bg-[#F2CC8F]/20"
+                    onClick={() => handleSort('first_name')}
+                  >
+                    Name {renderSortIcon('first_name')}
+                  </TableHead>
+                  <TableHead>Email</TableHead>
+                  <TableHead>Phone</TableHead>
+                  <TableHead
+                    className="cursor-pointer hover:bg-[#F2CC8F]/20"
+                    onClick={() => handleSort('status')}
+                  >
+                    Status {renderSortIcon('status')}
+                  </TableHead>
+                  <TableHead
+                    className="cursor-pointer hover:bg-[#F2CC8F]/20"
+                    onClick={() => handleSort('created_at')}
+                  >
+                    Registered {renderSortIcon('created_at')}
+                  </TableHead>
+                  <TableHead>Referred By</TableHead>
+                  <TableHead>Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {paginatedUsers.map((user) => (
+                  <TableRow key={user.id}>
+                    <TableCell className="font-medium">
+                      {user.first_name} {user.last_name}
+                    </TableCell>
+                    <TableCell>{user.email}</TableCell>
+                    <TableCell>{user.phone}</TableCell>
+                    <TableCell>{getStatusBadge(user.status)}</TableCell>
+                    <TableCell>
+                      {new Date(user.created_at).toLocaleDateString()}
+                    </TableCell>
+                    <TableCell>
+                      {user.referred_by_member_name || '-'}
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex gap-2">
+                        {user.status === 'pending_email' ? (
+                          <Button
+                            onClick={() => handleBypassAndApprove(user.id)}
+                            disabled={actionLoading === user.id}
+                            size="sm"
+                            className="bg-[#E07A5F] text-white hover:bg-[#D0694E]"
+                          >
+                            {actionLoading === user.id ? 'Approving...' : 'Bypass & Approve'}
+                          </Button>
+                        ) : user.status === 'payment_pending' ? (
+                          <Button
+                            onClick={() => handleActivatePayment(user)}
+                            size="sm"
+                            className="bg-[#E07A5F] text-white hover:bg-[#D0694E]"
+                          >
+                            <CheckCircle className="h-4 w-4 mr-1" />
+                            Activate Payment
+                          </Button>
+                        ) : (
+                          <Button
+                            onClick={() => handleApprove(user.id)}
+                            disabled={actionLoading === user.id}
+                            size="sm"
+                            className="bg-[#81B29A] text-white hover:bg-[#6FA087]"
+                          >
+                            {actionLoading === user.id ? 'Validating...' : 'Approve'}
+                          </Button>
+                        )}
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </Card>
+
+          {/* Pagination Controls */}
+          <div className="mt-8 flex flex-col md:flex-row justify-between items-center gap-4">
+            {/* Page size selector */}
+            <div className="flex items-center gap-2">
+              <p className="text-sm text-[#6B708D]">Show</p>
+              <Select
+                value={itemsPerPage.toString()}
+                onValueChange={(val) => {
+                  setItemsPerPage(parseInt(val));
+                  setCurrentPage(1);
+                }}
+              >
+                <SelectTrigger className="w-20">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="10">10</SelectItem>
+                  <SelectItem value="25">25</SelectItem>
+                  <SelectItem value="50">50</SelectItem>
+                  <SelectItem value="100">100</SelectItem>
+                </SelectContent>
+              </Select>
+              <p className="text-sm text-[#6B708D]">
+                entries (showing {(currentPage - 1) * itemsPerPage + 1}-
+                {Math.min(currentPage * itemsPerPage, filteredUsers.length)} of {filteredUsers.length})
+              </p>
+            </div>
+
+            {/* Pagination */}
+            {totalPages > 1 && (
+              <Pagination>
+                <PaginationContent>
+                  <PaginationItem>
+                    <PaginationPrevious
+                      onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
+                      className={currentPage === 1 ? 'pointer-events-none opacity-50' : 'cursor-pointer'}
+                    />
+                  </PaginationItem>
+
+                  {[...Array(totalPages)].map((_, i) => {
+                    const showPage = i < 2 || i >= totalPages - 2 ||
+                                    Math.abs(i - currentPage + 1) <= 1;
+
+                    if (!showPage && i === 2) {
+                      return (
+                        <PaginationItem key={i}>
+                          <PaginationEllipsis />
+                        </PaginationItem>
+                      );
+                    }
+
+                    if (!showPage) return null;
+
+                    return (
+                      <PaginationItem key={i}>
+                        <PaginationLink
+                          onClick={() => setCurrentPage(i + 1)}
+                          isActive={currentPage === i + 1}
+                          className="cursor-pointer"
+                        >
+                          {i + 1}
+                        </PaginationLink>
+                      </PaginationItem>
+                    );
+                  })}
+
+                  <PaginationItem>
+                    <PaginationNext
+                      onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
+                      className={currentPage === totalPages ? 'pointer-events-none opacity-50' : 'cursor-pointer'}
+                    />
+                  </PaginationItem>
+                </PaginationContent>
+              </Pagination>
+            )}
+          </div>
+        </>
+      ) : (
+        <div className="text-center py-20">
+          <Clock className="h-20 w-20 text-[#EAE0D5] mx-auto mb-6" />
+          <h3 className="text-2xl font-semibold fraunces text-[#3D405B] mb-4">
+            No Pending Approvals
+          </h3>
+          <p className="text-[#6B708D]">
+            {searchQuery || statusFilter !== 'all'
+              ? 'Try adjusting your filters'
+              : 'All applications have been reviewed!'}
+          </p>
+        </div>
+      )}
+
+      {/* Payment Activation Dialog */}
+      <PaymentActivationDialog
+        open={paymentDialogOpen}
+        onOpenChange={setPaymentDialogOpen}
+        user={selectedUserForPayment}
+        onSuccess={handlePaymentSuccess}
+      />
+    </>
+  );
+};
+
+export default AdminApprovals;
--- a/src/pages/admin/AdminDashboard.js
+++ b/src/pages/admin/AdminDashboard.js
@@ -0,0 +1,132 @@
+import React, { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import api from '../../utils/api';
+import { Card } from '../../components/ui/card';
+import { Button } from '../../components/ui/button';
+import { Badge } from '../../components/ui/badge';
+import { Users, Calendar, Clock, CheckCircle } from 'lucide-react';
+
+const AdminDashboard = () => {
+  const [stats, setStats] = useState({
+    totalMembers: 0,
+    pendingApprovals: 0,
+    activeMembers: 0
+  });
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchDashboardStats();
+  }, []);
+
+  const fetchDashboardStats = async () => {
+    try {
+      const usersResponse = await api.get('/admin/users');
+      const users = usersResponse.data;
+
+      setStats({
+        totalMembers: users.filter(u => u.role === 'member').length,
+        pendingApprovals: users.filter(u =>
+          ['pending_email', 'pending_approval', 'pre_approved', 'payment_pending'].includes(u.status)
+        ).length,
+        activeMembers: users.filter(u => u.status === 'active' && u.role === 'member').length
+      });
+    } catch (error) {
+      console.error('Failed to fetch stats:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <div className="mb-8">
+        <h1 className="text-4xl md:text-5xl font-semibold fraunces text-[#3D405B] mb-4">
+          Admin Dashboard
+        </h1>
+        <p className="text-lg text-[#6B708D]">
+          Manage users, events, and membership applications.
+        </p>
+      </div>
+
+        {/* Stats Grid */}
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
+          <Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5]" data-testid="stat-total-users">
+            <div className="flex items-center justify-between mb-4">
+              <div className="bg-[#A3B1C6]/20 p-3 rounded-lg">
+                <Users className="h-6 w-6 text-[#A3B1C6]" />
+              </div>
+            </div>
+            <p className="text-3xl font-semibold fraunces text-[#3D405B] mb-1">
+              {loading ? '-' : stats.totalMembers}
+            </p>
+            <p className="text-sm text-[#6B708D]">Total Members</p>
+          </Card>
+
+          <Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5]" data-testid="stat-pending-approvals">
+            <div className="flex items-center justify-between mb-4">
+              <div className="bg-[#F2CC8F]/20 p-3 rounded-lg">
+                <Clock className="h-6 w-6 text-[#E07A5F]" />
+              </div>
+            </div>
+            <p className="text-3xl font-semibold fraunces text-[#3D405B] mb-1">
+              {loading ? '-' : stats.pendingApprovals}
+            </p>
+            <p className="text-sm text-[#6B708D]">Pending Approvals</p>
+          </Card>
+
+          <Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5]" data-testid="stat-active-members">
+            <div className="flex items-center justify-between mb-4">
+              <div className="bg-[#81B29A]/20 p-3 rounded-lg">
+                <CheckCircle className="h-6 w-6 text-[#81B29A]" />
+              </div>
+            </div>
+            <p className="text-3xl font-semibold fraunces text-[#3D405B] mb-1">
+              {loading ? '-' : stats.activeMembers}
+            </p>
+            <p className="text-sm text-[#6B708D]">Active Members</p>
+          </Card>
+        </div>
+
+        {/* Quick Actions */}
+        <div className="grid md:grid-cols-2 gap-8">
+          <Link to="/admin/users">
+            <Card className="p-8 bg-white rounded-2xl border border-[#EAE0D5] hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer" data-testid="quick-action-users">
+              <Users className="h-12 w-12 text-[#E07A5F] mb-4" />
+              <h3 className="text-xl font-semibold fraunces text-[#3D405B] mb-2">
+                Manage Users
+              </h3>
+              <p className="text-[#6B708D]">
+                View and manage all registered users and their membership status.
+              </p>
+              <Button
+                className="mt-4 bg-[#F2CC8F] text-[#3D405B] hover:bg-[#E5B875] rounded-full"
+                data-testid="manage-users-button"
+              >
+                Go to Users
+              </Button>
+            </Card>
+          </Link>
+
+          <Link to="/admin/approvals">
+            <Card className="p-8 bg-white rounded-2xl border border-[#EAE0D5] hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer" data-testid="quick-action-approvals">
+              <Clock className="h-12 w-12 text-[#E07A5F] mb-4" />
+              <h3 className="text-xl font-semibold fraunces text-[#3D405B] mb-2">
+                Approval Queue
+              </h3>
+              <p className="text-[#6B708D]">
+                Review and approve pending membership applications.
+              </p>
+              <Button
+                className="mt-4 bg-[#F2CC8F] text-[#3D405B] hover:bg-[#E5B875] rounded-full"
+                data-testid="manage-approvals-button"
+              >
+                View Approvals
+              </Button>
+            </Card>
+          </Link>
+        </div>
+    </>
+  );
+};
+
+export default AdminDashboard;
--- a/src/pages/admin/AdminEvents.js
+++ b/src/pages/admin/AdminEvents.js
@@ -0,0 +1,430 @@
+import React, { useEffect, useState } from 'react';
+import api from '../../utils/api';
+import { Card } from '../../components/ui/card';
+import { Button } from '../../components/ui/button';
+import { Badge } from '../../components/ui/badge';
+import { Input } from '../../components/ui/input';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '../../components/ui/dialog';
+import { toast } from 'sonner';
+import { Calendar, MapPin, Users, Plus, Edit, Trash2, Eye, EyeOff } from 'lucide-react';
+import { AttendanceDialog } from '../../components/AttendanceDialog';
+
+const AdminEvents = () => {
+  const [events, setEvents] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+  const [editingEvent, setEditingEvent] = useState(null);
+  const [attendanceDialogOpen, setAttendanceDialogOpen] = useState(false);
+  const [selectedEvent, setSelectedEvent] = useState(null);
+
+  const [formData, setFormData] = useState({
+    title: '',
+    description: '',
+    start_at: '',
+    end_at: '',
+    location: '',
+    capacity: '',
+    published: false
+  });
+
+  useEffect(() => {
+    fetchEvents();
+  }, []);
+
+  const fetchEvents = async () => {
+    try {
+      const response = await api.get('/admin/events');
+      setEvents(response.data);
+    } catch (error) {
+      toast.error('Failed to fetch events');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      const eventData = {
+        ...formData,
+        capacity: formData.capacity ? parseInt(formData.capacity) : null,
+        start_at: new Date(formData.start_at).toISOString(),
+        end_at: new Date(formData.end_at).toISOString()
+      };
+
+      if (editingEvent) {
+        await api.put(`/admin/events/${editingEvent.id}`, eventData);
+        toast.success('Event updated successfully');
+      } else {
+        await api.post('/admin/events', eventData);
+        toast.success('Event created successfully');
+      }
+
+      setIsCreateDialogOpen(false);
+      setEditingEvent(null);
+      resetForm();
+      fetchEvents();
+    } catch (error) {
+      toast.error(error.response?.data?.detail || 'Failed to save event');
+    }
+  };
+
+  const handleEdit = (event) => {
+    setEditingEvent(event);
+    setFormData({
+      title: event.title,
+      description: event.description || '',
+      start_at: new Date(event.start_at).toISOString().slice(0, 16),
+      end_at: new Date(event.end_at).toISOString().slice(0, 16),
+      location: event.location,
+      capacity: event.capacity || '',
+      published: event.published
+    });
+    setIsCreateDialogOpen(true);
+  };
+
+  const handleDelete = async (eventId) => {
+    if (!window.confirm('Are you sure you want to delete this event?')) {
+      return;
+    }
+
+    try {
+      await api.delete(`/admin/events/${eventId}`);
+      toast.success('Event deleted successfully');
+      fetchEvents();
+    } catch (error) {
+      toast.error('Failed to delete event');
+    }
+  };
+
+  const togglePublish = async (event) => {
+    try {
+      await api.put(`/admin/events/${event.id}`, {
+        published: !event.published
+      });
+      toast.success(event.published ? 'Event unpublished' : 'Event published');
+      fetchEvents();
+    } catch (error) {
+      toast.error('Failed to update event');
+    }
+  };
+
+  const resetForm = () => {
+    setFormData({
+      title: '',
+      description: '',
+      start_at: '',
+      end_at: '',
+      location: '',
+      capacity: '',
+      published: false
+    });
+  };
+
+  const handleDialogClose = () => {
+    setIsCreateDialogOpen(false);
+    setEditingEvent(null);
+    resetForm();
+  };
+
+  return (
+    <>
+      {/* Header */}
+      <div className="mb-8 flex justify-between items-center">
+        <div>
+          <h1 className="text-4xl md:text-5xl font-semibold fraunces text-[#3D405B] mb-4">
+            Event Management
+          </h1>
+          <p className="text-lg text-[#6B708D]">
+            Create and manage community events.
+          </p>
+        </div>
+
+          <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
+            <DialogTrigger asChild>
+              <Button
+                onClick={() => {
+                  resetForm();
+                  setEditingEvent(null);
+                }}
+                className="bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full px-6"
+                data-testid="create-event-button"
+              >
+                <Plus className="mr-2 h-5 w-5" />
+                Create Event
+              </Button>
+            </DialogTrigger>
+
+            <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+              <DialogHeader>
+                <DialogTitle className="text-2xl fraunces text-[#3D405B]">
+                  {editingEvent ? 'Edit Event' : 'Create New Event'}
+                </DialogTitle>
+              </DialogHeader>
+
+              <form onSubmit={handleSubmit} className="space-y-4 mt-4">
+                <div>
+                  <label className="block text-sm font-medium text-[#3D405B] mb-2">
+                    Title *
+                  </label>
+                  <Input
+                    value={formData.title}
+                    onChange={(e) => setFormData({ ...formData, title: e.target.value })}
+                    required
+                    className="border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-[#3D405B] mb-2">
+                    Description
+                  </label>
+                  <textarea
+                    value={formData.description}
+                    onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                    rows={4}
+                    className="w-full border-2 border-[#EAE0D5] focus:border-[#E07A5F] rounded-lg p-3"
+                  />
+                </div>
+
+                <div className="grid md:grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-[#3D405B] mb-2">
+                      Start Date & Time *
+                    </label>
+                    <Input
+                      type="datetime-local"
+                      value={formData.start_at}
+                      onChange={(e) => setFormData({ ...formData, start_at: e.target.value })}
+                      required
+                      className="border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-[#3D405B] mb-2">
+                      End Date & Time *
+                    </label>
+                    <Input
+                      type="datetime-local"
+                      value={formData.end_at}
+                      onChange={(e) => setFormData({ ...formData, end_at: e.target.value })}
+                      required
+                      className="border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-[#3D405B] mb-2">
+                    Location *
+                  </label>
+                  <Input
+                    value={formData.location}
+                    onChange={(e) => setFormData({ ...formData, location: e.target.value })}
+                    required
+                    className="border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-[#3D405B] mb-2">
+                    Capacity (optional)
+                  </label>
+                  <Input
+                    type="number"
+                    value={formData.capacity}
+                    onChange={(e) => setFormData({ ...formData, capacity: e.target.value })}
+                    placeholder="Leave empty for unlimited"
+                    className="border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                  />
+                </div>
+
+                <div className="flex items-center gap-2">
+                  <input
+                    type="checkbox"
+                    id="published"
+                    checked={formData.published}
+                    onChange={(e) => setFormData({ ...formData, published: e.target.checked })}
+                    className="w-4 h-4 text-[#E07A5F] border-[#EAE0D5] rounded focus:ring-[#E07A5F]"
+                  />
+                  <label htmlFor="published" className="text-sm font-medium text-[#3D405B]">
+                    Publish event (make visible to members)
+                  </label>
+                </div>
+
+                <div className="flex gap-3 pt-4">
+                  <Button
+                    type="submit"
+                    className="flex-1 bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full"
+                  >
+                    {editingEvent ? 'Update Event' : 'Create Event'}
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={handleDialogClose}
+                    className="flex-1 border-2 border-[#6B708D] text-[#6B708D] hover:bg-[#6B708D] hover:text-white rounded-full"
+                  >
+                    Cancel
+                  </Button>
+                </div>
+              </form>
+            </DialogContent>
+          </Dialog>
+        </div>
+
+        {/* Events List */}
+        {loading ? (
+          <div className="text-center py-20">
+            <p className="text-[#6B708D]">Loading events...</p>
+          </div>
+        ) : events.length > 0 ? (
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {events.map((event) => (
+              <Card
+                key={event.id}
+                className="p-6 bg-white rounded-2xl border border-[#EAE0D5] hover:shadow-lg transition-all"
+                data-testid={`event-card-${event.id}`}
+              >
+                {/* Event Header */}
+                <div className="flex justify-between items-start mb-4">
+                  <div className="bg-[#F2CC8F]/20 p-3 rounded-lg">
+                    <Calendar className="h-6 w-6 text-[#E07A5F]" />
+                  </div>
+                  <Badge
+                    className={`${
+                      event.published
+                        ? 'bg-[#81B29A] text-white'
+                        : 'bg-[#6B708D] text-white'
+                    } px-3 py-1 rounded-full`}
+                  >
+                    {event.published ? 'Published' : 'Draft'}
+                  </Badge>
+                </div>
+
+                {/* Event Details */}
+                <h3 className="text-xl font-semibold fraunces text-[#3D405B] mb-3">
+                  {event.title}
+                </h3>
+
+                {event.description && (
+                  <p className="text-[#6B708D] mb-4 line-clamp-2 text-sm">
+                    {event.description}
+                  </p>
+                )}
+
+                <div className="space-y-2 mb-4">
+                  <div className="flex items-center gap-2 text-sm text-[#6B708D]">
+                    <Calendar className="h-4 w-4" />
+                    <span>
+                      {new Date(event.start_at).toLocaleDateString()} at{' '}
+                      {new Date(event.start_at).toLocaleTimeString([], {
+                        hour: '2-digit',
+                        minute: '2-digit'
+                      })}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-2 text-sm text-[#6B708D]">
+                    <MapPin className="h-4 w-4" />
+                    <span className="truncate">{event.location}</span>
+                  </div>
+                  <div className="flex items-center gap-2 text-sm text-[#6B708D]">
+                    <Users className="h-4 w-4" />
+                    <span>{event.rsvp_count || 0} attending</span>
+                  </div>
+                </div>
+
+                {/* Actions */}
+                <div className="space-y-2 pt-4 border-t border-[#EAE0D5]">
+                  {/* Mark Attendance Button */}
+                  <Button
+                    onClick={() => {
+                      setSelectedEvent(event);
+                      setAttendanceDialogOpen(true);
+                    }}
+                    variant="outline"
+                    size="sm"
+                    className="w-full border-[#81B29A] text-[#81B29A] hover:bg-[#81B29A] hover:text-white"
+                    data-testid={`mark-attendance-${event.id}`}
+                  >
+                    <Users className="h-4 w-4 mr-2" />
+                    Mark Attendance ({event.rsvp_count || 0} RSVPs)
+                  </Button>
+
+                  {/* Other Actions */}
+                  <div className="flex gap-2">
+                    <Button
+                      onClick={() => togglePublish(event)}
+                      variant="outline"
+                      size="sm"
+                      className="flex-1 border-[#E07A5F] text-[#E07A5F] hover:bg-[#E07A5F] hover:text-white"
+                      data-testid={`toggle-publish-${event.id}`}
+                    >
+                      {event.published ? (
+                        <>
+                          <EyeOff className="h-4 w-4 mr-1" />
+                          Unpublish
+                        </>
+                      ) : (
+                        <>
+                          <Eye className="h-4 w-4 mr-1" />
+                          Publish
+                        </>
+                      )}
+                    </Button>
+                    <Button
+                      onClick={() => handleEdit(event)}
+                      variant="outline"
+                      size="sm"
+                      className="border-[#6B708D] text-[#6B708D] hover:bg-[#6B708D] hover:text-white"
+                      data-testid={`edit-event-${event.id}`}
+                    >
+                      <Edit className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      onClick={() => handleDelete(event.id)}
+                      variant="outline"
+                      size="sm"
+                      className="border-red-500 text-red-500 hover:bg-red-500 hover:text-white"
+                      data-testid={`delete-event-${event.id}`}
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+              </Card>
+            ))}
+          </div>
+        ) : (
+          <div className="text-center py-20">
+            <Calendar className="h-20 w-20 text-[#EAE0D5] mx-auto mb-6" />
+            <h3 className="text-2xl font-semibold fraunces text-[#3D405B] mb-4">
+              No Events Yet
+            </h3>
+            <p className="text-[#6B708D] mb-6">
+              Create your first event to get started!
+            </p>
+            <Button
+              onClick={() => setIsCreateDialogOpen(true)}
+              className="bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full px-8"
+            >
+              <Plus className="mr-2 h-5 w-5" />
+              Create Event
+            </Button>
+          </div>
+        )}
+
+      {/* Attendance Dialog */}
+      <AttendanceDialog
+        event={selectedEvent}
+        open={attendanceDialogOpen}
+        onOpenChange={setAttendanceDialogOpen}
+        onSuccess={fetchEvents}
+      />
+    </>
+  );
+};
+
+export default AdminEvents;
--- a/src/pages/admin/AdminMembers.js
+++ b/src/pages/admin/AdminMembers.js
@@ -0,0 +1,294 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigate, useLocation, Link } from 'react-router-dom';
+import api from '../../utils/api';
+import { Card } from '../../components/ui/card';
+import { Button } from '../../components/ui/button';
+import { Badge } from '../../components/ui/badge';
+import { Input } from '../../components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components/ui/select';
+import { toast } from 'sonner';
+import { Users, Search, User, CreditCard, Eye, CheckCircle } from 'lucide-react';
+import PaymentActivationDialog from '../../components/PaymentActivationDialog';
+
+const AdminMembers = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [users, setUsers] = useState([]);
+  const [filteredUsers, setFilteredUsers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [statusFilter, setStatusFilter] = useState('active');
+  const [paymentDialogOpen, setPaymentDialogOpen] = useState(false);
+  const [selectedUserForPayment, setSelectedUserForPayment] = useState(null);
+
+  const tabs = [
+    { name: 'All Users', path: '/admin/users' },
+    { name: 'Staff', path: '/admin/staff' },
+    { name: 'Members', path: '/admin/members' }
+  ];
+
+  useEffect(() => {
+    fetchMembers();
+  }, []);
+
+  useEffect(() => {
+    filterUsers();
+  }, [users, searchQuery, statusFilter]);
+
+  const fetchMembers = async () => {
+    try {
+      const response = await api.get('/admin/users');
+      // Filter to only members
+      const members = response.data.filter(user => user.role === 'member');
+      setUsers(members);
+    } catch (error) {
+      toast.error('Failed to fetch members');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const filterUsers = () => {
+    let filtered = users;
+
+    if (statusFilter && statusFilter !== 'all') {
+      filtered = filtered.filter(user => user.status === statusFilter);
+    }
+
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      filtered = filtered.filter(user =>
+        user.first_name.toLowerCase().includes(query) ||
+        user.last_name.toLowerCase().includes(query) ||
+        user.email.toLowerCase().includes(query)
+      );
+    }
+
+    setFilteredUsers(filtered);
+  };
+
+  const handleActivatePayment = (user) => {
+    setSelectedUserForPayment(user);
+    setPaymentDialogOpen(true);
+  };
+
+  const handlePaymentSuccess = () => {
+    fetchMembers(); // Refresh list
+  };
+
+  const getStatusBadge = (status) => {
+    const config = {
+      pending_email: { label: 'Pending Email', className: 'bg-[#F2CC8F] text-[#3D405B]' },
+      pending_approval: { label: 'Pending Approval', className: 'bg-[#A3B1C6] text-white' },
+      pre_approved: { label: 'Pre-Approved', className: 'bg-[#81B29A] text-white' },
+      payment_pending: { label: 'Payment Pending', className: 'bg-[#E07A5F] text-white' },
+      active: { label: 'Active', className: 'bg-[#81B29A] text-white' },
+      inactive: { label: 'Inactive', className: 'bg-[#6B708D] text-white' }
+    };
+
+    const statusConfig = config[status] || config.inactive;
+    return (
+      <Badge className={`${statusConfig.className} px-3 py-1 rounded-full text-sm`}>
+        {statusConfig.label}
+      </Badge>
+    );
+  };
+
+  return (
+    <>
+      <div className="mb-8">
+        <h1 className="text-4xl md:text-5xl font-semibold fraunces text-[#3D405B] mb-4">
+          Members Management
+        </h1>
+        <p className="text-lg text-[#6B708D]">
+          Manage paying members and their subscriptions.
+        </p>
+      </div>
+
+      {/* Tab Navigation */}
+      <div className="border-b border-[#EAE0D5] mb-8">
+        <nav className="flex gap-8">
+          {tabs.map((tab) => (
+            <button
+              key={tab.path}
+              onClick={() => navigate(tab.path)}
+              className={`
+                pb-4 px-2 font-medium transition-colors relative
+                ${location.pathname === tab.path
+                  ? 'text-[#E07A5F]'
+                  : 'text-[#6B708D] hover:text-[#3D405B]'
+                }
+              `}
+            >
+              {tab.name}
+              {location.pathname === tab.path && (
+                <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#E07A5F]" />
+              )}
+            </button>
+          ))}
+        </nav>
+      </div>
+
+      {/* Stats */}
+      <div className="grid md:grid-cols-4 gap-4 mb-8">
+        <Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5]">
+          <p className="text-sm text-[#6B708D] mb-2">Total Members</p>
+          <p className="text-3xl font-semibold fraunces text-[#3D405B]">
+            {users.length}
+          </p>
+        </Card>
+        <Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5]">
+          <p className="text-sm text-[#6B708D] mb-2">Active</p>
+          <p className="text-3xl font-semibold fraunces text-[#3D405B]">
+            {users.filter(u => u.status === 'active').length}
+          </p>
+        </Card>
+        <Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5]">
+          <p className="text-sm text-[#6B708D] mb-2">Payment Pending</p>
+          <p className="text-3xl font-semibold fraunces text-[#3D405B]">
+            {users.filter(u => u.status === 'payment_pending').length}
+          </p>
+        </Card>
+        <Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5]">
+          <p className="text-sm text-[#6B708D] mb-2">Inactive</p>
+          <p className="text-3xl font-semibold fraunces text-[#3D405B]">
+            {users.filter(u => u.status === 'inactive').length}
+          </p>
+        </Card>
+      </div>
+
+      {/* Filters */}
+      <Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5] mb-8">
+        <div className="grid md:grid-cols-2 gap-4">
+          <div className="relative">
+            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[#6B708D]" />
+            <Input
+              placeholder="Search by name or email..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-12 h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+              data-testid="search-members-input"
+            />
+          </div>
+          <Select value={statusFilter} onValueChange={setStatusFilter}>
+            <SelectTrigger className="h-14 rounded-xl border-2 border-[#EAE0D5]" data-testid="status-filter-select">
+              <SelectValue placeholder="Filter by status" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Statuses</SelectItem>
+              <SelectItem value="active">Active</SelectItem>
+              <SelectItem value="payment_pending">Payment Pending</SelectItem>
+              <SelectItem value="pending_approval">Pending Approval</SelectItem>
+              <SelectItem value="pre_approved">Pre-Approved</SelectItem>
+              <SelectItem value="inactive">Inactive</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </Card>
+
+      {/* Members List */}
+      {loading ? (
+        <div className="text-center py-20">
+          <p className="text-[#6B708D]">Loading members...</p>
+        </div>
+      ) : filteredUsers.length > 0 ? (
+        <div className="space-y-4">
+          {filteredUsers.map((user) => (
+            <Card
+              key={user.id}
+              className="p-6 bg-white rounded-2xl border border-[#EAE0D5] hover:shadow-md transition-shadow"
+              data-testid={`member-card-${user.id}`}
+            >
+              <div className="flex justify-between items-start flex-wrap gap-4">
+                <div className="flex items-start gap-4 flex-1">
+                  {/* Avatar */}
+                  <div className="h-14 w-14 rounded-full bg-[#F2CC8F] flex items-center justify-center text-[#3D405B] font-semibold text-lg flex-shrink-0">
+                    {user.first_name?.[0]}{user.last_name?.[0]}
+                  </div>
+
+                  {/* Info */}
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-3 mb-2 flex-wrap">
+                      <h3 className="text-xl font-semibold fraunces text-[#3D405B]">
+                        {user.first_name} {user.last_name}
+                      </h3>
+                      {getStatusBadge(user.status)}
+                    </div>
+                    <div className="grid md:grid-cols-2 gap-2 text-sm text-[#6B708D]">
+                      <p>Email: {user.email}</p>
+                      <p>Phone: {user.phone}</p>
+                      <p>Joined: {new Date(user.created_at).toLocaleDateString()}</p>
+                      {user.referred_by_member_name && (
+                        <p>Referred by: {user.referred_by_member_name}</p>
+                      )}
+                    </div>
+                  </div>
+                </div>
+
+                {/* Actions */}
+                <div className="flex gap-2">
+                  <Link to={`/admin/users/${user.id}`}>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="border-[#A3B1C6] text-[#A3B1C6] hover:bg-[#A3B1C6] hover:text-white"
+                    >
+                      <Eye className="h-4 w-4 mr-1" />
+                      View Profile
+                    </Button>
+                  </Link>
+
+                  {/* Show Activate Payment button for payment_pending users */}
+                  {user.status === 'payment_pending' && (
+                    <Button
+                      onClick={() => handleActivatePayment(user)}
+                      size="sm"
+                      className="bg-[#E07A5F] text-white hover:bg-[#D0694E]"
+                    >
+                      <CheckCircle className="h-4 w-4 mr-1" />
+                      Activate Payment
+                    </Button>
+                  )}
+
+                  {/* Show Subscription button for active users */}
+                  {user.status === 'active' && (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="border-[#81B29A] text-[#81B29A] hover:bg-[#81B29A] hover:text-white"
+                    >
+                      <CreditCard className="h-4 w-4 mr-1" />
+                      Subscription
+                    </Button>
+                  )}
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+      ) : (
+        <div className="text-center py-20">
+          <Users className="h-20 w-20 text-[#EAE0D5] mx-auto mb-6" />
+          <h3 className="text-2xl font-semibold fraunces text-[#3D405B] mb-4">
+            No Members Found
+          </h3>
+          <p className="text-[#6B708D]">
+            {searchQuery || statusFilter !== 'all'
+              ? 'Try adjusting your filters'
+              : 'No members yet'}
+          </p>
+        </div>
+      )}
+
+      {/* Payment Activation Dialog */}
+      <PaymentActivationDialog
+        open={paymentDialogOpen}
+        onOpenChange={setPaymentDialogOpen}
+        user={selectedUserForPayment}
+        onSuccess={handlePaymentSuccess}
+      />
+    </>
+  );
+};
+
+export default AdminMembers;
--- a/src/pages/admin/AdminPlans.js
+++ b/src/pages/admin/AdminPlans.js
@@ -0,0 +1,365 @@
+import React, { useEffect, useState } from 'react';
+import api from '../../utils/api';
+import { Card } from '../../components/ui/card';
+import { Button } from '../../components/ui/button';
+import { Badge } from '../../components/ui/badge';
+import { Input } from '../../components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../components/ui/select';
+import PlanDialog from '../../components/PlanDialog';
+import { toast } from 'sonner';
+import {
+  CreditCard,
+  Plus,
+  Edit,
+  Trash2,
+  Users,
+  Search,
+  DollarSign
+} from 'lucide-react';
+
+const AdminPlans = () => {
+  const [plans, setPlans] = useState([]);
+  const [filteredPlans, setFilteredPlans] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [activeFilter, setActiveFilter] = useState('all');
+  const [planDialogOpen, setPlanDialogOpen] = useState(false);
+  const [selectedPlan, setSelectedPlan] = useState(null);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [planToDelete, setPlanToDelete] = useState(null);
+
+  useEffect(() => {
+    fetchPlans();
+  }, []);
+
+  useEffect(() => {
+    filterPlans();
+  }, [plans, searchQuery, activeFilter]);
+
+  const fetchPlans = async () => {
+    try {
+      const response = await api.get('/admin/subscriptions/plans');
+      setPlans(response.data);
+    } catch (error) {
+      toast.error('Failed to fetch plans');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const filterPlans = () => {
+    let filtered = plans;
+
+    if (activeFilter !== 'all') {
+      filtered = filtered.filter(plan =>
+        activeFilter === 'active' ? plan.active : !plan.active
+      );
+    }
+
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      filtered = filtered.filter(plan =>
+        plan.name.toLowerCase().includes(query) ||
+        plan.description?.toLowerCase().includes(query)
+      );
+    }
+
+    setFilteredPlans(filtered);
+  };
+
+  const handleCreatePlan = () => {
+    setSelectedPlan(null);
+    setPlanDialogOpen(true);
+  };
+
+  const handleEditPlan = (plan) => {
+    setSelectedPlan(plan);
+    setPlanDialogOpen(true);
+  };
+
+  const handleDeleteClick = (plan) => {
+    setPlanToDelete(plan);
+    setDeleteDialogOpen(true);
+  };
+
+  const handleDeleteConfirm = async () => {
+    try {
+      await api.delete(`/admin/subscriptions/plans/${planToDelete.id}`);
+      toast.success('Plan deleted successfully');
+      fetchPlans();
+      setDeleteDialogOpen(false);
+    } catch (error) {
+      toast.error(error.response?.data?.detail || 'Failed to delete plan');
+    }
+  };
+
+  const formatPrice = (cents) => {
+    return `$${(cents / 100).toFixed(2)}`;
+  };
+
+  const getBillingCycleLabel = (cycle) => {
+    const labels = {
+      monthly: 'Monthly',
+      quarterly: 'Quarterly',
+      yearly: 'Yearly',
+      lifetime: 'Lifetime'
+    };
+    return labels[cycle] || cycle;
+  };
+
+  return (
+    <>
+      <div className="mb-8">
+        <div className="flex justify-between items-start mb-4">
+          <div>
+            <h1 className="text-4xl md:text-5xl font-semibold fraunces text-[#3D405B] mb-4">
+              Subscription Plans
+            </h1>
+            <p className="text-lg text-[#6B708D]">
+              Manage membership plans and pricing.
+            </p>
+          </div>
+          <Button
+            onClick={handleCreatePlan}
+            className="bg-[#E07A5F] hover:bg-[#D0694E] text-white rounded-full px-6"
+          >
+            <Plus className="h-4 w-4 mr-2" />
+            Create Plan
+          </Button>
+        </div>
+      </div>
+
+      {/* Stats */}
+      <div className="grid md:grid-cols-4 gap-4 mb-8">
+        <Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5]">
+          <p className="text-sm text-[#6B708D] mb-2">Total Plans</p>
+          <p className="text-3xl font-semibold fraunces text-[#3D405B]">
+            {plans.length}
+          </p>
+        </Card>
+        <Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5]">
+          <p className="text-sm text-[#6B708D] mb-2">Active Plans</p>
+          <p className="text-3xl font-semibold fraunces text-[#3D405B]">
+            {plans.filter(p => p.active).length}
+          </p>
+        </Card>
+        <Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5]">
+          <p className="text-sm text-[#6B708D] mb-2">Total Subscribers</p>
+          <p className="text-3xl font-semibold fraunces text-[#3D405B]">
+            {plans.reduce((sum, p) => sum + (p.subscriber_count || 0), 0)}
+          </p>
+        </Card>
+        <Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5]">
+          <p className="text-sm text-[#6B708D] mb-2">Revenue (Annual Est.)</p>
+          <p className="text-3xl font-semibold fraunces text-[#3D405B]">
+            {formatPrice(
+              plans.reduce((sum, p) => {
+                const annualPrice = p.billing_cycle === 'yearly'
+                  ? p.price_cents
+                  : p.price_cents * 12;
+                return sum + (annualPrice * (p.subscriber_count || 0));
+              }, 0)
+            )}
+          </p>
+        </Card>
+      </div>
+
+      {/* Filters */}
+      <Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5] mb-8">
+        <div className="grid md:grid-cols-2 gap-4">
+          <div className="relative">
+            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[#6B708D]" />
+            <Input
+              placeholder="Search plans..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-12 h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+            />
+          </div>
+          <Select value={activeFilter} onValueChange={setActiveFilter}>
+            <SelectTrigger className="h-14 rounded-xl border-2 border-[#EAE0D5]">
+              <SelectValue placeholder="Filter by status" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Plans</SelectItem>
+              <SelectItem value="active">Active Only</SelectItem>
+              <SelectItem value="inactive">Inactive Only</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </Card>
+
+      {/* Plans Grid */}
+      {loading ? (
+        <div className="text-center py-20">
+          <p className="text-[#6B708D]">Loading plans...</p>
+        </div>
+      ) : filteredPlans.length > 0 ? (
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {filteredPlans.map((plan) => (
+            <Card
+              key={plan.id}
+              className={`p-6 bg-white rounded-2xl border-2 transition-all hover:shadow-lg ${
+                plan.active
+                  ? 'border-[#EAE0D5] hover:border-[#E07A5F]'
+                  : 'border-[#6B708D] opacity-60'
+              }`}
+            >
+              {/* Header with badges */}
+              <div className="flex justify-between items-start mb-4">
+                <Badge
+                  className={`${
+                    plan.active
+                      ? 'bg-[#81B29A] text-white'
+                      : 'bg-[#6B708D] text-white'
+                  }`}
+                >
+                  {plan.active ? 'Active' : 'Inactive'}
+                </Badge>
+                {plan.subscriber_count > 0 && (
+                  <Badge className="bg-[#F2CC8F] text-[#3D405B]">
+                    <Users className="h-3 w-3 mr-1" />
+                    {plan.subscriber_count}
+                  </Badge>
+                )}
+              </div>
+
+              {/* Plan Name */}
+              <h3 className="text-2xl font-semibold fraunces text-[#3D405B] mb-2">
+                {plan.name}
+              </h3>
+
+              {/* Description */}
+              {plan.description && (
+                <p className="text-sm text-[#6B708D] mb-4 line-clamp-2">
+                  {plan.description}
+                </p>
+              )}
+
+              {/* Price */}
+              <div className="mb-4">
+                <div className="text-3xl font-bold fraunces text-[#E07A5F]">
+                  {formatPrice(plan.price_cents)}
+                </div>
+                <p className="text-sm text-[#6B708D]">
+                  {getBillingCycleLabel(plan.billing_cycle)}
+                </p>
+              </div>
+
+              {/* Stripe Integration Status */}
+              <div className="mb-6">
+                {plan.stripe_price_id ? (
+                  <Badge className="bg-[#81B29A] text-white text-xs">
+                    <DollarSign className="h-3 w-3 mr-1" />
+                    Stripe Integrated
+                  </Badge>
+                ) : (
+                  <Badge className="bg-[#F2CC8F] text-[#3D405B] text-xs">
+                    Manual/Test Plan
+                  </Badge>
+                )}
+              </div>
+
+              {/* Actions */}
+              <div className="flex gap-2 pt-4 border-t border-[#EAE0D5]">
+                <Button
+                  onClick={() => handleEditPlan(plan)}
+                  variant="outline"
+                  size="sm"
+                  className="flex-1 border-[#A3B1C6] text-[#A3B1C6] hover:bg-[#A3B1C6] hover:text-white rounded-full"
+                >
+                  <Edit className="h-4 w-4 mr-1" />
+                  Edit
+                </Button>
+                <Button
+                  onClick={() => handleDeleteClick(plan)}
+                  variant="outline"
+                  size="sm"
+                  className="flex-1 border-[#E07A5F] text-[#E07A5F] hover:bg-[#E07A5F] hover:text-white rounded-full"
+                  disabled={plan.subscriber_count > 0}
+                >
+                  <Trash2 className="h-4 w-4 mr-1" />
+                  Delete
+                </Button>
+              </div>
+
+              {/* Warning for plans with subscribers */}
+              {plan.subscriber_count > 0 && (
+                <p className="text-xs text-[#6B708D] mt-2 text-center">
+                  Cannot delete plan with active subscribers
+                </p>
+              )}
+            </Card>
+          ))}
+        </div>
+      ) : (
+        <div className="text-center py-20">
+          <CreditCard className="h-20 w-20 text-[#EAE0D5] mx-auto mb-6" />
+          <h3 className="text-2xl font-semibold fraunces text-[#3D405B] mb-4">
+            No Plans Found
+          </h3>
+          <p className="text-[#6B708D] mb-6">
+            {searchQuery || activeFilter !== 'all'
+              ? 'Try adjusting your filters'
+              : 'Create your first subscription plan to get started'}
+          </p>
+          {!searchQuery && activeFilter === 'all' && (
+            <Button
+              onClick={handleCreatePlan}
+              className="bg-[#E07A5F] hover:bg-[#D0694E] text-white rounded-full px-8"
+            >
+              <Plus className="h-4 w-4 mr-2" />
+              Create First Plan
+            </Button>
+          )}
+        </div>
+      )}
+
+      {/* Plan Dialog */}
+      <PlanDialog
+        open={planDialogOpen}
+        onOpenChange={setPlanDialogOpen}
+        plan={selectedPlan}
+        onSuccess={fetchPlans}
+      />
+
+      {/* Delete Confirmation Dialog */}
+      {deleteDialogOpen && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <Card className="p-8 bg-white rounded-2xl max-w-md mx-4">
+            <h2 className="text-2xl font-semibold fraunces text-[#3D405B] mb-4">
+              Delete Plan
+            </h2>
+            <p className="text-[#6B708D] mb-6">
+              Are you sure you want to delete "{planToDelete?.name}"? This action
+              will deactivate the plan and it won't be available for new subscriptions.
+            </p>
+            <div className="flex gap-4">
+              <Button
+                onClick={() => setDeleteDialogOpen(false)}
+                variant="outline"
+                className="flex-1"
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={handleDeleteConfirm}
+                className="flex-1 bg-[#E07A5F] hover:bg-[#D0694E] text-white"
+              >
+                Delete Plan
+              </Button>
+            </div>
+          </Card>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default AdminPlans;
--- a/src/pages/admin/AdminStaff.js
+++ b/src/pages/admin/AdminStaff.js
@@ -0,0 +1,223 @@
+import React, { useEffect, useState } from 'react';
+import api from '../../utils/api';
+import { Card } from '../../components/ui/card';
+import { Button } from '../../components/ui/button';
+import { Badge } from '../../components/ui/badge';
+import { Input } from '../../components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components/ui/select';
+import { toast } from 'sonner';
+import { UserCog, Search, Shield } from 'lucide-react';
+
+const AdminStaff = () => {
+  const [users, setUsers] = useState([]);
+  const [filteredUsers, setFilteredUsers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [roleFilter, setRoleFilter] = useState('all');
+
+  // Staff roles (non-guest, non-member)
+  const STAFF_ROLES = ['admin'];
+
+  useEffect(() => {
+    fetchStaff();
+  }, []);
+
+  useEffect(() => {
+    filterUsers();
+  }, [users, searchQuery, roleFilter]);
+
+  const fetchStaff = async () => {
+    try {
+      const response = await api.get('/admin/users');
+      // Filter to only staff roles
+      const staffUsers = response.data.filter(user =>
+        STAFF_ROLES.includes(user.role)
+      );
+      setUsers(staffUsers);
+    } catch (error) {
+      toast.error('Failed to fetch staff');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const filterUsers = () => {
+    let filtered = users;
+
+    if (roleFilter && roleFilter !== 'all') {
+      filtered = filtered.filter(user => user.role === roleFilter);
+    }
+
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      filtered = filtered.filter(user =>
+        user.first_name.toLowerCase().includes(query) ||
+        user.last_name.toLowerCase().includes(query) ||
+        user.email.toLowerCase().includes(query)
+      );
+    }
+
+    setFilteredUsers(filtered);
+  };
+
+  const getRoleBadge = (role) => {
+    const config = {
+      superadmin: { label: 'Superadmin', className: 'bg-[#E07A5F] text-white' },
+      admin: { label: 'Admin', className: 'bg-[#81B29A] text-white' },
+      moderator: { label: 'Moderator', className: 'bg-[#A3B1C6] text-white' },
+      staff: { label: 'Staff', className: 'bg-[#F2CC8F] text-[#3D405B]' },
+      media: { label: 'Media', className: 'bg-[#6B708D] text-white' }
+    };
+
+    const roleConfig = config[role] || { label: role, className: 'bg-gray-500 text-white' };
+    return (
+      <Badge className={`${roleConfig.className} px-3 py-1 rounded-full text-sm`}>
+        <Shield className="h-3 w-3 mr-1 inline" />
+        {roleConfig.label}
+      </Badge>
+    );
+  };
+
+  const getStatusBadge = (status) => {
+    const config = {
+      active: { label: 'Active', className: 'bg-[#81B29A] text-white' },
+      inactive: { label: 'Inactive', className: 'bg-[#6B708D] text-white' }
+    };
+
+    const statusConfig = config[status] || config.inactive;
+    return (
+      <Badge className={`${statusConfig.className} px-3 py-1 rounded-full text-sm`}>
+        {statusConfig.label}
+      </Badge>
+    );
+  };
+
+  return (
+    <>
+      <div className="mb-8">
+        <h1 className="text-4xl md:text-5xl font-semibold fraunces text-[#3D405B] mb-4">
+          Staff Management
+        </h1>
+        <p className="text-lg text-[#6B708D]">
+          Manage internal team members and their roles.
+        </p>
+      </div>
+
+      {/* Stats */}
+      <div className="grid md:grid-cols-4 gap-4 mb-8">
+        <Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5]">
+          <p className="text-sm text-[#6B708D] mb-2">Total Staff</p>
+          <p className="text-3xl font-semibold fraunces text-[#3D405B]">
+            {users.length}
+          </p>
+        </Card>
+        <Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5]">
+          <p className="text-sm text-[#6B708D] mb-2">Admins</p>
+          <p className="text-3xl font-semibold fraunces text-[#3D405B]">
+            {users.filter(u => ['admin', 'superadmin'].includes(u.role)).length}
+          </p>
+        </Card>
+        <Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5]">
+          <p className="text-sm text-[#6B708D] mb-2">Moderators</p>
+          <p className="text-3xl font-semibold fraunces text-[#3D405B]">
+            {users.filter(u => u.role === 'moderator').length}
+          </p>
+        </Card>
+        <Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5]">
+          <p className="text-sm text-[#6B708D] mb-2">Active</p>
+          <p className="text-3xl font-semibold fraunces text-[#3D405B]">
+            {users.filter(u => u.status === 'active').length}
+          </p>
+        </Card>
+      </div>
+
+      {/* Filters */}
+      <Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5] mb-8">
+        <div className="grid md:grid-cols-2 gap-4">
+          <div className="relative">
+            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[#6B708D]" />
+            <Input
+              placeholder="Search by name or email..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-12 h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+              data-testid="search-staff-input"
+            />
+          </div>
+          <Select value={roleFilter} onValueChange={setRoleFilter}>
+            <SelectTrigger className="h-14 rounded-xl border-2 border-[#EAE0D5]" data-testid="role-filter-select">
+              <SelectValue placeholder="Filter by role" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Roles</SelectItem>
+              <SelectItem value="superadmin">Superadmin</SelectItem>
+              <SelectItem value="admin">Admin</SelectItem>
+              <SelectItem value="moderator">Moderator</SelectItem>
+              <SelectItem value="staff">Staff</SelectItem>
+              <SelectItem value="media">Media</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </Card>
+
+      {/* Staff List */}
+      {loading ? (
+        <div className="text-center py-20">
+          <p className="text-[#6B708D]">Loading staff...</p>
+        </div>
+      ) : filteredUsers.length > 0 ? (
+        <div className="space-y-4">
+          {filteredUsers.map((user) => (
+            <Card
+              key={user.id}
+              className="p-6 bg-white rounded-2xl border border-[#EAE0D5] hover:shadow-md transition-shadow"
+              data-testid={`staff-card-${user.id}`}
+            >
+              <div className="flex justify-between items-start flex-wrap gap-4">
+                <div className="flex items-start gap-4 flex-1">
+                  {/* Avatar */}
+                  <div className="h-14 w-14 rounded-full bg-[#F2CC8F] flex items-center justify-center text-[#3D405B] font-semibold text-lg flex-shrink-0">
+                    {user.first_name?.[0]}{user.last_name?.[0]}
+                  </div>
+
+                  {/* Info */}
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-3 mb-2 flex-wrap">
+                      <h3 className="text-xl font-semibold fraunces text-[#3D405B]">
+                        {user.first_name} {user.last_name}
+                      </h3>
+                      {getRoleBadge(user.role)}
+                      {getStatusBadge(user.status)}
+                    </div>
+                    <div className="grid md:grid-cols-2 gap-2 text-sm text-[#6B708D]">
+                      <p>Email: {user.email}</p>
+                      <p>Phone: {user.phone}</p>
+                      <p>Joined: {new Date(user.created_at).toLocaleDateString()}</p>
+                      {user.last_login && (
+                        <p>Last Login: {new Date(user.last_login).toLocaleDateString()}</p>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+      ) : (
+        <div className="text-center py-20">
+          <UserCog className="h-20 w-20 text-[#EAE0D5] mx-auto mb-6" />
+          <h3 className="text-2xl font-semibold fraunces text-[#3D405B] mb-4">
+            No Staff Found
+          </h3>
+          <p className="text-[#6B708D]">
+            {searchQuery || roleFilter !== 'all'
+              ? 'Try adjusting your filters'
+              : 'No staff members yet'}
+          </p>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default AdminStaff;
--- a/src/pages/admin/AdminUserView.js
+++ b/src/pages/admin/AdminUserView.js
@@ -0,0 +1,151 @@
+import React, { useEffect, useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import api from '../../utils/api';
+import { Card } from '../../components/ui/card';
+import { Button } from '../../components/ui/button';
+import { Badge } from '../../components/ui/badge';
+import { ArrowLeft, Mail, Phone, MapPin, Calendar } from 'lucide-react';
+import { toast } from 'sonner';
+
+const AdminUserView = () => {
+  const { userId } = useParams();
+  const navigate = useNavigate();
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchUserProfile();
+  }, [userId]);
+
+  const fetchUserProfile = async () => {
+    try {
+      const response = await api.get(`/admin/users/${userId}`);
+      setUser(response.data);
+    } catch (error) {
+      toast.error('Failed to load user profile');
+      navigate('/admin/members');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) return <div>Loading...</div>;
+  if (!user) return null;
+
+  return (
+    <>
+      {/* Back Button */}
+      <Button
+        variant="ghost"
+        onClick={() => navigate(-1)}
+        className="mb-6"
+      >
+        <ArrowLeft className="h-4 w-4 mr-2" />
+        Back
+      </Button>
+
+      {/* User Profile Header */}
+      <Card className="p-8 bg-white rounded-2xl border border-[#EAE0D5] mb-8">
+        <div className="flex items-start gap-6">
+          {/* Avatar */}
+          <div className="h-24 w-24 rounded-full bg-[#F2CC8F] flex items-center justify-center text-[#3D405B] font-semibold text-3xl">
+            {user.first_name?.[0]}{user.last_name?.[0]}
+          </div>
+
+          {/* User Info */}
+          <div className="flex-1">
+            <div className="flex items-center gap-4 mb-4">
+              <h1 className="text-3xl font-semibold fraunces text-[#3D405B]">
+                {user.first_name} {user.last_name}
+              </h1>
+              {/* Status & Role Badges */}
+              <Badge>{user.status}</Badge>
+              <Badge>{user.role}</Badge>
+            </div>
+
+            {/* Contact Info */}
+            <div className="grid md:grid-cols-2 gap-4 text-[#6B708D]">
+              <div className="flex items-center gap-2">
+                <Mail className="h-4 w-4" />
+                <span>{user.email}</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Phone className="h-4 w-4" />
+                <span>{user.phone}</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <MapPin className="h-4 w-4" />
+                <span>{user.city}, {user.state} {user.zipcode}</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Calendar className="h-4 w-4" />
+                <span>Joined {new Date(user.created_at).toLocaleDateString()}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Card>
+
+      {/* Additional Details */}
+      <Card className="p-8 bg-white rounded-2xl border border-[#EAE0D5]">
+        <h2 className="text-2xl font-semibold fraunces text-[#3D405B] mb-6">
+          Additional Information
+        </h2>
+
+        <div className="grid md:grid-cols-2 gap-6">
+          <div>
+            <label className="text-sm font-medium text-[#6B708D]">Address</label>
+            <p className="text-[#3D405B] mt-1">{user.address}</p>
+          </div>
+
+          <div>
+            <label className="text-sm font-medium text-[#6B708D]">Date of Birth</label>
+            <p className="text-[#3D405B] mt-1">
+              {new Date(user.date_of_birth).toLocaleDateString()}
+            </p>
+          </div>
+
+          {user.partner_first_name && (
+            <div>
+              <label className="text-sm font-medium text-[#6B708D]">Partner</label>
+              <p className="text-[#3D405B] mt-1">
+                {user.partner_first_name} {user.partner_last_name}
+              </p>
+            </div>
+          )}
+
+          {user.referred_by_member_name && (
+            <div>
+              <label className="text-sm font-medium text-[#6B708D]">Referred By</label>
+              <p className="text-[#3D405B] mt-1">{user.referred_by_member_name}</p>
+            </div>
+          )}
+
+          {user.lead_sources && user.lead_sources.length > 0 && (
+            <div className="md:col-span-2">
+              <label className="text-sm font-medium text-[#6B708D]">Lead Sources</label>
+              <div className="flex flex-wrap gap-2 mt-2">
+                {user.lead_sources.map((source, idx) => (
+                  <Badge key={idx} variant="outline">{source}</Badge>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </Card>
+
+      {/* Subscription Info (if applicable) */}
+      {user.role === 'member' && (
+        <Card className="p-8 bg-white rounded-2xl border border-[#EAE0D5] mt-8">
+          <h2 className="text-2xl font-semibold fraunces text-[#3D405B] mb-6">
+            Subscription Information
+          </h2>
+          {/* TODO: Fetch and display subscription data */}
+          <p className="text-[#6B708D]">Subscription details coming soon...</p>
+        </Card>
+      )}
+    </>
+  );
+};
+
+export default AdminUserView;
--- a/src/pages/admin/AdminUsers.js
+++ b/src/pages/admin/AdminUsers.js
@@ -0,0 +1,200 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import api from '../../utils/api';
+import { Card } from '../../components/ui/card';
+import { Button } from '../../components/ui/button';
+import { Badge } from '../../components/ui/badge';
+import { Input } from '../../components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components/ui/select';
+import { toast } from 'sonner';
+import { Users, Search, CheckCircle, Clock } from 'lucide-react';
+
+const AdminUsers = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [users, setUsers] = useState([]);
+  const [filteredUsers, setFilteredUsers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [statusFilter, setStatusFilter] = useState('all');
+
+  const tabs = [
+    { name: 'All Users', path: '/admin/users' },
+    { name: 'Staff', path: '/admin/staff' },
+    { name: 'Members', path: '/admin/members' }
+  ];
+
+  useEffect(() => {
+    fetchUsers();
+  }, []);
+
+  useEffect(() => {
+    filterUsers();
+  }, [users, searchQuery, statusFilter]);
+
+  const fetchUsers = async () => {
+    try {
+      const response = await api.get('/admin/users');
+      setUsers(response.data);
+    } catch (error) {
+      toast.error('Failed to fetch users');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const filterUsers = () => {
+    let filtered = users;
+
+    if (statusFilter && statusFilter !== 'all') {
+      filtered = filtered.filter(user => user.status === statusFilter);
+    }
+
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      filtered = filtered.filter(user =>
+        user.first_name.toLowerCase().includes(query) ||
+        user.last_name.toLowerCase().includes(query) ||
+        user.email.toLowerCase().includes(query)
+      );
+    }
+
+    setFilteredUsers(filtered);
+  };
+
+  const getStatusBadge = (status) => {
+    const config = {
+      pending_email: { label: 'Pending Email', className: 'bg-[#F2CC8F] text-[#3D405B]' },
+      pending_approval: { label: 'Pending Approval', className: 'bg-[#A3B1C6] text-white' },
+      pre_approved: { label: 'Pre-Approved', className: 'bg-[#81B29A] text-white' },
+      payment_pending: { label: 'Payment Pending', className: 'bg-[#E07A5F] text-white' },
+      active: { label: 'Active', className: 'bg-[#81B29A] text-white' },
+      inactive: { label: 'Inactive', className: 'bg-[#6B708D] text-white' }
+    };
+
+    const statusConfig = config[status] || config.inactive;
+    return (
+      <Badge className={`${statusConfig.className} px-3 py-1 rounded-full text-sm`}>
+        {statusConfig.label}
+      </Badge>
+    );
+  };
+
+  return (
+    <>
+      <div className="mb-8">
+        <h1 className="text-4xl md:text-5xl font-semibold fraunces text-[#3D405B] mb-4">
+          User Management
+        </h1>
+        <p className="text-lg text-[#6B708D]">
+          View and manage all registered users.
+        </p>
+      </div>
+
+      {/* Tab Navigation */}
+      <div className="border-b border-[#EAE0D5] mb-8">
+        <nav className="flex gap-8">
+          {tabs.map((tab) => (
+            <button
+              key={tab.path}
+              onClick={() => navigate(tab.path)}
+              className={`
+                pb-4 px-2 font-medium transition-colors relative
+                ${location.pathname === tab.path
+                  ? 'text-[#E07A5F]'
+                  : 'text-[#6B708D] hover:text-[#3D405B]'
+                }
+              `}
+            >
+              {tab.name}
+              {location.pathname === tab.path && (
+                <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#E07A5F]" />
+              )}
+            </button>
+          ))}
+        </nav>
+      </div>
+
+      {/* Filters */}
+        <Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5] mb-8">
+          <div className="grid md:grid-cols-2 gap-4">
+            <div className="relative">
+              <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[#6B708D]" />
+              <Input
+                placeholder="Search by name or email..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-12 h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                data-testid="search-users-input"
+              />
+            </div>
+            <Select value={statusFilter} onValueChange={setStatusFilter}>
+              <SelectTrigger className="h-14 rounded-xl border-2 border-[#EAE0D5]" data-testid="status-filter-select">
+                <SelectValue placeholder="Filter by status" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Statuses</SelectItem>
+                <SelectItem value="pending_email">Pending Email</SelectItem>
+                <SelectItem value="pending_approval">Pending Approval</SelectItem>
+                <SelectItem value="pre_approved">Pre-Approved</SelectItem>
+                <SelectItem value="payment_pending">Payment Pending</SelectItem>
+                <SelectItem value="active">Active</SelectItem>
+                <SelectItem value="inactive">Inactive</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </Card>
+
+        {/* Users List */}
+        {loading ? (
+          <div className="text-center py-20">
+            <p className="text-[#6B708D]">Loading users...</p>
+          </div>
+        ) : filteredUsers.length > 0 ? (
+          <div className="space-y-4">
+            {filteredUsers.map((user) => (
+              <Card
+                key={user.id}
+                className="p-6 bg-white rounded-2xl border border-[#EAE0D5] hover:shadow-md transition-shadow"
+                data-testid={`user-card-${user.id}`}
+              >
+                <div className="flex justify-between items-start flex-wrap gap-4">
+                  <div className="flex-1">
+                    <div className="flex items-center gap-3 mb-2">
+                      <h3 className="text-xl font-semibold fraunces text-[#3D405B]">
+                        {user.first_name} {user.last_name}
+                      </h3>
+                      {getStatusBadge(user.status)}
+                    </div>
+                    <div className="grid md:grid-cols-2 gap-2 text-sm text-[#6B708D]">
+                      <p>Email: {user.email}</p>
+                      <p>Phone: {user.phone}</p>
+                      <p>Role: <span className="capitalize">{user.role}</span></p>
+                      <p>Joined: {new Date(user.created_at).toLocaleDateString()}</p>
+                      {user.referred_by_member_name && (
+                        <p className="col-span-2">Referred by: {user.referred_by_member_name}</p>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </Card>
+            ))}
+          </div>
+        ) : (
+          <div className="text-center py-20">
+            <Users className="h-20 w-20 text-[#EAE0D5] mx-auto mb-6" />
+            <h3 className="text-2xl font-semibold fraunces text-[#3D405B] mb-4">
+              No Users Found
+            </h3>
+            <p className="text-[#6B708D]">
+              {searchQuery || statusFilter !== 'all'
+                ? 'Try adjusting your filters'
+                : 'No users registered yet'}
+            </p>
+          </div>
+        )}
+    </>
+  );
+};
+
+export default AdminUsers;
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -0,0 +1,17 @@
+import axios from 'axios';
+
+const API_URL = process.env.REACT_APP_BACKEND_URL;
+
+export const api = axios.create({
+  baseURL: `${API_URL}/api`,
+});
+
+api.interceptors.request.use((config) => {
+  const token = localStorage.getItem('token');
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+export default api;
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,82 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    darkMode: ["class"],
+    content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+    "./public/index.html"
+  ],
+  theme: {
+  	extend: {
+  		borderRadius: {
+  			lg: 'var(--radius)',
+  			md: 'calc(var(--radius) - 2px)',
+  			sm: 'calc(var(--radius) - 4px)'
+  		},
+  		colors: {
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			card: {
+  				DEFAULT: 'hsl(var(--card))',
+  				foreground: 'hsl(var(--card-foreground))'
+  			},
+  			popover: {
+  				DEFAULT: 'hsl(var(--popover))',
+  				foreground: 'hsl(var(--popover-foreground))'
+  			},
+  			primary: {
+  				DEFAULT: 'hsl(var(--primary))',
+  				foreground: 'hsl(var(--primary-foreground))'
+  			},
+  			secondary: {
+  				DEFAULT: 'hsl(var(--secondary))',
+  				foreground: 'hsl(var(--secondary-foreground))'
+  			},
+  			muted: {
+  				DEFAULT: 'hsl(var(--muted))',
+  				foreground: 'hsl(var(--muted-foreground))'
+  			},
+  			accent: {
+  				DEFAULT: 'hsl(var(--accent))',
+  				foreground: 'hsl(var(--accent-foreground))'
+  			},
+  			destructive: {
+  				DEFAULT: 'hsl(var(--destructive))',
+  				foreground: 'hsl(var(--destructive-foreground))'
+  			},
+  			border: 'hsl(var(--border))',
+  			input: 'hsl(var(--input))',
+  			ring: 'hsl(var(--ring))',
+  			chart: {
+  				'1': 'hsl(var(--chart-1))',
+  				'2': 'hsl(var(--chart-2))',
+  				'3': 'hsl(var(--chart-3))',
+  				'4': 'hsl(var(--chart-4))',
+  				'5': 'hsl(var(--chart-5))'
+  			}
+  		},
+  		keyframes: {
+  			'accordion-down': {
+  				from: {
+  					height: '0'
+  				},
+  				to: {
+  					height: 'var(--radix-accordion-content-height)'
+  				}
+  			},
+  			'accordion-up': {
+  				from: {
+  					height: 'var(--radix-accordion-content-height)'
+  				},
+  				to: {
+  					height: '0'
+  				}
+  			}
+  		},
+  		animation: {
+  			'accordion-down': 'accordion-down 0.2s ease-out',
+  			'accordion-up': 'accordion-up 0.2s ease-out'
+  		}
+  	}
+  },
+  plugins: [require("tailwindcss-animate")],
+};
--- a/yarn.lock
+++ b/yarn.lock