feat: New design for website and dashboard + 8ball fix

.gitignore

···
 node_modules
 .env
 dist
-logs
+logs
+.env.web

src/commands/fun/8ball.ts

···
   type MessageActionRowComponentBuilder,
 } from 'discord.js';
 import { validateCommandOptions, sanitizeInput } from '@/utils/validation';
-import { SlashCommandProps } from '@/types/command';
 import { random } from '@/utils/misc';
 import {
   createCooldownManager,
···
 } from '@/utils/cooldown';
 import { createCommandLogger } from '@/utils/commandLogger';
 import { createErrorHandler } from '@/utils/errorHandler';
+import { createMemoryManager } from '@/utils/memoryManager';
 
 const responses = [
   'itiscertain',
···
 const commandLogger = createCommandLogger('8ball');
 const errorHandler = createErrorHandler('8ball');
 
-export default {
+const questionStorage = createMemoryManager<string, string>({
+  maxSize: 1000,
+  maxAge: 5 * 60 * 1000,
+  cleanupInterval: 60 * 1000,
+});
+
+const eightBallCommand = {
   data: new SlashCommandBuilder()
     .setName('8ball')
     .setNameLocalizations({
···
     ])
     .setIntegrationTypes(ApplicationIntegrationType.UserInstall),
 
-  execute: async (client, interaction) => {
+  questionStorage,
+
+  execute: async (client: any, interaction: any) => {
     try {
       const cooldownCheck = await checkCooldown(
         cooldownManager,
···
         await client.getLocaleText('commands.8ball.askagain', interaction.locale),
       ]);
 
+      const interactionId = `${interaction.user.id}_${Date.now()}`;
+      questionStorage.set(interactionId, question);
+
       const container = new ContainerBuilder()
         .setAccentColor(0x8b5cf6)
         .addTextDisplayComponents(new TextDisplayBuilder().setContent(`# 🔮 ${title}`))
···
               .setStyle(ButtonStyle.Primary)
               .setLabel(askAgainLabel)
               .setEmoji({ name: '🎱' })
-              .setCustomId(
-                `8ball_reroll_${interaction.user.id}_${Date.now()}_${encodeURIComponent(question)}`
-              )
+              .setCustomId(`8ball_reroll_${interactionId}`)
           )
         );
 
···
       });
     }
   },
-} as SlashCommandProps;
+};
+
+export default eightBallCommand;

src/events/interactionCreate.ts

···
             });
           }
         } else if (i.customId.startsWith('8ball_reroll_')) {
-          const customIdParts = i.customId.split('_');
-          const originalUserId = customIdParts[2];
+          const interactionId = i.customId.replace('8ball_reroll_', '');
+          const originalUserId = interactionId.split('_')[0];
 
           if (originalUserId !== i.user.id) {
             return await i.reply({
···
             });
           }
 
+          const eightBallCommand = this.client.commands.get('8ball');
           let question = 'What will happen?';
 
-          try {
-            const customIdParts = i.customId.split('_');
-            if (customIdParts.length >= 5) {
-              const encodedQuestion = customIdParts.slice(4).join('_');
-              question = decodeURIComponent(encodedQuestion);
+          if (eightBallCommand && 'questionStorage' in eightBallCommand) {
+            const storedQuestion = (
+              eightBallCommand as { questionStorage: { get: (id: string) => string | undefined } }
+            ).questionStorage.get(interactionId);
+            if (storedQuestion) {
+              question = storedQuestion;
             }
-          } catch (error) {
-            console.log('Error extracting question:', error);
           }
 
           const responses = [
···
             i.locale
           );
 
+          const newInteractionId = `${i.user.id}_${Date.now()}`;
+          if (eightBallCommand && 'questionStorage' in eightBallCommand) {
+            (
+              eightBallCommand as { questionStorage: { set: (id: string, value: string) => void } }
+            ).questionStorage.set(newInteractionId, question);
+          }
+
           const container = new ContainerBuilder()
             .setAccentColor(0x8b5cf6)
             .addTextDisplayComponents(new TextDisplayBuilder().setContent(`# 🔮 ${title}`))
···
                   .setStyle(ButtonStyle.Primary)
                   .setLabel(askAgainLabel)
                   .setEmoji({ name: '🎱' })
-                  .setCustomId(
-                    `8ball_reroll_${i.user.id}_${Date.now()}_${encodeURIComponent(question)}`
-                  )
+                  .setCustomId(`8ball_reroll_${newInteractionId}`)
               )
             );
 

src/index.ts

···
       ? ALLOWED_ORIGINS.split(',')
       : ['http://localhost:3000', 'http://localhost:8080'],
     methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
-    allowedHeaders: ['Content-Type', 'X-API-Key', 'Authorization'],
+    allowedHeaders: ['Content-Type', 'X-API-Key', 'Authorization', 'Cache-Control', 'Pragma'],
     credentials: true,
     maxAge: 86400,
   })

src/routes/auth.ts

···
 const DISCORD_REDIRECT_URI =
   process.env.DISCORD_REDIRECT_URI || 'http://localhost:8080/api/auth/discord/callback';
 const JWT_SECRET = process.env.JWT_SECRET || 'your-jwt-secret';
-const FRONTEND_URL = process.env.FRONTEND_URL || 'http://localhost:3000';
+const FRONTEND_URL = process.env.FRONTEND_URL || 'http://localhost:2020';
 
 interface DiscordUser {
   id: string;

web/index.html

···
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Aethel Dashboard</title>
+    <title>Aethel</title>
+    <meta name="description" content="A powerful and cute Discord bot that brings AI chat, weather updates, Wikipedia search, reminders, and fun commands to your DMs and guilds!" />
+    <meta name="keywords" content="discord bot, ai chat, weather bot, reminder bot, discord commands, wikipedia search, pet images" />
+    <meta name="author" content="Aethel Labs and scanash00" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

web/package.json

···
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
   },
   "dependencies": {
+    "@heroicons/react": "^2.2.0",
     "@tanstack/react-query": "^5.83.0",
     "axios": "^1.10.0",
+    "dotenv": "^17.2.0",
     "lucide-react": "^0.294.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.5.0",
     "react-router-dom": "^6.30.1",
     "sonner": "^1.7.4",
     "zustand": "^4.5.7"

web/pnpm-lock.yaml

···
 
   .:
     dependencies:
+      '@heroicons/react':
+        specifier: ^2.2.0
+        version: 2.2.0(react@18.3.1)
       '@tanstack/react-query':
         specifier: ^5.83.0
         version: 5.83.0(react@18.3.1)
       axios:
         specifier: ^1.10.0
         version: 1.10.0
+      dotenv:
+        specifier: ^17.2.0
+        version: 17.2.0
       lucide-react:
         specifier: ^0.294.0
         version: 0.294.0(react@18.3.1)
···
       react-dom:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
+      react-icons:
+        specifier: ^5.5.0
+        version: 5.5.0(react@18.3.1)
       react-router-dom:
         specifier: ^6.30.1
         version: 6.30.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
···
   '@eslint/js@8.57.1':
     resolution: {integrity: sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  '@heroicons/react@2.2.0':
+    resolution: {integrity: sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==}
+    peerDependencies:
+      react: '>= 16 || ^19.0.0-rc'
 
   '@humanwhocodes/config-array@0.13.0':
     resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==}
···
     resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
     engines: {node: '>=6.0.0'}
 
+  dotenv@17.2.0:
+    resolution: {integrity: sha512-Q4sgBT60gzd0BB0lSyYD3xM4YxrXA9y4uBDof1JNYGzOXrQdQ6yX+7XIAqoFOGQFOTK1D3Hts5OllpxMDZFONQ==}
+    engines: {node: '>=12'}
+
   dunder-proto@1.0.1:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
···
     peerDependencies:
       react: ^18.3.1
 
+  react-icons@5.5.0:
+    resolution: {integrity: sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==}
+    peerDependencies:
+      react: '*'
+
   react-refresh@0.17.0:
     resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
     engines: {node: '>=0.10.0'}
···
 
   '@eslint/js@8.57.1': {}
 
+  '@heroicons/react@2.2.0(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+
   '@humanwhocodes/config-array@0.13.0':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.3
···
   doctrine@3.0.0:
     dependencies:
       esutils: 2.0.3
+
+  dotenv@17.2.0: {}
 
   dunder-proto@1.0.1:
     dependencies:
···
       loose-envify: 1.4.0
       react: 18.3.1
       scheduler: 0.23.2
+
+  react-icons@5.5.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
 
   react-refresh@0.17.0: {}
 

web/src/components/Footer.tsx

···
+import { Link } from 'react-router-dom';
+import { FaGithub } from 'react-icons/fa';
+
+export default function Footer() {
+  const currentYear = new Date().getFullYear();
+  
+  const navigation = {
+    main: [
+      { name: 'Home', href: '/' },
+      { name: 'Status', href: '/status' },
+    ],
+    legal: [
+      { name: 'Privacy', href: '/legal/privacy' },
+      { name: 'Terms', href: '/legal/terms' },
+    ],
+    social: [
+      {
+        name: 'GitHub',
+        href: 'https://github.com/aethel-labs/aethel',
+        icon: FaGithub,
+      },
+    ],
+  };
+
+  return (
+    <footer className="bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800 mt-16">
+      <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
+        <div className="xl:grid xl:grid-cols-3 xl:gap-8">
+          <div className="space-y-8 xl:col-span-1">
+            <div className="flex items-center space-x-3">
+              <div className="w-10 h-10 rounded-lg overflow-hidden">
+                <img 
+                  src="/bot_icon.png" 
+                  alt="Bot Icon" 
+                  className="w-full h-full object-cover"
+                  width={40}
+                  height={40}
+                />
+              </div>
+              <span className="text-xl font-bold text-gray-900 dark:text-white">Aethel</span>
+            </div>
+            <p className="text-gray-500 dark:text-gray-400 text-base">
+              A feature-rich Discord bot for your account.
+            </p>
+            <div className="flex space-x-6">
+              {navigation.social.map((item) => (
+                <a
+                  key={item.name}
+                  href={item.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-gray-400 hover:text-sky-600 dark:hover:text-sky-400 transition-colors"
+                >
+                  <span className="sr-only">{item.name}</span>
+                  <item.icon className="h-6 w-6" aria-hidden="true" />
+                </a>
+              ))}
+            </div>
+          </div>
+          <div className="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
+            <div className="md:grid md:grid-cols-2 md:gap-8">
+              <div>
+                <h3 className="text-sm font-semibold text-gray-900 dark:text-white tracking-wider uppercase">
+                  Navigation
+                </h3>
+                <ul role="list" className="mt-4 space-y-4">
+                  {navigation.main.map((item) => (
+                    <li key={item.name}>
+                      <Link
+                        to={item.href}
+                        className="text-base text-gray-500 hover:text-sky-600 dark:hover:text-sky-400 transition-colors"
+                      >
+                        {item.name}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+              <div className="mt-12 md:mt-0">
+                <h3 className="text-sm font-semibold text-gray-900 dark:text-white tracking-wider uppercase">
+                  Legal
+                </h3>
+                <ul role="list" className="mt-4 space-y-4">
+                  {navigation.legal.map((item) => (
+                    <li key={item.name}>
+                      <Link
+                        to={item.href}
+                        className="text-base text-gray-500 hover:text-sky-600 dark:hover:text-sky-400 transition-colors"
+                      >
+                        {item.name}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="mt-12 border-t border-gray-200 dark:border-gray-800 pt-8">
+          <p className="text-base text-gray-500 dark:text-gray-400 text-center">
+            &copy; {currentYear} Aethel Labs.{' '}
+            <a 
+              href="https://github.com/Aethel-Labs/aethel/blob/main/LICENSE" 
+              target="_blank" 
+              rel="noopener noreferrer"
+              className="text-sky-600 hover:text-sky-700 dark:text-sky-400 dark:hover:text-sky-300 transition-colors"
+            >
+              MIT License
+            </a>
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}

web/src/components/Layout.tsx

···
   Bell,
   Menu, 
   X, 
-  LogOut,
-  User
+  LogOut
 } from 'lucide-react'
 import { useAuthStore } from '../stores/authStore'
 import { toast } from 'sonner'
+
 
 interface LayoutProps {
   children: ReactNode
···
   }
 
   return (
-    <div className="min-h-screen bg-[#0A0A0A]">
-      {/* Mobile sidebar */}
-      <div className={`fixed inset-0 z-50 lg:hidden ${
-        sidebarOpen ? 'block' : 'hidden'
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800">
+      <div className={`fixed inset-0 z-50 lg:hidden transition-opacity duration-300 ${
+        sidebarOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
       }`}>
-        <div className="fixed inset-0 bg-gray-600 bg-opacity-75" onClick={() => setSidebarOpen(false)} />
-        <div className="fixed inset-y-0 left-0 flex w-64 flex-col bg-gray-900/50 border-r border-gray-700">
-          <div className="flex h-16 items-center justify-between px-4">
-            <h1 className="text-xl font-bold text-white">Aethel</h1>
+        <div className="fixed inset-0 bg-black/70" onClick={() => setSidebarOpen(false)} />
+        <div className={`fixed inset-y-0 left-0 flex w-64 flex-col bg-white/95 dark:bg-slate-800/95 backdrop-blur-sm border-r border-slate-200/50 dark:border-slate-700/50 shadow-xl transform transition-transform duration-300 ease-out ${
+          sidebarOpen ? 'translate-x-0' : '-translate-x-full'
+        }`}>
+          <div className="flex h-14 items-center justify-between px-5 border-b border-slate-200/50 dark:border-slate-700/50">
+             <div className="flex items-center space-x-3">
+               <img
+                 className="w-7 h-7 rounded-lg"
+                 src="/bot_icon.png"
+                 alt="Aethel Bot"
+               />
+               <h1 className="text-lg font-bold text-slate-900 dark:text-white">Aethel</h1>
+             </div>
             <button
               onClick={() => setSidebarOpen(false)}
-              className="text-gray-400 hover:text-gray-600"
+              className="p-2 text-slate-500 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition-colors"
             >
-              <X className="h-6 w-6" />
+              <X className="h-4 w-4" />
             </button>
           </div>
-          <nav className="flex-1 space-y-1 px-2 py-4">
+          <nav className="flex-1 space-y-1 px-3 py-4">
             {navigation.map((item) => {
               const Icon = item.icon
               const isActive = location.pathname === item.href
···
                   key={item.name}
                   to={item.href}
                   onClick={() => setSidebarOpen(false)}
-                  className={`group flex items-center px-2 py-2 text-sm font-medium rounded-lg ${
-                    isActive
-                      ? 'bg-gray-800 text-white'
-                      : 'text-gray-300 hover:bg-gray-700 hover:text-white'
-                  }`}
+                  className={`group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 ${
+                     isActive
+                       ? 'bg-gradient-to-r from-blue-500 to-indigo-600 text-white shadow-md'
+                       : 'text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 hover:text-slate-900 dark:hover:text-white'
+                   }`}
                 >
-                  <Icon className="mr-3 h-5 w-5" />
+                  <Icon className={`mr-3 h-4 w-4 flex-shrink-0 ${
+                     isActive ? 'text-white' : 'text-slate-500 dark:text-slate-400 group-hover:text-blue-500'
+                   }`} />
                   {item.name}
                 </Link>
               )
···
         </div>
       </div>
 
-      {/* Desktop sidebar */}
       <div className="hidden lg:fixed lg:inset-y-0 lg:flex lg:w-64 lg:flex-col">
-        <div className="flex flex-col flex-grow bg-gray-900/50 border-r border-gray-700">
-          <div className="flex h-16 items-center px-4">
-            <h1 className="text-xl font-bold text-white">Aethel Dashboard</h1>
+        <div className="flex flex-col flex-grow bg-white/95 dark:bg-slate-800/95 backdrop-blur-sm border-r border-slate-200/50 dark:border-slate-700/50">
+          <div className="flex h-14 items-center px-5 border-b border-slate-200/50 dark:border-slate-700/50">
+             <div className="flex items-center space-x-3">
+               <img
+                 className="w-7 h-7 rounded-lg"
+                 src="/bot_icon.png"
+                 alt="Aethel Bot"
+               />
+               <h1 className="text-lg font-bold text-slate-900 dark:text-white">Aethel</h1>
+             </div>
           </div>
-          <nav className="flex-1 space-y-1 px-2 py-4">
+          <nav className="flex-1 space-y-1 px-3 py-4">
             {navigation.map((item) => {
               const Icon = item.icon
               const isActive = location.pathname === item.href
···
                 <Link
                   key={item.name}
                   to={item.href}
-                  className={`group flex items-center px-2 py-2 text-sm font-medium rounded-lg ${
-                    isActive
-                      ? 'bg-gray-800 text-white'
-                      : 'text-gray-300 hover:bg-gray-700 hover:text-white'
-                  }`}
+                  className={`group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 ${
+                     isActive
+                       ? 'bg-gradient-to-r from-blue-500 to-indigo-600 text-white shadow-md'
+                       : 'text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 hover:text-slate-900 dark:hover:text-white'
+                   }`}
                 >
-                  <Icon className="mr-3 h-5 w-5" />
+                  <Icon className={`mr-3 h-4 w-4 flex-shrink-0 ${
+                     isActive ? 'text-white' : 'text-slate-500 dark:text-slate-400 group-hover:text-blue-500'
+                   }`} />
                   {item.name}
                 </Link>
               )
             })}
           </nav>
           
-          {/* User info and logout */}
-          <div className="border-t border-gray-700 p-4">
-            <div className="flex items-center mb-3">
+          <div className="border-t border-slate-200/50 dark:border-slate-700/50 p-4">
+            <div className="flex items-center mb-4 p-2 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
               <div className="flex-shrink-0">
                 {user?.avatar ? (
                   <img
-                    className="h-8 w-8 rounded-full"
+                    className="h-9 w-9 rounded-full ring-2 ring-slate-200 dark:ring-slate-600"
                     src={`https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png`}
                     alt={user.username}
                   />
                 ) : (
-                  <div className="h-8 w-8 rounded-full bg-gray-800 flex items-center justify-center">
-                    <User className="h-4 w-4 text-white" />
+                  <div className="h-9 w-9 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center ring-2 ring-slate-200 dark:ring-slate-600">
+                    <img
+                      className="h-5 w-5"
+                      src="/bot_icon.png"
+                      alt="Bot Icon"
+                    />
                   </div>
                 )}
               </div>
-              <div className="ml-3">
-                <p className="text-sm font-medium text-gray-300">
+              <div className="ml-3 flex-1 min-w-0">
+                <p className="text-sm font-medium text-slate-900 dark:text-white truncate">
                   {user?.discriminator && user.discriminator !== '0' 
                     ? `${user.username}#${user.discriminator}` 
                     : user?.username}
+                </p>
+                <p className="text-xs text-slate-500 dark:text-slate-400 truncate">
+                  {user?.email}
                 </p>
               </div>
             </div>
             <button
               onClick={handleLogout}
-              className="flex w-full items-center px-2 py-2 text-sm font-medium text-gray-300 rounded-lg hover:bg-gray-700 hover:text-white"
+              className="flex w-full items-center px-3 py-2.5 text-sm font-medium text-slate-700 dark:text-slate-300 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 hover:text-red-600 dark:hover:text-red-400 transition-all duration-200 group"
             >
-              <LogOut className="mr-3 h-5 w-5" />
+              <LogOut className="mr-3 h-4 w-4 flex-shrink-0 group-hover:text-red-500" />
               Logout
             </button>
           </div>
         </div>
       </div>
 
-      {/* Main content */}
       <div className="lg:pl-64">
-        {/* Mobile header */}
-        <div className="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-700 bg-gray-900/50 px-4 shadow-sm lg:hidden">
+        <div className="sticky top-0 z-40 flex h-14 shrink-0 items-center gap-x-4 border-b border-slate-200/50 dark:border-slate-700/50 bg-white/95 dark:bg-slate-800/95 backdrop-blur-sm px-4 lg:hidden">
           <button
             type="button"
-            className="-m-2.5 p-2.5 text-gray-300 lg:hidden"
+            className="p-2 text-slate-500 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition-colors lg:hidden"
             onClick={() => setSidebarOpen(true)}
           >
-            <Menu className="h-6 w-6" />
+            <Menu className="h-5 w-5" />
           </button>
-          <div className="flex-1 text-sm font-semibold leading-6 text-white">
-            Aethel Dashboard
+          <div className="flex-1 flex items-center space-x-3">
+            <img
+              className="w-7 h-7 rounded-lg"
+              src="/bot_icon.png"
+              alt="Aethel Bot"
+            />
+            <span className="text-lg font-bold text-slate-900 dark:text-white">
+              Aethel
+            </span>
           </div>
         </div>
 
-        {/* Page content */}
-        <main className="pt-20 pb-12">
-          <div className="mx-auto max-w-6xl px-12 sm:px-16 lg:px-20">
+        <main className="p-4 lg:p-6">
+          <div className="mx-auto max-w-7xl">
             {children}
           </div>
         </main>

web/src/components/LegalLayout.tsx

···
+import { ReactNode } from 'react';
+import { Link } from 'react-router-dom';
+
+interface LegalLayoutProps {
+  title: string;
+  lastUpdated: string;
+  children: ReactNode;
+}
+
+export function LegalLayout({ title, lastUpdated, children }: LegalLayoutProps) {
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-5xl mx-auto">
+        <div className="text-center mb-8">
+          <Link
+            to="/"
+            className="inline-flex items-center text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors mb-6"
+          >
+            <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+            </svg>
+            Back to Home
+          </Link>
+          <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-2">{title}</h1>
+          <div className="w-24 h-1 bg-sky-500 mx-auto my-4 rounded-full"></div>
+          <p className="text-sm text-gray-500 dark:text-gray-400">Last Updated: {lastUpdated}</p>
+        </div>
+        
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
+          <div className="p-8 sm:p-10 lg:p-12">
+            <div className="prose dark:prose-invert max-w-none">
+              {children}
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  );
+}
+
+export default LegalLayout;

web/src/pages/DashboardPage.tsx

···
 import { useQuery } from '@tanstack/react-query'
-import { CheckSquare, Key, Clock, TrendingUp, Bell, AlertCircle } from 'lucide-react'
+import { CheckSquare, Key, Clock, TrendingUp, Bell, AlertCircle, User } from 'lucide-react'
 import { todosAPI, apiKeysAPI, remindersAPI } from '../lib/api'
 import { useAuthStore } from '../stores/authStore'
 import { useEffect, useState } from 'react'
···
 const DashboardPage = () => {
   const { user } = useAuthStore()
   const [notifications, setNotifications] = useState<any[]>([])
+
 
   const { data: todos } = useQuery({
     queryKey: ['todos'],
···
   const { data: activeReminders } = useQuery({
     queryKey: ['active-reminders'],
     queryFn: () => remindersAPI.getActiveReminders().then(res => res.data.reminders),
-    refetchInterval: 30000, // Check every 30 seconds
+    refetchInterval: 30000,
   })
 
   const completedTodos = todos?.filter((todo: any) => todo.done).length || 0
···
       name: 'Total Todos',
       value: totalTodos,
       icon: CheckSquare,
-      color: 'text-blue-600',
-      bgColor: 'bg-blue-100',
     },
     {
       name: 'Completed',
       value: completedTodos,
       icon: TrendingUp,
-      color: 'text-green-600',
-      bgColor: 'bg-green-100',
     },
     {
       name: 'Pending',
       value: pendingTodos,
       icon: Clock,
-      color: 'text-yellow-600',
-      bgColor: 'bg-yellow-100',
     },
     {
       name: 'Active Reminders',
       value: activeRemindersCount,
       icon: Bell,
-      color: overdueReminders.length > 0 ? 'text-red-600' : 'text-blue-600',
-      bgColor: overdueReminders.length > 0 ? 'bg-red-100' : 'bg-blue-100',
     },
     {
       name: 'API Key',
       value: hasApiKey ? 'Configured' : 'Not Set',
       icon: Key,
-      color: hasApiKey ? 'text-green-600' : 'text-red-600',
-      bgColor: hasApiKey ? 'bg-green-100' : 'bg-red-100',
     },
   ]
 
···
     }
   }, [overdueReminders])
 
+
+
   const handleCompleteReminder = async (id: string) => {
     try {
       await remindersAPI.completeReminder(id)
···
     }
   }
 
-  const formatDate = (dateString: string) => {
-    const date = new Date(dateString)
-    return date.toLocaleString()
-  }
+  
 
-  const isExpired = (dateString: string) => {
-    return new Date(dateString) < new Date()
-  }
 
   return (
     <div className="space-y-6">
-      {/* Header */}
-      <div>
-        <h1 className="text-2xl font-bold text-white">
-          Welcome back, {user?.username}!
-        </h1>
-        <p className="text-gray-400">
-          Here's an overview of your todos and settings.
-        </p>
+      <div className="relative bg-white dark:bg-slate-800/50 backdrop-blur-sm p-6 rounded-xl border border-slate-200/50 dark:border-slate-700/50 transition-all duration-300">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-4">
+            <div className="w-12 h-12 bg-blue-600 rounded-xl flex items-center justify-center">
+              <User className="h-6 w-6 text-white" />
+            </div>
+            <div>
+              <h1 className="text-2xl font-semibold text-slate-900 dark:text-white">
+                Welcome back, {user?.username}!
+              </h1>
+              <p className="text-slate-600 dark:text-slate-400 text-sm">
+                Here's your productivity overview for today.
+              </p>
+            </div>
+          </div>
+          <div className="hidden lg:block">
+            <div className="text-right">
+              <p className="text-slate-500 dark:text-slate-400 text-xs">{new Date().toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</p>
+              <p className="text-slate-700 dark:text-slate-300 text-lg font-semibold">{new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })}</p>
+            </div>
+          </div>
+        </div>
       </div>
 
-      {/* Stats Grid */}
-      <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
-        {stats.map((stat) => {
+      <div className="grid grid-cols-2 lg:grid-cols-5 gap-4">
+        {stats.map((stat, index) => {
           const Icon = stat.icon
+          const colors = [
+            'bg-blue-600',
+            'bg-emerald-600', 
+            'bg-orange-500',
+            'bg-purple-600',
+            'bg-indigo-600'
+          ]
+          
           return (
-            <div key={stat.name} className="bg-gray-900/50 border border-gray-700 rounded-lg p-5">
-              <div className="flex items-center">
-                <div className="flex-shrink-0">
-                  <div className={`p-3 rounded-lg ${stat.bgColor}`}>
-                    <Icon className={`h-6 w-6 ${stat.color}`} />
-                  </div>
+             <div 
+               key={stat.name}
+               className="relative bg-white/80 dark:bg-slate-800/50 backdrop-blur-sm p-4 rounded-xl border border-slate-200/50 dark:border-slate-700/50 transition-all duration-300"
+             >
+               <div className="flex items-center justify-between mb-3">
+                <div className={`w-10 h-10 ${colors[index]} rounded-lg flex items-center justify-center`}>
+                  <Icon className="h-5 w-5 text-white" />
                 </div>
-                <div className="ml-5 w-0 flex-1">
-                  <dl>
-                    <dt className="text-sm font-medium text-gray-400 truncate">
-                      {stat.name}
-                    </dt>
-                    <dd className="text-lg font-medium text-white">
-                      {stat.value}
-                    </dd>
-                  </dl>
-                </div>
+              </div>
+              <div>
+                <p className="text-2xl font-bold text-slate-900 dark:text-white mb-1">{stat.value}</p>
+                <p className="text-xs font-medium text-slate-600 dark:text-slate-400">{stat.name}</p>
               </div>
             </div>
           )
         })}
       </div>
 
-      {/* Overdue Reminders Alert */}
       {overdueReminders.length > 0 && (
-        <div className="bg-red-900/20 border border-red-700 rounded-lg p-4">
-          <div className="flex items-center">
-            <AlertCircle className="h-5 w-5 text-red-600 mr-2" />
-            <h3 className="text-sm font-medium text-red-300">
-              You have {overdueReminders.length} overdue reminder{overdueReminders.length > 1 ? 's' : ''}
-            </h3>
+        <div className="bg-red-900/20 border border-red-600 p-6 rounded-lg">
+          <div className="flex items-center mb-4">
+            <div className="w-12 h-12 bg-red-600 rounded-lg flex items-center justify-center mr-4">
+              <AlertCircle className="h-6 w-6 text-white" />
+            </div>
+            <div>
+              <h3 className="text-xl font-bold text-white mb-1">
+                Overdue Reminders
+              </h3>
+              <p className="text-red-200 text-sm">
+                You have {overdueReminders.length} reminder{overdueReminders.length > 1 ? 's' : ''} that need immediate attention
+              </p>
+            </div>
           </div>
-          <div className="mt-2 space-y-1">
+          <div className="space-y-3">
             {overdueReminders.slice(0, 3).map((reminder: any) => (
-              <div key={reminder.reminder_id} className="flex items-center justify-between">
-                <p className="text-sm text-red-200 truncate">{reminder.message}</p>
-                <button
-                  onClick={() => handleCompleteReminder(reminder.reminder_id)}
-                  className="text-xs bg-red-600 hover:bg-red-700 text-white px-2 py-1 rounded transition-colors"
-                >
-                  Complete
-                </button>
+              <div key={reminder.reminder_id} className="bg-slate-800 border border-red-600 rounded-lg p-4 hover:bg-slate-700 transition-colors">
+                <div className="flex items-center justify-between">
+                  <div className="flex-1 mr-4">
+                    <p className="text-white font-semibold mb-1">{reminder.message}</p>
+                    <div className="flex items-center space-x-4 text-sm">
+                      <p className="text-red-300">
+                        Due: {new Date(reminder.expires_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
+                      </p>
+                      <span className="px-2 py-1 bg-red-600 text-white rounded text-xs">
+                        {Math.ceil((Date.now() - new Date(reminder.expires_at).getTime()) / (1000 * 60 * 60 * 24))} days overdue
+                      </span>
+                    </div>
+                  </div>
+                  <button
+                    onClick={() => handleCompleteReminder(reminder.reminder_id)}
+                    className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg transition-colors font-medium"
+                  >
+                    ✓ Complete
+                  </button>
+                </div>
               </div>
             ))}
             {overdueReminders.length > 3 && (
-              <p className="text-xs text-red-400">And {overdueReminders.length - 3} more...</p>
+              <div className="text-center pt-3">
+                <p className="text-red-300 text-sm">And {overdueReminders.length - 3} more overdue reminders...</p>
+                <a href="/reminders" className="mt-2 text-red-400 hover:text-red-300 text-sm underline">
+                  View all overdue reminders →
+                </a>
+              </div>
             )}
           </div>
         </div>
       )}
 
-      {/* Recent Activity */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        {/* Recent Todos */}
-        <div className="bg-gray-900/50 border border-gray-700 rounded-lg p-6">
+      <div className="relative bg-white/80 dark:bg-slate-800/50 backdrop-blur-sm p-6 rounded-xl border border-slate-200/50 dark:border-slate-700/50 transition-all duration-300">
+        <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
+          Quick Actions
+        </h3>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <a
+            href="/todos"
+            className="group bg-slate-50/80 dark:bg-slate-700/30 border border-slate-200/50 dark:border-slate-600/50 rounded-lg p-4 hover:bg-slate-100/80 dark:hover:bg-slate-700/50 transition-all duration-200"
+          >
+            <div className="flex items-center">
+              <div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center mr-3">
+                <CheckSquare className="h-5 w-5 text-white" />
+              </div>
+              <div>
+                <p className="font-semibold text-slate-900 dark:text-white">Manage Todos</p>
+                <p className="text-xs text-slate-600 dark:text-slate-400">View and organize tasks</p>
+              </div>
+            </div>
+          </a>
+          <a
+            href="/reminders"
+            className="group bg-slate-50/80 dark:bg-slate-700/30 border border-slate-200/50 dark:border-slate-600/50 rounded-lg p-4 hover:bg-slate-100/80 dark:hover:bg-slate-700/50 transition-all duration-200"
+          >
+            <div className="flex items-center">
+              <div className="w-10 h-10 bg-emerald-600 rounded-lg flex items-center justify-center mr-3">
+                <Bell className="h-5 w-5 text-white" />
+              </div>
+              <div>
+                <p className="font-semibold text-slate-900 dark:text-white">Set Reminder</p>
+                <p className="text-xs text-slate-600 dark:text-slate-400">Schedule notifications</p>
+              </div>
+            </div>
+          </a>
+          <a
+            href="/api-keys"
+            className="group bg-slate-50/80 dark:bg-slate-700/30 border border-slate-200/50 dark:border-slate-600/50 rounded-lg p-4 hover:bg-slate-100/80 dark:hover:bg-slate-700/50 transition-all duration-200"
+          >
+            <div className="flex items-center">
+              <div className="w-10 h-10 bg-purple-600 rounded-lg flex items-center justify-center mr-3">
+                <Key className="h-5 w-5 text-white" />
+              </div>
+              <div>
+                <p className="font-semibold text-slate-900 dark:text-white">AI Config</p>
+                <p className="text-xs text-slate-600 dark:text-slate-400">Configure AI settings</p>
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div className="relative bg-white/80 dark:bg-slate-800/50 backdrop-blur-sm rounded-xl p-6 border border-slate-200/50 dark:border-slate-700/50 transition-all duration-300">
           <div className="flex items-center justify-between mb-4">
-            <h2 className="text-lg font-medium text-white">Recent Todos</h2>
+            <h3 className="text-lg font-semibold text-slate-900 dark:text-white flex items-center">
+              <div className="w-6 h-6 bg-blue-600 rounded-md flex items-center justify-center mr-2">
+                <CheckSquare className="h-3 w-3 text-white" />
+              </div>
+              Recent Todos
+            </h3>
             <a
               href="/todos"
-              className="text-sm text-white hover:text-gray-300"
+              className="text-blue-500 hover:text-blue-600 text-xs font-medium transition-colors"
             >
-              View all
+              View all →
             </a>
           </div>
-          {recentTodos.length > 0 ? (
+          {recentTodos.length === 0 ? (
+            <div className="text-center py-8">
+              <div className="w-12 h-12 bg-blue-600 rounded-xl flex items-center justify-center mx-auto mb-3">
+                <CheckSquare className="h-6 w-6 text-white" />
+              </div>
+              <p className="text-slate-600 dark:text-slate-400 text-sm mb-3">No todos yet</p>
+              <a
+                href="/todos"
+                className="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-xs font-medium transition-all duration-200"
+              >
+                Create your first todo
+              </a>
+            </div>
+          ) : (
             <div className="space-y-3">
               {recentTodos.map((todo: any) => (
-                <div key={todo.id} className="flex items-center space-x-3">
-                  <div className={`flex-shrink-0 w-2 h-2 rounded-full ${
-                    todo.done ? 'bg-green-400' : 'bg-yellow-400'
-                  }`} />
-                  <span className={`text-sm ${
-                    todo.done ? 'text-gray-500 line-through' : 'text-white'
+                <div key={todo.id} className="flex items-center justify-between p-3 bg-slate-50/80 dark:bg-slate-700/30 border border-slate-200/50 dark:border-slate-600/50 rounded-lg hover:bg-slate-100/80 dark:hover:bg-slate-700/50 transition-all duration-200">
+                  <div className="flex items-center space-x-3">
+                    <div className={`w-4 h-4 rounded-full border-2 transition-colors ${
+                      todo.done ? 'bg-emerald-500 border-emerald-500' : 'bg-white dark:bg-slate-600 border-slate-300 dark:border-slate-400'
+                    }`}></div>
+                    <div>
+                      <p className={`font-medium text-sm ${
+                        todo.done ? 'text-slate-500 dark:text-slate-400 line-through' : 'text-slate-900 dark:text-white'
+                      }`}>
+                        {todo.item}
+                      </p>
+                    </div>
+                  </div>
+                  <span className={`px-2 py-1 rounded-md text-xs font-medium ${
+                    todo.done 
+                      ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400' 
+                      : 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
                   }`}>
-                    {todo.item}
+                    {todo.done ? 'Done' : 'Pending'}
                   </span>
                 </div>
               ))}
             </div>
-          ) : (
-            <p className="text-gray-400 text-sm">No todos yet. Create your first one!</p>
           )}
         </div>
 
-        {/* Recent Reminders */}
-        <div className="bg-gray-900/50 border border-gray-700 rounded-lg p-6">
+        <div className="relative bg-white/80 dark:bg-slate-800/50 backdrop-blur-sm rounded-xl p-6 border border-slate-200/50 dark:border-slate-700/50 transition-all duration-300">
           <div className="flex items-center justify-between mb-4">
-            <h2 className="text-lg font-medium text-white">Recent Reminders</h2>
+            <h3 className="text-lg font-semibold text-slate-900 dark:text-white flex items-center">
+              <div className="w-6 h-6 bg-emerald-600 rounded-md flex items-center justify-center mr-2">
+                <Bell className="h-3 w-3 text-white" />
+              </div>
+              Recent Reminders
+            </h3>
             <a
               href="/reminders"
-              className="text-sm text-white hover:text-gray-300"
+              className="text-emerald-500 hover:text-emerald-600 text-xs font-medium transition-colors"
             >
-              View all
+              View all →
             </a>
           </div>
-          {recentReminders.length > 0 ? (
+          {recentReminders.length === 0 ? (
+            <div className="text-center py-8">
+              <div className="w-12 h-12 bg-emerald-600 rounded-xl flex items-center justify-center mx-auto mb-3">
+                <Bell className="h-6 w-6 text-white" />
+              </div>
+              <p className="text-slate-600 dark:text-slate-400 text-sm mb-3">No reminders yet</p>
+              <a
+                href="/reminders"
+                className="inline-flex items-center px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-xs font-medium transition-all duration-200"
+              >
+                Set your first reminder
+              </a>
+            </div>
+          ) : (
             <div className="space-y-3">
               {recentReminders.map((reminder: any) => (
-                <div key={reminder.reminder_id} className="flex items-start space-x-3">
-                  <div className={`flex-shrink-0 w-2 h-2 rounded-full mt-2 ${
-                    reminder.is_completed 
-                      ? 'bg-green-400' 
-                      : isExpired(reminder.expires_at)
-                      ? 'bg-red-400'
-                      : 'bg-blue-400'
-                  }`} />
-                  <div className="flex-1 min-w-0">
-                    <p className={`text-sm ${
-                      reminder.is_completed ? 'text-gray-500 line-through' : 'text-white'
+                <div key={reminder.reminder_id} className="p-3 bg-slate-50/80 dark:bg-slate-700/30 border border-slate-200/50 dark:border-slate-600/50 rounded-lg hover:bg-slate-100/80 dark:hover:bg-slate-700/50 transition-all duration-200">
+                  <div className="flex items-center justify-between mb-2">
+                    <p className="font-medium text-slate-900 dark:text-white text-sm">{reminder.message}</p>
+                    <span className={`px-2 py-1 rounded-md text-xs font-medium ${
+                      new Date(reminder.expires_at) < new Date()
+                        ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
+                        : 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'
                     }`}>
-                      {reminder.message}
-                    </p>
-                    <p className="text-xs text-gray-400 mt-1">
-                      {formatDate(reminder.expires_at)}
-                    </p>
+                      {new Date(reminder.expires_at) < new Date() ? 'Overdue' : 'Active'}
+                    </span>
                   </div>
+                  <p className="text-xs text-slate-600 dark:text-slate-400">
+                    Due: {new Date(reminder.expires_at).toLocaleDateString()}
+                  </p>
                 </div>
               ))}
             </div>
-          ) : (
-            <p className="text-gray-400 text-sm">No reminders yet. Create your first one!</p>
           )}
         </div>
+      </div>
 
-        {/* API Key Status */}
-        <div className="bg-gray-900/50 border border-gray-700 rounded-lg p-6">
-          <div className="flex items-center justify-between mb-4">
-            <h2 className="text-lg font-medium text-white">AI Configuration</h2>
+      <div className="relative bg-white/80 dark:bg-slate-800/50 backdrop-blur-sm rounded-xl p-5 border border-slate-200/50 dark:border-slate-700/50 transition-all duration-300">
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-lg font-semibold text-slate-900 dark:text-white flex items-center">
+            <div className="w-6 h-6 bg-purple-600 rounded-md flex items-center justify-center mr-2">
+              <Key className="h-3 w-3 text-white" />
+            </div>
+            AI Configuration
+          </h3>
+          <a
+            href="/api-keys"
+            className="text-purple-500 hover:text-purple-600 text-xs font-medium transition-colors"
+          >
+            Manage →
+          </a>
+        </div>
+        {!hasApiKey ? (
+          <div className="text-center py-6">
+            <div className="w-10 h-10 bg-purple-600 rounded-xl flex items-center justify-center mx-auto mb-3">
+              <Key className="h-5 w-5 text-white" />
+            </div>
+            <p className="text-slate-600 dark:text-slate-400 text-sm mb-3">No API keys configured</p>
             <a
               href="/api-keys"
-              className="text-sm text-white hover:text-gray-300"
+              className="inline-flex items-center px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-xs font-medium transition-all duration-200"
             >
-              Manage
+              Add API Key
             </a>
           </div>
-          <div className="space-y-3">
-            <div className="flex items-center justify-between">
-              <span className="text-sm text-gray-400">API Key</span>
-              <span className={`text-sm font-medium ${
-                hasApiKey ? 'text-green-600' : 'text-red-600'
-              }`}>
-                {hasApiKey ? 'Configured' : 'Not Set'}
-              </span>
-            </div>
-            {apiKeyInfo?.model && (
-              <div className="flex items-center justify-between">
-                <span className="text-sm text-gray-400">Model</span>
-                <span className="text-sm font-medium text-white">
-                  {apiKeyInfo.model}
-                </span>
+        ) : (
+          <div className="p-3 bg-slate-50/80 dark:bg-slate-700/30 border border-slate-200/50 dark:border-slate-600/50 rounded-lg hover:bg-slate-100/80 dark:hover:bg-slate-700/50 transition-all duration-200">
+            <div className="flex items-center space-x-3">
+              <div className="w-8 h-8 bg-purple-600 rounded-lg flex items-center justify-center">
+                <Key className="h-4 w-4 text-white" />
+              </div>
+              <div className="flex-1">
+                <p className="font-medium text-slate-900 dark:text-white text-sm">AI Configuration</p>
+                <div className="text-xs text-slate-600 dark:text-slate-400">
+                  {apiKeyInfo?.model && (
+                    <span>Model: {apiKeyInfo.model}</span>
+                  )}
+                  {apiKeyInfo?.apiUrl && (
+                    <span className="ml-3">Endpoint: {new URL(apiKeyInfo.apiUrl).hostname}</span>
+                  )}
+                </div>
               </div>
-            )}
-            {apiKeyInfo?.apiUrl && (
-              <div className="flex items-center justify-between">
-                <span className="text-sm text-gray-400">Endpoint</span>
-                <span className="text-sm font-medium text-white truncate max-w-32">
-                  {new URL(apiKeyInfo.apiUrl).hostname}
-                </span>
+              <div className="flex items-center space-x-2">
+                <div className="w-2 h-2 bg-emerald-500 rounded-full"></div>
+                <span className="text-xs font-medium text-emerald-600 dark:text-emerald-400">Active</span>
               </div>
-            )}
-            {!hasApiKey && (
-              <p className="text-sm text-gray-400">
-                Configure your AI API key to use custom models and endpoints.
-              </p>
-            )}
+            </div>
           </div>
-        </div>
-      </div>
-
-      {/* Quick Actions */}
-      <div className="bg-gray-900/50 border border-gray-700 rounded-lg p-6">
-        <h2 className="text-lg font-medium text-white mb-4">Quick Actions</h2>
-        <div className="flex flex-wrap gap-3">
-          <a
-            href="/todos"
-            className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center transition-colors"
-          >
-            <CheckSquare className="h-4 w-4 mr-2" />
-            Manage Todos
-          </a>
-          <a
-            href="/reminders"
-            className="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg flex items-center transition-colors"
-          >
-            <Bell className="h-4 w-4 mr-2" />
-            Manage Reminders
-          </a>
-          <a
-            href="/api-keys"
-            className="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg flex items-center transition-colors"
-          >
-            <Key className="h-4 w-4 mr-2" />
-            Configure AI
-          </a>
-        </div>
+        )}
       </div>
     </div>
   )

web/src/pages/LandingPage.tsx

···
-import { Bot, MessageSquare, Cloud, Bell, Shield, Zap } from 'lucide-react';
-import { Link } from 'react-router-dom';
+import React from "react";
+import {
+  ChatBubbleLeftRightIcon,
+  BookOpenIcon,
+  CloudIcon,
+  FaceSmileIcon,
+  BellAlertIcon,
+  PhotoIcon,
+  SparklesIcon,
+  GlobeAltIcon
+} from '@heroicons/react/24/outline';
+import Footer from '../components/Footer';
 
-const LandingPage = () => {
+export default function Home() {
   return (
-    <div className="min-h-screen bg-[#0A0A0A] text-white">
-      {/* Header */}
-      <header>
-        <div className="max-w-6xl mx-auto px-6 py-4">
-          <div className="flex justify-between items-center">
-            <div className="flex items-center space-x-3">
-              <span className="text-xl font-semibold text-white">Aethel</span>
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      <div className="max-w-6xl mx-auto px-6 py-12">
+        
+=        <div className="flex justify-between items-center mb-16">
+          <div className="flex items-center space-x-4">
+            <div className="w-12 h-12 flex items-center justify-center rounded-lg overflow-hidden">
+              <img 
+                src="/bot_icon.png" 
+                alt="Bot Icon" 
+                className="w-full h-full object-cover"
+                width={48}
+                height={48}
+              />
             </div>
-            
-            <nav className="hidden md:flex items-center space-x-8">
-              <a href="#features" className="text-gray-400 hover:text-white transition-colors">
-                Features
-              </a>
-               <Link 
-                 to="/status" 
-                 className="text-gray-400 hover:text-white transition-colors"
-               >
-                 Status
-               </Link>
-            </nav>
-            
-            <Link
-              to="/login"
-              className="bg-white text-black px-4 py-2 rounded-lg font-medium hover:bg-gray-100 transition-colors"
-            >
-              Dashboard
-            </Link>
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Aethel</h1>
           </div>
-        </div>
-      </header>
-
-      {/* Hero Section */}
-      <section className="py-32 px-6">
-        <div className="max-w-4xl mx-auto text-center">
-          <h1 className="text-5xl md:text-6xl font-bold mb-6 text-white">
-            A useful Discord user bot
-            <span className="block text-gray-400 mt-2">for your account</span>
-          </h1>
-          
-          <p className="text-xl text-gray-400 mb-12 max-w-2xl mx-auto">
-            Enhance your Discord experience with AI chat, weather updates, reminders, and more useful features.
-          </p>
-          
           <a
-            href={`https://discord.com/api/oauth2/authorize?client_id=${import.meta.env.VITE_DISCORD_CLIENT_ID}`}
+            href="https://github.com/aethel-labs/aethel"
             target="_blank"
             rel="noopener noreferrer"
-            className="inline-flex items-center space-x-3 bg-[#5865F2] text-white px-8 py-4 rounded-lg hover:bg-[#4752C4] transition-colors font-medium"
+            className="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
           >
-            <svg className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
+            <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+              <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
             </svg>
-            <span>Add to Discord</span>
           </a>
         </div>
-      </section>
 
-      {/* Features Section */}
-      <section id="features" className="py-24 px-6">
-        <div className="max-w-6xl mx-auto">
-          <div className="text-center mb-16">
-            <h2 className="text-4xl font-bold text-white mb-4">Features</h2>
-            <p className="text-xl text-gray-400 max-w-2xl mx-auto">
-              Everything you need to enhance your Discord experience
-            </p>
+=        <div className="text-center mb-20">
+          <h2 className="text-5xl font-bold text-gray-900 dark:text-white mb-6">
+            A useful Discord user bot for your account
+          </h2>
+          <p className="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-2xl mx-auto">
+            Enhance your Discord experience with AI chat, weather updates, reminders, and more useful features.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <a
+              href="https://discord.com/oauth2/authorize?client_id=1371031984230371369"
+              className="bg-[#5865F2] hover:bg-[#4752c4] text-white font-medium py-3 px-8 rounded-lg transition-colors inline-flex items-center justify-center gap-2"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.1 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.8 8.18 1.8 12.061 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.891.077.077 0 00-.041.1c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.84 19.84 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.942-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.332-.957 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.943-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.332-.957 2.418-2.157 2.418z"/>
+              </svg>
+              Add to Discord
+            </a>
+            <a
+              href="/status"
+              className="bg-white hover:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-900 dark:text-white border border-gray-200 dark:border-gray-700 font-medium py-3 px-8 rounded-lg transition-colors"
+            >
+              View Status
+            </a>
           </div>
-          
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-            <div className="bg-gray-900/50 backdrop-blur-sm p-8 rounded-xl border border-gray-700/50 hover:border-gray-600/50 transition-all duration-300">
-              <div className="bg-blue-500/10 w-12 h-12 rounded-lg flex items-center justify-center mb-6">
-                <MessageSquare className="h-6 w-6 text-blue-400" />
-              </div>
-              <h3 className="text-xl font-semibold text-white mb-4">AI Chat Assistant</h3>
-              <p className="text-gray-400 leading-relaxed">
-                Get intelligent responses and assistance with our advanced AI chat system.
-              </p>
-            </div>
-            
-            <div className="bg-gray-900/50 backdrop-blur-sm p-8 rounded-xl border border-gray-700/50 hover:border-gray-600/50 transition-all duration-300">
-              <div className="bg-green-500/10 w-12 h-12 rounded-lg flex items-center justify-center mb-6">
-                <Cloud className="h-6 w-6 text-green-400" />
-              </div>
-              <h3 className="text-xl font-semibold text-white mb-4">Weather Updates</h3>
-              <p className="text-gray-400 leading-relaxed">
-                Stay informed with real-time weather information for any location.
-              </p>
-            </div>
-            
-            <div className="bg-gray-900/50 backdrop-blur-sm p-8 rounded-xl border border-gray-700/50 hover:border-gray-600/50 transition-all duration-300">
-              <div className="bg-yellow-500/10 w-12 h-12 rounded-lg flex items-center justify-center mb-6">
-                <Bell className="h-6 w-6 text-yellow-400" />
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+          {[
+            { icon: <ChatBubbleLeftRightIcon className="w-6 h-6" />, name: "/ai", description: "Chat with AI, ask questions, get answers" },
+            { icon: <BookOpenIcon className="w-6 h-6" />, name: "/wiki", description: "Get answers directly from Wikipedia" },
+            { icon: <CloudIcon className="w-6 h-6" />, name: "/weather", description: "Get local weather information" },
+            { icon: <FaceSmileIcon className="w-6 h-6" />, name: "/joke", description: "Get random jokes to brighten your day" },
+            { icon: <BellAlertIcon className="w-6 h-6" />, name: "/remind", description: "Set reminders for important messages" },
+            { icon: <PhotoIcon className="w-6 h-6" />, name: "/dog & /cat", description: "Get random cute pet images" },
+            { icon: <SparklesIcon className="w-6 h-6" />, name: "/8ball", description: "Ask the magic 8ball questions" },
+            { icon: <GlobeAltIcon className="w-6 h-6" />, name: "/whois", description: "Lookup domain or IP information" }
+          ].map((command, index) => (
+            <div 
+              key={index} 
+              className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-shadow"
+            >
+              <div className="flex items-center">
+                <div className="p-2 rounded-lg bg-sky-100 dark:bg-sky-900/30 mr-3">
+                  {React.cloneElement(command.icon, { className: 'w-6 h-6 text-gray-600 dark:text-white' })}
+                </div>
+                <h3 className="font-semibold text-gray-900 dark:text-white">
+                  {command.name}
+                </h3>
               </div>
-              <h3 className="text-xl font-semibold text-white mb-4">Smart Reminders</h3>
-              <p className="text-gray-400 leading-relaxed">
-                Never miss important events with our intelligent reminder system.
+              <p className="text-gray-600 dark:text-gray-300 text-sm mt-3 leading-relaxed">
+                {command.description}
               </p>
             </div>
-            
-            <div className="bg-gray-900/50 backdrop-blur-sm p-8 rounded-xl border border-gray-700/50 hover:border-gray-600/50 transition-all duration-300">
-              <div className="bg-purple-500/10 w-12 h-12 rounded-lg flex items-center justify-center mb-6">
-                <Shield className="h-6 w-6 text-purple-400" />
-              </div>
-              <h3 className="text-xl font-semibold text-white mb-4">Secure & Private</h3>
-              <p className="text-gray-400 leading-relaxed">
-                Your data is protected with enterprise-grade security measures.
-              </p>
-            </div>
-            
-            <div className="bg-gray-900/50 backdrop-blur-sm p-8 rounded-xl border border-gray-700/50 hover:border-gray-600/50 transition-all duration-300">
-              <div className="bg-orange-500/10 w-12 h-12 rounded-lg flex items-center justify-center mb-6">
-                <Zap className="h-6 w-6 text-orange-400" />
-              </div>
-              <h3 className="text-xl font-semibold text-white mb-4">Lightning Fast</h3>
-              <p className="text-gray-400 leading-relaxed">
-                Experience blazing fast response times and seamless performance.
-              </p>
-            </div>
-            
-            <div className="bg-gray-900/50 backdrop-blur-sm p-8 rounded-xl border border-gray-700/50 hover:border-gray-600/50 transition-all duration-300">
-              <div className="bg-indigo-500/10 w-12 h-12 rounded-lg flex items-center justify-center mb-6">
-                <Bot className="h-6 w-6 text-indigo-400" />
-              </div>
-              <h3 className="text-xl font-semibold text-white mb-4">Discord Native</h3>
-              <p className="text-gray-400 leading-relaxed">
-                Built specifically for Discord with seamless integration.
-              </p>
-            </div>
-          </div>
+          ))}
         </div>
-      </section>
-      
-      {/* Footer */}
-      <footer className="py-12 px-6">
-        <div className="max-w-6xl mx-auto text-center">
-          <div className="flex items-center justify-center space-x-3 mb-4">
-            <span className="text-lg font-semibold text-white">Aethel</span>
-          </div>
-          <p className="text-gray-400 mb-6">
-            A useful Discord user bot for your account
+
+        <div className="mt-16 text-center">
+          <p className="text-gray-600 dark:text-gray-400 mb-8">
+            Works in DMs and servers that allow external applications
           </p>
-          <div className="flex justify-center space-x-8 text-sm text-gray-400">
-            <a href="#features" className="hover:text-white transition-colors">Features</a>
-            <a href="/status" className="hover:text-white transition-colors">Status</a>
-          </div>
+          <p className="text-gray-500 dark:text-gray-500">
+            Made with ♥ by scanash and the Aethel Labs team
+          </p>
         </div>
-      </footer>
+      </div>
+      
+      <Footer />
     </div>
-  )
-}
-
-export default LandingPage
+  );
+}

web/src/pages/PrivacyPage.tsx

···
-import { Link } from 'react-router-dom';
-import { ArrowLeft } from 'lucide-react';
+import { LegalLayout } from '../components/LegalLayout';
+import Footer from '../components/Footer';
 
 export default function PrivacyPolicy() {
   return (
-    <div className="min-h-screen bg-[#0A0A0A] text-white">
-      {/* Header */}
-      <header className="border-b border-gray-800">
-        <div className="max-w-4xl mx-auto px-6 py-4">
-          <Link 
-            to="/" 
-            className="inline-flex items-center gap-2 text-gray-400 hover:text-white transition-colors"
-          >
-            <ArrowLeft className="w-4 h-4" />
-            Back to Home
-          </Link>
-        </div>
-      </header>
-
-      {/* Content */}
-      <main className="max-w-4xl mx-auto px-6 py-12">
-        <div className="mb-8">
-          <h1 className="text-4xl font-bold text-white mb-2">Privacy Policy</h1>
-          <p className="text-gray-400">Last Updated: July 21, 2025</p>
-        </div>
+    <>
+    <LegalLayout title="Privacy Policy" lastUpdated="July 21, 2025">
       <div className="space-y-8">
           <section>
-            <h2 className="text-2xl font-bold text-white mb-4 pt-8 border-t border-gray-800 first:border-t-0 first:pt-0">1. Information We Collect</h2>
-            <p className="text-gray-400 leading-relaxed">
+            <h2 className="text-2xl font-bold text-gray-800 dark:text-white mb-4 pt-2 border-t border-gray-100 dark:border-gray-700 first:border-t-0 first:pt-0">1. Information We Collect</h2>
+            <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
               The bot (&quot;the Bot&quot;) collects the following information:
             </p>
-            <ul className="list-disc pl-6 space-y-3 text-gray-400 mt-2">
+            <ul className="list-disc pl-6 space-y-3 text-gray-600 dark:text-gray-300 mt-2">
               <li>Discord user IDs for command processing and functionality</li>
               <li>Server IDs where the Bot is used</li>
               <li>Channel IDs where commands are used</li>
···
           </section>
 
           <section>
-            <h2 className="text-2xl font-bold text-white mb-4 pt-8 border-t border-gray-800 first:border-t-0 first:pt-0">2. How We Use Your Information</h2>
-            <p className="text-gray-400 leading-relaxed">
+            <h2 className="text-2xl font-bold text-gray-800 dark:text-white mb-4 pt-2 border-t border-gray-100 dark:border-gray-700 first:border-t-0 first:pt-0">2. How We Use Your Information</h2>
+            <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
               We use the collected information to provide, maintain, and improve our Bot&apos;s services, including:
             </p>
-            <ul className="list-disc pl-6 space-y-3 text-gray-400 mt-2">
+            <ul className="list-disc pl-6 space-y-3 text-gray-600 dark:text-gray-300 mt-2">
               <li>Provide and maintain the Bot&apos;s functionality</li>
               <li>Process commands and provide responses</li>
               <li>Improve the Bot&apos;s performance and features</li>
···
           </section>
 
           <section>
-            <h2 className="text-2xl font-bold text-white mb-4 pt-8 border-t border-gray-800 first:border-t-0 first:pt-0">3. Data Storage</h2>
-            <p className="text-gray-400 leading-relaxed">
+            <h2 className="text-2xl font-bold text-gray-800 dark:text-white mb-4 pt-2 border-t border-gray-100 dark:border-gray-700 first:border-t-0 first:pt-0">3. Data Storage</h2>
+            <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
               We take your privacy seriously:
             </p>
-            <ul className="list-disc pl-6 space-y-3 text-gray-400 mt-2">
+            <ul className="list-disc pl-6 space-y-3 text-gray-600 dark:text-gray-300 mt-2">
               <li>API keys are securely hashed using industry-standard encryption before being stored in our database</li>
-              <li>Your custom API keys and model preferences are stored until you choose to remove them using the <code className="bg-gray-800 px-2 py-0.5 rounded text-sm font-mono text-gray-200">/ai use_custom_api:false</code> command</li>
+              <li>Your custom API keys and model preferences are stored until you choose to remove them using the <code className="bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded text-sm font-mono text-gray-800 dark:text-gray-200">/ai use_custom_api:false</code> command</li>
               <li>We log all message content (like Wiki searches, reminders, and 8-ball queries) for monitoring purposes.</li>
               <li>We do not sell or share your personal information with third parties</li>
-              <li>You can delete your stored API key and preferences at any time by running <code className="bg-gray-800 px-1 rounded">/ai use_custom_api:false</code></li>
+              <li>You can delete your stored API key and preferences at any time by running <code className="bg-gray-100 dark:bg-gray-800 px-1 rounded">/ai use_custom_api:false</code></li>
             </ul>
           </section>
 
           <section>
-            <h2 className="text-2xl font-bold text-white mb-4 pt-8 border-t border-gray-800 first:border-t-0 first:pt-0">4. Third-Party Services</h2>
-            <p className="text-gray-400 leading-relaxed">
+            <h2 className="text-2xl font-bold text-gray-800 dark:text-white mb-4 pt-2 border-t border-gray-100 dark:border-gray-700 first:border-t-0 first:pt-0">4. Third-Party Services</h2>
+            <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
               Our Bot may contain links to third-party websites or services that are not operated by us. We have no control over and assume no responsibility for the content, privacy policies, or practices of any third-party sites or services.
             </p>
-            <ul className="list-disc pl-6 space-y-3 text-gray-400 mt-2">
+            <ul className="list-disc pl-6 space-y-3 text-gray-600 dark:text-gray-300 mt-2">
               <li>Discord&apos;s Privacy Policy for user and server data</li>
               <li>OpenRouter&apos;s Privacy Policy for AI chat functionality</li>
               <li>Weather API providers for weather information</li>
···
           </section>
 
           <section>
-            <h2 className="text-2xl font-bold text-white mb-4 pt-8 border-t border-gray-800 first:border-t-0 first:pt-0">5. Data Security</h2>
-            <p className="text-gray-400 leading-relaxed">
+            <h2 className="text-2xl font-bold text-gray-800 dark:text-white mb-4 pt-2 border-t border-gray-100 dark:border-gray-700 first:border-t-0 first:pt-0">5. Data Security</h2>
+            <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
               We implement reasonable security measures to protect your information, but no method of transmission over the internet is 100% secure.
             </p>
           </section>
 
           <section>
-            <h2 className="text-2xl font-bold text-white mb-4 pt-8 border-t border-gray-800 first:border-t-0 first:pt-0">6. Children&apos;s Privacy</h2>
-            <p className="text-gray-400 leading-relaxed">
+            <h2 className="text-2xl font-bold text-gray-800 dark:text-white mb-4 pt-2 border-t border-gray-100 dark:border-gray-700 first:border-t-0 first:pt-0">6. Children&apos;s Privacy</h2>
+            <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
               Our Bot is not intended for use by children under the age of 13. We do not knowingly collect personally identifiable information from children under 13. If you are a parent or guardian and you are aware that your child has provided us with personal information, please contact us.
             </p>
           </section>
 
           <section>
-            <h2 className="text-2xl font-bold text-white mb-4 pt-8 border-t border-gray-800 first:border-t-0 first:pt-0">7. Changes to This Policy</h2>
-            <p className="text-gray-400 leading-relaxed">
+            <h2 className="text-2xl font-bold text-gray-800 dark:text-white mb-4 pt-2 border-t border-gray-100 dark:border-gray-700 first:border-t-0 first:pt-0">7. Changes to This Policy</h2>
+            <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
               We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page.
             </p>
           </section>
 
           <section>
-            <h2 className="text-2xl font-bold text-white mb-4 pt-8 border-t border-gray-800 first:border-t-0 first:pt-0">8. Contact Us</h2>
-            <p className="text-gray-400 leading-relaxed">
-              If you have any questions about this Privacy Policy, please contact us at <a href="mailto:[e-mail]" className="text-blue-400 hover:text-blue-300 hover:underline font-medium">[e-mail]</a>.
+            <h2 className="text-2xl font-bold text-gray-800 dark:text-white mb-4 pt-2 border-t border-gray-100 dark:border-gray-700 first:border-t-0 first:pt-0">8. Contact Us</h2>
+            <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
+              If you have any questions about this Privacy Policy, please contact us at <a href="mailto:[e-mail]" className="text-sky-600 dark:text-sky-400 hover:underline font-medium">[e-mail]</a>.
             </p>
           </section>
       </div>
-      </main>
-    </div>
+    </LegalLayout>
+    
+    <Footer />
+    </>
   );
 }

web/src/pages/StatusPage.tsx

···
-import { useEffect, useState } from 'react'
-import { Link } from 'react-router-dom'
-import { 
-  Activity, 
-  Clock, 
-  GitBranch, 
-  Home, 
-  RefreshCw, 
-  Server, 
-  Wifi, 
-  WifiOff,
-  AlertCircle
-} from 'lucide-react'
+import { useState, useEffect } from 'react';
+import { Link } from "react-router-dom";
+import { CheckCircleIcon, XCircleIcon, ServerIcon, CpuChipIcon, SignalIcon, ClockIcon } from '@heroicons/react/24/outline';
+import Footer from '../components/Footer';
 
-interface StatusData {
-  status: string
-  uptime: {
-    days: number
-    hours: number
-    minutes: number
-    seconds: number
+async function getGitCommitHash() {
+  try {
+    const response = await fetch(`${import.meta.env.VITE_BOT_API_URL || 'https://bot-api.pur.cat'}/api/status`, {
+      headers: {
+        'X-API-Key': import.meta.env.VITE_STATUS_API_KEY || ''
+      }
+    });
+    
+    if (!response.ok) {
+      if (import.meta.env.NODE_ENV !== 'production') {
+        console.error('Failed to fetch status from bot API:', response.status);
+      }
+      return null;
+    }
+    
+    const data = await response.json();
+    return data.commitHash || data.version || data.commit || null;
+  } catch (error) {
+    if (import.meta.env.NODE_ENV !== 'production') {
+      console.error('Error fetching from bot API:', error);
+    }
+    return null;
   }
-  botStatus: string
-  ping: number
-  lastReady: string | null
-  commitHash: string
 }
 
-const StatusPage = () => {
-  const [statusData, setStatusData] = useState<StatusData | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-  const [lastUpdated, setLastUpdated] = useState<Date>(new Date())
-
-  const fetchStatus = async () => {
+async function getBotStatus() {
+  try {
+    const baseUrl = import.meta.env.VITE_BOT_API_URL || "http://localhost:3000";
+    const url = `${baseUrl}/api/status`;
+    
+    const controller = new AbortController();
+    const timeout = 8000;
+    const timeoutId = setTimeout(() => controller.abort(), timeout);
+    
     try {
-      setError(null)
-      const response = await fetch(`${import.meta.env.VITE_FRONTEND_URL}/api/status`, {
+      const res = await fetch(url, { 
+        cache: "no-store",
+        signal: controller.signal,
         headers: {
+          'Cache-Control': 'no-cache',
+          'Pragma': 'no-cache',
           'X-API-Key': import.meta.env.VITE_STATUS_API_KEY || ''
         }
-      })
+      });
+      
+      clearTimeout(timeoutId);
       
-      if (!response.ok) {
-        throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+      if (!res.ok) {
+        console.error(`Bot API responded with status: ${res.status}`);
+        return { 
+          status: "offline", 
+          botStatus: "disconnected",
+          error: `API Error: ${res.status} ${res.statusText}`,
+          lastChecked: new Date().toISOString()
+        };
       }
       
-      const data = await response.json()
-      setStatusData(data)
-      setLastUpdated(new Date())
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to fetch status')
-    } finally {
-      setLoading(false)
+      const data = await res.json();
+      return { ...data, lastChecked: new Date().toISOString() };
+      
+    } catch (fetchError: unknown) {
+      clearTimeout(timeoutId);
+      throw fetchError;
     }
+    
+  } catch (error: unknown) {
+    console.error('Error fetching bot status:', error);
+    const errorMessage = error instanceof Error && error.name === 'AbortError' 
+      ? 'Connection timed out (8s)' 
+      : 'Could not connect to bot service';
+    return { 
+      status: "offline", 
+      botStatus: "disconnected",
+      error: errorMessage,
+      lastChecked: new Date().toISOString()
+    };
   }
+}
+
+export default function Status() {
+  const [status, setStatus] = useState<any>(null);
+  const [commitHash, setCommitHash] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    fetchStatus()
-    
-    const interval = setInterval(fetchStatus, 30000)
-    return () => clearInterval(interval)
-  }, [])
+    const fetchData = async () => {
+      try {
+        const [statusData, hashData] = await Promise.all([
+          getBotStatus(),
+          getGitCommitHash()
+        ]);
+        setStatus(statusData);
+        setCommitHash(hashData);
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
 
-  const formatUptime = (uptime: StatusData['uptime']) => {
-    const parts = []
-    if (uptime.days > 0) parts.push(`${uptime.days}d`)
-    if (uptime.hours > 0) parts.push(`${uptime.hours}h`)
-    if (uptime.minutes > 0) parts.push(`${uptime.minutes}m`)
-    if (uptime.seconds > 0 || parts.length === 0) parts.push(`${uptime.seconds}s`)
-    return parts.join(' ')
-  }
-
-  const getStatusColor = (status: string) => {
-    switch (status.toLowerCase()) {
-      case 'online':
-      case 'connected':
-        return 'text-green-400 bg-green-500/20'
-      case 'offline':
-      case 'disconnected':
-        return 'text-red-400 bg-red-500/20'
-      default:
-        return 'text-yellow-400 bg-yellow-500/20'
+    fetchData();
+  }, []);
+  
+  const isOnline = status?.status === "online";
+  
+  const getUptime = (): { days: number; hours: number; minutes: number; seconds: number } => {
+    try {
+      if (!status || !status.uptime) {
+        return { days: 0, hours: 0, minutes: 0, seconds: 0 };
+      }
+      if (status.uptime && typeof status.uptime === 'number') {
+        const totalSeconds = status.uptime;
+        return {
+          days: Math.floor(totalSeconds / 86400),
+          hours: Math.floor((totalSeconds % 86400) / 3600),
+          minutes: Math.floor((totalSeconds % 3600) / 60),
+          seconds: Math.floor(totalSeconds % 60)
+        };
+      }
+      else if (status.uptime && typeof status.uptime === 'object') {
+        return {
+          days: status.uptime.days || 0,
+          hours: status.uptime.hours || 0,
+          minutes: status.uptime.minutes || 0,
+          seconds: status.uptime.seconds || 0
+        };
+      }
+      else if (status.uptime && typeof status.uptime === 'string' && !isNaN(parseInt(status.uptime))) {
+        const uptime = parseInt(status.uptime);
+        return {
+          days: Math.floor(uptime / 86400),
+          hours: Math.floor((uptime % 86400) / 3600),
+          minutes: Math.floor((uptime % 3600) / 60),
+          seconds: Math.floor(uptime % 60)
+        };
+      }
+      return { days: 0, hours: 0, minutes: 0, seconds: 0 };
+    } catch (error) {
+      console.error('Error parsing uptime:', error);
+      return { days: 0, hours: 0, minutes: 0, seconds: 0 };
     }
-  }
+  };
+  
+  const uptime = getUptime();
 
-  const getPingColor = (ping: number) => {
-    if (ping < 100) return 'text-green-400'
-    if (ping < 300) return 'text-yellow-400'
-    return 'text-red-400'
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-sky-600 mx-auto mb-4"></div>
+          <p className="text-gray-600 dark:text-gray-300">Loading status...</p>
+        </div>
+      </div>
+    );
   }
 
   return (
-    <div className="min-h-screen bg-[#0A0A0A] text-white">
-      {/* Header */}
-      <header className="border-b border-gray-800">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between items-center py-6">
-            <div className="flex items-center space-x-4">
-              <Link to="/" className="flex items-center space-x-2 text-gray-400 hover:text-white transition-colors">
-                <Home className="h-5 w-5" />
-                <span>Back to Home</span>
-              </Link>
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      <div className="max-w-6xl mx-auto px-6 py-12">
+        
+        <div className="flex justify-between items-center mb-16">
+          <div className="flex items-center space-x-4">
+            <div className="w-12 h-12 flex items-center justify-center rounded-lg overflow-hidden">
+              <img 
+                src="/bot_icon.png" 
+                alt="Bot Icon" 
+                className="w-full h-full object-cover"
+                width={48}
+                height={48}
+              />
             </div>
-            <div className="flex items-center space-x-3">
-              <span className="text-2xl font-bold text-white">Aethel Status</span>
-            </div>
-            <button
-              onClick={fetchStatus}
-              disabled={loading}
-              className="flex items-center space-x-2 px-4 py-2 bg-white text-black rounded-lg hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
-            >
-              <RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
-              <span>Refresh</span>
-            </button>
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Aethel</h1>
           </div>
+          <a
+            href="https://github.com/aethel-labs/aethel"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
+          >
+            <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+              <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
+            </svg>
+          </a>
         </div>
-      </header>
 
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {error && (
-          <div className="mb-8 bg-red-900/20 border border-red-800 rounded-lg p-4">
-            <div className="flex items-center space-x-2">
-              <AlertCircle className="h-5 w-5 text-red-400" />
-              <span className="text-red-300 font-medium">Error loading status</span>
-            </div>
-            <p className="text-red-400 mt-2">{error}</p>
+        <div className="text-center mb-20">
+          <h2 className="text-5xl font-bold text-gray-900 dark:text-white mb-6">
+            Bot Status
+          </h2>
+          <p className="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-2xl mx-auto">
+            Monitor the current status and performance of all bot services in real-time.
+          </p>
+          <div className="inline-flex items-center px-6 py-3 rounded-lg font-semibold mb-8 bg-sky-50 dark:bg-sky-900/20 border border-sky-200 dark:border-sky-800">
+            {isOnline ? (
+              <>
+                <CheckCircleIcon className="w-5 h-5 text-green-500 mr-2" />
+                <span className="text-gray-900 dark:text-white">All Systems Operational</span>
+              </>
+            ) : (
+              <>
+                <XCircleIcon className="w-5 h-5 text-red-500 mr-2" />
+                <span className="text-gray-900 dark:text-white">Service Disruption</span>
+              </>
+            )}
           </div>
-        )}
+        </div>
 
-        {loading && !statusData ? (
-          <div className="flex items-center justify-center py-12">
-            <div className="flex items-center space-x-3">
-              <RefreshCw className="h-6 w-6 animate-spin text-white" />
-              <span className="text-lg text-gray-400">Loading status...</span>
-            </div>
-          </div>
-        ) : statusData ? (
-          <div className="space-y-8">
-            {/* Overall Status */}
-            <div className="bg-gray-900/50 backdrop-blur-sm rounded-xl border border-gray-700/50 p-8">
-              <div className="flex items-center justify-between mb-6">
-                <h2 className="text-3xl font-bold text-white">System Status</h2>
-                <div className="text-sm text-gray-400">
-                  Last updated: {lastUpdated.toLocaleTimeString()}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-16">
+          {[
+            {
+              icon: <ServerIcon className="w-6 h-6" />,
+              title: "Bot Status",
+              value: isOnline ? 'Online' : 'Offline',
+              status: isOnline,
+              description: isOnline ? 'Bot is operational and responding to commands' : (status.error || 'Bot is currently unavailable')
+            },
+            {
+              icon: <CpuChipIcon className="w-6 h-6" />,
+              title: "Bot API",
+              value: status.botStatus === 'connected' ? 'Connected' : 'Disconnected',
+              status: status.botStatus === 'connected',
+              description: `API connection is ${status.botStatus === 'connected' ? 'active and stable' : 'currently unavailable'}`
+            },
+            {
+              icon: <SignalIcon className="w-6 h-6" />,
+              title: "Response Time",
+              value: status.ping ? `${status.ping}ms` : 'N/A',
+              status: status.ping ? status.ping < 200 : false,
+              description: status.ping ? 
+                (status.ping < 100 ? 'Excellent performance' : status.ping < 200 ? 'Good performance' : 'Slow response') : 
+                'Response time unavailable'
+            }
+          ].map((card, index) => (
+            <div key={index} className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-shadow">
+              <div className="flex items-center mb-3">
+                <div className={`w-10 h-10 rounded-lg flex items-center justify-center mr-3 ${
+                  card.status ? 'bg-sky-100 dark:bg-sky-900 text-sky-600 dark:text-sky-400' 
+                            : 'bg-red-100 dark:bg-red-900 text-red-600 dark:text-red-400'
+                }`}>
+                  {card.icon}
                 </div>
+                <h3 className="font-semibold text-gray-900 dark:text-white">{card.title}</h3>
               </div>
-              
-              <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-                <div className="bg-gray-800/50 rounded-xl p-6 border border-gray-700/30">
-                  <div className="flex items-center space-x-4">
-                    <div className={`p-3 rounded-lg ${getStatusColor(statusData.status)}`}>
-                      <Server className="h-6 w-6" />
-                    </div>
-                    <div>
-                      <p className="text-sm text-gray-400 mb-1">Server Status</p>
-                      <p className="font-semibold text-white text-lg capitalize">{statusData.status}</p>
-                    </div>
-                  </div>
-                </div>
-                
-                <div className="bg-gray-800/50 rounded-xl p-6 border border-gray-700/30">
-                  <div className="flex items-center space-x-4">
-                    <div className={`p-3 rounded-lg ${getStatusColor(statusData.botStatus)}`}>
-                      {statusData.botStatus === 'connected' ? (
-                        <Wifi className="h-6 w-6" />
-                      ) : (
-                        <WifiOff className="h-6 w-6" />
-                      )}
-                    </div>
-                    <div>
-                      <p className="text-sm text-gray-400 mb-1">Bot Status</p>
-                      <p className="font-semibold text-white text-lg capitalize">{statusData.botStatus}</p>
-                    </div>
-                  </div>
-                </div>
-                
-                <div className="bg-gray-800/50 rounded-xl p-6 border border-gray-700/30">
-                  <div className="flex items-center space-x-4">
-                    <div className="p-3 rounded-lg bg-blue-500/20 text-blue-400">
-                      <Activity className="h-6 w-6" />
-                    </div>
-                    <div>
-                      <p className="text-sm text-gray-400 mb-1">Ping</p>
-                      <p className={`font-semibold text-lg ${getPingColor(statusData.ping)}`}>
-                        {statusData.ping}ms
-                      </p>
-                    </div>
-                  </div>
-                </div>
-                
-                <div className="bg-gray-800/50 rounded-xl p-6 border border-gray-700/30">
-                  <div className="flex items-center space-x-4">
-                    <div className="p-3 rounded-lg bg-purple-500/20 text-purple-400">
-                      <Clock className="h-6 w-6" />
-                    </div>
-                    <div>
-                      <p className="text-sm text-gray-400 mb-1">Uptime</p>
-                      <p className="font-semibold text-white text-lg">
-                        {formatUptime(statusData.uptime)}
-                      </p>
-                    </div>
-                  </div>
-                </div>
+              <div className="mb-2">
+                <span className="text-2xl font-bold text-gray-900 dark:text-white">{card.value}</span>
               </div>
+              <p className="text-gray-600 dark:text-gray-300 text-sm">{card.description}</p>
             </div>
+          ))}
+        </div>
 
-            {/* Detailed Information */}
-            <div className="grid md:grid-cols-2 gap-6">
-              <div className="bg-gray-900/50 backdrop-blur-sm rounded-xl border border-gray-700/50 p-6">
-                <h3 className="text-xl font-semibold text-white mb-6 flex items-center space-x-2">
-                  <Clock className="h-6 w-6 text-purple-400" />
-                  <span>Uptime Details</span>
-                </h3>
-                <div className="space-y-4">
-                  <div className="flex justify-between items-center">
-                    <span className="text-gray-400">Days:</span>
-                    <span className="font-semibold text-white text-lg">{statusData.uptime.days}</span>
-                  </div>
-                  <div className="flex justify-between items-center">
-                    <span className="text-gray-400">Hours:</span>
-                    <span className="font-semibold text-white text-lg">{statusData.uptime.hours}</span>
-                  </div>
-                  <div className="flex justify-between items-center">
-                    <span className="text-gray-400">Minutes:</span>
-                    <span className="font-semibold text-white text-lg">{statusData.uptime.minutes}</span>
-                  </div>
-                  <div className="flex justify-between items-center">
-                    <span className="text-gray-400">Seconds:</span>
-                    <span className="font-semibold text-white text-lg">{statusData.uptime.seconds}</span>
-                  </div>
-                </div>
+        {isOnline && (uptime.days > 0 || uptime.hours > 0 || uptime.minutes > 0 || uptime.seconds > 0) && (
+          <div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-shadow mb-16">
+            <div className="flex items-center mb-4">
+              <div className="w-10 h-10 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center text-gray-600 dark:text-gray-300 mr-3">
+                <ClockIcon className="w-6 h-6" />
               </div>
-              
-              <div className="bg-gray-900/50 backdrop-blur-sm rounded-xl border border-gray-700/50 p-6">
-                <h3 className="text-xl font-semibold text-white mb-6 flex items-center space-x-2">
-                  <GitBranch className="h-6 w-6 text-blue-400" />
-                  <span>System Information</span>
-                </h3>
-                <div className="space-y-4">
-                  <div className="flex justify-between items-center">
-                    <span className="text-gray-400">Commit Hash:</span>
-                    <span className="font-mono text-sm bg-gray-800 text-gray-300 px-3 py-1 rounded-lg">
-                      {statusData.commitHash || 'Unknown'}
-                    </span>
-                  </div>
-                  <div className="flex justify-between items-center">
-                    <span className="text-gray-400">Last Ready:</span>
-                    <span className="font-medium text-white">
-                      {statusData.lastReady 
-                        ? new Date(statusData.lastReady).toLocaleString()
-                        : 'Never'
-                      }
-                    </span>
-                  </div>
-                  <div className="flex justify-between items-center">
-                    <span className="text-gray-400">Response Time:</span>
-                    <span className={`font-semibold text-lg ${getPingColor(statusData.ping)}`}>
-                      {statusData.ping}ms
-                    </span>
-                  </div>
-                </div>
+              <h3 className="font-semibold text-gray-900 dark:text-white">System Uptime</h3>
+            </div>
+            <div className="text-center">
+              <div className="text-2xl font-bold text-gray-900 dark:text-white">
+                {uptime.days > 0 && `${uptime.days}d `}
+                {String(uptime.hours).padStart(2, '0')}h {String(uptime.minutes).padStart(2, '0')}m {String(uptime.seconds).padStart(2, '0')}s
               </div>
             </div>
+          </div>
+        )}
 
-            {/* Status Indicators */}
-            <div className="bg-gray-900/50 backdrop-blur-sm rounded-xl border border-gray-700/50 p-6">
-              <h3 className="text-xl font-semibold text-white mb-6">Service Health</h3>
-              <div className="grid md:grid-cols-3 gap-4">
-                <div className="flex items-center space-x-3 p-4 bg-gray-800/50 rounded-lg border border-gray-700/30">
-                  <div className={`w-4 h-4 rounded-full ${
-                    statusData.status === 'online' ? 'bg-green-500' : 'bg-red-500'
-                  }`}></div>
-                  <span className="text-gray-300 font-medium">API Server</span>
-                  <span className={`ml-auto px-3 py-1 text-xs rounded-full font-medium ${
-                    statusData.status === 'online' 
-                      ? 'bg-green-500/20 text-green-400' 
-                      : 'bg-red-500/20 text-red-400'
-                  }`}>
-                    {statusData.status}
-                  </span>
-                </div>
-                
-                <div className="flex items-center space-x-3 p-4 bg-gray-800/50 rounded-lg border border-gray-700/30">
-                  <div className={`w-4 h-4 rounded-full ${
-                    statusData.botStatus === 'connected' ? 'bg-green-500' : 'bg-red-500'
-                  }`}></div>
-                  <span className="text-gray-300 font-medium">Discord Bot</span>
-                  <span className={`ml-auto px-3 py-1 text-xs rounded-full font-medium ${
-                    statusData.botStatus === 'connected' 
-                      ? 'bg-green-500/20 text-green-400' 
-                      : 'bg-red-500/20 text-red-400'
-                  }`}>
-                    {statusData.botStatus}
-                  </span>
-                </div>
-                
-                <div className="flex items-center space-x-3 p-4 bg-gray-800/50 rounded-lg border border-gray-700/30">
-                  <div className={`w-4 h-4 rounded-full ${
-                    statusData.ping < 300 ? 'bg-green-500' : 'bg-yellow-500'
-                  }`}></div>
-                  <span className="text-gray-300 font-medium">Network</span>
-                  <span className={`ml-auto px-3 py-1 text-xs rounded-full font-medium ${
-                    statusData.ping < 100 
-                      ? 'bg-green-500/20 text-green-400'
-                      : statusData.ping < 300
-                      ? 'bg-yellow-500/20 text-yellow-400'
-                      : 'bg-red-500/20 text-red-400'
-                  }`}>
-                    {statusData.ping}ms
-                  </span>
-                </div>
-              </div>
+        <div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-shadow mb-16">
+          <h3 className="font-semibold text-gray-900 dark:text-white mb-4">Version Information</h3>
+          <div className="flex flex-col sm:flex-row items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-6">
+            <div className="flex items-center bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg px-4 py-2">
+              <svg className="w-5 h-5 text-gray-500 dark:text-gray-400 mr-3" fill="currentColor" viewBox="0 0 24 24">
+                <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
+              </svg>
+              {commitHash ? (
+                <a
+                  href={`https://github.com/scanash00/bot/commit/${commitHash}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="font-mono text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
+                  title={commitHash}
+                >
+                  {commitHash.substring(0, 7)}
+                </a>
+              ) : (
+                <span className="font-mono text-sm font-medium text-gray-700 dark:text-gray-200">unknown</span>
+              )}
             </div>
+            <span className="text-sm text-gray-600 dark:text-gray-300">
+              Last Updated: {status.lastReady ? new Date(status.lastReady).toLocaleString(undefined, {
+                month: 'short',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
+                hour12: false
+              }) : 'Unknown'}
+            </span>
           </div>
-        ) : null}
+        </div>
+
+        <div className="text-center">
+          <Link 
+            to="/"
+            className="bg-sky-600 hover:bg-sky-700 text-white font-semibold py-3 px-8 rounded-lg transition-colors inline-flex items-center"
+          >
+            <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+            </svg>
+            Back to Home
+          </Link>
+        </div>
       </div>
+      
+      <Footer />
     </div>
-  )
-}
-
-export default StatusPage
+  );
+}

web/src/pages/TermsPage.tsx

···
-import { Link } from 'react-router-dom';
-import { ArrowLeft } from 'lucide-react';
+import { LegalLayout } from '../components/LegalLayout';
+import Footer from '../components/Footer';
 
 export default function TermsOfService() {
   return (
-    <div className="min-h-screen bg-[#0A0A0A] text-white">
-      {/* Header */}
-      <header className="border-b border-gray-800">
-        <div className="max-w-4xl mx-auto px-6 py-4">
-          <Link 
-            to="/" 
-            className="inline-flex items-center gap-2 text-gray-400 hover:text-white transition-colors"
-          >
-            <ArrowLeft className="w-4 h-4" />
-            Back to Home
-          </Link>
-        </div>
-      </header>
-
-      {/* Content */}
-      <main className="max-w-4xl mx-auto px-6 py-12">
-        <div className="mb-8">
-          <h1 className="text-4xl font-bold text-white mb-2">Terms of Service</h1>
-          <p className="text-gray-400">Last Updated: June 16, 2025</p>
-        </div>
+    <>
+    <LegalLayout title="Terms of Service" lastUpdated="June 16, 2025">
       <div className="space-y-8">
           <section>
-            <h2 className="text-2xl font-bold text-white mb-4 pt-8 border-t border-gray-800 first:border-t-0 first:pt-0">1. Acceptance of Terms</h2>
-            <p className="text-gray-400 leading-relaxed">
+            <h2 className="text-2xl font-bold text-gray-800 dark:text-white mb-4 pt-2 border-t border-gray-100 dark:border-gray-700 first:border-t-0 first:pt-0">1. Acceptance of Terms</h2>
+            <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
               By using the Bot, you agree to be bound by these Terms of Service. If you do not agree to these terms, please do not use the Bot.
             </p>
           </section>
 
           <section>
-            <h2 className="text-2xl font-bold text-white mb-4 pt-8 border-t border-gray-800 first:border-t-0 first:pt-0">2. Description of Service</h2>
-            <p className="text-gray-400 leading-relaxed mb-4">
+            <h2 className="text-2xl font-bold text-gray-800 dark:text-white mb-4 pt-2 border-t border-gray-100 dark:border-gray-700 first:border-t-0 first:pt-0">2. Description of Service</h2>
+            <p className="text-gray-600 dark:text-gray-300 leading-relaxed mb-4">
               The Bot provides various Discord utilities including but not limited to: reminders, random cat and dog images, weather information, wiki lookups, and fun commands. You agree to use the Bot in accordance with Discord&apos;s Terms of Service and Community Guidelines.
             </p>
-            <ul className="list-disc pl-6 space-y-3 text-gray-400">
+            <ul className="list-disc pl-6 space-y-3 text-gray-600 dark:text-gray-300">
               <li>Reminder system</li>
               <li>Random cat and dog images</li>
               <li>Weather information</li>
···
           </section>
 
           <section>
-            <h2 className="text-2xl font-bold text-white mb-4 pt-8 border-t border-gray-800 first:border-t-0 first:pt-0">3. User Responsibilities</h2>
-            <p className="text-gray-400 leading-relaxed mb-4">
+            <h2 className="text-2xl font-bold text-gray-800 dark:text-white mb-4 pt-2 border-t border-gray-100 dark:border-gray-700 first:border-t-0 first:pt-0">3. User Responsibilities</h2>
+            <p className="text-gray-600 dark:text-gray-300 leading-relaxed mb-4">
               When using the Bot, you agree not to:
             </p>
-            <ul className="list-disc pl-6 space-y-3 text-gray-400">
+            <ul className="list-disc pl-6 space-y-3 text-gray-600 dark:text-gray-300">
               <li>Use the Bot for any illegal or unauthorized purpose</li>
               <li>Violate any laws in your jurisdiction</li>
               <li>Attempt to disrupt or interfere with the Bot&apos;s operation</li>
···
           </section>
 
           <section>
-            <h2 className="text-2xl font-bold text-white mb-4 pt-8 border-t border-gray-800 first:border-t-0 first:pt-0">4. API Usage</h2>
-            <p className="text-gray-400 leading-relaxed">
+            <h2 className="text-2xl font-bold text-gray-800 dark:text-white mb-4 pt-2 border-t border-gray-100 dark:border-gray-700 first:border-t-0 first:pt-0">4. API Usage</h2>
+            <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
               The Bot may use third-party APIs and services (&quot;Third-Party Services&quot;). Your use of these services is subject to their respective terms and privacy policies.
             </p>
-            <ul className="list-disc pl-6 space-y-3 text-gray-400 mt-2">
+            <ul className="list-disc pl-6 space-y-3 text-gray-600 dark:text-gray-300 mt-2">
               <li>You are responsible for the security of your API keys</li>
               <li>We do not store your API keys permanently - they are only kept in memory during your active session</li>
               <li>You must comply with the terms of service of any third-party APIs you use with the Bot</li>
···
           </section>
 
           <section>
-            <h2 className="text-2xl font-bold text-white mb-4 pt-8 border-t border-gray-800 first:border-t-0 first:pt-0">5. Limitation of Liability</h2>
-            <p className="text-gray-400 leading-relaxed">
+            <h2 className="text-2xl font-bold text-gray-800 dark:text-white mb-4 pt-2 border-t border-gray-100 dark:border-gray-700 first:border-t-0 first:pt-0">5. Limitation of Liability</h2>
+            <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
               The Bot is provided &quot;as is&quot; without any warranties. We are not responsible for any direct, indirect, incidental, or consequential damages resulting from the use of the Bot.
             </p>
           </section>
 
           <section>
-            <h2 className="text-2xl font-bold text-white mb-4 pt-8 border-t border-gray-800 first:border-t-0 first:pt-0">6. Changes to Terms</h2>
-            <p className="text-gray-400 leading-relaxed">
+            <h2 className="text-2xl font-bold text-gray-800 dark:text-white mb-4 pt-2 border-t border-gray-100 dark:border-gray-700 first:border-t-0 first:pt-0">6. Changes to Terms</h2>
+            <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
               We reserve the right to modify these terms at any time. Continued use of the Bot after changes constitutes acceptance of the new terms.
             </p>
           </section>
 
           <section>
-            <h2 className="text-2xl font-bold text-white mb-4 pt-8 border-t border-gray-800 first:border-t-0 first:pt-0">7. Contact</h2>
-            <p className="text-gray-400 leading-relaxed">
-              If you have any questions about these Terms of Service, please contact us at <a href="mailto:[e-mail]" className="text-blue-400 hover:text-blue-300 hover:underline font-medium">[e-mail]</a>.
+            <h2 className="text-2xl font-bold text-gray-800 dark:text-white mb-4 pt-2 border-t border-gray-100 dark:border-gray-700 first:border-t-0 first:pt-0">7. Contact</h2>
+            <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
+              If you have any questions about these Terms of Service, please contact us at <a href="mailto:[e-mail]" className="text-sky-600 dark:text-sky-400 hover:underline font-medium">[e-mail]</a>.
             </p>
           </section>
       </div>
-      </main>
-    </div>
+    </LegalLayout>
+    
+    <Footer />
+    </>
   );
 }

web/vite.config.ts

···
-import { defineConfig, loadEnv } from 'vite';
+import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
+import fs from 'fs';
+import dotenv from 'dotenv';
 
 export default defineConfig(() => {
+  const envWebPath = path.resolve(__dirname, '..', '.env.web');
+  const envPath = path.resolve(__dirname, '..', '.env');
+
+  if (fs.existsSync(envWebPath)) {
+    dotenv.config({ path: envWebPath });
+  } else if (fs.existsSync(envPath)) {
+    dotenv.config({ path: envPath });
+  }
+
   return {
     plugins: [react()],
     envPrefix: 'VITE_',
-    envDir: path.resolve(__dirname, '..'),
-    resolve: {
-      alias: {
-        '@': path.resolve(__dirname, './src'),
-      },
-    },
     server: {
       port: 3000,
       proxy: {
         '/api': {
-          target: process.env.FRONTEND_URL || 'http://localhost:2020',
+          target: process.env.VITE_BOT_API_URL || 'http://localhost:2020',
           changeOrigin: true,
         },
+      },
+    },
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, './src'),
       },
     },
     build: {