diff --git a/astro-site/.astro/settings.json b/astro-site/.astro/settings.json
index ce198b8..6d76a53 100644
--- a/astro-site/.astro/settings.json
+++ b/astro-site/.astro/settings.json
@@ -1,5 +1,5 @@
 {
 	"_variables": {
-		"lastUpdateCheck": 1768189288502
+		"lastUpdateCheck": 1770417750117
 	}
 }
\ No newline at end of file
diff --git a/astro-site/astro.config.mjs b/astro-site/astro.config.mjs
index 7ce9cc3..4c89e4d 100644
--- a/astro-site/astro.config.mjs
+++ b/astro-site/astro.config.mjs
@@ -5,4 +5,8 @@ import react from '@astrojs/react';
 export default defineConfig({
   integrations: [tailwind(), react()],
   site: 'https://aethex-connect.com',
+  server: {
+    port: 4321,
+    host: 'localhost'
+  }
 });
diff --git a/astro-site/src/components/aethex/AeThexProvider.jsx b/astro-site/src/components/aethex/AeThexProvider.jsx
new file mode 100644
index 0000000..0971c64
--- /dev/null
+++ b/astro-site/src/components/aethex/AeThexProvider.jsx
@@ -0,0 +1,275 @@
+/**
+ * AeThex Provider
+ * Main context provider for AeThex Connect - handles auth, chat, and real-time features
+ */
+
+import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
+import { io } from 'socket.io-client';
+
+const API_URL = import.meta.env?.VITE_API_URL || 'http://localhost:3000';
+const API_BASE = `${API_URL}/api`;
+
+const AeThexContext = createContext(null);
+
+export function useAeThex() {
+  return useContext(AeThexContext);
+}
+
+export function AeThexProvider({ children }) {
+  // Auth state
+  const [user, setUser] = useState(null);
+  const [token, setTokenState] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  // Socket state
+  const [socket, setSocket] = useState(null);
+  const [connected, setConnected] = useState(false);
+
+  // Chat state
+  const [servers, setServers] = useState([]);
+  const [channels, setChannels] = useState([]);
+  const [messages, setMessages] = useState([]);
+  const [currentServer, setCurrentServer] = useState(null);
+  const [currentChannel, setCurrentChannel] = useState(null);
+  const [onlineUsers, setOnlineUsers] = useState([]);
+
+  // Token management
+  const setToken = useCallback((newToken) => {
+    setTokenState(newToken);
+    if (newToken) {
+      localStorage.setItem('aethex_token', newToken);
+    } else {
+      localStorage.removeItem('aethex_token');
+    }
+  }, []);
+
+  // API request helper
+  const apiRequest = useCallback(async (endpoint, options = {}) => {
+    const headers = {
+      'Content-Type': 'application/json',
+      ...options.headers,
+    };
+
+    const currentToken = token || localStorage.getItem('aethex_token');
+    if (currentToken) {
+      headers['Authorization'] = `Bearer ${currentToken}`;
+    }
+
+    const response = await fetch(`${API_BASE}${endpoint}`, {
+      ...options,
+      headers,
+    });
+
+    const data = await response.json();
+    if (!response.ok) {
+      throw new Error(data.error || 'Request failed');
+    }
+    return data;
+  }, [token]);
+
+  // Auth functions
+  const login = useCallback(async (email, password) => {
+    setError(null);
+    setLoading(true);
+    try {
+      const response = await apiRequest('/auth/login', {
+        method: 'POST',
+        body: JSON.stringify({ email, password }),
+      });
+      if (response.success) {
+        setToken(response.data.token);
+        setUser(response.data.user);
+        return { success: true };
+      }
+      throw new Error(response.error || 'Login failed');
+    } catch (err) {
+      setError(err.message);
+      return { success: false, error: err.message };
+    } finally {
+      setLoading(false);
+    }
+  }, [apiRequest, setToken]);
+
+  const register = useCallback(async (email, password, username, displayName) => {
+    setError(null);
+    setLoading(true);
+    try {
+      const response = await apiRequest('/auth/register', {
+        method: 'POST',
+        body: JSON.stringify({ email, password, username, displayName }),
+      });
+      if (response.success) {
+        setToken(response.data.token);
+        setUser(response.data.user);
+        return { success: true };
+      }
+      throw new Error(response.error || 'Registration failed');
+    } catch (err) {
+      setError(err.message);
+      return { success: false, error: err.message };
+    } finally {
+      setLoading(false);
+    }
+  }, [apiRequest, setToken]);
+
+  const demoLogin = useCallback(async () => {
+    setError(null);
+    setLoading(true);
+    try {
+      const response = await apiRequest('/auth/demo', {
+        method: 'POST',
+      });
+      if (response.success) {
+        setToken(response.data.token);
+        setUser(response.data.user);
+        return { success: true };
+      }
+      throw new Error(response.error || 'Demo login failed');
+    } catch (err) {
+      setError(err.message);
+      return { success: false, error: err.message };
+    } finally {
+      setLoading(false);
+    }
+  }, [apiRequest, setToken]);
+
+  const logout = useCallback(() => {
+    setToken(null);
+    setUser(null);
+    if (socket) {
+      socket.disconnect();
+      setSocket(null);
+    }
+    setConnected(false);
+  }, [socket, setToken]);
+
+  // Socket connection
+  const connectSocket = useCallback((authToken) => {
+    if (socket) {
+      socket.disconnect();
+    }
+
+    const newSocket = io(API_URL, {
+      auth: { token: authToken },
+      reconnection: true,
+      reconnectionDelay: 1000,
+      reconnectionAttempts: 10,
+      transports: ['websocket', 'polling']
+    });
+
+    newSocket.on('connect', () => {
+      console.log('✓ Connected to AeThex Connect');
+      setConnected(true);
+    });
+
+    newSocket.on('disconnect', () => {
+      console.log('✗ Disconnected from AeThex Connect');
+      setConnected(false);
+    });
+
+    newSocket.on('message:new', (message) => {
+      setMessages(prev => [...prev, message]);
+    });
+
+    newSocket.on('presence:online', (users) => {
+      setOnlineUsers(users);
+    });
+
+    setSocket(newSocket);
+    return newSocket;
+  }, [socket]);
+
+  // Chat functions
+  const sendMessage = useCallback((content) => {
+    if (!socket || !connected || !currentChannel) return;
+    socket.emit('channel:message', {
+      channelId: currentChannel.id,
+      content
+    });
+  }, [socket, connected, currentChannel]);
+
+  const joinChannel = useCallback((channelId) => {
+    if (!socket || !connected) return;
+    socket.emit('channel:join', { channelId });
+  }, [socket, connected]);
+
+  // Check auth on mount
+  useEffect(() => {
+    const checkAuth = async () => {
+      const storedToken = localStorage.getItem('aethex_token');
+      if (storedToken) {
+        setTokenState(storedToken);
+        try {
+          const response = await fetch(`${API_BASE}/auth/me`, {
+            headers: { 'Authorization': `Bearer ${storedToken}` }
+          });
+          const data = await response.json();
+          if (data.success) {
+            setUser(data.data);
+            connectSocket(storedToken);
+          } else {
+            localStorage.removeItem('aethex_token');
+          }
+        } catch (err) {
+          console.error('Auth check failed:', err);
+          localStorage.removeItem('aethex_token');
+        }
+      }
+      setLoading(false);
+    };
+
+    checkAuth();
+
+    return () => {
+      if (socket) {
+        socket.disconnect();
+      }
+    };
+  }, []);
+
+  // Connect socket when user logs in
+  useEffect(() => {
+    if (user && token && !socket) {
+      connectSocket(token);
+    }
+  }, [user, token]);
+
+  const value = {
+    // Auth
+    user,
+    loading,
+    error,
+    isAuthenticated: !!user,
+    login,
+    register,
+    demoLogin,
+    logout,
+
+    // Socket
+    socket,
+    connected,
+
+    // Chat
+    servers,
+    channels,
+    messages,
+    currentServer,
+    currentChannel,
+    onlineUsers,
+    setCurrentServer,
+    setCurrentChannel,
+    setMessages,
+    sendMessage,
+    joinChannel,
+
+    // API helper
+    apiRequest
+  };
+
+  return (
+    <AeThexContext.Provider value={value}>
+      {children}
+    </AeThexContext.Provider>
+  );
+}
diff --git a/astro-site/src/components/auth/AccountLinker.jsx b/astro-site/src/components/auth/AccountLinker.jsx
index 282466c..dd35fa3 100644
--- a/astro-site/src/components/auth/AccountLinker.jsx
+++ b/astro-site/src/components/auth/AccountLinker.jsx
@@ -1,18 +1,13 @@
-
-
 import React, { useState } from "react";
-import { useMatrix } from "../matrix/MatrixProvider.jsx";
-
+import { useAeThex } from "../aethex/AeThexProvider.jsx";
 
 /**
- * UI for linking AeThex and Matrix accounts.
- * 1. User logs in with AeThex credentials (simulate for now)
- * 2. User logs in with Matrix credentials
- * 3. Store mapping in localStorage (or call backend in real app)
+ * UI for AeThex account login/registration
  */
 export default function AccountLinker({ onLinked }) {
-  const matrixCtx = useMatrix();
-  if (!matrixCtx) {
+  const aethex = useAeThex();
+  
+  if (!aethex) {
     return (
       <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-[#1a1a2e] via-[#23234a] to-[#0f3460]">
         <div className="relative flex flex-col items-center">
@@ -24,7 +19,7 @@ export default function AccountLinker({ onLinked }) {
           </div>
           <div className="toast bg-[#23234a] text-white px-6 py-4 rounded-xl shadow-lg border border-pink-400 animate-fade-in">
             <span className="font-bold text-pink-400">Hang tight!</span> <br />
-            <span className="text-sm text-blue-200">We’re prepping your login experience…</span>
+            <span className="text-sm text-blue-200">We're prepping your login experience…</span>
           </div>
         </div>
         <style>{`
@@ -42,61 +37,60 @@ export default function AccountLinker({ onLinked }) {
       </div>
     );
   }
-  const { login } = matrixCtx;
-  const [aethexUser, setAethexUser] = useState("");
-  const [aethexPass, setAethexPass] = useState("");
-  const [matrixUser, setMatrixUser] = useState("");
-  const [matrixPass, setMatrixPass] = useState("");
-  const [step, setStep] = useState(1);
-  const [error, setError] = useState(null);
+  
+  const { login, register, demoLogin, loading, error, isAuthenticated, user } = aethex;
+  
+  const [mode, setMode] = useState('login');
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [username, setUsername] = useState("");
+  const [displayName, setDisplayName] = useState("");
+  const [formError, setFormError] = useState(null);
 
-  // Simulate AeThex auth (replace with real API call)
-  const handleAethexLogin = (e) => {
+  // Already authenticated
+  if (isAuthenticated && user) {
+    if (onLinked) onLinked({ user });
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-[#1a1a2e] via-[#23234a] to-[#0f3460]">
+        <div className="text-white text-lg">Welcome, {user.displayName || user.username}!</div>
+      </div>
+    );
+  }
+
+  const handleSubmit = async (e) => {
     e.preventDefault();
-    if (aethexUser && aethexPass) {
-      setStep(2);
-      setError(null);
-    } else {
-      setError("Enter AeThex username and password.");
+    setFormError(null);
+    
+    try {
+      let result;
+      if (mode === 'login') {
+        result = await login(email, password);
+      } else {
+        result = await register(email, password, username, displayName);
+      }
+      
+      if (result.success && onLinked) {
+        onLinked({ user: result.user });
+      } else if (!result.success) {
+        setFormError(result.error || 'Authentication failed');
+      }
+    } catch (err) {
+      setFormError(err.message || 'An error occurred');
     }
   };
 
-  // Simulate Matrix auth (let MatrixProvider handle real login)
-  const handleMatrixLogin = (e) => {
-    e.preventDefault();
-    if (matrixUser && matrixPass) {
-      // Store mapping (simulate)
-      localStorage.setItem("aethex-matrix-link", JSON.stringify({ aethexUser, matrixUser }));
-      setError(null);
-      if (onLinked) onLinked({ aethexUser, matrixUser, matrixPass });
-    } else {
-      setError("Enter Matrix username and password.");
-    }
-  };
-
-  // Demo login handler
   const handleDemoLogin = async () => {
-    setAethexUser('demo');
-    setAethexPass('demo123');
-    setStep(2);
-    setTimeout(async () => {
-      setMatrixUser('@mrpiglr:matrix.org');
-      setMatrixPass('Max!FTW2023!');
-      setTimeout(async () => {
-        localStorage.setItem("aethex-matrix-link", JSON.stringify({ aethexUser: 'demo', matrixUser: '@mrpiglr:matrix.org' }));
-        setError(null);
-        if (login) {
-          try {
-            await login('@mrpiglr:matrix.org', 'Max!FTW2023!');
-          } catch (e) {
-            setError(e.message || 'Login failed.');
-            return;
-          }
-        }
-        if (onLinked) onLinked({ aethexUser: 'demo', matrixUser: '@mrpiglr:matrix.org', matrixPass: 'Max!FTW2023!' });
-        // window.location.href = '/';
-      }, 500);
-    }, 500);
+    setFormError(null);
+    try {
+      const result = await demoLogin();
+      if (result.success && onLinked) {
+        onLinked({ user: result.user });
+      } else if (!result.success) {
+        setFormError(result.error || 'Demo login failed');
+      }
+    } catch (err) {
+      setFormError(err.message || 'Demo login failed');
+    }
   };
 
   return (
@@ -104,54 +98,94 @@ export default function AccountLinker({ onLinked }) {
       <div className="account-linker bg-[#181818cc] p-8 rounded-2xl max-w-md w-full mx-auto shadow-2xl border border-[#23234a] flex flex-col items-center animate-fade-in">
         <img src="/favicon.svg" alt="AeThex Logo" className="w-16 h-16 mb-4 drop-shadow-lg" />
         <h1 className="text-3xl font-extrabold mb-2 text-white tracking-tight text-center">AeThex Connect</h1>
-        <h2 className="text-lg font-semibold mb-6 text-blue-300 text-center">Sign in to your account</h2>
-        <button onClick={handleDemoLogin} className="mb-4 w-full bg-gradient-to-r from-yellow-400 to-pink-500 text-white rounded-lg py-2 font-bold shadow hover:from-yellow-500 hover:to-pink-600 transition">Demo Login</button>
-        {error && <div className="mb-2 text-red-400 text-center w-full">{error}</div>}
-        {/* Show MatrixProvider error if present */}
-        {matrixCtx && matrixCtx.error && (
-          <div className="mb-2 text-red-400 text-center w-full">Matrix error: {matrixCtx.error}</div>
+        <h2 className="text-lg font-semibold mb-6 text-blue-300 text-center">
+          {mode === 'login' ? 'Sign in to your account' : 'Create your account'}
+        </h2>
+        
+        <button 
+          onClick={handleDemoLogin} 
+          disabled={loading}
+          className="mb-4 w-full bg-gradient-to-r from-yellow-400 to-pink-500 text-white rounded-lg py-2 font-bold shadow hover:from-yellow-500 hover:to-pink-600 transition disabled:opacity-50"
+        >
+          {loading ? 'Loading...' : '🚀 Try Demo'}
+        </button>
+        
+        <div className="flex items-center w-full mb-4">
+          <div className="flex-1 border-t border-gray-600"></div>
+          <span className="px-3 text-gray-400 text-sm">or</span>
+          <div className="flex-1 border-t border-gray-600"></div>
+        </div>
+        
+        {(formError || error) && (
+          <div className="mb-4 p-3 bg-red-500/20 border border-red-500/50 rounded-lg text-red-400 text-center w-full text-sm">
+            {formError || error}
+          </div>
         )}
-        {step === 1 && (
-          <form onSubmit={handleAethexLogin} className="flex flex-col gap-4 w-full">
-            <input
-              type="text"
-              placeholder="AeThex Username"
-              className="px-4 py-3 rounded-lg bg-[#23234a] text-white border border-[#2d2d5a] focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
-              value={aethexUser}
-              onChange={e => setAethexUser(e.target.value)}
-              autoFocus
-            />
-            <input
-              type="password"
-              placeholder="AeThex Password"
-              className="px-4 py-3 rounded-lg bg-[#23234a] text-white border border-[#2d2d5a] focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
-              value={aethexPass}
-              onChange={e => setAethexPass(e.target.value)}
-            />
-            <button type="submit" className="bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-lg py-3 font-bold mt-2 shadow-lg hover:from-blue-700 hover:to-purple-700 transition">Continue to Matrix</button>
-          </form>
-        )}
-        {step === 2 && (
-          <form onSubmit={handleMatrixLogin} className="flex flex-col gap-4 w-full">
-            <input
-              type="text"
-              placeholder="Matrix Username (@user:matrix.org)"
-              className="px-4 py-3 rounded-lg bg-[#23234a] text-white border border-[#2d2d5a] focus:outline-none focus:ring-2 focus:ring-green-500 transition"
-              value={matrixUser}
-              onChange={e => setMatrixUser(e.target.value)}
-              autoFocus
-            />
-            <input
-              type="password"
-              placeholder="Matrix Password"
-              className="px-4 py-3 rounded-lg bg-[#23234a] text-white border border-[#2d2d5a] focus:outline-none focus:ring-2 focus:ring-green-500 transition"
-              value={matrixPass}
-              onChange={e => setMatrixPass(e.target.value)}
-            />
-            <button type="submit" className="bg-gradient-to-r from-green-500 to-blue-500 text-white rounded-lg py-3 font-bold mt-2 shadow-lg hover:from-green-600 hover:to-blue-600 transition">Link Accounts & Login</button>
-          </form>
-        )}
-        <div className="mt-6 text-center text-gray-400 text-xs w-full">
+        
+        <form onSubmit={handleSubmit} className="flex flex-col gap-4 w-full">
+          {mode === 'register' && (
+            <>
+              <input
+                type="text"
+                placeholder="Username"
+                className="px-4 py-3 rounded-lg bg-[#23234a] text-white border border-[#2d2d5a] focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
+                value={username}
+                onChange={e => setUsername(e.target.value)}
+              />
+              <input
+                type="text"
+                placeholder="Display Name (optional)"
+                className="px-4 py-3 rounded-lg bg-[#23234a] text-white border border-[#2d2d5a] focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
+                value={displayName}
+                onChange={e => setDisplayName(e.target.value)}
+              />
+            </>
+          )}
+          <input
+            type="email"
+            placeholder="Email"
+            className="px-4 py-3 rounded-lg bg-[#23234a] text-white border border-[#2d2d5a] focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
+            value={email}
+            onChange={e => setEmail(e.target.value)}
+            required
+          />
+          <input
+            type="password"
+            placeholder="Password"
+            className="px-4 py-3 rounded-lg bg-[#23234a] text-white border border-[#2d2d5a] focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
+            value={password}
+            onChange={e => setPassword(e.target.value)}
+            required
+            minLength={8}
+          />
+          <button 
+            type="submit" 
+            disabled={loading}
+            className="bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-lg py-3 font-bold mt-2 shadow-lg hover:from-blue-700 hover:to-purple-700 transition disabled:opacity-50"
+          >
+            {loading ? 'Please wait...' : (mode === 'login' ? 'Sign In' : 'Create Account')}
+          </button>
+        </form>
+        
+        <div className="mt-6 text-center text-gray-400 text-sm">
+          {mode === 'login' ? (
+            <span>
+              Don't have an account?{' '}
+              <button onClick={() => setMode('register')} className="text-blue-400 hover:text-blue-300 underline">
+                Sign up
+              </button>
+            </span>
+          ) : (
+            <span>
+              Already have an account?{' '}
+              <button onClick={() => setMode('login')} className="text-blue-400 hover:text-blue-300 underline">
+                Sign in
+              </button>
+            </span>
+          )}
+        </div>
+        
+        <div className="mt-4 text-center text-gray-500 text-xs w-full">
           <span>By continuing, you agree to the <a href="/terms" className="underline hover:text-blue-300">Terms of Service</a> and <a href="/privacy" className="underline hover:text-blue-300">Privacy Policy</a>.</span>
         </div>
       </div>
diff --git a/astro-site/src/components/auth/LoginForm.jsx b/astro-site/src/components/auth/LoginForm.jsx
new file mode 100644
index 0000000..d1156cd
--- /dev/null
+++ b/astro-site/src/components/auth/LoginForm.jsx
@@ -0,0 +1,215 @@
+/**
+ * LoginForm Component
+ * Handles user authentication for AeThex Connect
+ */
+
+import React, { useState } from "react";
+import { useAeThex } from "../aethex/AeThexProvider.jsx";
+import { PRESET_IMAGES, getAvatarImage } from "../../utils/unsplash.js";
+
+export default function LoginForm() {
+  const context = useAeThex();
+  
+  const [mode, setMode] = useState('login'); // 'login' or 'register'
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [username, setUsername] = useState('');
+  const [displayName, setDisplayName] = useState('');
+  const [formError, setFormError] = useState(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Loading state while checking auth
+  if (!context) {
+    return (
+      <div 
+        className="flex items-center justify-center min-h-screen"
+        style={{
+          backgroundImage: `linear-gradient(rgba(26, 26, 46, 0.85), rgba(15, 52, 96, 0.9)), url(${PRESET_IMAGES.loginBackground})`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center'
+        }}
+      >
+        <div className="relative flex flex-col items-center">
+          <div className="w-16 h-16 mb-6">
+            <svg className="animate-spin" viewBox="0 0 50 50">
+              <circle className="opacity-20" cx="25" cy="25" r="20" stroke="#fff" strokeWidth="5" fill="none" />
+              <circle cx="25" cy="25" r="20" stroke="#ff6bcb" strokeWidth="5" fill="none" strokeDasharray="100" strokeDashoffset="60" />
+            </svg>
+          </div>
+          <div className="text-white text-lg">Loading...</div>
+        </div>
+      </div>
+    );
+  }
+
+  const { login, register, demoLogin, loading, error, isAuthenticated, user } = context;
+
+  // If already authenticated, redirect to app
+  if (isAuthenticated && user) {
+    window.location.href = '/app';
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-[#1a1a2e] via-[#23234a] to-[#0f3460]">
+        <div className="text-white text-lg">Welcome, {user.displayName || user.username}! Redirecting...</div>
+      </div>
+    );
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setFormError(null);
+    setIsSubmitting(true);
+
+    try {
+      let result;
+      if (mode === 'login') {
+        result = await login(email, password);
+      } else {
+        result = await register(email, password, username, displayName);
+      }
+
+      if (result.success) {
+        window.location.href = '/app';
+      } else {
+        setFormError(result.error || 'Authentication failed');
+      }
+    } catch (err) {
+      setFormError(err.message || 'An error occurred');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleDemoLogin = async () => {
+    setFormError(null);
+    setIsSubmitting(true);
+    try {
+      const result = await demoLogin();
+      if (result.success) {
+        window.location.href = '/app';
+      } else {
+        setFormError(result.error || 'Demo login failed');
+      }
+    } catch (err) {
+      setFormError(err.message || 'Demo login failed');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div 
+      className="login-bg min-h-screen flex flex-col items-center justify-center"
+      style={{
+        backgroundImage: `linear-gradient(135deg, rgba(26, 26, 46, 0.88) 0%, rgba(22, 33, 62, 0.9) 50%, rgba(15, 52, 96, 0.85) 100%), url(${PRESET_IMAGES.loginBackground})`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center'
+      }}
+    >
+      <div className="bg-[#181818cc] backdrop-blur-sm p-8 rounded-2xl max-w-md w-full mx-auto shadow-2xl border border-[#23234a] flex flex-col items-center animate-fade-in">
+        <img src="/favicon.svg" alt="AeThex Logo" className="w-16 h-16 mb-4 drop-shadow-lg" />
+        <h1 className="text-3xl font-extrabold mb-2 text-white tracking-tight text-center">AeThex Connect</h1>
+        <h2 className="text-lg font-semibold mb-6 text-blue-300 text-center">
+          {mode === 'login' ? 'Sign in to your account' : 'Create your account'}
+        </h2>
+
+        {/* Demo Login Button */}
+        <button 
+          onClick={handleDemoLogin}
+          disabled={isSubmitting}
+          className="mb-4 w-full bg-gradient-to-r from-yellow-400 to-pink-500 text-white rounded-lg py-2 font-bold shadow hover:from-yellow-500 hover:to-pink-600 transition disabled:opacity-50"
+        >
+          {isSubmitting ? 'Loading...' : '🚀 Try Demo'}
+        </button>
+
+        <div className="flex items-center w-full mb-4">
+          <div className="flex-1 border-t border-gray-600"></div>
+          <span className="px-3 text-gray-400 text-sm">or</span>
+          <div className="flex-1 border-t border-gray-600"></div>
+        </div>
+
+        {/* Error Display */}
+        {(formError || error) && (
+          <div className="mb-4 p-3 bg-red-500/20 border border-red-500/50 rounded-lg text-red-400 text-center w-full text-sm">
+            {formError || error}
+          </div>
+        )}
+
+        {/* Login/Register Form */}
+        <form onSubmit={handleSubmit} className="flex flex-col gap-4 w-full">
+          {mode === 'register' && (
+            <>
+              <input
+                type="text"
+                placeholder="Username"
+                className="px-4 py-3 rounded-lg bg-[#23234a] text-white border border-[#2d2d5a] focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
+                value={username}
+                onChange={e => setUsername(e.target.value)}
+              />
+              <input
+                type="text"
+                placeholder="Display Name (optional)"
+                className="px-4 py-3 rounded-lg bg-[#23234a] text-white border border-[#2d2d5a] focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
+                value={displayName}
+                onChange={e => setDisplayName(e.target.value)}
+              />
+            </>
+          )}
+          <input
+            type="email"
+            placeholder="Email"
+            className="px-4 py-3 rounded-lg bg-[#23234a] text-white border border-[#2d2d5a] focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
+            value={email}
+            onChange={e => setEmail(e.target.value)}
+            required
+          />
+          <input
+            type="password"
+            placeholder="Password"
+            className="px-4 py-3 rounded-lg bg-[#23234a] text-white border border-[#2d2d5a] focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
+            value={password}
+            onChange={e => setPassword(e.target.value)}
+            required
+            minLength={8}
+          />
+          <button 
+            type="submit" 
+            disabled={isSubmitting}
+            className="bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-lg py-3 font-bold mt-2 shadow-lg hover:from-blue-700 hover:to-purple-700 transition disabled:opacity-50"
+          >
+            {isSubmitting ? 'Please wait...' : (mode === 'login' ? 'Sign In' : 'Create Account')}
+          </button>
+        </form>
+
+        {/* Toggle Mode */}
+        <div className="mt-6 text-center text-gray-400 text-sm">
+          {mode === 'login' ? (
+            <span>
+              Don't have an account?{' '}
+              <button onClick={() => setMode('register')} className="text-blue-400 hover:text-blue-300 underline">
+                Sign up
+              </button>
+            </span>
+          ) : (
+            <span>
+              Already have an account?{' '}
+              <button onClick={() => setMode('login')} className="text-blue-400 hover:text-blue-300 underline">
+                Sign in
+              </button>
+            </span>
+          )}
+        </div>
+
+        <div className="mt-4 text-center text-gray-500 text-xs">
+          By continuing, you agree to the{' '}
+          <a href="/terms" className="underline hover:text-blue-300">Terms of Service</a> and{' '}
+          <a href="/privacy" className="underline hover:text-blue-300">Privacy Policy</a>.
+        </div>
+      </div>
+      
+      <style>{`
+        .animate-fade-in { animation: fadeIn 0.8s cubic-bezier(.4,0,.2,1) both; }
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
+      `}</style>
+    </div>
+  );
+}
diff --git a/astro-site/src/components/auth/LoginIsland.jsx b/astro-site/src/components/auth/LoginIsland.jsx
index 189de02..4b9ce14 100644
--- a/astro-site/src/components/auth/LoginIsland.jsx
+++ b/astro-site/src/components/auth/LoginIsland.jsx
@@ -1,11 +1,11 @@
 import React from "react";
-import { MatrixProvider } from "../matrix/MatrixProvider.jsx";
-import AccountLinker from "./AccountLinker.jsx";
+import { AeThexProvider } from "../aethex/AeThexProvider.jsx";
+import LoginForm from "./LoginForm.jsx";
 
 export default function LoginIsland() {
   return (
-    <MatrixProvider>
-      <AccountLinker onLinked={() => {}} />
-    </MatrixProvider>
+    <AeThexProvider>
+      <LoginForm />
+    </AeThexProvider>
   );
 }
diff --git a/astro-site/src/components/auth/SupabaseLogin.jsx b/astro-site/src/components/auth/SupabaseLogin.jsx
deleted file mode 100644
index 2300916..0000000
--- a/astro-site/src/components/auth/SupabaseLogin.jsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React, { useState } from "react";
-import { createClient } from "@supabase/supabase-js";
-
-const supabase = createClient(
-  import.meta.env.PUBLIC_SUPABASE_URL,
-  import.meta.env.PUBLIC_SUPABASE_ANON_KEY
-);
-
-export default function SupabaseLogin() {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState(null);
-  const [loading, setLoading] = useState(false);
-  const [success, setSuccess] = useState(false);
-
-  const handleLogin = async (e) => {
-    e.preventDefault();
-    setLoading(true);
-    setError(null);
-    setSuccess(false);
-    const { error } = await supabase.auth.signInWithPassword({ email, password });
-    setLoading(false);
-    if (error) {
-      setError(error.message);
-    } else {
-      setSuccess(true);
-      // Optionally redirect or reload
-      window.location.href = "/app";
-    }
-  };
-
-  return (
-    <div className="login-bg min-h-screen flex flex-col items-center justify-center" style={{background: "linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)"}}>
-      <div className="account-linker bg-[#181818cc] p-8 rounded-2xl max-w-md w-full mx-auto shadow-2xl border border-[#23234a] flex flex-col items-center animate-fade-in">
-        <img src="/favicon.svg" alt="AeThex Logo" className="w-16 h-16 mb-4 drop-shadow-lg" />
-        <h1 className="text-3xl font-extrabold mb-2 text-white tracking-tight text-center">AeThex Connect</h1>
-        <h2 className="text-lg font-semibold mb-6 text-blue-300 text-center">Sign in to your account</h2>
-        {error && <div className="mb-2 text-red-400 text-center w-full">{error}</div>}
-        {success && <div className="mb-2 text-green-400 text-center w-full">Login successful!</div>}
-        <form onSubmit={handleLogin} className="flex flex-col gap-4 w-full">
-          <input
-            type="email"
-            placeholder="Email"
-            className="px-4 py-3 rounded-lg bg-[#23234a] text-white border border-[#2d2d5a] focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
-            value={email}
-            onChange={e => setEmail(e.target.value)}
-            autoFocus
-          />
-          <input
-            type="password"
-            placeholder="Password"
-            className="px-4 py-3 rounded-lg bg-[#23234a] text-white border border-[#2d2d5a] focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
-            value={password}
-            onChange={e => setPassword(e.target.value)}
-          />
-          <button type="submit" className="bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-lg py-3 font-bold mt-2 shadow-lg hover:from-blue-700 hover:to-purple-700 transition" disabled={loading}>
-            {loading ? "Signing in..." : "Sign In"}
-          </button>
-        </form>
-        <div className="mt-6 text-center text-gray-400 text-xs w-full">
-          <span>By continuing, you agree to the <a href="/terms" className="underline hover:text-blue-300">Terms of Service</a> and <a href="/privacy" className="underline hover:text-blue-300">Privacy Policy</a>.</span>
-        </div>
-      </div>
-      <style>{`
-        .animate-fade-in { animation: fadeIn 0.8s cubic-bezier(.4,0,.2,1) both; }
-        @keyframes fadeIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
-      `}</style>
-    </div>
-  );
-}
diff --git a/astro-site/src/components/mockup/ChatArea.jsx b/astro-site/src/components/mockup/ChatArea.jsx
index fed4d27..6cf9928 100644
--- a/astro-site/src/components/mockup/ChatArea.jsx
+++ b/astro-site/src/components/mockup/ChatArea.jsx
@@ -1,30 +1,28 @@
 import React, { useEffect } from "react";
 import Message from "./Message";
 import MessageInput from "./MessageInput";
-import { useMatrix } from "../matrix/MatrixProvider.jsx";
+import { useAeThex } from "../aethex/AeThexProvider.jsx";
 import DemoLoginButton from "./DemoLoginButton.jsx";
 
-// Default room to join (replace with your Matrix room ID)
-const DEFAULT_ROOM_ID = "!foundation:matrix.org";
+// Default channel to join
+const DEFAULT_CHANNEL_ID = "general";
 
 export default function ChatArea() {
-  const { messages, joinRoom, currentRoomId, user, login, loading } = useMatrix();
+  const { messages, joinChannel, currentChannelId, user, demoLogin, loading, isAuthenticated } = useAeThex();
 
-  // Join the default room on login
+  // Join the default channel on login
   useEffect(() => {
-    if (user && !currentRoomId) {
-      joinRoom(DEFAULT_ROOM_ID);
+    if (isAuthenticated && user && !currentChannelId) {
+      joinChannel(DEFAULT_CHANNEL_ID);
     }
-  }, [user, currentRoomId, joinRoom]);
+  }, [isAuthenticated, user, currentChannelId, joinChannel]);
 
   // Demo login handler
-  const handleDemoLogin = () => {
-    // Use a public Matrix test account or a known demo account
-    // You can change these credentials as needed
-    login("@mrpiglr:matrix.org", "Max!FTW2023!", "https://matrix.org");
+  const handleDemoLogin = async () => {
+    await demoLogin();
   };
 
-  if (!user) {
+  if (!isAuthenticated || !user) {
     return (
       <div className="chat-area flex flex-col flex-1 bg-[#0a0a0a] items-center justify-center">
         <DemoLoginButton onDemoLogin={handleDemoLogin} />
@@ -49,7 +47,7 @@ export default function ChatArea() {
       <div className="chat-messages flex-1 overflow-y-auto px-5 py-5">
         {messages && messages.length > 0 ? (
           messages.map((msg, i) => (
-            <Message key={i} {...matrixToMessageProps(msg)} />
+            <Message key={msg.id || i} {...messageToProps(msg)} />
           ))
         ) : (
           <div className="text-gray-500 text-center">No messages yet.</div>
@@ -65,19 +63,15 @@ export default function ChatArea() {
 }
 
 
-// Helper to convert Matrix event to Message props
-function matrixToMessageProps(event) {
-  if (!event) return {};
-  if (event.type === "m.room.message") {
-    return {
-      type: "user",
-      author: event.sender?.split(":")[0]?.replace("@", "") || "User",
-      text: event.content?.body || "",
-      time: new Date(event.origin_server_ts).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
-      avatar: event.sender?.charAt(1)?.toUpperCase() || "U",
-      avatarBg: "from-blue-600 to-blue-900",
-    };
-  }
-  // Add system message mapping if needed
-  return { type: "system", label: "MATRIX", text: JSON.stringify(event), className: "foundation" };
+// Helper to convert AeThex message to Message props
+function messageToProps(msg) {
+  if (!msg) return {};
+  return {
+    type: "user",
+    author: msg.sender?.display_name || msg.sender?.username || "User",
+    text: msg.content || "",
+    time: new Date(msg.created_at).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
+    avatar: (msg.sender?.display_name || msg.sender?.username || "U").charAt(0).toUpperCase(),
+    avatarBg: "from-blue-600 to-blue-900",
+  };
 }
diff --git a/astro-site/src/components/mockup/MessageInput.jsx b/astro-site/src/components/mockup/MessageInput.jsx
index 271eb9c..3328f48 100644
--- a/astro-site/src/components/mockup/MessageInput.jsx
+++ b/astro-site/src/components/mockup/MessageInput.jsx
@@ -1,16 +1,16 @@
 import React, { useState } from "react";
-import { useMatrix } from "../matrix/MatrixProvider.jsx";
+import { useAeThex } from "../aethex/AeThexProvider.jsx";
 
-const DEFAULT_ROOM_ID = "!foundation:matrix.org";
+const DEFAULT_CHANNEL_ID = "general";
 
 export default function MessageInput() {
   const [text, setText] = useState("");
-  const { sendMessage, user, currentRoomId } = useMatrix();
+  const { sendMessage, user, currentChannelId, isAuthenticated } = useAeThex();
 
   const handleSend = async (e) => {
     e.preventDefault();
-    if (!text.trim() || !user) return;
-    await sendMessage(currentRoomId || DEFAULT_ROOM_ID, text);
+    if (!text.trim() || !user || !isAuthenticated) return;
+    await sendMessage(currentChannelId || DEFAULT_CHANNEL_ID, text);
     setText("");
   };
 
@@ -24,7 +24,7 @@ export default function MessageInput() {
         maxLength={2000}
         value={text}
         onChange={e => setText(e.target.value)}
-        disabled={!user}
+        disabled={!user || !isAuthenticated}
       />
       <button type="submit" className="sendButton w-10 h-10 flex items-center justify-center rounded bg-blue-600 text-xl text-white ml-2">3a4</button>
     </form>
diff --git a/astro-site/src/components/webrtc/WebRTCProvider.jsx b/astro-site/src/components/webrtc/WebRTCProvider.jsx
index e60d6a8..4313b84 100644
--- a/astro-site/src/components/webrtc/WebRTCProvider.jsx
+++ b/astro-site/src/components/webrtc/WebRTCProvider.jsx
@@ -1,7 +1,7 @@
 
 import React, { createContext, useContext, useRef, useState, useEffect, useCallback } from "react";
 import Peer from "simple-peer";
-import { useMatrix } from "../matrix/MatrixProvider.jsx";
+import { useAeThex } from "../aethex/AeThexProvider.jsx";
 
 const WebRTCContext = createContext(null);
 
@@ -13,31 +13,32 @@ export function WebRTCProvider({ children }) {
   const [peers, setPeers] = useState([]); // [{ peerId, peer, stream }]
   const [localStream, setLocalStream] = useState(null);
   const [joined, setJoined] = useState(false);
+  const [currentVoiceChannel, setCurrentVoiceChannel] = useState(null);
   const peersRef = useRef({});
-  const matrix = useMatrix();
-  if (!matrix) {
-    // Optionally render a fallback or nothing if Matrix context is not available
+  const aethex = useAeThex();
+  
+  if (!aethex) {
     return null;
   }
-  const { client, user, currentRoomId } = matrix;
-  const SIGNAL_EVENT = "org.aethex.voice.signal";
-  const VOICE_ROOM = currentRoomId || "!foundation:matrix.org";
+  
+  const { socket, user, isAuthenticated } = aethex;
 
-  // Helper: Send signal via Matrix event
+  // Helper: Send signal via Socket.io
   const sendSignal = useCallback((to, data) => {
-    if (!client || !VOICE_ROOM) return;
-    client.sendEvent(VOICE_ROOM, SIGNAL_EVENT, { to, from: user?.userId, data }, "");
-  }, [client, VOICE_ROOM, user]);
+    if (!socket || !currentVoiceChannel) return;
+    socket.emit('voice:signal', { to, channelId: currentVoiceChannel, data });
+  }, [socket, currentVoiceChannel]);
 
   // Join a voice channel (start local audio, announce self)
-  const joinVoice = async () => {
-    if (localStream || !client || !user) return;
+  const joinVoice = async (channelId) => {
+    if (localStream || !socket || !user || !isAuthenticated) return;
     try {
       const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
       setLocalStream(stream);
+      setCurrentVoiceChannel(channelId);
       setJoined(true);
       // Announce self to others
-      client.sendEvent(VOICE_ROOM, SIGNAL_EVENT, { join: true, from: user.userId }, "");
+      socket.emit('voice:join', { channelId });
     } catch (err) {
       alert("Could not access microphone: " + err.message);
     }
@@ -53,57 +54,78 @@ export function WebRTCProvider({ children }) {
     peersRef.current = {};
     setPeers([]);
     setJoined(false);
-    if (client && user) {
-      client.sendEvent(VOICE_ROOM, SIGNAL_EVENT, { leave: true, from: user.userId }, "");
+    if (socket && currentVoiceChannel) {
+      socket.emit('voice:leave', { channelId: currentVoiceChannel });
     }
+    setCurrentVoiceChannel(null);
   };
 
-  // Handle incoming Matrix signal events
+  // Handle incoming Socket.io signal events
   useEffect(() => {
-    if (!client || !user || !VOICE_ROOM) return;
-    const handler = (event) => {
-      if (event.getType() !== SIGNAL_EVENT) return;
-      const { from, to, data, join, leave } = event.getContent();
-      if (from === user.userId) return;
-      // Handle join: create peer if not exists
-      if (join) {
-        if (!peersRef.current[from]) {
-          const initiator = user.userId > from; // simple deterministic initiator
-          const peer = new Peer({ initiator, trickle: false, stream: localStream });
-          peer.on("signal", signal => sendSignal(from, signal));
-          peer.on("stream", remoteStream => {
-            setPeers(p => [...p, { peerId: from, peer, stream: remoteStream }]);
-          });
-          peer.on("close", () => {
-            setPeers(p => p.filter(x => x.peerId !== from));
-            delete peersRef.current[from];
-          });
-          peersRef.current[from] = { peer };
-        }
-      }
-      // Handle leave: remove peer
-      if (leave && peersRef.current[from]) {
-        peersRef.current[from].peer.destroy();
-        delete peersRef.current[from];
-        setPeers(p => p.filter(x => x.peerId !== from));
-      }
-      // Handle signal: pass to peer
-      if (data && peersRef.current[from]) {
-        peersRef.current[from].peer.signal(data);
+    if (!socket || !user || !isAuthenticated) return;
+    
+    const handleUserJoined = ({ userId, channelId }) => {
+      if (userId === user.id || channelId !== currentVoiceChannel || !localStream) return;
+      
+      if (!peersRef.current[userId]) {
+        const initiator = user.id > userId; // deterministic initiator
+        const peer = new Peer({ initiator, trickle: false, stream: localStream });
+        
+        peer.on("signal", signal => sendSignal(userId, signal));
+        peer.on("stream", remoteStream => {
+          setPeers(p => [...p, { peerId: userId, peer, stream: remoteStream }]);
+        });
+        peer.on("close", () => {
+          setPeers(p => p.filter(x => x.peerId !== userId));
+          delete peersRef.current[userId];
+        });
+        
+        peersRef.current[userId] = { peer };
       }
     };
-    client.on("event", handler);
-    return () => client.removeListener("event", handler);
-  }, [client, user, VOICE_ROOM, localStream, sendSignal]);
-
-  // Announce self to new joiners
-  useEffect(() => {
-    if (!joined || !client || !user) return;
-    client.sendEvent(VOICE_ROOM, SIGNAL_EVENT, { join: true, from: user.userId }, "");
-  }, [joined, client, user, VOICE_ROOM]);
+    
+    const handleUserLeft = ({ userId }) => {
+      if (peersRef.current[userId]) {
+        peersRef.current[userId].peer.destroy();
+        delete peersRef.current[userId];
+        setPeers(p => p.filter(x => x.peerId !== userId));
+      }
+    };
+    
+    const handleSignal = ({ from, data }) => {
+      if (peersRef.current[from]) {
+        peersRef.current[from].peer.signal(data);
+      } else if (localStream) {
+        // Create peer for late joiners
+        const peer = new Peer({ initiator: false, trickle: false, stream: localStream });
+        
+        peer.on("signal", signal => sendSignal(from, signal));
+        peer.on("stream", remoteStream => {
+          setPeers(p => [...p, { peerId: from, peer, stream: remoteStream }]);
+        });
+        peer.on("close", () => {
+          setPeers(p => p.filter(x => x.peerId !== from));
+          delete peersRef.current[from];
+        });
+        
+        peer.signal(data);
+        peersRef.current[from] = { peer };
+      }
+    };
+    
+    socket.on('voice:user_joined', handleUserJoined);
+    socket.on('voice:user_left', handleUserLeft);
+    socket.on('voice:signal', handleSignal);
+    
+    return () => {
+      socket.off('voice:user_joined', handleUserJoined);
+      socket.off('voice:user_left', handleUserLeft);
+      socket.off('voice:signal', handleSignal);
+    };
+  }, [socket, user, isAuthenticated, currentVoiceChannel, localStream, sendSignal]);
 
   return (
-    <WebRTCContext.Provider value={{ peers, localStream, joined, joinVoice, leaveVoice }}>
+    <WebRTCContext.Provider value={{ peers, localStream, joined, joinVoice, leaveVoice, currentVoiceChannel }}>
       {children}
     </WebRTCContext.Provider>
   );
diff --git a/astro-site/src/pages/_mockup.jsx b/astro-site/src/pages/_mockup.jsx
index 84ec9d5..31a45bf 100644
--- a/astro-site/src/pages/_mockup.jsx
+++ b/astro-site/src/pages/_mockup.jsx
@@ -1,2 +1,2 @@
 
-// Removed: This page is deprecated. Use /app for the full platform UI.
\ No newline at end of file
+// Removed: This page is deprecated. Use /app for the full platform UI.
diff --git a/astro-site/src/pages/images.astro b/astro-site/src/pages/images.astro
new file mode 100644
index 0000000..71c557d
--- /dev/null
+++ b/astro-site/src/pages/images.astro
@@ -0,0 +1,154 @@
+---
+/**
+ * Image Gallery Demo - Shows available Unsplash assets
+ */
+---
+
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>AeThex Image Assets</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { 
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+      min-height: 100vh;
+      color: white;
+      padding: 40px 20px;
+    }
+    h1 { text-align: center; margin-bottom: 40px; font-size: 2.5rem; }
+    h2 { margin: 30px 0 20px; color: #60a5fa; border-bottom: 1px solid #334155; padding-bottom: 10px; }
+    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; max-width: 1400px; margin: 0 auto; }
+    .card { 
+      background: rgba(30, 41, 59, 0.8); 
+      border-radius: 12px; 
+      overflow: hidden;
+      border: 1px solid #334155;
+    }
+    .card img { width: 100%; height: 200px; object-fit: cover; }
+    .card-body { padding: 16px; }
+    .card-title { font-weight: 600; margin-bottom: 8px; }
+    .card-url { font-size: 12px; color: #94a3b8; word-break: break-all; }
+    .avatars { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin: 20px 0; }
+    .avatar { 
+      width: 80px; 
+      height: 80px; 
+      border-radius: 50%; 
+      border: 3px solid #60a5fa;
+      background: #1e293b;
+    }
+    .back-link { 
+      display: inline-block;
+      margin-bottom: 20px;
+      color: #60a5fa;
+      text-decoration: none;
+    }
+    .back-link:hover { text-decoration: underline; }
+  </style>
+</head>
+<body>
+  <a href="/" class="back-link">← Back to Home</a>
+  <h1>🎨 AeThex Image Assets</h1>
+  <p style="text-align: center; color: #94a3b8; margin-bottom: 40px;">
+    Free stock images from Unsplash + DiceBear avatars
+  </p>
+
+  <h2>📸 Preset Background Images</h2>
+  <div class="grid">
+    <div class="card">
+      <img src="https://images.unsplash.com/photo-1538481199705-c710c4e965fc?w=600&q=80" alt="Hero" loading="lazy" />
+      <div class="card-body">
+        <div class="card-title">Hero Background</div>
+        <div class="card-url">Gaming setup - perfect for landing pages</div>
+      </div>
+    </div>
+    <div class="card">
+      <img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&q=80" alt="Login" loading="lazy" />
+      <div class="card-body">
+        <div class="card-title">Login Background</div>
+        <div class="card-url">Retro gaming aesthetic</div>
+      </div>
+    </div>
+    <div class="card">
+      <img src="https://images.unsplash.com/photo-1614850523459-c2f4c699c52e?w=600&q=80" alt="Chat" loading="lazy" />
+      <div class="card-body">
+        <div class="card-title">Chat Background</div>
+        <div class="card-url">Dark abstract pattern</div>
+      </div>
+    </div>
+    <div class="card">
+      <img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?w=600&q=80" alt="Server" loading="lazy" />
+      <div class="card-body">
+        <div class="card-title">Server Banner</div>
+        <div class="card-url">Esports/competitive gaming</div>
+      </div>
+    </div>
+    <div class="card">
+      <img src="https://images.unsplash.com/photo-1511512578047-dfb367046420?w=600&q=80" alt="Profile" loading="lazy" />
+      <div class="card-body">
+        <div class="card-title">Profile Banner</div>
+        <div class="card-url">Gaming aesthetic</div>
+      </div>
+    </div>
+    <div class="card">
+      <img src="https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?w=600&q=80" alt="Voice" loading="lazy" />
+      <div class="card-body">
+        <div class="card-title">Voice Channel</div>
+        <div class="card-url">Audio waves visualization</div>
+      </div>
+    </div>
+    <div class="card">
+      <img src="https://images.unsplash.com/photo-1557682250-33bd709cbe85?w=600&q=80" alt="Premium" loading="lazy" />
+      <div class="card-body">
+        <div class="card-title">Premium Banner</div>
+        <div class="card-url">Purple gradient - perfect for upgrades</div>
+      </div>
+    </div>
+  </div>
+
+  <h2>👤 DiceBear Avatars</h2>
+  <p style="color: #94a3b8; margin-bottom: 20px;">Auto-generated based on username seed</p>
+  <div class="avatars">
+    <img class="avatar" src="https://api.dicebear.com/7.x/adventurer/svg?seed=player1&size=80" alt="Avatar 1" />
+    <img class="avatar" src="https://api.dicebear.com/7.x/avataaars/svg?seed=gamer42&size=80" alt="Avatar 2" />
+    <img class="avatar" src="https://api.dicebear.com/7.x/bottts/svg?seed=techuser&size=80" alt="Avatar 3" />
+    <img class="avatar" src="https://api.dicebear.com/7.x/fun-emoji/svg?seed=happyface&size=80" alt="Avatar 4" />
+    <img class="avatar" src="https://api.dicebear.com/7.x/lorelei/svg?seed=mystical&size=80" alt="Avatar 5" />
+    <img class="avatar" src="https://api.dicebear.com/7.x/notionists/svg?seed=creative&size=80" alt="Avatar 6" />
+    <img class="avatar" src="https://api.dicebear.com/7.x/personas/svg?seed=unique&size=80" alt="Avatar 7" />
+  </div>
+
+  <h2>🎮 Dynamic Gaming Images</h2>
+  <p style="color: #94a3b8; margin-bottom: 20px;">Random images from Unsplash (refreshes on reload)</p>
+  <div class="grid">
+    <div class="card">
+      <img src="https://source.unsplash.com/600x400/?gaming,neon" alt="Random Gaming" loading="lazy" />
+      <div class="card-body">
+        <div class="card-title">Gaming + Neon</div>
+        <div class="card-url">source.unsplash.com/600x400/?gaming,neon</div>
+      </div>
+    </div>
+    <div class="card">
+      <img src="https://source.unsplash.com/600x400/?technology,dark" alt="Random Tech" loading="lazy" />
+      <div class="card-body">
+        <div class="card-title">Technology + Dark</div>
+        <div class="card-url">source.unsplash.com/600x400/?technology,dark</div>
+      </div>
+    </div>
+    <div class="card">
+      <img src="https://source.unsplash.com/600x400/?abstract,gradient" alt="Random Abstract" loading="lazy" />
+      <div class="card-body">
+        <div class="card-title">Abstract + Gradient</div>
+        <div class="card-url">source.unsplash.com/600x400/?abstract,gradient</div>
+      </div>
+    </div>
+  </div>
+
+  <div style="text-align: center; margin-top: 60px; color: #64748b;">
+    <p>All images from <a href="https://unsplash.com" style="color: #60a5fa;">Unsplash</a> (free for commercial use)</p>
+    <p>Avatars from <a href="https://dicebear.com" style="color: #60a5fa;">DiceBear</a> (free for commercial use)</p>
+  </div>
+</body>
+</html>
diff --git a/astro-site/src/pages/login.astro b/astro-site/src/pages/login.astro
index 475475e..81bd75c 100644
--- a/astro-site/src/pages/login.astro
+++ b/astro-site/src/pages/login.astro
@@ -1,9 +1,9 @@
 ---
 import Layout from '../layouts/Layout.astro';
-import SupabaseLogin from '../components/auth/SupabaseLogin.jsx';
+import LoginIsland from '../components/auth/LoginIsland.jsx';
 ---
 
 
 <Layout title="AeThex Connect – Login">
-  <SupabaseLogin client:load />
+  <LoginIsland client:load />
 </Layout>
diff --git a/astro-site/src/pages/mockup.jsx b/astro-site/src/pages/mockup.jsx
deleted file mode 100644
index 31a45bf..0000000
--- a/astro-site/src/pages/mockup.jsx
+++ /dev/null
@@ -1,2 +0,0 @@
-
-// Removed: This page is deprecated. Use /app for the full platform UI.
diff --git a/astro-site/src/react-app/Demo.jsx b/astro-site/src/react-app/Demo.jsx
index 0f70b43..ea1289f 100644
--- a/astro-site/src/react-app/Demo.jsx
+++ b/astro-site/src/react-app/Demo.jsx
@@ -15,10 +15,47 @@ import './App.css';
  */
 function DemoContent() {
   const [activeTab, setActiveTab] = useState('overview');
-  const { user, loading } = useAuth();
+  const { user, loading, isAuthenticated, demoLogin, error } = useAuth();
+  const [loginLoading, setLoginLoading] = useState(false);
+
+  // Handle demo login
+  const handleDemoLogin = async () => {
+    setLoginLoading(true);
+    await demoLogin();
+    setLoginLoading(false);
+  };
+
+  // Show login screen when not authenticated
+  if (!loading && !isAuthenticated) {
+    return (
+      <div className="loading-screen" style={{ flexDirection: 'column', gap: '20px' }}>
+        <div className="loading-spinner">{String.fromCodePoint(0x1F680)}</div>
+        <h2 style={{ color: '#fff', margin: 0 }}>AeThex Connect Demo</h2>
+        <p style={{ color: '#aaa', margin: 0 }}>Sign in to explore all features</p>
+        {error && <p style={{ color: '#ff6b6b' }}>{error}</p>}
+        <button 
+          onClick={handleDemoLogin}
+          disabled={loginLoading}
+          style={{
+            background: 'linear-gradient(90deg, #f7b42c, #fc575e)',
+            border: 'none',
+            padding: '12px 32px',
+            borderRadius: '8px',
+            color: '#fff',
+            fontWeight: 'bold',
+            fontSize: '16px',
+            cursor: loginLoading ? 'wait' : 'pointer',
+            opacity: loginLoading ? 0.7 : 1,
+          }}
+        >
+          {loginLoading ? 'Loading...' : '🚀 Try Demo'}
+        </button>
+      </div>
+    );
+  }
 
   // Show loading state while auth initializes
-  if (loading || !user) {
+  if (loading) {
     return (
       <div className="loading-screen">
         <div className="loading-spinner">{String.fromCodePoint(0x1F680)}</div>
@@ -47,7 +84,7 @@ function DemoContent() {
             </div>
             <div className="user-section">
               <div className="user-info">
-                <span className="user-name">{user.name}</span>
+                <span className="user-name">{user.displayName || user.username}</span>
                 <span className="user-email">{user.email}</span>
               </div>
               {user.verifiedDomain && (
diff --git a/astro-site/src/react-app/contexts/AuthContext.jsx b/astro-site/src/react-app/contexts/AuthContext.jsx
index 8757c84..9d57352 100644
--- a/astro-site/src/react-app/contexts/AuthContext.jsx
+++ b/astro-site/src/react-app/contexts/AuthContext.jsx
@@ -1,11 +1,8 @@
 
-import React, { createContext, useContext, useState, useEffect } from 'react';
-import { createClient } from '@supabase/supabase-js';
+import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
 
-const supabase = createClient(
-  import.meta.env.PUBLIC_SUPABASE_URL,
-  import.meta.env.PUBLIC_SUPABASE_ANON_KEY
-);
+const API_URL = import.meta.env?.VITE_API_URL || 'http://localhost:3000';
+const API_BASE = `${API_URL}/api`;
 
 const AuthContext = createContext();
 
@@ -19,29 +16,164 @@ export function useAuth() {
 
 export function AuthProvider({ children }) {
   const [user, setUser] = useState(null);
+  const [token, setTokenState] = useState(null);
   const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
 
+  // Token management
+  const setToken = useCallback((newToken) => {
+    setTokenState(newToken);
+    if (newToken) {
+      localStorage.setItem('aethex_token', newToken);
+    } else {
+      localStorage.removeItem('aethex_token');
+    }
+  }, []);
+
+  // API helper
+  const apiRequest = useCallback(async (endpoint, options = {}) => {
+    const headers = {
+      'Content-Type': 'application/json',
+      ...options.headers,
+    };
+    const currentToken = token || localStorage.getItem('aethex_token');
+    if (currentToken) {
+      headers['Authorization'] = `Bearer ${currentToken}`;
+    }
+    const response = await fetch(`${API_BASE}${endpoint}`, {
+      ...options,
+      headers,
+    });
+    const data = await response.json();
+    if (!response.ok) {
+      throw new Error(data.error || 'Request failed');
+    }
+    return data;
+  }, [token]);
+
+  // Check auth on mount
   useEffect(() => {
-    const getSession = async () => {
+    const checkAuth = async () => {
       setLoading(true);
-      const { data: { session } } = await supabase.auth.getSession();
-      if (session?.user) {
-        setUser(session.user);
-      } else {
-        setUser(null);
+      const storedToken = localStorage.getItem('aethex_token');
+      
+      if (storedToken) {
+        setTokenState(storedToken);
+        try {
+          const response = await fetch(`${API_BASE}/auth/me`, {
+            headers: {
+              'Authorization': `Bearer ${storedToken}`,
+            },
+          });
+          const data = await response.json();
+          if (response.ok && data.success) {
+            setUser(data.user);
+          } else {
+            // Token invalid, clear it
+            localStorage.removeItem('aethex_token');
+            setTokenState(null);
+            setUser(null);
+          }
+        } catch (err) {
+          console.error('Auth check failed:', err);
+          setUser(null);
+        }
       }
       setLoading(false);
     };
-    getSession();
-    const { data: listener } = supabase.auth.onAuthStateChange((_event, session) => {
-      setUser(session?.user || null);
-    });
-    return () => {
-      listener?.subscription.unsubscribe();
-    };
+    checkAuth();
   }, []);
 
-  const value = { user, loading, supabase };
+  // Login
+  const login = useCallback(async (email, password) => {
+    setError(null);
+    setLoading(true);
+    try {
+      const response = await apiRequest('/auth/login', {
+        method: 'POST',
+        body: JSON.stringify({ email, password }),
+      });
+      if (response.success && response.data) {
+        setToken(response.data.token);
+        setUser(response.data.user);
+        return { success: true, user: response.data.user };
+      }
+      return { success: false, error: response.error };
+    } catch (err) {
+      setError(err.message);
+      return { success: false, error: err.message };
+    } finally {
+      setLoading(false);
+    }
+  }, [apiRequest, setToken]);
+
+  // Register
+  const register = useCallback(async (email, password, username, displayName) => {
+    setError(null);
+    setLoading(true);
+    try {
+      const response = await apiRequest('/auth/register', {
+        method: 'POST',
+        body: JSON.stringify({ email, password, username, displayName }),
+      });
+      if (response.success && response.data) {
+        setToken(response.data.token);
+        setUser(response.data.user);
+        return { success: true, user: response.data.user };
+      }
+      return { success: false, error: response.error };
+    } catch (err) {
+      setError(err.message);
+      return { success: false, error: err.message };
+    } finally {
+      setLoading(false);
+    }
+  }, [apiRequest, setToken]);
+
+  // Demo login
+  const demoLogin = useCallback(async () => {
+    setError(null);
+    setLoading(true);
+    try {
+      const response = await apiRequest('/auth/demo', {
+        method: 'POST',
+      });
+      if (response.success && response.data) {
+        setToken(response.data.token);
+        setUser(response.data.user);
+        return { success: true, user: response.data.user };
+      }
+      return { success: false, error: response.error };
+    } catch (err) {
+      setError(err.message);
+      return { success: false, error: err.message };
+    } finally {
+      setLoading(false);
+    }
+  }, [apiRequest, setToken]);
+
+  // Logout
+  const logout = useCallback(async () => {
+    try {
+      await apiRequest('/auth/logout', { method: 'POST' });
+    } catch (err) {
+      console.error('Logout API call failed:', err);
+    }
+    setToken(null);
+    setUser(null);
+  }, [apiRequest, setToken]);
+
+  const value = {
+    user,
+    token,
+    loading,
+    error,
+    isAuthenticated: !!user,
+    login,
+    register,
+    demoLogin,
+    logout,
+  };
 
   return (
     <AuthContext.Provider value={value}>
diff --git a/astro-site/src/react-app/contexts/SocketContext.jsx b/astro-site/src/react-app/contexts/SocketContext.jsx
index 28c4563..782dcb5 100644
--- a/astro-site/src/react-app/contexts/SocketContext.jsx
+++ b/astro-site/src/react-app/contexts/SocketContext.jsx
@@ -3,27 +3,31 @@
  * Provides Socket.io connection to all components
  */
 
-import React, { createContext, useContext, useEffect, useState } from 'react';
+import React, { createContext, useContext, useEffect, useState, useCallback } from 'react';
 import { io } from 'socket.io-client';
+import { useAuth } from './AuthContext';
 
 const SocketContext = createContext(null);
 
 export function SocketProvider({ children }) {
   const [socket, setSocket] = useState(null);
   const [connected, setConnected] = useState(false);
+  const [messages, setMessages] = useState([]);
+  const [typingUsers, setTypingUsers] = useState({});
+  const { token, isAuthenticated } = useAuth();
 
   useEffect(() => {
-    const token = localStorage.getItem('token');
+    const authToken = token || localStorage.getItem('aethex_token');
     
-    if (!token) {
-      console.log('No auth token, skipping socket connection');
+    if (!authToken || !isAuthenticated) {
+      console.log('No auth, skipping socket connection');
       return;
     }
 
     // Connect to Socket.io server
     const socketInstance = io(import.meta.env.VITE_API_URL || 'http://localhost:3000', {
       auth: {
-        token: token
+        token: authToken
       },
       reconnection: true,
       reconnectionDelay: 1000,
@@ -48,6 +52,28 @@ export function SocketProvider({ children }) {
       console.error('Socket error:', error);
     });
 
+    // Message events
+    socketInstance.on('message', (msg) => {
+      setMessages(prev => [...prev, msg]);
+    });
+
+    socketInstance.on('user_typing', ({ conversationId, userId, username }) => {
+      setTypingUsers(prev => ({
+        ...prev,
+        [conversationId]: { ...prev[conversationId], [userId]: username }
+      }));
+    });
+
+    socketInstance.on('user_stopped_typing', ({ conversationId, userId }) => {
+      setTypingUsers(prev => {
+        const updated = { ...prev };
+        if (updated[conversationId]) {
+          delete updated[conversationId][userId];
+        }
+        return updated;
+      });
+    });
+
     setSocket(socketInstance);
 
     // Cleanup on unmount
@@ -56,10 +82,39 @@ export function SocketProvider({ children }) {
         socketInstance.disconnect();
       }
     };
-  }, []);
+  }, [token, isAuthenticated]);
+
+  // Send message
+  const sendMessage = useCallback((channelId, content) => {
+    if (socket && connected) {
+      socket.emit('message', { channelId, content });
+    }
+  }, [socket, connected]);
+
+  // Join channel
+  const joinChannel = useCallback((channelId) => {
+    if (socket && connected) {
+      socket.emit('join_conversation', { conversationId: channelId });
+    }
+  }, [socket, connected]);
+
+  // Send typing indicator
+  const sendTyping = useCallback((channelId, isTyping) => {
+    if (socket && connected) {
+      socket.emit(isTyping ? 'typing_start' : 'typing_stop', { conversationId: channelId });
+    }
+  }, [socket, connected]);
 
   return (
-    <SocketContext.Provider value={{ socket, connected }}>
+    <SocketContext.Provider value={{ 
+      socket, 
+      connected, 
+      messages, 
+      typingUsers, 
+      sendMessage, 
+      joinChannel,
+      sendTyping 
+    }}>
       {children}
     </SocketContext.Provider>
   );
diff --git a/astro-site/src/react-app/utils/socket.js b/astro-site/src/react-app/utils/socket.js
index 188de1e..9fbf34e 100644
--- a/astro-site/src/react-app/utils/socket.js
+++ b/astro-site/src/react-app/utils/socket.js
@@ -1,23 +1,18 @@
 // socket.js
-// Example Socket.io client for AeThex Connect (Supabase JWT auth)
+// Socket.io client for AeThex Connect
 
 import { io } from 'socket.io-client';
-import { createClient } from '@supabase/supabase-js';
 
-// Initialize Supabase client
-const supabase = createClient(
-  import.meta.env.PUBLIC_SUPABASE_URL,
-  import.meta.env.PUBLIC_SUPABASE_ANON_KEY
-);
+const API_URL = import.meta.env?.VITE_API_URL || 'http://localhost:3001';
 
 export async function connectSocket() {
-  // Get current session (JWT)
-  const { data: { session } } = await supabase.auth.getSession();
-  if (!session) throw new Error('Not authenticated');
+  // Get AeThex token from localStorage
+  const token = localStorage.getItem('aethex_token');
+  if (!token) throw new Error('Not authenticated');
 
   // Connect to signaling server
-  const socket = io(import.meta.env.PUBLIC_SIGNALING_SERVER_URL, {
-    auth: { token: session.access_token }
+  const socket = io(API_URL, {
+    auth: { token }
   });
 
   // Example: handle connection
diff --git a/astro-site/src/utils/unsplash.js b/astro-site/src/utils/unsplash.js
new file mode 100644
index 0000000..70c88fd
--- /dev/null
+++ b/astro-site/src/utils/unsplash.js
@@ -0,0 +1,106 @@
+/**
+ * Unsplash Image Utility
+ * Provides free stock images for AeThex Connect
+ * Uses Unsplash Source API (no key required for basic usage)
+ */
+
+// Curated gaming/tech collection IDs from Unsplash
+const COLLECTIONS = {
+  gaming: '1424240', // Gaming collection
+  tech: '3582603',   // Technology collection
+  neon: '1459961',   // Neon/cyberpunk aesthetic
+  dark: '827743',    // Dark moody shots
+  abstract: '1065976', // Abstract patterns
+};
+
+/**
+ * Get a random image URL from Unsplash
+ * @param {Object} options
+ * @param {number} options.width - Image width
+ * @param {number} options.height - Image height  
+ * @param {string} options.query - Search query
+ * @param {string} options.collection - Collection ID
+ * @returns {string} Image URL
+ */
+export function getUnsplashImage({ width = 1920, height = 1080, query, collection } = {}) {
+  const base = 'https://source.unsplash.com';
+  
+  if (collection && COLLECTIONS[collection]) {
+    return `${base}/collection/${COLLECTIONS[collection]}/${width}x${height}`;
+  }
+  
+  if (query) {
+    return `${base}/${width}x${height}/?${encodeURIComponent(query)}`;
+  }
+  
+  return `${base}/random/${width}x${height}`;
+}
+
+/**
+ * Get a gaming-themed background
+ */
+export function getGamingBackground(width = 1920, height = 1080) {
+  return getUnsplashImage({ width, height, query: 'gaming,neon,dark' });
+}
+
+/**
+ * Get a tech-themed background
+ */
+export function getTechBackground(width = 1920, height = 1080) {
+  return getUnsplashImage({ width, height, query: 'technology,dark,abstract' });
+}
+
+/**
+ * Get a random avatar placeholder
+ * Uses specific seeds for consistency
+ */
+export function getAvatarImage(seed, size = 200) {
+  // Use DiceBear for avatars (more reliable than Unsplash for small images)
+  const styles = ['adventurer', 'avataaars', 'bottts', 'fun-emoji', 'lorelei', 'notionists', 'personas'];
+  const style = styles[Math.abs(hashCode(seed)) % styles.length];
+  return `https://api.dicebear.com/7.x/${style}/svg?seed=${encodeURIComponent(seed)}&size=${size}`;
+}
+
+/**
+ * Get abstract pattern for cards/backgrounds
+ */
+export function getAbstractPattern(width = 800, height = 600) {
+  return getUnsplashImage({ width, height, query: 'abstract,gradient,dark' });
+}
+
+/**
+ * Prebuilt image URLs for specific use cases
+ */
+export const PRESET_IMAGES = {
+  heroBackground: 'https://images.unsplash.com/photo-1538481199705-c710c4e965fc?w=1920&q=80', // Gaming setup
+  loginBackground: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1920&q=80', // Retro gaming
+  chatBackground: 'https://images.unsplash.com/photo-1614850523459-c2f4c699c52e?w=1920&q=80', // Dark abstract
+  serverBanner: 'https://images.unsplash.com/photo-1542751371-adc38448a05e?w=1200&q=80', // Esports
+  profileBanner: 'https://images.unsplash.com/photo-1511512578047-dfb367046420?w=1200&q=80', // Gaming aesthetic
+  defaultAvatar: 'https://images.unsplash.com/photo-1566577134770-3d85bb3a9cc4?w=400&q=80', // Abstract
+  voiceChannel: 'https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?w=800&q=80', // Audio waves
+  premiumBanner: 'https://images.unsplash.com/photo-1557682250-33bd709cbe85?w=1200&q=80', // Purple gradient
+};
+
+/**
+ * Simple hash function for consistent results
+ */
+function hashCode(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = ((hash << 5) - hash) + char;
+    hash = hash & hash;
+  }
+  return hash;
+}
+
+export default {
+  getUnsplashImage,
+  getGamingBackground,
+  getTechBackground,
+  getAvatarImage,
+  getAbstractPattern,
+  PRESET_IMAGES,
+  COLLECTIONS,
+};
diff --git a/package-lock.json b/package-lock.json
index 766c6ce..be4125c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
       "dependencies": {
         "@supabase/supabase-js": "^2.90.1",
         "bcrypt": "^5.1.1",
+        "bcryptjs": "^3.0.3",
         "cors": "^2.8.5",
         "dotenv": "^16.3.1",
         "ethers": "^6.10.0",
@@ -5044,6 +5045,15 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/bcryptjs": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-3.0.3.tgz",
+      "integrity": "sha512-GlF5wPWnSa/X5LKM1o0wz0suXIINz1iHRLvTS+sLyi7XPbe5ycmYI3DlZqVGZZtDgl4DmasFg7gOB3JYbphV5g==",
+      "license": "BSD-3-Clause",
+      "bin": {
+        "bcrypt": "bin/bcrypt"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
diff --git a/package.json b/package.json
index c7a7072..47acbcb 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
   "dependencies": {
     "@supabase/supabase-js": "^2.90.1",
     "bcrypt": "^5.1.1",
+    "bcryptjs": "^3.0.3",
     "cors": "^2.8.5",
     "dotenv": "^16.3.1",
     "ethers": "^6.10.0",
diff --git a/packages/web/README.md b/packages/web/README.md
deleted file mode 100644
index f60cd73..0000000
--- a/packages/web/README.md
+++ /dev/null
@@ -1,153 +0,0 @@
-# AeThex Connect - Web PWA
-
-Progressive Web App for AeThex Connect built with React, TypeScript, and Vite.
-
-## Features
-
-- **Real-time Messaging** - End-to-end encrypted conversations
-- **Voice & Video Calls** - WebRTC-powered calls with crystal-clear quality
-- **Offline Support** - Service worker enables offline messaging and call history
-- **Dark Gaming Theme** - Modern, dark UI optimized for long sessions
-- **Progressive Enhancement** - Works on desktop and mobile with native app-like experience
-- **Responsive Design** - Tailwind CSS for mobile-first design
-
-## Project Structure
-
-```
-packages/web/src/
-├── index.tsx                # App entry point with PWA registration
-├── App.tsx                  # Main router and layout
-├── pages/
-│   ├── LoginPage.tsx       # Authentication
-│   ├── HomePage.tsx        # Dashboard
-│   ├── ChatPage.tsx        # Messaging interface
-│   ├── CallsPage.tsx       # Voice/video calls
-│   └── SettingsPage.tsx    # User preferences
-├── layouts/
-│   └── MainLayout.tsx      # Sidebar + header layout
-├── components/             # Reusable UI components
-├── hooks/                  # Custom React hooks
-├── utils/
-│   ├── serviceWorker.ts    # PWA registration
-│   └── webrtc.ts          # WebRTC signaling
-└── styles/
-    ├── global.css         # Tailwind + custom styles
-    └── app.css           # Component styles
-```
-
-## Installation
-
-```bash
-npm install --workspace=@aethex/web
-```
-
-## Development
-
-```bash
-npm run dev -w @aethex/web
-```
-
-Open http://localhost:5173 in your browser.
-
-## Building
-
-```bash
-npm run build -w @aethex/web
-npm run preview -w @aethex/web
-```
-
-## PWA Features
-
-### Service Worker
-- **Cache First**: Static assets cached for instant loading
-- **Network First**: API requests fetch fresh data with cache fallback
-- **Background Sync**: Offline messages synced when connection restored
-
-### Manifest
-- **Installable**: Add to homescreen on mobile devices
-- **Standalone**: Runs as full-screen app without browser UI
-- **Icons**: Adaptive icons for modern devices
-
-### Offline Support
-- Browse offline messages and call history
-- Compose messages while offline (synced automatically)
-- Works without internet connection
-
-## Redux State Management
-
-- **Auth Slice**: User authentication, tokens, profile
-- **Messaging Slice**: Conversations, messages, read receipts
-- **Calls Slice**: Active calls, call history, voice state
-
-## WebRTC Integration
-
-- **Peer Connections**: Manage multiple simultaneous calls
-- **Signaling**: Socket.IO-based call negotiation
-- **Media Streams**: Audio/video track control
-- **ICE Candidates**: Automatic NAT traversal
-
-## Styling
-
-Uses **Tailwind CSS** with custom configuration:
-- Dark gaming theme (purple/pink accents)
-- Responsive breakpoints
-- Smooth animations and transitions
-- Custom components (@layer directives)
-
-## Environment Variables
-
-Create `.env.local`:
-
-```
-VITE_API_URL=http://localhost:3000
-VITE_SOCKET_URL=ws://localhost:3000
-VITE_SUPABASE_URL=your_supabase_url
-VITE_SUPABASE_KEY=your_supabase_key
-```
-
-## Browser Support
-
-- Chrome/Edge 90+
-- Firefox 88+
-- Safari 14+
-- Mobile browsers with Service Worker support
-
-## Performance Optimizations
-
-- Code splitting with React Router
-- Lazy component loading
-- Image optimization
-- CSS purging with Tailwind
-- Service worker caching strategies
-
-## Testing
-
-```bash
-npm run test -w @aethex/web
-```
-
-## Deployment
-
-### Vercel
-```bash
-vercel deploy
-```
-
-### Netlify
-```bash
-netlify deploy --prod --dir dist
-```
-
-### Docker
-```bash
-docker build -t aethex-web .
-docker run -p 3000:80 aethex-web
-```
-
-## Contributing
-
-See main [CONTRIBUTING.md](../../CONTRIBUTING.md)
-
-## License
-
-MIT
diff --git a/packages/web/package.json b/packages/web/package.json
deleted file mode 100644
index 35b923a..0000000
--- a/packages/web/package.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  "name": "@aethex/web",
-  "version": "1.0.0",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "test": "vitest",
-    "lint": "eslint src --ext ts,tsx",
-    "clean": "rm -rf dist"
-  },
-  "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.21.0",
-    "@reduxjs/toolkit": "^2.0.1",
-    "react-redux": "^9.0.4",
-    "socket.io-client": "^4.6.0",
-    "workbox-precaching": "^7.0.0",
-    "workbox-routing": "^7.0.0",
-    "workbox-strategies": "^7.0.0",
-    "workbox-background-sync": "^7.0.0",
-    "workbox-expiration": "^7.0.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.18",
-    "@vitejs/plugin-react": "^4.2.1",
-    "vite": "^5.0.8",
-    "vite-plugin-pwa": "^0.17.4",
-    "vitest": "^1.1.0",
-    "typescript": "^5.3.3",
-    "tailwindcss": "^3.3.7",
-    "postcss": "^8.4.33",
-    "autoprefixer": "^10.4.17",
-    "eslint": "^8.55.0",
-    "@typescript-eslint/eslint-plugin": "^6.15.0",
-    "@typescript-eslint/parser": "^6.15.0"
-  }
-}
diff --git a/packages/web/postcss.config.js b/packages/web/postcss.config.js
deleted file mode 100644
index 2ef30fc..0000000
--- a/packages/web/postcss.config.js
+++ /dev/null
@@ -1,9 +0,0 @@
-/** @type {import('postcss-load-config').Config} */
-const config = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
-
-export default config;
diff --git a/packages/web/public/index.html b/packages/web/public/index.html
deleted file mode 100644
index b729237..0000000
--- a/packages/web/public/index.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta name="theme-color" content="#a855f7" />
-  <meta name="description" content="AeThex Connect - Next-generation communication platform with blockchain identity verification" />
-  <meta name="apple-mobile-web-app-capable" content="yes" />
-  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-  <meta name="apple-mobile-web-app-title" content="AeThex" />
-  
-  <title>AeThex Connect</title>
-  
-  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-  <link rel="alternate icon" type="image/png" href="/favicon.png" />
-  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-  <link rel="manifest" href="/manifest.json" />
-  
-  <!-- Preconnect to critical domains -->
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  
-  <!-- PWA Support -->
-  <meta name="color-scheme" content="dark" />
-  <meta name="supported-color-schemes" content="dark" />
-</head>
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/index.tsx"></script>
-</body>
-</html>
diff --git a/packages/web/public/manifest.json b/packages/web/public/manifest.json
deleted file mode 100644
index 58f6d4f..0000000
--- a/packages/web/public/manifest.json
+++ /dev/null
@@ -1,124 +0,0 @@
-{
-  "name": "AeThex Connect",
-  "short_name": "AeThex",
-  "description": "Next-generation communication platform with blockchain identity verification, real-time messaging, voice/video calls, and premium features",
-  "start_url": "/",
-  "scope": "/",
-  "display": "standalone",
-  "orientation": "portrait-primary",
-  "background_color": "#0a0a0f",
-  "theme_color": "#a855f7",
-  "categories": ["communication", "productivity", "social"],
-  "icons": [
-    {
-      "src": "/icon-72.png",
-      "sizes": "72x72",
-      "type": "image/png"
-    },
-    {
-      "src": "/icon-96.png",
-      "sizes": "96x96",
-      "type": "image/png"
-    },
-    {
-      "src": "/icon-128.png",
-      "sizes": "128x128",
-      "type": "image/png"
-    },
-    {
-      "src": "/icon-144.png",
-      "sizes": "144x144",
-      "type": "image/png"
-    },
-    {
-      "src": "/icon-152.png",
-      "sizes": "152x152",
-      "type": "image/png"
-    },
-    {
-      "src": "/icon-192.png",
-      "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "any maskable"
-    },
-    {
-      "src": "/icon-384.png",
-      "sizes": "384x384",
-      "type": "image/png"
-    },
-    {
-      "src": "/icon-512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ],
-  "screenshots": [
-    {
-      "src": "/screenshot-1.png",
-      "sizes": "1280x720",
-      "type": "image/png",
-      "label": "Main chat interface"
-    },
-    {
-      "src": "/screenshot-2.png",
-      "sizes": "1280x720",
-      "type": "image/png",
-      "label": "Voice channel"
-    }
-  ],
-  "share_target": {
-    "action": "/share",
-    "method": "POST",
-    "enctype": "multipart/form-data",
-    "params": {
-      "title": "title",
-      "text": "text",
-      "url": "url",
-      "files": [
-        {
-          "name": "media",
-          "accept": ["image/*", "video/*", "audio/*"]
-        }
-      ]
-    }
-  },
-  "shortcuts": [
-    {
-      "name": "New Message",
-      "short_name": "Message",
-      "description": "Start a new conversation",
-      "url": "/new-message",
-      "icons": [{ "src": "/icon-message.png", "sizes": "96x96" }]
-    },
-    {
-      "name": "Voice Channel",
-      "short_name": "Voice",
-      "description": "Join voice channel",
-      "url": "/voice",
-      "icons": [{ "src": "/icon-voice.png", "sizes": "96x96" }]
-    },
-    {
-      "name": "Friends",
-      "short_name": "Friends",
-      "description": "View friends list",
-      "url": "/friends",
-      "icons": [{ "src": "/icon-friends.png", "sizes": "96x96" }]
-    }
-  ],
-  "protocol_handlers": [
-    {
-      "protocol": "web+aethex",
-      "url": "/handle?url=%s"
-    }
-  ],
-  "file_handlers": [
-    {
-      "action": "/share",
-      "accept": {
-        "image/*": [".png", ".jpg", ".jpeg", ".gif", ".webp"],
-        "video/*": [".mp4", ".webm"],
-        "audio/*": [".mp3", ".wav", ".ogg"]
-      }
-    }
-  ]
-}
diff --git a/packages/web/public/service-worker.ts b/packages/web/public/service-worker.ts
deleted file mode 100644
index 1fc6beb..0000000
--- a/packages/web/public/service-worker.ts
+++ /dev/null
@@ -1,171 +0,0 @@
-import { precacheAndRoute } from 'workbox-precaching';
-import { registerRoute } from 'workbox-routing';
-import { NetworkFirst, CacheFirst, StaleWhileRevalidate } from 'workbox-strategies';
-import { BackgroundSyncPlugin } from 'workbox-background-sync';
-import { ExpirationPlugin } from 'workbox-expiration';
-
-declare const self: ServiceWorkerGlobalScope;
-
-// Precache all build assets
-precacheAndRoute(self.__WB_MANIFEST);
-
-// API requests - Network first, cache fallback
-registerRoute(
-  ({ url }) => url.pathname.startsWith('/api/'),
-  new NetworkFirst({
-    cacheName: 'api-cache',
-    plugins: [
-      new ExpirationPlugin({
-        maxEntries: 50,
-        maxAgeSeconds: 5 * 60, // 5 minutes
-      }),
-    ],
-  })
-);
-
-// Images - Cache first
-registerRoute(
-  ({ request }) => request.destination === 'image',
-  new CacheFirst({
-    cacheName: 'images',
-    plugins: [
-      new ExpirationPlugin({
-        maxEntries: 100,
-        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days
-      }),
-    ],
-  })
-);
-
-// Fonts - Cache first
-registerRoute(
-  ({ request }) => request.destination === 'font',
-  new CacheFirst({
-    cacheName: 'fonts',
-    plugins: [
-      new ExpirationPlugin({
-        maxEntries: 20,
-        maxAgeSeconds: 365 * 24 * 60 * 60, // 1 year
-      }),
-    ],
-  })
-);
-
-// Background sync for failed POST requests
-const bgSyncPlugin = new BackgroundSyncPlugin('message-queue', {
-  maxRetentionTime: 24 * 60, // Retry for 24 hours
-});
-
-registerRoute(
-  ({ url }) => url.pathname.startsWith('/api/messages'),
-  new NetworkFirst({
-    plugins: [bgSyncPlugin],
-  }),
-  'POST'
-);
-
-// Push notifications
-self.addEventListener('push', (event) => {
-  const data = event.data?.json() || {};
-
-  const options: NotificationOptions = {
-    body: data.body || 'You have a new message',
-    icon: data.icon || '/icon-192.png',
-    badge: '/badge-96.png',
-    tag: data.tag || 'notification',
-    data: data.data || {},
-    actions: data.actions || [
-      { action: 'open', title: 'Open' },
-      { action: 'dismiss', title: 'Dismiss' },
-    ],
-    vibrate: [200, 100, 200],
-    requireInteraction: data.requireInteraction || false,
-  };
-
-  event.waitUntil(
-    self.registration.showNotification(data.title || 'AeThex Connect', options)
-  );
-});
-
-// Notification click handler
-self.addEventListener('notificationclick', (event) => {
-  event.notification.close();
-
-  if (event.action === 'open' || !event.action) {
-    const urlToOpen = event.notification.data?.url || '/';
-    
-    event.waitUntil(
-      self.clients.matchAll({ type: 'window', includeUncontrolled: true }).then((clientList) => {
-        // Check if there's already a window open
-        for (const client of clientList) {
-          if (client.url === urlToOpen && 'focus' in client) {
-            return client.focus();
-          }
-        }
-        // Open new window if none exists
-        if (self.clients.openWindow) {
-          return self.clients.openWindow(urlToOpen);
-        }
-      })
-    );
-  }
-});
-
-// Handle notification actions (reply, etc.)
-self.addEventListener('notificationclick', (event) => {
-  if (event.action === 'reply' && event.reply) {
-    // Send reply via background sync
-    event.waitUntil(
-      fetch('/api/messages', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          conversationId: event.notification.data.conversationId,
-          content: event.reply,
-          contentType: 'text',
-        }),
-      })
-    );
-  }
-});
-
-// Periodic background sync (for checking new messages when offline)
-self.addEventListener('periodicsync', (event: any) => {
-  if (event.tag === 'check-messages') {
-    event.waitUntil(checkForNewMessages());
-  }
-});
-
-async function checkForNewMessages() {
-  try {
-    const response = await fetch('/api/messages/unread');
-    const data = await response.json();
-    
-    if (data.count > 0) {
-      self.registration.showNotification('New Messages', {
-        body: `You have ${data.count} unread messages`,
-        icon: '/icon-192.png',
-        badge: '/badge-96.png',
-        tag: 'unread-messages',
-      });
-    }
-  } catch (error) {
-    console.error('Error checking messages:', error);
-  }
-}
-
-// Skip waiting and claim clients immediately
-self.addEventListener('message', (event) => {
-  if (event.data && event.data.type === 'SKIP_WAITING') {
-    self.skipWaiting();
-  }
-});
-
-self.addEventListener('activate', (event) => {
-  event.waitUntil(self.clients.claim());
-});
-
-// Log service worker version
-console.log('AeThex Connect Service Worker v1.0.0');
diff --git a/packages/web/public/sw.js b/packages/web/public/sw.js
deleted file mode 100644
index 7b4df5b..0000000
--- a/packages/web/public/sw.js
+++ /dev/null
@@ -1,148 +0,0 @@
-const CACHE_NAME = 'aethex-connect-v1';
-const ASSETS_TO_CACHE = [
-  '/',
-  '/index.html',
-  '/manifest.json',
-];
-
-// Install event
-self.addEventListener('install', (event) => {
-  event.waitUntil(
-    caches.open(CACHE_NAME).then((cache) => {
-      console.log('Caching app shell');
-      return cache.addAll(ASSETS_TO_CACHE).catch(err => {
-        console.log('Cache addAll error:', err);
-        // Don't fail installation if some assets can't be cached
-      });
-    })
-  );
-  self.skipWaiting();
-});
-
-// Activate event
-self.addEventListener('activate', (event) => {
-  event.waitUntil(
-    caches.keys().then((cacheNames) => {
-      return Promise.all(
-        cacheNames.map((cacheName) => {
-          if (cacheName !== CACHE_NAME) {
-            console.log('Deleting old cache:', cacheName);
-            return caches.delete(cacheName);
-          }
-        })
-      );
-    })
-  );
-  self.clients.claim();
-});
-
-// Fetch event - Network first, fallback to cache
-self.addEventListener('fetch', (event) => {
-  const { request } = event;
-
-  // Skip non-GET requests
-  if (request.method !== 'GET') {
-    return;
-  }
-
-  // API requests - network first
-  if (request.url.includes('/api/')) {
-    event.respondWith(
-      fetch(request)
-        .then((response) => {
-          if (!response || response.status !== 200) {
-            return response;
-          }
-
-          const responseClone = response.clone();
-          caches.open(CACHE_NAME).then((cache) => {
-            cache.put(request, responseClone);
-          });
-
-          return response;
-        })
-        .catch(() => {
-          return caches.match(request);
-        })
-    );
-  } else {
-    // Static assets - cache first
-    event.respondWith(
-      caches.match(request).then((response) => {
-        if (response) {
-          return response;
-        }
-
-        return fetch(request).then((response) => {
-          if (!response || response.status !== 200 || response.type === 'error') {
-            return response;
-          }
-
-          const responseClone = response.clone();
-          caches.open(CACHE_NAME).then((cache) => {
-            cache.put(request, responseClone);
-          });
-
-          return response;
-        });
-      })
-    );
-  }
-});
-
-// Background sync for offline messages
-self.addEventListener('sync', (event) => {
-  if (event.tag === 'sync-messages') {
-    event.waitUntil(syncMessages());
-  }
-});
-
-async function syncMessages() {
-  try {
-    const db = await openIndexedDB();
-    const messages = await getPendingMessages(db);
-
-    for (const message of messages) {
-      try {
-        await fetch('/api/messages', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(message),
-        });
-        await deletePendingMessage(db, message.id);
-      } catch (error) {
-        console.error('Failed to sync message:', error);
-      }
-    }
-  } catch (error) {
-    console.error('Sync error:', error);
-  }
-}
-
-function openIndexedDB() {
-  return new Promise((resolve, reject) => {
-    const request = indexedDB.open('aethex-connect', 1);
-    request.onerror = () => reject(request.error);
-    request.onsuccess = () => resolve(request.result);
-  });
-}
-
-function getPendingMessages(db) {
-  return new Promise((resolve, reject) => {
-    const transaction = db.transaction(['pendingMessages'], 'readonly');
-    const store = transaction.objectStore('pendingMessages');
-    const request = store.getAll();
-    request.onerror = () => reject(request.error);
-    request.onsuccess = () => resolve(request.result);
-  });
-}
-
-function deletePendingMessage(db, id) {
-  return new Promise((resolve, reject) => {
-    const transaction = db.transaction(['pendingMessages'], 'readwrite');
-    const store = transaction.objectStore('pendingMessages');
-    const request = store.delete(id);
-    request.onerror = () => reject(request.error);
-    request.onsuccess = () => resolve();
-  });
-}
diff --git a/packages/web/src/App.tsx b/packages/web/src/App.tsx
deleted file mode 100644
index d68220c..0000000
--- a/packages/web/src/App.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, { useEffect } from 'react';
-import { Routes, Route, Navigate } from 'react-router-dom';
-import { useAppSelector } from './store';
-import MainLayout from './layouts/MainLayout';
-import HomePage from './pages/HomePage';
-import ChatPage from './pages/ChatPage';
-import CallsPage from './pages/CallsPage';
-import SettingsPage from './pages/SettingsPage';
-import LoginPage from './pages/LoginPage';
-import './styles/app.css';
-
-export default function App() {
-  const { user, loading } = useAppSelector(state => state.auth);
-
-  useEffect(() => {
-    // Restore auth state on app load
-    const token = localStorage.getItem('authToken');
-    if (token && !user) {
-      // Token exists but user not loaded - this would be handled by Redux persist
-      console.log('Auth token found, waiting for hydration...');
-    }
-  }, []);
-
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center h-screen bg-gray-900">
-        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-purple-500"></div>
-      </div>
-    );
-  }
-
-  return (
-    <Routes>
-      <Route path="/login" element={<LoginPage />} />
-      <Route
-        path="/*"
-        element={
-          user ? (
-            <MainLayout>
-              <Routes>
-                <Route path="/" element={<HomePage />} />
-                <Route path="/chat/*" element={<ChatPage />} />
-                <Route path="/calls/*" element={<CallsPage />} />
-                <Route path="/settings/*" element={<SettingsPage />} />
-                <Route path="*" element={<Navigate to="/" replace />} />
-              </Routes>
-            </MainLayout>
-          ) : (
-            <Navigate to="/login" replace />
-          )
-        }
-      />
-    </Routes>
-  );
-}
diff --git a/packages/web/src/index.tsx b/packages/web/src/index.tsx
deleted file mode 100644
index f514777..0000000
--- a/packages/web/src/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { Provider } from 'react-redux';
-import { BrowserRouter } from 'react-router-dom';
-import App from './App';
-import { store } from './store';
-import './styles/global.css';
-import { registerServiceWorker } from './utils/serviceWorker';
-
-// Register service worker for PWA capabilities
-registerServiceWorker();
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <Provider store={store}>
-      <BrowserRouter>
-        <App />
-      </BrowserRouter>
-    </Provider>
-  </React.StrictMode>
-);
diff --git a/packages/web/src/layouts/MainLayout.tsx b/packages/web/src/layouts/MainLayout.tsx
deleted file mode 100644
index 26317cd..0000000
--- a/packages/web/src/layouts/MainLayout.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from 'react';
-
-interface MainLayoutProps {
-  children: React.ReactNode;
-}
-
-export default function MainLayout({ children }: MainLayoutProps) {
-  return (
-    <div className="flex h-screen bg-gray-900">
-      {/* Sidebar */}
-      <aside className="w-64 bg-gray-800 border-r border-gray-700 overflow-y-auto">
-        <nav className="p-4 space-y-2">
-          <a
-            href="/"
-            className="flex items-center px-4 py-2 rounded-lg text-gray-100 hover:bg-gray-700 transition"
-          >
-            <span className="text-xl mr-3">🏠</span>
-            <span>Home</span>
-          </a>
-          <a
-            href="/chat"
-            className="flex items-center px-4 py-2 rounded-lg text-gray-100 hover:bg-gray-700 transition"
-          >
-            <span className="text-xl mr-3">💬</span>
-            <span>Messages</span>
-          </a>
-          <a
-            href="/calls"
-            className="flex items-center px-4 py-2 rounded-lg text-gray-100 hover:bg-gray-700 transition"
-          >
-            <span className="text-xl mr-3">📞</span>
-            <span>Calls</span>
-          </a>
-          <a
-            href="/settings"
-            className="flex items-center px-4 py-2 rounded-lg text-gray-100 hover:bg-gray-700 transition"
-          >
-            <span className="text-xl mr-3">⚙️</span>
-            <span>Settings</span>
-          </a>
-        </nav>
-      </aside>
-
-      {/* Main Content */}
-      <main className="flex-1 flex flex-col overflow-hidden">
-        {/* Header */}
-        <header className="bg-gray-800 border-b border-gray-700 px-6 py-4">
-          <div className="flex justify-between items-center">
-            <h1 className="text-xl font-bold text-white">AeThex Connect</h1>
-            <div className="flex items-center space-x-4">
-              <button className="text-gray-400 hover:text-white">
-                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
-                </svg>
-              </button>
-              <button className="text-gray-400 hover:text-white">
-                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10h.01M9 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
-              </button>
-            </div>
-          </div>
-        </header>
-
-        {/* Content Area */}
-        <div className="flex-1 overflow-auto bg-gray-900">
-          {children}
-        </div>
-      </main>
-    </div>
-  );
-}
diff --git a/packages/web/src/pages/CallsPage.tsx b/packages/web/src/pages/CallsPage.tsx
deleted file mode 100644
index d3277b1..0000000
--- a/packages/web/src/pages/CallsPage.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React, { useState } from 'react';
-import { useAppSelector } from '../store';
-
-export default function CallsPage() {
-  const { activeCall, callHistory } = useAppSelector(state => state.calls);
-  const [selectedCallHistory, setSelectedCallHistory] = useState(0);
-
-  return (
-    <div className="p-8 max-w-6xl mx-auto">
-      {activeCall ? (
-        // Active Call View
-        <div className="bg-gray-800 rounded-lg p-8 text-center">
-          <div className="mb-8">
-            <div className="w-24 h-24 mx-auto mb-4 bg-gradient-to-br from-purple-400 to-pink-600 rounded-full flex items-center justify-center">
-              <span className="text-4xl">👤</span>
-            </div>
-            <h2 className="text-3xl font-bold text-white mb-2">{activeCall.participantName}</h2>
-            <p className="text-gray-400">Call in progress</p>
-            <p className="text-2xl font-mono text-purple-400 mt-4">{activeCall.duration}</p>
-          </div>
-
-          <div className="flex justify-center gap-4 mb-8">
-            <button
-              className={`w-16 h-16 rounded-full flex items-center justify-center transition ${
-                activeCall.isMuted ? 'bg-red-600 hover:bg-red-700' : 'bg-gray-700 hover:bg-gray-600'
-              }`}
-            >
-              <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
-              </svg>
-            </button>
-
-            <button
-              className={`w-16 h-16 rounded-full flex items-center justify-center transition ${
-                activeCall.isCameraOn ? 'bg-gray-700 hover:bg-gray-600' : 'bg-red-600 hover:bg-red-700'
-              }`}
-            >
-              <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
-                <path d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
-              </svg>
-            </button>
-
-            <button className="w-16 h-16 rounded-full bg-red-600 hover:bg-red-700 flex items-center justify-center transition">
-              <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
-                <path d="M16.5 1h-9C6.12 1 5 2.12 5 3.5v17C5 21.88 6.12 23 7.5 23h9c1.38 0 2.5-1.12 2.5-2.5v-17C19 2.12 17.88 1 16.5 1zm-4 21c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5-4H7V4h9v14z" />
-              </svg>
-            </button>
-          </div>
-        </div>
-      ) : (
-        // Call History
-        <div>
-          <h1 className="text-3xl font-bold text-white mb-8">Calls</h1>
-
-          {callHistory.length === 0 ? (
-            <div className="bg-gray-800 rounded-lg p-12 text-center">
-              <p className="text-gray-400 text-lg">No call history yet. Start a call to get begun!</p>
-            </div>
-          ) : (
-            <div className="space-y-4">
-              {callHistory.map((call, index) => (
-                <div key={index} className="bg-gray-800 rounded-lg p-4 flex items-center justify-between hover:bg-gray-700 transition">
-                  <div className="flex items-center gap-4 flex-1">
-                    <div className="w-12 h-12 bg-gradient-to-br from-purple-400 to-pink-600 rounded-full flex items-center justify-center flex-shrink-0">
-                      <span className="text-lg">👤</span>
-                    </div>
-                    <div className="flex-1 min-w-0">
-                      <h3 className="text-white font-semibold">{call.participantName}</h3>
-                      <p className="text-gray-400 text-sm">
-                        {call.type === 'voice' ? '📞 Voice Call' : '📹 Video Call'} • {call.duration}
-                      </p>
-                    </div>
-                  </div>
-                  <div className="flex items-center gap-4 flex-shrink-0">
-                    <p className="text-gray-400 text-sm">
-                      {new Date(call.timestamp).toLocaleDateString()}
-                    </p>
-                    <button className="text-purple-400 hover:text-purple-300 transition">
-                      <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
-                        <path d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/packages/web/src/pages/ChatPage.tsx b/packages/web/src/pages/ChatPage.tsx
deleted file mode 100644
index 24d26b4..0000000
--- a/packages/web/src/pages/ChatPage.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useAppSelector } from '../store';
-
-export default function ChatPage() {
-  const { conversations, messages } = useAppSelector(state => state.messaging);
-  const [selectedConversation, setSelectedConversation] = useState(conversations[0]?.id);
-  const [inputValue, setInputValue] = useState('');
-
-  const currentMessages = messages[selectedConversation] || [];
-
-  const handleSendMessage = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!inputValue.trim()) return;
-    
-    console.log('Sending message:', inputValue);
-    setInputValue('');
-  };
-
-  return (
-    <div className="flex h-full bg-gray-900">
-      {/* Conversations List */}
-      <div className="w-64 bg-gray-800 border-r border-gray-700 flex flex-col">
-        <div className="p-4 border-b border-gray-700">
-          <h3 className="text-lg font-semibold text-white mb-4">Messages</h3>
-          <button className="w-full px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white font-semibold rounded-lg transition">
-            + New Chat
-          </button>
-        </div>
-
-        <div className="flex-1 overflow-y-auto">
-          {conversations.map((conversation) => (
-            <button
-              key={conversation.id}
-              onClick={() => setSelectedConversation(conversation.id)}
-              className={`w-full px-4 py-3 text-left border-l-4 transition ${
-                selectedConversation === conversation.id
-                  ? 'bg-gray-700 border-purple-500'
-                  : 'border-transparent hover:bg-gray-700'
-              }`}
-            >
-              <div className="font-semibold text-white text-sm">{conversation.participantName}</div>
-              <div className="text-gray-400 text-xs truncate">{conversation.lastMessage}</div>
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Chat Area */}
-      <div className="flex-1 flex flex-col">
-        {selectedConversation ? (
-          <>
-            {/* Chat Header */}
-            <div className="bg-gray-800 border-b border-gray-700 px-6 py-4 flex justify-between items-center">
-              <h2 className="text-xl font-semibold text-white">
-                {conversations.find(c => c.id === selectedConversation)?.participantName}
-              </h2>
-              <div className="flex gap-4">
-                <button className="text-gray-400 hover:text-white transition">
-                  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
-                  </svg>
-                </button>
-                <button className="text-gray-400 hover:text-white transition">
-                  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
-                  </svg>
-                </button>
-              </div>
-            </div>
-
-            {/* Messages */}
-            <div className="flex-1 overflow-y-auto p-6 space-y-4">
-              {currentMessages.length === 0 ? (
-                <div className="flex items-center justify-center h-full text-gray-500">
-                  <p>No messages yet. Start the conversation!</p>
-                </div>
-              ) : (
-                currentMessages.map((msg) => (
-                  <div key={msg.id} className={`flex ${msg.senderId === 'self' ? 'justify-end' : 'justify-start'}`}>
-                    <div
-                      className={`max-w-xs px-4 py-2 rounded-lg ${
-                        msg.senderId === 'self'
-                          ? 'bg-purple-600 text-white'
-                          : 'bg-gray-700 text-gray-100'
-                      }`}
-                    >
-                      <p>{msg.content}</p>
-                      <p className="text-xs opacity-70 mt-1">{new Date(msg.createdAt).toLocaleTimeString()}</p>
-                    </div>
-                  </div>
-                ))
-              )}
-            </div>
-
-            {/* Input */}
-            <form onSubmit={handleSendMessage} className="bg-gray-800 border-t border-gray-700 p-4">
-              <div className="flex gap-4">
-                <button type="button" className="text-gray-400 hover:text-white transition">
-                  <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z" />
-                  </svg>
-                </button>
-                <input
-                  type="text"
-                  value={inputValue}
-                  onChange={(e) => setInputValue(e.target.value)}
-                  placeholder="Type a message..."
-                  className="flex-1 px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500"
-                />
-                <button
-                  type="submit"
-                  className="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white font-semibold rounded-lg transition"
-                >
-                  Send
-                </button>
-              </div>
-            </form>
-          </>
-        ) : (
-          <div className="flex items-center justify-center h-full text-gray-500">
-            <p>Select a conversation to start messaging</p>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/packages/web/src/pages/HomePage.tsx b/packages/web/src/pages/HomePage.tsx
deleted file mode 100644
index 8942dfc..0000000
--- a/packages/web/src/pages/HomePage.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from 'react';
-
-export default function HomePage() {
-  return (
-    <div className="p-8">
-      <div className="max-w-4xl mx-auto">
-        <h1 className="text-4xl font-bold text-white mb-6">Welcome to AeThex Connect</h1>
-        <p className="text-gray-300 text-lg mb-8">
-          Your next-generation communication platform with blockchain identity verification,
-          real-time messaging, voice/video calls, and premium features.
-        </p>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          {/* Feature Cards */}
-          <div className="bg-gray-800 rounded-lg p-6 border border-gray-700 hover:border-purple-500 transition">
-            <div className="text-3xl mb-4">💬</div>
-            <h3 className="text-xl font-semibold text-white mb-2">Instant Messaging</h3>
-            <p className="text-gray-400">
-              End-to-end encrypted messages with real-time synchronization across all devices.
-            </p>
-          </div>
-
-          <div className="bg-gray-800 rounded-lg p-6 border border-gray-700 hover:border-purple-500 transition">
-            <div className="text-3xl mb-4">📞</div>
-            <h3 className="text-xl font-semibold text-white mb-2">Voice & Video</h3>
-            <p className="text-gray-400">
-              Crystal-clear voice calls and HD video conferencing with WebRTC technology.
-            </p>
-          </div>
-
-          <div className="bg-gray-800 rounded-lg p-6 border border-gray-700 hover:border-purple-500 transition">
-            <div className="text-3xl mb-4">🎮</div>
-            <h3 className="text-xl font-semibold text-white mb-2">GameForge Integration</h3>
-            <p className="text-gray-400">
-              Connect with game communities and manage channels with GameForge.
-            </p>
-          </div>
-
-          <div className="bg-gray-800 rounded-lg p-6 border border-gray-700 hover:border-purple-500 transition">
-            <div className="text-3xl mb-4">🔐</div>
-            <h3 className="text-xl font-semibold text-white mb-2">Verified Identity</h3>
-            <p className="text-gray-400">
-              Blockchain-backed domain verification for authentic user identification.
-            </p>
-          </div>
-        </div>
-
-        <div className="mt-12 p-8 bg-gradient-to-r from-purple-900 to-pink-900 rounded-lg">
-          <h2 className="text-2xl font-bold text-white mb-4">Get Started Now</h2>
-          <p className="text-gray-200 mb-6">
-            Explore your messages, start a call, or customize your settings to unlock the full potential of AeThex Connect.
-          </p>
-          <div className="flex gap-4">
-            <button className="px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white font-semibold rounded-lg transition">
-              Start Messaging
-            </button>
-            <button className="px-6 py-3 bg-gray-700 hover:bg-gray-600 text-white font-semibold rounded-lg transition">
-              Schedule a Call
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/packages/web/src/pages/LoginPage.tsx b/packages/web/src/pages/LoginPage.tsx
deleted file mode 100644
index 6a5abe5..0000000
--- a/packages/web/src/pages/LoginPage.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import React, { useState } from 'react';
-import { useAppDispatch, useAppSelector, loginAsync } from '../store';
-
-export default function LoginPage() {
-  const dispatch = useAppDispatch();
-  const { loading, error } = useAppSelector(state => state.auth);
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [isSignUp, setIsSignUp] = useState(false);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (isSignUp) {
-      // Sign up logic would go here
-      console.log('Sign up:', email, password);
-    } else {
-      // Login
-      dispatch(loginAsync({ email, password }));
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900 to-gray-900 flex items-center justify-center p-4">
-      <div className="w-full max-w-md">
-        {/* Logo/Header */}
-        <div className="text-center mb-8">
-          <h1 className="text-4xl font-bold bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-transparent mb-2">
-            AeThex Connect
-          </h1>
-          <p className="text-gray-400">Next-generation communication platform</p>
-        </div>
-
-        {/* Form Card */}
-        <div className="bg-gray-800 border border-gray-700 rounded-lg p-8 shadow-2xl">
-          <h2 className="text-2xl font-bold text-white mb-6">
-            {isSignUp ? 'Create Account' : 'Welcome Back'}
-          </h2>
-
-          {error && (
-            <div className="mb-6 p-4 bg-red-900 border border-red-700 rounded text-red-200">
-              {error}
-            </div>
-          )}
-
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div>
-              <label className="block text-sm font-medium text-gray-300 mb-2">Email</label>
-              <input
-                type="email"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500 transition"
-                placeholder="you@example.com"
-                required
-              />
-            </div>
-
-            <div>
-              <label className="block text-sm font-medium text-gray-300 mb-2">Password</label>
-              <input
-                type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500 transition"
-                placeholder="••••••••"
-                required
-              />
-            </div>
-
-            <button
-              type="submit"
-              disabled={loading}
-              className="w-full py-2 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-semibold rounded-lg hover:from-purple-700 hover:to-pink-700 transition disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
-            >
-              {loading ? (
-                <>
-                  <span className="animate-spin rounded-full h-4 w-4 border-t-2 border-white mr-2"></span>
-                  {isSignUp ? 'Creating Account...' : 'Signing In...'}
-                </>
-              ) : isSignUp ? (
-                'Create Account'
-              ) : (
-                'Sign In'
-              )}
-            </button>
-          </form>
-
-          <div className="mt-6">
-            <button
-              type="button"
-              onClick={() => {
-                setIsSignUp(!isSignUp);
-              }}
-              className="w-full text-center text-gray-400 hover:text-gray-300 transition"
-            >
-              {isSignUp ? 'Already have an account? Sign in' : "Don't have an account? Sign up"}
-            </button>
-          </div>
-
-          <div className="mt-6 p-4 bg-gray-700 rounded-lg">
-            <p className="text-xs text-gray-400 mb-2">Demo Credentials:</p>
-            <p className="text-xs text-gray-500">Email: demo@aethex.dev</p>
-            <p className="text-xs text-gray-500">Password: demo123</p>
-          </div>
-        </div>
-
-        {/* Footer */}
-        <p className="text-center text-gray-500 text-sm mt-8">
-          © 2026 AeThex Corporation. All rights reserved.
-        </p>
-      </div>
-    </div>
-  );
-}
diff --git a/packages/web/src/pages/SettingsPage.tsx b/packages/web/src/pages/SettingsPage.tsx
deleted file mode 100644
index 0523b51..0000000
--- a/packages/web/src/pages/SettingsPage.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-import React, { useState } from 'react';
-import { useAppDispatch, useAppSelector, logoutAsync } from '../store';
-
-export default function SettingsPage() {
-  const dispatch = useAppDispatch();
-  const { user } = useAppSelector(state => state.auth);
-  const [activeTab, setActiveTab] = useState('profile');
-
-  const handleLogout = () => {
-    dispatch(logoutAsync());
-  };
-
-  const tabs = [
-    { id: 'profile', label: 'Profile', icon: '👤' },
-    { id: 'privacy', label: 'Privacy & Security', icon: '🔒' },
-    { id: 'notifications', label: 'Notifications', icon: '🔔' },
-    { id: 'appearance', label: 'Appearance', icon: '🎨' },
-    { id: 'about', label: 'About', icon: 'ℹ️' },
-  ];
-
-  return (
-    <div className="p-8 max-w-4xl mx-auto">
-      <h1 className="text-3xl font-bold text-white mb-8">Settings</h1>
-
-      <div className="flex gap-8">
-        {/* Sidebar Navigation */}
-        <div className="w-48">
-          <nav className="space-y-2">
-            {tabs.map((tab) => (
-              <button
-                key={tab.id}
-                onClick={() => setActiveTab(tab.id)}
-                className={`w-full text-left px-4 py-3 rounded-lg transition ${
-                  activeTab === tab.id
-                    ? 'bg-purple-600 text-white'
-                    : 'text-gray-400 hover:bg-gray-800 hover:text-white'
-                }`}
-              >
-                <span className="mr-2">{tab.icon}</span>
-                {tab.label}
-              </button>
-            ))}
-          </nav>
-        </div>
-
-        {/* Content Area */}
-        <div className="flex-1">
-          {activeTab === 'profile' && (
-            <div className="space-y-6">
-              <div>
-                <h2 className="text-2xl font-bold text-white mb-4">Profile Settings</h2>
-                <div className="bg-gray-800 rounded-lg p-6 space-y-4">
-                  <div>
-                    <label className="block text-sm font-medium text-gray-300 mb-2">Display Name</label>
-                    <input
-                      type="text"
-                      defaultValue={user?.email || ''}
-                      className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-purple-500"
-                    />
-                  </div>
-                  <div>
-                    <label className="block text-sm font-medium text-gray-300 mb-2">Email</label>
-                    <input
-                      type="email"
-                      defaultValue={user?.email || ''}
-                      disabled
-                      className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-gray-400 cursor-not-allowed"
-                    />
-                  </div>
-                  <div>
-                    <label className="block text-sm font-medium text-gray-300 mb-2">Bio</label>
-                    <textarea
-                      placeholder="Tell us about yourself..."
-                      className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-purple-500"
-                      rows={4}
-                    />
-                  </div>
-                  <button className="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white font-semibold rounded-lg transition">
-                    Save Changes
-                  </button>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {activeTab === 'privacy' && (
-            <div className="space-y-6">
-              <h2 className="text-2xl font-bold text-white mb-4">Privacy & Security</h2>
-              <div className="bg-gray-800 rounded-lg p-6 space-y-4">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <h3 className="text-white font-semibold">Two-Factor Authentication</h3>
-                    <p className="text-gray-400 text-sm">Add an extra layer of security to your account</p>
-                  </div>
-                  <button className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition">
-                    Enable
-                  </button>
-                </div>
-                <hr className="border-gray-700" />
-                <div className="flex items-center justify-between">
-                  <div>
-                    <h3 className="text-white font-semibold">E2E Encryption</h3>
-                    <p className="text-gray-400 text-sm">Your messages are end-to-end encrypted</p>
-                  </div>
-                  <span className="text-green-400">✓ Enabled</span>
-                </div>
-                <hr className="border-gray-700" />
-                <div>
-                  <button className="text-red-400 hover:text-red-300 transition font-semibold">
-                    Change Password
-                  </button>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {activeTab === 'notifications' && (
-            <div className="space-y-6">
-              <h2 className="text-2xl font-bold text-white mb-4">Notification Preferences</h2>
-              <div className="bg-gray-800 rounded-lg p-6 space-y-4">
-                {['Messages', 'Calls', 'Friend Requests', 'Community Updates'].map((item) => (
-                  <div key={item} className="flex items-center justify-between">
-                    <span className="text-gray-300">{item}</span>
-                    <label className="relative inline-flex items-center cursor-pointer">
-                      <input type="checkbox" defaultChecked className="sr-only peer" />
-                      <div className="w-11 h-6 bg-gray-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
-                    </label>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {activeTab === 'appearance' && (
-            <div className="space-y-6">
-              <h2 className="text-2xl font-bold text-white mb-4">Appearance</h2>
-              <div className="bg-gray-800 rounded-lg p-6 space-y-4">
-                <div>
-                  <h3 className="text-white font-semibold mb-4">Theme</h3>
-                  <div className="space-y-2">
-                    {['Dark', 'Light', 'Auto'].map((theme) => (
-                      <label key={theme} className="flex items-center gap-3 cursor-pointer">
-                        <input
-                          type="radio"
-                          name="theme"
-                          defaultChecked={theme === 'Dark'}
-                          className="w-4 h-4"
-                        />
-                        <span className="text-gray-300">{theme}</span>
-                      </label>
-                    ))}
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {activeTab === 'about' && (
-            <div className="space-y-6">
-              <h2 className="text-2xl font-bold text-white mb-4">About AeThex Connect</h2>
-              <div className="bg-gray-800 rounded-lg p-6 space-y-4 text-gray-300">
-                <div>
-                  <p className="font-semibold text-white mb-2">Version</p>
-                  <p>1.0.0</p>
-                </div>
-                <div>
-                  <p className="font-semibold text-white mb-2">Build Date</p>
-                  <p>February 3, 2026</p>
-                </div>
-                <div>
-                  <p className="font-semibold text-white mb-2">Features</p>
-                  <ul className="space-y-1 text-sm">
-                    <li>✓ Real-time messaging with E2E encryption</li>
-                    <li>✓ WebRTC voice and video calls</li>
-                    <li>✓ Blockchain domain verification</li>
-                    <li>✓ GameForge community integration</li>
-                    <li>✓ Premium subscriptions</li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* Logout Button at Bottom */}
-          <div className="mt-8 pt-8 border-t border-gray-700">
-            <button
-              onClick={handleLogout}
-              className="px-6 py-2 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-lg transition"
-            >
-              Sign Out
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/packages/web/src/store/index.ts b/packages/web/src/store/index.ts
deleted file mode 100644
index 721c3e8..0000000
--- a/packages/web/src/store/index.ts
+++ /dev/null
@@ -1,171 +0,0 @@
-import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
-
-// Auth Slice
-interface User {
-  id: string;
-  email: string;
-  username?: string;
-}
-
-interface AuthState {
-  user: User | null;
-  loading: boolean;
-  error: string | null;
-}
-
-const initialAuthState: AuthState = {
-  user: null,
-  loading: false,
-  error: null,
-};
-
-const authSlice = createSlice({
-  name: 'auth',
-  initialState: initialAuthState,
-  reducers: {
-    setLoading: (state, action: PayloadAction<boolean>) => {
-      state.loading = action.payload;
-    },
-    setUser: (state, action: PayloadAction<User | null>) => {
-      state.user = action.payload;
-      state.loading = false;
-      state.error = null;
-    },
-    setError: (state, action: PayloadAction<string>) => {
-      state.error = action.payload;
-      state.loading = false;
-    },
-    logout: (state) => {
-      state.user = null;
-      state.loading = false;
-      state.error = null;
-    },
-  },
-});
-
-export const { setLoading, setUser, setError, logout } = authSlice.actions;
-
-// Messaging Slice
-interface Conversation {
-  id: string;
-  participantName: string;
-  lastMessage: string;
-  unreadCount: number;
-}
-
-interface Message {
-  id: string;
-  conversationId: string;
-  content: string;
-  senderId: string;
-  timestamp: string;
-  createdAt: string;
-}
-
-interface MessagingState {
-  conversations: Conversation[];
-  messages: Record<string, Message[]>;
-}
-
-const initialMessagingState: MessagingState = {
-  conversations: [],
-  messages: {},
-};
-
-const messagingSlice = createSlice({
-  name: 'messaging',
-  initialState: initialMessagingState,
-  reducers: {
-    setConversations: (state, action: PayloadAction<Conversation[]>) => {
-      state.conversations = action.payload;
-    },
-    addMessage: (state, action: PayloadAction<Message>) => {
-      const msg = action.payload;
-      if (!state.messages[msg.conversationId]) {
-        state.messages[msg.conversationId] = [];
-      }
-      state.messages[msg.conversationId].push(msg);
-    },
-  },
-});
-
-export const { setConversations, addMessage } = messagingSlice.actions;
-
-// Calls Slice
-interface Call {
-  id: string;
-  participantName: string;
-  type: 'audio' | 'video' | 'voice';
-  status: 'active' | 'ended' | 'missed';
-  duration?: string;
-  timestamp: string;
-  isMuted?: boolean;
-  isCameraOn?: boolean;
-}
-
-interface CallsState {
-  activeCall: Call | null;
-  callHistory: Call[];
-}
-
-const initialCallsState: CallsState = {
-  activeCall: null,
-  callHistory: [],
-};
-
-const callsSlice = createSlice({
-  name: 'calls',
-  initialState: initialCallsState,
-  reducers: {
-    setActiveCall: (state, action: PayloadAction<Call | null>) => {
-      state.activeCall = action.payload;
-    },
-    addCallToHistory: (state, action: PayloadAction<Call>) => {
-      state.callHistory.unshift(action.payload);
-    },
-  },
-});
-
-export const { setActiveCall, addCallToHistory } = callsSlice.actions;
-
-// Async thunks
-export const loginAsync = (credentials: { email: string; password: string }) => async (dispatch: AppDispatch) => {
-  dispatch(setLoading(true));
-  try {
-    // TODO: Integrate with Supabase auth
-    const mockUser: User = {
-      id: '1',
-      email: credentials.email,
-      username: credentials.email.split('@')[0],
-    };
-    dispatch(setUser(mockUser));
-  } catch (error) {
-    dispatch(setError((error as Error).message));
-  }
-};
-
-export const logoutAsync = () => async (dispatch: AppDispatch) => {
-  dispatch(setLoading(true));
-  try {
-    // TODO: Integrate with Supabase auth
-    dispatch(logout());
-  } catch (error) {
-    dispatch(setError((error as Error).message));
-  }
-};
-
-// Store
-export const store = configureStore({
-  reducer: {
-    auth: authSlice.reducer,
-    messaging: messagingSlice.reducer,
-    calls: callsSlice.reducer,
-  },
-});
-
-export type RootState = ReturnType<typeof store.getState>;
-export type AppDispatch = typeof store.dispatch;
-
-export const useAppDispatch = () => useDispatch<AppDispatch>();
-export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
diff --git a/packages/web/src/styles/app.css b/packages/web/src/styles/app.css
deleted file mode 100644
index a356e7d..0000000
--- a/packages/web/src/styles/app.css
+++ /dev/null
@@ -1,43 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-html, body {
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* Smooth transitions */
-a, button {
-  transition: all 0.2s ease;
-}
-
-/* Form elements */
-input, textarea, select {
-  font-family: inherit;
-}
-
-/* Remove default button styling */
-button {
-  border: none;
-  cursor: pointer;
-  background: none;
-}
-
-/* Links */
-a {
-  text-decoration: none;
-  color: inherit;
-}
-
-/* Ensure images are responsive */
-img {
-  max-width: 100%;
-  height: auto;
-  display: block;
-}
diff --git a/packages/web/src/styles/global.css b/packages/web/src/styles/global.css
deleted file mode 100644
index 74f5a17..0000000
--- a/packages/web/src/styles/global.css
+++ /dev/null
@@ -1,96 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --color-bg-primary: #0a0a0f;
-  --color-bg-secondary: #1a1a2e;
-  --color-bg-tertiary: #2d2d44;
-  --color-border: #404060;
-  --color-text-primary: #ffffff;
-  --color-text-secondary: #a0a0b0;
-  --color-accent-primary: #a855f7;
-  --color-accent-secondary: #ec4899;
-}
-
-* {
-  @apply selection:bg-purple-600 selection:text-white;
-}
-
-html, body {
-  @apply bg-gray-900 text-white;
-}
-
-@layer components {
-  .btn-primary {
-    @apply px-4 py-2 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed;
-  }
-
-  .btn-secondary {
-    @apply px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white font-semibold rounded-lg transition;
-  }
-
-  .input-field {
-    @apply px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500 transition;
-  }
-
-  .card {
-    @apply bg-gray-800 border border-gray-700 rounded-lg p-6;
-  }
-
-  .card-hover {
-    @apply card hover:border-purple-500 transition;
-  }
-}
-
-/* Animations */
-@keyframes float {
-  0%, 100% {
-    transform: translateY(0px);
-  }
-  50% {
-    transform: translateY(-10px);
-  }
-}
-
-.float {
-  animation: float 3s ease-in-out infinite;
-}
-
-/* Loading Spinner */
-.spinner {
-  border: 3px solid rgba(168, 85, 247, 0.1);
-  border-top: 3px solid #a855f7;
-  border-radius: 50%;
-  width: 40px;
-  height: 40px;
-  animation: spin 0.8s linear infinite;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-/* Scrollbar Styling */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #4b5563;
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #5a6b7a;
-}
diff --git a/packages/web/src/utils/serviceWorker.ts b/packages/web/src/utils/serviceWorker.ts
deleted file mode 100644
index 85239b9..0000000
--- a/packages/web/src/utils/serviceWorker.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-export function registerServiceWorker() {
-  if ('serviceWorker' in navigator) {
-    window.addEventListener('load', () => {
-      navigator.serviceWorker
-        .register('/sw.js')
-        .then((registration) => {
-          console.log('ServiceWorker registered:', registration);
-        })
-        .catch((error) => {
-          console.log('ServiceWorker registration failed:', error);
-        });
-    });
-  }
-}
-
-export function requestNotificationPermission() {
-  if ('Notification' in window) {
-    if (Notification.permission === 'granted') {
-      return Promise.resolve();
-    }
-    if (Notification.permission !== 'denied') {
-      return Notification.requestPermission();
-    }
-  }
-  return Promise.reject('Notifications not supported');
-}
diff --git a/packages/web/src/utils/webrtc.ts b/packages/web/src/utils/webrtc.ts
deleted file mode 100644
index f823655..0000000
--- a/packages/web/src/utils/webrtc.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import { Socket } from 'socket.io-client';
-
-export class WebRTCService {
-  private socket: Socket | null = null;
-  private peerConnections: Map<string, RTCPeerConnection> = new Map();
-
-  constructor(socket: Socket) {
-    this.socket = socket;
-    this.setupSocketListeners();
-  }
-
-  private setupSocketListeners() {
-    if (!this.socket) return;
-
-    this.socket.on('offer', (data: any) => {
-      console.log('Received offer from:', data.from);
-      this.handleOffer(data);
-    });
-
-    this.socket.on('answer', (data: any) => {
-      console.log('Received answer from:', data.from);
-      this.handleAnswer(data);
-    });
-
-    this.socket.on('ice-candidate', (data: any) => {
-      console.log('Received ICE candidate from:', data.from);
-      this.handleIceCandidate(data);
-    });
-  }
-
-  async startCall(recipientId: string): Promise<void> {
-    try {
-      const peerConnection = this.createPeerConnection(recipientId);
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
-
-      stream.getTracks().forEach((track) => {
-        peerConnection.addTrack(track, stream);
-      });
-
-      const offer = await peerConnection.createOffer();
-      await peerConnection.setLocalDescription(offer);
-
-      this.socket?.emit('offer', {
-        to: recipientId,
-        offer: offer,
-      });
-    } catch (error) {
-      console.error('Error starting call:', error);
-    }
-  }
-
-  private createPeerConnection(peerId: string): RTCPeerConnection {
-    if (this.peerConnections.has(peerId)) {
-      return this.peerConnections.get(peerId)!;
-    }
-
-    const iceServers = [
-      { urls: ['stun:stun.l.google.com:19302', 'stun:stun1.l.google.com:19302'] },
-    ];
-
-    const peerConnection = new RTCPeerConnection({
-      iceServers,
-    });
-
-    peerConnection.onicecandidate = (event) => {
-      if (event.candidate) {
-        this.socket?.emit('ice-candidate', {
-          to: peerId,
-          candidate: event.candidate,
-        });
-      }
-    };
-
-    peerConnection.ontrack = (event) => {
-      console.log('Received remote track:', event.track);
-    };
-
-    this.peerConnections.set(peerId, peerConnection);
-    return peerConnection;
-  }
-
-  private async handleOffer(data: any) {
-    const peerConnection = this.createPeerConnection(data.from);
-    await peerConnection.setRemoteDescription(new RTCSessionDescription(data.offer));
-
-    const answer = await peerConnection.createAnswer();
-    await peerConnection.setLocalDescription(answer);
-
-    this.socket?.emit('answer', {
-      to: data.from,
-      answer: answer,
-    });
-  }
-
-  private async handleAnswer(data: any) {
-    const peerConnection = this.peerConnections.get(data.from);
-    if (peerConnection) {
-      await peerConnection.setRemoteDescription(new RTCSessionDescription(data.answer));
-    }
-  }
-
-  private async handleIceCandidate(data: any) {
-    const peerConnection = this.peerConnections.get(data.from);
-    if (peerConnection && data.candidate) {
-      await peerConnection.addIceCandidate(new RTCIceCandidate(data.candidate));
-    }
-  }
-
-  endCall(peerId: string): void {
-    const peerConnection = this.peerConnections.get(peerId);
-    if (peerConnection) {
-      peerConnection.close();
-      this.peerConnections.delete(peerId);
-    }
-  }
-}
diff --git a/packages/web/tailwind.config.js b/packages/web/tailwind.config.js
deleted file mode 100644
index cd7389d..0000000
--- a/packages/web/tailwind.config.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    "./public/index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {
-      colors: {
-        gray: {
-          50: '#f9fafb',
-          100: '#f3f4f6',
-          200: '#e5e7eb',
-          300: '#d1d5db',
-          400: '#9ca3af',
-          500: '#6b7280',
-          600: '#4b5563',
-          700: '#374151',
-          800: '#1f2937',
-          900: '#0f172a',
-        },
-        purple: {
-          50: '#f9f5ff',
-          100: '#f3e8ff',
-          200: '#e9d5ff',
-          300: '#d8b4fe',
-          400: '#c084fc',
-          500: '#a855f7',
-          600: '#9333ea',
-          700: '#7e22ce',
-          800: '#6b21a8',
-          900: '#581c87',
-        },
-        pink: {
-          600: '#ec4899',
-          700: '#be185d',
-        },
-      },
-      fontFamily: {
-        sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
-      },
-      keyframes: {
-        float: {
-          '0%, 100%': { transform: 'translateY(0px)' },
-          '50%': { transform: 'translateY(-10px)' },
-        },
-      },
-      animation: {
-        float: 'float 3s ease-in-out infinite',
-      },
-    },
-  },
-  plugins: [],
-}
diff --git a/packages/web/tsconfig.json b/packages/web/tsconfig.json
deleted file mode 100644
index 686b1ff..0000000
--- a/packages/web/tsconfig.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "node",
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
-    "noFallthroughCasesInSwitch": true,
-
-    /* Path mapping */
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}
diff --git a/packages/web/tsconfig.node.json b/packages/web/tsconfig.node.json
deleted file mode 100644
index 97ede7e..0000000
--- a/packages/web/tsconfig.node.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
-    "strict": true
-  },
-  "include": ["vite.config.ts"]
-}
diff --git a/packages/web/vite.config.ts b/packages/web/vite.config.ts
deleted file mode 100644
index cd72b5a..0000000
--- a/packages/web/vite.config.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import { VitePWA } from 'vite-plugin-pwa'
-import path from 'path'
-
-export default defineConfig({
-  plugins: [
-    react(),
-    VitePWA({
-      registerType: 'autoUpdate',
-      workbox: {
-        clientsClaim: true,
-        skipWaiting: true,
-        cleanupOutdatedCaches: true,
-        runtimeCaching: [
-          {
-            urlPattern: /^https:\/\/api\.aethex\.dev\/.*/i,
-            handler: 'NetworkFirst',
-            options: {
-              cacheName: 'api-cache',
-              networkTimeoutSeconds: 3,
-              expiration: {
-                maxEntries: 50,
-                maxAgeSeconds: 7 * 24 * 60 * 60, // 1 week
-              },
-            },
-          },
-        ],
-      },
-      manifest: {
-        name: 'AeThex Connect',
-        short_name: 'AeThex',
-        description: 'Next-generation communication platform',
-        theme_color: '#a855f7',
-        background_color: '#0a0a0f',
-        display: 'standalone',
-        scope: '/',
-        start_url: '/',
-        orientation: 'portrait-primary',
-      },
-      devOptions: {
-        enabled: true,
-        navigateFallback: 'index.html',
-        suppressWarnings: true,
-      },
-    }),
-  ],
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, './src'),
-    },
-  },
-  build: {
-    target: 'es2020',
-    outDir: 'dist',
-    sourcemap: false,
-    minify: 'terser',
-    terserOptions: {
-      compress: {
-        drop_console: true,
-      },
-    },
-    rollupOptions: {
-      output: {
-        manualChunks: {
-          'vendor-core': ['react', 'react-dom', 'react-router-dom'],
-          'vendor-state': ['@reduxjs/toolkit', 'react-redux'],
-          'vendor-webrtc': ['socket.io-client'],
-        },
-      },
-    },
-  },
-  server: {
-    port: 5173,
-    proxy: {
-      '/api': {
-        target: process.env.VITE_API_URL || 'http://localhost:3000',
-        changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api/, ''),
-      },
-    },
-  },
-})
diff --git a/src/backend/routes/authRoutes.js b/src/backend/routes/authRoutes.js
new file mode 100644
index 0000000..64a4b5b
--- /dev/null
+++ b/src/backend/routes/authRoutes.js
@@ -0,0 +1,362 @@
+/**
+ * Authentication Routes
+ * Handles user registration, login, and session management
+ */
+
+const express = require('express');
+const bcrypt = require('bcryptjs');
+const jwt = require('jsonwebtoken');
+const db = require('../database/db');
+const { authenticateUser } = require('../middleware/auth');
+
+const router = express.Router();
+
+/**
+ * POST /api/auth/register
+ * Register a new user
+ */
+router.post('/register', async (req, res) => {
+  try {
+    const { email, password, username, displayName } = req.body;
+
+    // Validation
+    if (!email || !password) {
+      return res.status(400).json({
+        success: false,
+        error: 'Email and password are required'
+      });
+    }
+
+    if (password.length < 8) {
+      return res.status(400).json({
+        success: false,
+        error: 'Password must be at least 8 characters'
+      });
+    }
+
+    // Check if user already exists
+    const existingUser = await db.query(
+      'SELECT id FROM users WHERE email = $1',
+      [email.toLowerCase()]
+    );
+
+    if (existingUser.rows.length > 0) {
+      return res.status(409).json({
+        success: false,
+        error: 'An account with this email already exists'
+      });
+    }
+
+    // Check if username is taken (if provided)
+    if (username) {
+      const existingUsername = await db.query(
+        'SELECT id FROM users WHERE username = $1',
+        [username.toLowerCase()]
+      );
+
+      if (existingUsername.rows.length > 0) {
+        return res.status(409).json({
+          success: false,
+          error: 'This username is already taken'
+        });
+      }
+    }
+
+    // Hash password
+    const salt = await bcrypt.genSalt(12);
+    const passwordHash = await bcrypt.hash(password, salt);
+
+    // Create user
+    const result = await db.query(
+      `INSERT INTO users (email, password_hash, username, display_name, created_at, updated_at)
+       VALUES ($1, $2, $3, $4, NOW(), NOW())
+       RETURNING id, email, username, display_name, created_at`,
+      [email.toLowerCase(), passwordHash, username?.toLowerCase() || null, displayName || username || email.split('@')[0]]
+    );
+
+    const user = result.rows[0];
+
+    // Generate JWT
+    const token = jwt.sign(
+      { userId: user.id, email: user.email },
+      process.env.JWT_SECRET,
+      { expiresIn: '7d' }
+    );
+
+    res.status(201).json({
+      success: true,
+      data: {
+        user: {
+          id: user.id,
+          email: user.email,
+          username: user.username,
+          displayName: user.display_name
+        },
+        token
+      }
+    });
+  } catch (error) {
+    console.error('Registration error:', error);
+    res.status(500).json({
+      success: false,
+      error: 'Failed to create account'
+    });
+  }
+});
+
+/**
+ * POST /api/auth/login
+ * Login with email and password
+ */
+router.post('/login', async (req, res) => {
+  try {
+    const { email, password } = req.body;
+
+    // Validation
+    if (!email || !password) {
+      return res.status(400).json({
+        success: false,
+        error: 'Email and password are required'
+      });
+    }
+
+    // Find user
+    const result = await db.query(
+      `SELECT id, email, password_hash, username, display_name, verified_domain, avatar_url, is_premium
+       FROM users WHERE email = $1`,
+      [email.toLowerCase()]
+    );
+
+    if (result.rows.length === 0) {
+      return res.status(401).json({
+        success: false,
+        error: 'Invalid email or password'
+      });
+    }
+
+    const user = result.rows[0];
+
+    // Verify password
+    const isValidPassword = await bcrypt.compare(password, user.password_hash);
+
+    if (!isValidPassword) {
+      return res.status(401).json({
+        success: false,
+        error: 'Invalid email or password'
+      });
+    }
+
+    // Generate JWT
+    const token = jwt.sign(
+      { userId: user.id, email: user.email },
+      process.env.JWT_SECRET,
+      { expiresIn: '7d' }
+    );
+
+    // Update last login
+    await db.query(
+      'UPDATE users SET last_login = NOW() WHERE id = $1',
+      [user.id]
+    );
+
+    res.json({
+      success: true,
+      data: {
+        user: {
+          id: user.id,
+          email: user.email,
+          username: user.username,
+          displayName: user.display_name,
+          verifiedDomain: user.verified_domain,
+          avatarUrl: user.avatar_url,
+          isPremium: user.is_premium
+        },
+        token
+      }
+    });
+  } catch (error) {
+    console.error('Login error:', error);
+    res.status(500).json({
+      success: false,
+      error: 'Login failed'
+    });
+  }
+});
+
+/**
+ * POST /api/auth/demo
+ * Demo login - creates or returns a demo user
+ */
+router.post('/demo', async (req, res) => {
+  try {
+    const demoEmail = 'demo@aethex.dev';
+    
+    // Check if demo user exists
+    let result = await db.query(
+      `SELECT id, email, username, display_name, verified_domain, avatar_url, is_premium
+       FROM users WHERE email = $1`,
+      [demoEmail]
+    );
+
+    let user;
+
+    if (result.rows.length === 0) {
+      // Create demo user
+      const salt = await bcrypt.genSalt(12);
+      const passwordHash = await bcrypt.hash('demo123456', salt);
+
+      result = await db.query(
+        `INSERT INTO users (email, password_hash, username, display_name, verified_domain, created_at, updated_at)
+         VALUES ($1, $2, $3, $4, $5, NOW(), NOW())
+         RETURNING id, email, username, display_name, verified_domain, avatar_url, is_premium`,
+        [demoEmail, passwordHash, 'demo', 'Demo User', 'demo.aethex']
+      );
+    }
+
+    user = result.rows[0];
+
+    // Generate JWT
+    const token = jwt.sign(
+      { userId: user.id, email: user.email },
+      process.env.JWT_SECRET,
+      { expiresIn: '24h' }
+    );
+
+    res.json({
+      success: true,
+      data: {
+        user: {
+          id: user.id,
+          email: user.email,
+          username: user.username,
+          displayName: user.display_name,
+          verifiedDomain: user.verified_domain,
+          avatarUrl: user.avatar_url,
+          isPremium: user.is_premium
+        },
+        token
+      }
+    });
+  } catch (error) {
+    console.error('Demo login error:', error);
+    res.status(500).json({
+      success: false,
+      error: 'Demo login failed'
+    });
+  }
+});
+
+/**
+ * GET /api/auth/me
+ * Get current user info
+ */
+router.get('/me', authenticateUser, async (req, res) => {
+  try {
+    const result = await db.query(
+      `SELECT id, email, username, display_name, verified_domain, avatar_url, is_premium, created_at
+       FROM users WHERE id = $1`,
+      [req.user.id]
+    );
+
+    if (result.rows.length === 0) {
+      return res.status(404).json({
+        success: false,
+        error: 'User not found'
+      });
+    }
+
+    const user = result.rows[0];
+
+    res.json({
+      success: true,
+      data: {
+        id: user.id,
+        email: user.email,
+        username: user.username,
+        displayName: user.display_name,
+        verifiedDomain: user.verified_domain,
+        avatarUrl: user.avatar_url,
+        isPremium: user.is_premium,
+        createdAt: user.created_at
+      }
+    });
+  } catch (error) {
+    console.error('Get user error:', error);
+    res.status(500).json({
+      success: false,
+      error: 'Failed to get user info'
+    });
+  }
+});
+
+/**
+ * PUT /api/auth/profile
+ * Update user profile
+ */
+router.put('/profile', authenticateUser, async (req, res) => {
+  try {
+    const { displayName, username, avatarUrl } = req.body;
+    const userId = req.user.id;
+
+    // Check if username is taken
+    if (username) {
+      const existingUsername = await db.query(
+        'SELECT id FROM users WHERE username = $1 AND id != $2',
+        [username.toLowerCase(), userId]
+      );
+
+      if (existingUsername.rows.length > 0) {
+        return res.status(409).json({
+          success: false,
+          error: 'This username is already taken'
+        });
+      }
+    }
+
+    const result = await db.query(
+      `UPDATE users 
+       SET display_name = COALESCE($1, display_name),
+           username = COALESCE($2, username),
+           avatar_url = COALESCE($3, avatar_url),
+           updated_at = NOW()
+       WHERE id = $4
+       RETURNING id, email, username, display_name, verified_domain, avatar_url, is_premium`,
+      [displayName, username?.toLowerCase(), avatarUrl, userId]
+    );
+
+    const user = result.rows[0];
+
+    res.json({
+      success: true,
+      data: {
+        id: user.id,
+        email: user.email,
+        username: user.username,
+        displayName: user.display_name,
+        verifiedDomain: user.verified_domain,
+        avatarUrl: user.avatar_url,
+        isPremium: user.is_premium
+      }
+    });
+  } catch (error) {
+    console.error('Update profile error:', error);
+    res.status(500).json({
+      success: false,
+      error: 'Failed to update profile'
+    });
+  }
+});
+
+/**
+ * POST /api/auth/logout
+ * Logout (client-side token removal, but we can track it)
+ */
+router.post('/logout', authenticateUser, (req, res) => {
+  // In a more complex system, you'd invalidate the token here
+  res.json({
+    success: true,
+    message: 'Logged out successfully'
+  });
+});
+
+module.exports = router;
diff --git a/src/backend/server.js b/src/backend/server.js
index bcebda6..e23f0b7 100644
--- a/src/backend/server.js
+++ b/src/backend/server.js
@@ -5,6 +5,7 @@ const helmet = require('helmet');
 const rateLimit = require('express-rate-limit');
 require('dotenv').config();
 
+const authRoutes = require('./routes/authRoutes');
 const domainRoutes = require('./routes/domainRoutes');
 const messagingRoutes = require('./routes/messagingRoutes');
 const gameforgeRoutes = require('./routes/gameforgeRoutes');
@@ -52,6 +53,7 @@ const frontendPath = path.join(__dirname, '../frontend/dist');
 app.use(express.static(frontendPath));
 
 // API routes
+app.use('/api/auth', authRoutes);
 app.use('/api/passport/domain', domainRoutes);
 app.use('/api/messaging', messagingRoutes);
 app.use('/api/gameforge', gameforgeRoutes);
diff --git a/src/backend/services/socketService.js b/src/backend/services/socketService.js
index f19717d..a0d2651 100644
--- a/src/backend/services/socketService.js
+++ b/src/backend/services/socketService.js
@@ -160,6 +160,34 @@ class SocketService {
       }
     });
 
+    // Voice channel events
+    socket.on('voice:join', async (data) => {
+      try {
+        await this.handleVoiceJoin(socket, data);
+      } catch (error) {
+        console.error('Error handling voice:join:', error);
+        socket.emit('error', { event: 'voice:join', message: error.message });
+      }
+    });
+
+    socket.on('voice:leave', async (data) => {
+      try {
+        await this.handleVoiceLeave(socket, data);
+      } catch (error) {
+        console.error('Error handling voice:leave:', error);
+        socket.emit('error', { event: 'voice:leave', message: error.message });
+      }
+    });
+
+    socket.on('voice:signal', async (data) => {
+      try {
+        await this.handleVoiceSignal(socket, data);
+      } catch (error) {
+        console.error('Error handling voice:signal:', error);
+        socket.emit('error', { event: 'voice:signal', message: error.message });
+      }
+    });
+
     // Disconnect handler
     socket.on('disconnect', async () => {
       try {
@@ -247,12 +275,82 @@ class SocketService {
     });
   }
   
+  /**
+   * Handle voice channel join
+   */
+  handleVoiceJoin(socket, data) {
+    const { channelId } = data;
+    const voiceRoom = `voice:${channelId}`;
+    
+    // Join the voice room
+    socket.join(voiceRoom);
+    
+    // Store the voice channel on the socket
+    socket.voiceChannel = channelId;
+    
+    console.log(`User ${socket.user.username} joined voice channel ${channelId}`);
+    
+    // Notify others in the channel
+    socket.to(voiceRoom).emit('voice:user_joined', {
+      userId: socket.user.id,
+      username: socket.user.username,
+      channelId
+    });
+  }
+  
+  /**
+   * Handle voice channel leave
+   */
+  handleVoiceLeave(socket, data) {
+    const { channelId } = data;
+    const voiceRoom = `voice:${channelId}`;
+    
+    // Leave the voice room
+    socket.leave(voiceRoom);
+    
+    // Clear the voice channel from socket
+    socket.voiceChannel = null;
+    
+    console.log(`User ${socket.user.username} left voice channel ${channelId}`);
+    
+    // Notify others in the channel
+    socket.to(voiceRoom).emit('voice:user_left', {
+      userId: socket.user.id,
+      username: socket.user.username,
+      channelId
+    });
+  }
+  
+  /**
+   * Handle voice signaling (WebRTC)
+   */
+  handleVoiceSignal(socket, data) {
+    const { to, channelId, data: signalData } = data;
+    
+    // Send signal to specific user
+    this.io.to(`user:${to}`).emit('voice:signal', {
+      from: socket.user.id,
+      channelId,
+      data: signalData
+    });
+  }
+  
   /**
    * Handle disconnect
    */
   handleDisconnect(socket, userId) {
     console.log(`User disconnected: ${socket.user.username} (${userId})`);
     
+    // If user was in a voice channel, notify others
+    if (socket.voiceChannel) {
+      const voiceRoom = `voice:${socket.voiceChannel}`;
+      socket.to(voiceRoom).emit('voice:user_left', {
+        userId: socket.user.id,
+        username: socket.user.username,
+        channelId: socket.voiceChannel
+      });
+    }
+    
     // Remove socket from tracking
     if (this.userSockets.has(userId)) {
       this.userSockets.get(userId).delete(socket.id);
diff --git a/src/frontend/App.css b/src/frontend/App.css
deleted file mode 100644
index 608e005..0000000
--- a/src/frontend/App.css
+++ /dev/null
@@ -1,189 +0,0 @@
-/* Sleek Dark Gaming Theme - BitChat/Root Inspired */
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Roboto', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background: #000000;
-  min-height: 100vh;
-}
-
-code {
-  font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
-}
-
-.app {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  background: #000000;
-}
-
-.app-header {
-  background: rgba(10, 10, 15, 0.8);
-  backdrop-filter: blur(20px);
-  padding: 20px 32px;
-  text-align: center;
-  border-bottom: 1px solid rgba(0, 217, 255, 0.1);
-  box-shadow: 0 4px 24px rgba(0, 217, 255, 0.05);
-}
-
-.app-header h1 {
-  margin: 0 0 8px 0;
-  color: #00d9ff;
-  font-size: 32px;
-  font-weight: 700;
-  text-shadow: 0 0 30px rgba(0, 217, 255, 0.3);
-}
-
-.app-header p {
-  margin: 0;
-  color: #a1a1aa;
-  font-size: 16px;
-}
-
-.app-main {
-  flex: 1;
-  padding: 40px 24px;
-  max-width: 1200px;
-  width: 100%;
-  margin: 0 auto;
-}
-
-.user-profile {
-  background: rgba(10, 10, 15, 0.6);
-  backdrop-filter: blur(20px);
-  border: 1px solid rgba(0, 217, 255, 0.1);
-  border-radius: 16px;
-  padding: 32px;
-  margin-bottom: 32px;
-  box-shadow: 0 8px 32px rgba(0, 217, 255, 0.1);
-}
-
-.profile-header {
-  text-align: center;
-  padding-bottom: 24px;
-  border-bottom: 1px solid rgba(0, 217, 255, 0.1);
-  margin-bottom: 24px;
-}
-
-.profile-header h2 {
-  margin: 0 0 8px 0;
-  color: #ffffff;
-  font-size: 28px;
-  font-weight: 600;
-}
-
-.profile-header p {
-  margin: 0 0 16px 0;
-  color: #a1a1aa;
-  font-size: 16px;
-}
-
-.profile-section {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-
-.toggle-button {
-  padding: 12px 32px;
-  background: linear-gradient(135deg, #00d9ff 0%, #00ff88 100%);
-  color: #000000;
-  border: none;
-  border-radius: 12px;
-  font-size: 16px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.3s;
-  align-self: center;
-  box-shadow: 0 4px 20px rgba(0, 217, 255, 0.3);
-}
-
-.toggle-button:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 30px rgba(0, 217, 255, 0.4), 0 0 40px rgba(0, 255, 136, 0.2);
-}
-
-.verification-container {
-  margin-top: 8px;
-}
-
-.info-section {
-  background: rgba(10, 10, 15, 0.6);
-  backdrop-filter: blur(20px);
-  border: 1px solid rgba(0, 217, 255, 0.1);
-  border-radius: 16px;
-  padding: 32px;
-  box-shadow: 0 8px 32px rgba(0, 217, 255, 0.1);
-}
-
-.info-section h3 {
-  margin: 0 0 16px 0;
-  color: #00d9ff;
-  font-size: 24px;
-  font-weight: 600;
-}
-
-.info-section p {
-  margin: 0 0 16px 0;
-  color: #d4d4d8;
-  line-height: 1.6;
-}
-
-.info-section ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.info-section li {
-  padding: 12px 16px;
-  color: #d4d4d8;
-  font-size: 16px;
-  background: rgba(0, 217, 255, 0.05);
-  border-radius: 8px;
-  margin-bottom: 8px;
-  border-left: 3px solid #00d9ff;
-}
-
-.app-footer {
-  background: rgba(10, 10, 15, 0.8);
-  backdrop-filter: blur(20px);
-  color: #a1a1aa;
-  text-align: center;
-  padding: 24px;
-  margin-top: auto;
-  border-top: 1px solid rgba(0, 217, 255, 0.1);
-}
-
-.app-footer p {
-  margin: 0;
-  font-size: 14px;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .app-main {
-    padding: 24px 16px;
-  }
-
-  .user-profile,
-  .info-section {
-    padding: 24px;
-  }
-
-  .app-header h1 {
-    font-size: 24px;
-  }
-
-  .profile-header h2 {
-    font-size: 24px;
-  }
-}
diff --git a/src/frontend/App.jsx b/src/frontend/App.jsx
deleted file mode 100644
index cec6cf5..0000000
--- a/src/frontend/App.jsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import React from 'react';
-import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
-import { AuthProvider, useAuth } from './contexts/AuthContext';
-import { MessagingProvider } from './contexts/MessagingContext';
-import MainLayout from './mockup/MainLayout';
-import LandingPage from './mockup/pages/LandingPage';
-import LoginPage from './mockup/pages/LoginPage';
-import RegisterPage from './mockup/pages/RegisterPage';
-import AboutPage from './mockup/pages/AboutPage';
-import FeaturesPage from './mockup/pages/FeaturesPage';
-import './index.css';
-import './mockup/mockup.css';
-
-/**
- * Protected route - requires authentication
- */
-function ProtectedRoute({ children }) {
-  const { isAuthenticated, loading } = useAuth();
-  
-  if (loading) {
-    return (
-      <div className="loading-screen">
-        <div className="loading-spinner"></div>
-        <span>Loading...</span>
-      </div>
-    );
-  }
-  
-  return isAuthenticated ? children : <Navigate to="/login" replace />;
-}
-
-/**
- * Public route - redirects to app if logged in
- */
-function PublicRoute({ children }) {
-  const { isAuthenticated, loading } = useAuth();
-  
-  if (loading) {
-    return (
-      <div className="loading-screen">
-        <div className="loading-spinner"></div>
-        <span>Loading...</span>
-      </div>
-    );
-  }
-  
-  return !isAuthenticated ? children : <Navigate to="/app" replace />;
-}
-
-/**
- * Main app with routing
- */
-function AppRoutes() {
-  const { login, register, logout } = useAuth();
-
-  return (
-    <Routes>
-      {/* Marketing pages - public */}
-      <Route path="/" element={<LandingPage />} />
-      <Route path="/features" element={<FeaturesPage />} />
-      <Route path="/about" element={<AboutPage />} />
-      
-      {/* Auth pages */}
-      <Route path="/login" element={
-        <PublicRoute>
-          <LoginPage onLogin={login} />
-        </PublicRoute>
-      } />
-      <Route path="/register" element={
-        <PublicRoute>
-          <RegisterPage onRegister={register} />
-        </PublicRoute>
-      } />
-      
-      {/* Connect App - protected */}
-      <Route path="/app" element={
-        <ProtectedRoute>
-          <MessagingProvider>
-            <MainLayout onLogout={logout} />
-          </MessagingProvider>
-        </ProtectedRoute>
-      } />
-      <Route path="/app/*" element={
-        <ProtectedRoute>
-          <MessagingProvider>
-            <MainLayout onLogout={logout} />
-          </MessagingProvider>
-        </ProtectedRoute>
-      } />
-      
-      {/* Catch all - redirect to home */}
-      <Route path="*" element={<Navigate to="/" replace />} />
-    </Routes>
-  );
-}
-
-export default function App() {
-  return (
-    <BrowserRouter>
-      <AuthProvider>
-        <AppRoutes />
-      </AuthProvider>
-    </BrowserRouter>
-  );
-}
diff --git a/src/frontend/Demo.css b/src/frontend/Demo.css
deleted file mode 100644
index faca2d5..0000000
--- a/src/frontend/Demo.css
+++ /dev/null
@@ -1,580 +0,0 @@
-/* Demo App Styles - Sleek Dark Gaming Theme (BitChat/Root Inspired) */
-
-.demo-app {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  background: #000000;
-  color: #e4e4e7;
-}
-
-/* Loading Screen */
-.loading-screen {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background: #0a0a0f;
-  color: #e4e4e7;
-}
-
-.loading-spinner {
-  font-size: 4rem;
-  animation: pulse 2s ease-in-out infinite;
-  margin-bottom: 1rem;
-  filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.6));
-}
-
-@keyframes pulse {
-  0%, 100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  50% {
-    transform: scale(1.1);
-    opacity: 0.8;
-  }
-}
-
-.loading-screen p {
-  font-size: 1.2rem;
-  opacity: 0.7;
-  font-weight: 500;
-}
-
-/* Header */
-.demo-header {
-  background: #18181b;
-  border-bottom: 1px solid #27272a;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
-  padding: 10 2px 10px rgba(0, 0, 0, 0.1);
-  padding: 1.5rem 2rem;
-}
-
-.header-content {
-  max-width: 1400px;
-  margin: 0 auto;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.logo-section h1 {
-  margin: 0;
-  font-size: 1.75rem;
-  color: #00d9ff;
-  font-weight: 700;
-  letter-spacing: -0.02em;
-  text-shadow: 0 0 30px rgba(0, 217, 255, 0.3);
-}
-
-.tagline {
-  margin: 0.25rem 0 0 0;
-  color: #71717a;
-  font-size: 0.875rem;
-  font-weight: 500;
-}
-
-.user-section {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.user-info {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-}
-
-.user-name {
-  font-weight: 600;
-  color: #e4e4e7;
-}
-
-.user-email {
-  font-size: 0.8rem;
-  color: #71717a;
-}
-
-/* Navigation */
-.demo-nav {
-  background: #18181b;
-  border-bottom: 1px solid #27272a;
-  display: flex;
-  gap: 0.5rem;
-  padding: 0.75rem 2rem;
-  overflow-x: auto;
-  scrollbar-width: thin;
-  scrollbar-color: #3f3f46 transparent;
-}
-
-.demo-nav::-webkit-scrollbar {
-  height: 6px;
-}
-
-.demo-nav::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.demo-nav::-webkit-scrollbar-thumb {
-  background: #3f3f46;
-  border-radius: 3px;
-}
-
-.nav-tab {
-  background: #09090b;
-  border: 1px solid #27272a;
-  padding: 0.625rem 1.25rem;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  white-space: nowrap;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.25rem;
-  min-width: 120px;
-  color: #a1a1aa;
-  font-size: 0.875rem;
-}
-
-.nav-tab:hover {
-  background: #18181b;
-  border-color: #3f3f46;
-  color: #e4e4e7;
-  transform: translateY(-1px);
-}
-
-.nav-tab.active {
-  background: linear-gradient(135deg, #00d9ff 0%, #00ff88 100%);
-  border-color: transparent;
-  color: #000000;
-  font-weight: 700;
-  box-shadow: 0 4px 12px rgba(0, 217, 255, 0.4);
-}
-
-.tab-label {
-  font-weight: 600;
-  font-size: 0.8rem;
-}
-
-.tab-phase {
-  font-size: 0.65rem;
-  opacity: 0.7;
-  background: rgba(255, 255, 255, 0.05);
-  padding: 2px 6px;
-  border-radius: 4px;
-  letter-spacing: 0.02em;
-  text-transform: uppercase;
-}
-
-.nav-tab.active .tab-phase {
-  background: rgba(255, 255, 255, 0.15);
-  opacity: 0.9;
-}
-
-/* Main Content */
-.demo-main {
-  flex: 1;
-  max-width: 1400px;
-  width: 100%;
-  margin: 0 auto;
-  padding: 2rem;
-}
-
-/* Overview Section */
-.overview-section {
-  background: #18181b;
-  border: 1px solid #27272a;
-  border-radius: 12px;
-  padding: 2rem;
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
-}
-
-.overview-section h2 {
-  margin: 0 0 0.75rem 0;
-  color: #e4e4e7;
-  font-size: 2rem;
-  font-weight: 700;
-  letter-spacing: -0.02em;
-}
-
-.intro {
-  color: #a1a1aa;
-  font-size: 1rem;
-  margin-bottom: 2rem;
-  line-height: 1.6;
-}
-
-/* Feature Grid */
-.feature-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 1.25rem;
-  margin: 2rem 0;
-}
-
-.feature-card {
-  background: #09090b;
-  border: 1px solid #27272a;
-  border-radius: 12px;
-  padding: 1.5rem;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-  overflow: hidden;
-}
-
-.feature-card::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: linear-gradient(90deg, #00d9ff, #00ff88);
-  opacity: 0;
-  transition: opacity 0.3s;
-}
-
-.feature-card:hover {
-  transform: translateY(-4px);
-  border-color: #3f3f46;
-  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(139, 92, 246, 0.1);
-}
-
-.feature-card:hover::before {
-  opacity: 1;
-}
-
-.feature-icon {
-  font-size: 2.5rem;
-  margin-bottom: 1rem;
-  filter: drop-shadow(0 4px 8px rgba(139, 92, 246, 0.3));
-}
-
-.feature-card h3 {
-  margin: 0.5rem 0;
-  color: #e4e4e7;
-  font-size: 1.25rem;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-}
-
-.feature-card p {
-  color: #71717a;
-  margin: 0.5rem 0 1rem 0;
-  line-height: 1.5;
-  font-size: 0.9rem;
-}
-
-.feature-card ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.feature-card ul li {
-  padding: 0.4rem 0;
-  color: #a1a1aa;
-  font-size: 0.875rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.feature-card ul li:before {
-  content: "✓";
-  color: #00d9ff;
-  font-weight: bold;
-  font-size: 0.875rem;
-}
-
-/* Badges */
-.badge {
-  display: inline-block;
-  padding: 0.25rem 0.625rem;
-  border-radius: 6px;
-  font-size: 0.7rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.phase-1 { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
-.phase-2 { background: rgba(168, 85, 247, 0.15); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.3); }
-.phase-3 { background: rgba(34, 197, 94, 0.15); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.3); }
-.phase-4 { background: rgba(251, 146, 60, 0.15); color: #fb923c; border: 1px solid rgba(251, 146, 60, 0.3); }
-.phase-5 { background: rgba(236, 72, 153, 0.15); color: #f472b6; border: 1px solid rgba(236, 72, 153, 0.3); }
-.phase-6 { background: rgba(234, 179, 8, 0.15); color: #fbbf24; border: 1px solid rgba(234, 179, 8, 0.3); }
-
-/* Status Section */
-.status-section {
-  background: linear-gradient(135deg, #18181b 0%, #27272a 100%);
-  border: 1px solid #3f3f46;
-  color: #e4e4e7;
-  padding: 2rem;
-  border-radius: 12px;
-  margin: 2rem 0;
-  position: relative;
-  overflow: hidden;
-}
-
-.status-section::before {
-  content: '';
-  position: absolute;
-  top: -50%;
-  right: -50%;
-  width: 200%;
-  height: 200%;
-  background: radial-gradient(circle, rgba(139, 92, 246, 0.1) 0%, transparent 70%);
-  animation: rotate 20s linear infinite;
-}
-
-@keyframes rotate {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-.status-section h3 {
-  margin: 0 0 1rem 0;
-  font-size: 1.5rem;
-  position: relative;
-  z-index: 1;
-}
-
-.status-section p {
-  margin: 0.5rem 0;
-  opacity: 0.9;
-  position: relative;
-  z-index: 1;
-}
-
-.platform-badges {
-  display: flex;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-  margin: 1rem 0;
-  position: relative;
-  z-index: 1;
-}
-
-.platform-badge {
-  background: rgba(24, 24, 27, 0.6);
-  border: 1px solid #3f3f46;
-  padding: 0.5rem 1rem;
-  border-radius: 8px;
-  font-size: 0.875rem;
-  backdrop-filter: blur(10px);
-  transition: all 0.2s;
-}
-
-.platform-badge:hover {
-  background: rgba(0, 217, 255, 0.15);
-  border-color: #00d9ff;
-  transform: translateY(-2px);
-}
-
-.timeline {
-  font-style: italic;
-  opacity: 0.8;
-  margin-top: 1rem;
-  position: relative;
-  z-index: 1;
-}
-
-/* Quick Stats */
-.quick-stats {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 1.25rem;
-  margin-top: 2rem;
-}
-
-.stat {
-  text-align: center;
-  padding: 1.5rem;
-  background: #09090b;
-  border: 1px solid #27272a;
-  border-radius: 12px;
-  transition: all 0.3s;
-  position: relative;
-  overflow: hidden;
-}
-
-.stat::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: linear-gradient(90deg, #00d9ff, #00ff88);
-  transform: scaleX(0);
-  transition: transform 0.3s;
-}
-
-.stat:hover {
-  border-color: #3f3f46;
-  transform: translateY(-4px);
-}
-
-.stat:hover::before {
-  transform: scaleX(1);
-}
-
-.stat-value {
-  font-size: 2.5rem;
-  font-weight: 700;
-  line-height: 1;
-  background: linear-gradient(135deg, #00d9ff 0%, #00ff88 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.stat-label {
-  font-size: 0.875rem;
-  color: #71717a;
-  margin-top: 0.5rem;
-  font-weight: 500;
-}
-
-/* Feature Section */
-.feature-section {
-  background: #18181b;
-  border: 1px solid #27272a;
-  border-radius: 12px;
-  padding: 2rem;
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
-  min-height: 500px;
-}
-
-.section-header {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  margin-bottom: 1rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid #27272a;
-}
-
-.section-header h2 {
-  margin: 0;
-  color: #e4e4e7;
-  font-size: 1.75rem;
-  font-weight: 700;
-  letter-spacing: -0.01em;
-}
-
-.section-description {
-  color: #a1a1aa;
-  margin-bottom: 2rem;
-  line-height: 1.6;
-  font-size: 0.95rem;
-}
-
-/* Footer */
-.demo-footer {
-  background: #18181b;
-  border-top: 1px solid #27272a;
-  margin-top: auto;
-  padding: 2rem;
-}
-
-.footer-content {
-  max-width: 1400px;
-  margin: 0 auto;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 2rem;
-  margin-bottom: 1.5rem;
-}
-
-.footer-section h4 {
-  margin: 0 0 1rem 0;
-  background: linear-gradient(135deg, #00d9ff 0%, #00ff88 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  font-size: 1rem;
-  font-weight: 600;
-}
-
-.footer-section p {
-  color: #71717a;
-  margin: 0;
-  font-size: 0.875rem;
-  line-height: 1.5;
-}
-
-.footer-section ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.footer-section ul li {
-  padding: 0.375rem 0;
-  font-size: 0.875rem;
-  color: #71717a;
-  transition: color 0.2s;
-}
-
-.footer-section ul li:hover {
-  color: #a1a1aa;
-}
-
-.footer-section ul li a {
-  color: inherit;
-  text-decoration: none;
-  transition: color 0.2s;
-}
-
-.footer-section ul li a:hover {
-  color: #00d9ff;
-}
-
-.footer-bottom {
-  text-align: center;
-  padding-top: 1.5rem;
-  border-top: 1px solid #27272a;
-}
-
-.footer-bottom p {
-  margin: 0;
-  color: #52525b;
-  font-size: 0.8rem;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .header-content {
-    flex-direction: column;
-    gap: 1rem;
-    text-align: center;
-  }
-  
-  .user-info {
-    align-items: center;
-  }
-  
-  .demo-nav {
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-  }
-  
-  .feature-grid {
-    grid-template-columns: 1fr;
-  }
-  
-  .quick-stats {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  
-  .footer-content {
-    grid-template-columns: 1fr;
-    text-align: center;
-  }
-}
diff --git a/src/frontend/Demo.jsx b/src/frontend/Demo.jsx
deleted file mode 100644
index 32ffd6c..0000000
--- a/src/frontend/Demo.jsx
+++ /dev/null
@@ -1,311 +0,0 @@
-import React, { useState } from 'react';
-import { SocketProvider } from './contexts/SocketContext';
-import { AuthProvider, useAuth } from './contexts/AuthContext';
-import DomainVerification from './components/DomainVerification';
-import VerifiedDomainBadge from './components/VerifiedDomainBadge';
-import Chat from './components/Chat/Chat';
-import Call from './components/Call';
-import GameForgeChat from './components/GameForgeChat';
-import UpgradeFlow from './components/Premium';
-import './App.css';
-
-/**
- * Comprehensive demo showcasing all AeThex Connect features
- * Phases 1-6 implementation
- */
-function DemoContent() {
-  const [activeTab, setActiveTab] = useState('overview');
-  const { user, loading } = useAuth();
-
-  // Show loading state while auth initializes
-  if (loading || !user) {
-    return (
-      <div className="loading-screen">
-        <div className="loading-spinner">🚀</div>
-        <p>Loading AeThex Connect...</p>
-      </div>
-    );
-  }
-
-  const tabs = [
-    { id: 'overview', label: '🏠 Overview', icon: '🏠' },
-    { id: 'domain', label: '🌐 Domain Verification', phase: 'Phase 1' },
-    { id: 'messaging', label: '💬 Real-time Chat', phase: 'Phase 2' },
-    { id: 'gameforge', label: '🎮 GameForge', phase: 'Phase 3' },
-    { id: 'calls', label: '📞 Voice/Video', phase: 'Phase 4' },
-    { id: 'premium', label: '⭐ Premium', phase: 'Phase 6' }
-  ];
-
-  return (
-    <SocketProvider>
-      <div className="demo-app">
-        <header className="demo-header">
-          <div className="header-content">
-            <div className="logo-section">
-              <h1>🚀 AeThex Connect</h1>
-              <p className="tagline">Next-Gen Communication for Gamers</p>
-            </div>
-            <div className="user-section">
-              <div className="user-info">
-                <span className="user-name">{user.name}</span>
-                <span className="user-email">{user.email}</span>
-              </div>
-              {user.verifiedDomain && (
-                <VerifiedDomainBadge
-                  verifiedDomain={user.verifiedDomain}
-                  verifiedAt={user.domainVerifiedAt}
-                />
-              )}
-            </div>
-          </div>
-        </header>
-
-        <nav className="demo-nav">
-          {tabs.map(tab => (
-            <button
-              key={tab.id}
-              className={`nav-tab ${activeTab === tab.id ? 'active' : ''}`}
-              onClick={() => setActiveTab(tab.id)}
-            >
-              <span className="tab-label">{tab.label}</span>
-              {tab.phase && <span className="tab-phase">{tab.phase}</span>}
-            </button>
-          ))}
-        </nav>
-
-        <main className="demo-main">
-          {activeTab === 'overview' && (
-            <div className="overview-section">
-              <h2>Welcome to AeThex Connect</h2>
-              <p className="intro">
-                A comprehensive communication platform built specifically for gamers and game developers.
-                Explore each feature using the tabs above.
-              </p>
-
-              <div className="feature-grid">
-                <div className="feature-card">
-                  <div className="feature-icon">🌐</div>
-                  <h3>Domain Verification</h3>
-                  <span className="badge phase-1">Phase 1</span>
-                  <p>Verify ownership of traditional domains (DNS) or blockchain .aethex domains</p>
-                  <ul>
-                    <li>DNS TXT record verification</li>
-                    <li>Blockchain domain integration</li>
-                    <li>Verified profile badges</li>
-                  </ul>
-                </div>
-
-                <div className="feature-card">
-                  <div className="feature-icon">💬</div>
-                  <h3>Real-time Messaging</h3>
-                  <span className="badge phase-2">Phase 2</span>
-                  <p>Instant, encrypted messaging with WebSocket connections</p>
-                  <ul>
-                    <li>Private conversations</li>
-                    <li>Message history</li>
-                    <li>Read receipts</li>
-                    <li>Typing indicators</li>
-                  </ul>
-                </div>
-
-                <div className="feature-card">
-                  <div className="feature-icon">🎮</div>
-                  <h3>GameForge Integration</h3>
-                  <span className="badge phase-3">Phase 3</span>
-                  <p>Built-in chat for game development teams</p>
-                  <ul>
-                    <li>Project channels</li>
-                    <li>Team collaboration</li>
-                    <li>Build notifications</li>
-                    <li>Asset sharing</li>
-                  </ul>
-                </div>
-
-                <div className="feature-card">
-                  <div className="feature-icon">📞</div>
-                  <h3>Voice & Video Calls</h3>
-                  <span className="badge phase-4">Phase 4</span>
-                  <p>High-quality WebRTC calls with screen sharing</p>
-                  <ul>
-                    <li>1-on-1 voice calls</li>
-                    <li>Video conferencing</li>
-                    <li>Screen sharing</li>
-                    <li>Call recording</li>
-                  </ul>
-                </div>
-
-                <div className="feature-card">
-                  <div className="feature-icon">🔗</div>
-                  <h3>Nexus Engine</h3>
-                  <span className="badge phase-5">Phase 5</span>
-                  <p>Cross-game identity and social features</p>
-                  <ul>
-                    <li>Unified player profiles</li>
-                    <li>Friend system</li>
-                    <li>Game lobbies</li>
-                    <li>Rich presence</li>
-                  </ul>
-                </div>
-
-                <div className="feature-card">
-                  <div className="feature-icon">⭐</div>
-                  <h3>Premium Subscriptions</h3>
-                  <span className="badge phase-6">Phase 6</span>
-                  <p>Monetization with blockchain domains</p>
-                  <ul>
-                    <li>.aethex domain marketplace</li>
-                    <li>Premium tiers ($10/mo)</li>
-                    <li>Enterprise plans</li>
-                    <li>Stripe integration</li>
-                  </ul>
-                </div>
-              </div>
-
-              <div className="status-section">
-                <h3>🚀 Phase 7: Full Platform (In Progress)</h3>
-                <p>Transform AeThex Connect into cross-platform apps:</p>
-                <div className="platform-badges">
-                  <span className="platform-badge">🌐 Progressive Web App</span>
-                  <span className="platform-badge">📱 iOS & Android</span>
-                  <span className="platform-badge">💻 Windows, macOS, Linux</span>
-                </div>
-                <p className="timeline">Expected completion: May 2026 (5 months)</p>
-              </div>
-
-              <div className="quick-stats">
-                <div className="stat">
-                  <div className="stat-value">6</div>
-                  <div className="stat-label">Phases Complete</div>
-                </div>
-                <div className="stat">
-                  <div className="stat-value">1</div>
-                  <div className="stat-label">Phase In Progress</div>
-                </div>
-                <div className="stat">
-                  <div className="stat-value">3</div>
-                  <div className="stat-label">Platforms</div>
-                </div>
-                <div className="stat">
-                  <div className="stat-value">95%</div>
-                  <div className="stat-label">Code Sharing</div>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {activeTab === 'domain' && (
-            <div className="feature-section">
-              <div className="section-header">
-                <h2>🌐 Domain Verification</h2>
-                <span className="badge phase-1">Phase 1</span>
-              </div>
-              <p className="section-description">
-                Prove ownership of your domain to display it on your profile and prevent impersonation.
-                Supports both traditional domains (via DNS) and blockchain .aethex domains.
-              </p>
-              <DomainVerification />
-            </div>
-          )}
-
-          {activeTab === 'messaging' && (
-            <div className="feature-section">
-              <div className="section-header">
-                <h2>💬 Real-time Messaging</h2>
-                <span className="badge phase-2">Phase 2</span>
-              </div>
-              <p className="section-description">
-                Private encrypted conversations with real-time delivery. Messages sync across all devices.
-              </p>
-              <Chat />
-            </div>
-          )}
-
-          {activeTab === 'gameforge' && (
-            <div className="feature-section">
-              <div className="section-header">
-                <h2>🎮 GameForge Integration</h2>
-                <span className="badge phase-3">Phase 3</span>
-              </div>
-              <p className="section-description">
-                Collaborate with your game development team. Channels auto-provision with your GameForge projects.
-              </p>
-              <GameForgeChat />
-            </div>
-          )}
-
-          {activeTab === 'calls' && (
-            <div className="feature-section">
-              <div className="section-header">
-                <h2>📞 Voice & Video Calls</h2>
-                <span className="badge phase-4">Phase 4</span>
-              </div>
-              <p className="section-description">
-                Crystal-clear WebRTC calls with screen sharing. Perfect for co-op gaming or team standups.
-              </p>
-              <Call />
-            </div>
-          )}
-
-          {activeTab === 'premium' && (
-            <div className="feature-section">
-              <div className="section-header">
-                <h2>⭐ Premium Subscriptions</h2>
-                <span className="badge phase-6">Phase 6</span>
-              </div>
-              <p className="section-description">
-                Upgrade to unlock blockchain .aethex domains, increased storage, and advanced features.
-              </p>
-              <UpgradeFlow />
-            </div>
-          )}
-        </main>
-
-        <footer className="demo-footer">
-          <div className="footer-content">
-            <div className="footer-section">
-              <h4>AeThex Connect</h4>
-              <p>Next-generation communication platform</p>
-            </div>
-            <div className="footer-section">
-              <h4>Technology</h4>
-              <ul>
-                <li>React 18 + Vite</li>
-                <li>WebSocket (Socket.io)</li>
-                <li>WebRTC</li>
-                <li>Stripe</li>
-              </ul>
-            </div>
-            <div className="footer-section">
-              <h4>Phases</h4>
-              <ul>
-                <li>✅ Phase 1-6 Complete</li>
-                <li>🔄 Phase 7 In Progress</li>
-              </ul>
-            </div>
-            <div className="footer-section">
-              <h4>Links</h4>
-              <ul>
-                <li><a href="#" onClick={(e) => { e.preventDefault(); setActiveTab('overview'); }}>Overview</a></li>
-                <li><a href="http://localhost:3000/health" target="_blank" rel="noopener noreferrer">API Health</a></li>
-                <li><a href="https://github.com/AeThex-Corporation/AeThex-Connect" target="_blank" rel="noopener noreferrer">GitHub</a></li>
-              </ul>
-            </div>
-          </div>
-          <div className="footer-bottom">
-            <p>&copy; 2026 AeThex Corporation. All rights reserved.</p>
-          </div>
-        </footer>
-      </div>
-    </SocketProvider>
-  );
-}
-
-function Demo() {
-  return (
-    <AuthProvider>
-      <DemoContent />
-    </AuthProvider>
-  );
-}
-
-export default Demo;
diff --git a/src/frontend/components/Call/Call.css b/src/frontend/components/Call/Call.css
deleted file mode 100644
index 24f2704..0000000
--- a/src/frontend/components/Call/Call.css
+++ /dev/null
@@ -1,345 +0,0 @@
-.call-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #1a1a1a;
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-}
-
-.call-error {
-  position: absolute;
-  top: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  background-color: #f44336;
-  color: white;
-  padding: 12px 20px;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  z-index: 1001;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-}
-
-.call-error button {
-  background: none;
-  border: none;
-  color: white;
-  font-size: 20px;
-  cursor: pointer;
-  padding: 0;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.call-header {
-  padding: 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: rgba(0, 0, 0, 0.5);
-}
-
-.call-status {
-  color: white;
-  font-size: 18px;
-  font-weight: 500;
-}
-
-.quality-indicator {
-  padding: 6px 12px;
-  border-radius: 20px;
-  color: white;
-  font-size: 12px;
-  font-weight: 600;
-  text-transform: uppercase;
-}
-
-.video-container {
-  flex: 1;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.remote-videos {
-  width: 100%;
-  height: 100%;
-  display: grid;
-  gap: 10px;
-  padding: 10px;
-}
-
-/* Grid layouts for different participant counts */
-.remote-videos:has(.remote-video-wrapper:nth-child(1):last-child) {
-  grid-template-columns: 1fr;
-}
-
-.remote-videos:has(.remote-video-wrapper:nth-child(2)) {
-  grid-template-columns: repeat(2, 1fr);
-}
-
-.remote-videos:has(.remote-video-wrapper:nth-child(3)),
-.remote-videos:has(.remote-video-wrapper:nth-child(4)) {
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(2, 1fr);
-}
-
-.remote-videos:has(.remote-video-wrapper:nth-child(5)),
-.remote-videos:has(.remote-video-wrapper:nth-child(6)) {
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(2, 1fr);
-}
-
-.remote-videos:has(.remote-video-wrapper:nth-child(7)) {
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(3, 1fr);
-}
-
-.remote-video-wrapper {
-  position: relative;
-  background-color: #2c2c2c;
-  border-radius: 12px;
-  overflow: hidden;
-  min-height: 200px;
-}
-
-.remote-video {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.participant-name {
-  position: absolute;
-  bottom: 12px;
-  left: 12px;
-  background-color: rgba(0, 0, 0, 0.7);
-  color: white;
-  padding: 6px 12px;
-  border-radius: 6px;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.local-video-wrapper {
-  position: absolute;
-  bottom: 100px;
-  right: 20px;
-  width: 200px;
-  height: 150px;
-  background-color: #2c2c2c;
-  border-radius: 12px;
-  overflow: hidden;
-  border: 2px solid #ffffff20;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
-}
-
-.local-video {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transform: scaleX(-1); /* Mirror effect for local video */
-}
-
-.local-label {
-  position: absolute;
-  bottom: 8px;
-  left: 8px;
-  background-color: rgba(0, 0, 0, 0.7);
-  color: white;
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.call-controls {
-  position: absolute;
-  bottom: 30px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  gap: 16px;
-  background-color: rgba(0, 0, 0, 0.7);
-  padding: 16px 24px;
-  border-radius: 50px;
-  backdrop-filter: blur(10px);
-}
-
-.control-btn {
-  width: 56px;
-  height: 56px;
-  border-radius: 50%;
-  border: none;
-  background-color: #3c3c3c;
-  color: white;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: 24px;
-  transition: all 0.2s ease;
-  position: relative;
-}
-
-.control-btn:hover {
-  transform: scale(1.1);
-  background-color: #4c4c4c;
-}
-
-.control-btn:active {
-  transform: scale(0.95);
-}
-
-.control-btn.active {
-  background-color: #4CAF50;
-}
-
-.control-btn.inactive {
-  background-color: #f44336;
-}
-
-.control-btn.accept-btn {
-  background-color: #4CAF50;
-  width: 120px;
-  border-radius: 28px;
-  font-size: 16px;
-  gap: 8px;
-}
-
-.control-btn.accept-btn .icon {
-  font-size: 20px;
-}
-
-.control-btn.reject-btn {
-  background-color: #f44336;
-  width: 120px;
-  border-radius: 28px;
-  font-size: 16px;
-  gap: 8px;
-}
-
-.control-btn.reject-btn .icon {
-  font-size: 20px;
-}
-
-.control-btn.end-btn {
-  background-color: #f44336;
-}
-
-.control-btn.end-btn:hover {
-  background-color: #d32f2f;
-}
-
-.call-actions {
-  display: flex;
-  gap: 20px;
-  justify-content: center;
-  padding: 40px;
-}
-
-.start-call-btn {
-  padding: 16px 32px;
-  border: none;
-  border-radius: 12px;
-  font-size: 16px;
-  font-weight: 600;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  transition: all 0.2s ease;
-  color: white;
-}
-
-.start-call-btn.audio {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-}
-
-.start-call-btn.video {
-  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-}
-
-.start-call-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-}
-
-.start-call-btn:active {
-  transform: translateY(0);
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
-  .local-video-wrapper {
-    width: 120px;
-    height: 90px;
-    bottom: 110px;
-    right: 10px;
-  }
-  
-  .call-controls {
-    gap: 12px;
-    padding: 12px 16px;
-  }
-  
-  .control-btn {
-    width: 48px;
-    height: 48px;
-    font-size: 20px;
-  }
-  
-  .control-btn.accept-btn,
-  .control-btn.reject-btn {
-    width: 100px;
-    font-size: 14px;
-  }
-  
-  .remote-videos {
-    gap: 5px;
-    padding: 5px;
-  }
-  
-  .participant-name {
-    font-size: 12px;
-    padding: 4px 8px;
-  }
-  
-  .call-actions {
-    flex-direction: column;
-    padding: 20px;
-  }
-  
-  .start-call-btn {
-    width: 100%;
-    justify-content: center;
-  }
-}
-
-/* Animation for ringing */
-@keyframes pulse {
-  0%, 100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  50% {
-    transform: scale(1.05);
-    opacity: 0.8;
-  }
-}
-
-.call-status:has(:contains("Calling")) {
-  animation: pulse 2s ease-in-out infinite;
-}
diff --git a/src/frontend/components/Call/index.jsx b/src/frontend/components/Call/index.jsx
deleted file mode 100644
index 2df769f..0000000
--- a/src/frontend/components/Call/index.jsx
+++ /dev/null
@@ -1,556 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import axios from 'axios';
-import WebRTCManager from '../../utils/webrtc';
-import './Call.css';
-
-const Call = ({ socket, conversationId, participants, onCallEnd }) => {
-  const [callId, setCallId] = useState(null);
-  const [callStatus, setCallStatus] = useState('idle'); // idle, initiating, ringing, connected, ended
-  const [isAudioEnabled, setIsAudioEnabled] = useState(true);
-  const [isVideoEnabled, setIsVideoEnabled] = useState(true);
-  const [isScreenSharing, setIsScreenSharing] = useState(false);
-  const [callDuration, setCallDuration] = useState(0);
-  const [connectionQuality, setConnectionQuality] = useState('good'); // good, fair, poor
-  const [remoteParticipants, setRemoteParticipants] = useState([]);
-  const [error, setError] = useState(null);
-  
-  const webrtcManager = useRef(null);
-  const localVideoRef = useRef(null);
-  const remoteVideosRef = useRef(new Map());
-  const callStartTime = useRef(null);
-  const durationInterval = useRef(null);
-  const statsInterval = useRef(null);
-  
-  /**
-   * Initialize WebRTC manager
-   */
-  useEffect(() => {
-    if (!socket) return;
-    
-    webrtcManager.current = new WebRTCManager(socket);
-    
-    // Setup event handlers
-    webrtcManager.current.onRemoteStream = handleRemoteStream;
-    webrtcManager.current.onRemoteStreamRemoved = handleRemoteStreamRemoved;
-    webrtcManager.current.onConnectionStateChange = handleConnectionStateChange;
-    
-    return () => {
-      if (webrtcManager.current) {
-        webrtcManager.current.cleanup();
-      }
-      clearInterval(durationInterval.current);
-      clearInterval(statsInterval.current);
-    };
-  }, [socket]);
-  
-  /**
-   * Listen for incoming calls
-   */
-  useEffect(() => {
-    if (!socket) return;
-    
-    socket.on('call:incoming', handleIncomingCall);
-    socket.on('call:ended', handleCallEnded);
-    
-    return () => {
-      socket.off('call:incoming', handleIncomingCall);
-      socket.off('call:ended', handleCallEnded);
-    };
-  }, [socket]);
-  
-  /**
-   * Update call duration timer
-   */
-  useEffect(() => {
-    if (callStatus === 'connected' && !durationInterval.current) {
-      callStartTime.current = Date.now();
-      durationInterval.current = setInterval(() => {
-        const duration = Math.floor((Date.now() - callStartTime.current) / 1000);
-        setCallDuration(duration);
-      }, 1000);
-    } else if (callStatus !== 'connected' && durationInterval.current) {
-      clearInterval(durationInterval.current);
-      durationInterval.current = null;
-    }
-    
-    return () => {
-      if (durationInterval.current) {
-        clearInterval(durationInterval.current);
-      }
-    };
-  }, [callStatus]);
-  
-  /**
-   * Monitor connection quality
-   */
-  useEffect(() => {
-    if (callStatus === 'connected' && !statsInterval.current) {
-      statsInterval.current = setInterval(async () => {
-        if (webrtcManager.current && remoteParticipants.length > 0) {
-          const firstParticipant = remoteParticipants[0];
-          const stats = await webrtcManager.current.getConnectionStats(firstParticipant.userId);
-          
-          if (stats && stats.connection) {
-            const rtt = stats.connection.roundTripTime || 0;
-            const bitrate = stats.connection.availableOutgoingBitrate || 0;
-            
-            // Determine quality based on RTT and bitrate
-            if (rtt < 0.1 && bitrate > 500000) {
-              setConnectionQuality('good');
-            } else if (rtt < 0.3 && bitrate > 200000) {
-              setConnectionQuality('fair');
-            } else {
-              setConnectionQuality('poor');
-            }
-          }
-        }
-      }, 3000);
-    } else if (callStatus !== 'connected' && statsInterval.current) {
-      clearInterval(statsInterval.current);
-      statsInterval.current = null;
-    }
-    
-    return () => {
-      if (statsInterval.current) {
-        clearInterval(statsInterval.current);
-      }
-    };
-  }, [callStatus, remoteParticipants]);
-  
-  /**
-   * Handle incoming call
-   */
-  const handleIncomingCall = async (data) => {
-    console.log('Incoming call:', data);
-    setCallId(data.callId);
-    setCallStatus('ringing');
-    setRemoteParticipants(data.participants || []);
-  };
-  
-  /**
-   * Handle remote stream received
-   */
-  const handleRemoteStream = (userId, stream) => {
-    console.log('Remote stream received from:', userId);
-    
-    // Get or create video element for this user
-    const videoElement = remoteVideosRef.current.get(userId);
-    if (videoElement) {
-      videoElement.srcObject = stream;
-    }
-  };
-  
-  /**
-   * Handle remote stream removed
-   */
-  const handleRemoteStreamRemoved = (userId) => {
-    console.log('Remote stream removed from:', userId);
-    setRemoteParticipants(prev => prev.filter(p => p.userId !== userId));
-  };
-  
-  /**
-   * Handle connection state change
-   */
-  const handleConnectionStateChange = (userId, state) => {
-    console.log(`Connection state with ${userId}:`, state);
-    
-    if (state === 'connected') {
-      setCallStatus('connected');
-    } else if (state === 'failed' || state === 'disconnected') {
-      setError(`Connection ${state} with user ${userId}`);
-    }
-  };
-  
-  /**
-   * Handle call ended
-   */
-  const handleCallEnded = (data) => {
-    console.log('Call ended:', data);
-    setCallStatus('ended');
-    
-    if (webrtcManager.current) {
-      webrtcManager.current.cleanup();
-    }
-    
-    if (onCallEnd) {
-      onCallEnd(data);
-    }
-  };
-  
-  /**
-   * Initiate a new call
-   */
-  const initiateCall = async (type = 'video') => {
-    try {
-      setCallStatus('initiating');
-      setError(null);
-      
-      // Get TURN credentials
-      const turnResponse = await axios.get('/api/calls/turn-credentials', {
-        headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
-      });
-      
-      if (webrtcManager.current && turnResponse.data.credentials) {
-        await webrtcManager.current.setTurnCredentials(turnResponse.data.credentials);
-      }
-      
-      // Initialize local media stream
-      const audioEnabled = true;
-      const videoEnabled = type === 'video';
-      
-      if (webrtcManager.current) {
-        const localStream = await webrtcManager.current.initializeLocalStream(audioEnabled, videoEnabled);
-        
-        // Display local video
-        if (localVideoRef.current) {
-          localVideoRef.current.srcObject = localStream;
-        }
-      }
-      
-      // Initiate call via API
-      const response = await axios.post('/api/calls/initiate', {
-        conversationId: conversationId,
-        type: type,
-        participantIds: participants.map(p => p.userId)
-      }, {
-        headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
-      });
-      
-      const { callId: newCallId } = response.data;
-      setCallId(newCallId);
-      setCallStatus('ringing');
-      
-      if (webrtcManager.current) {
-        webrtcManager.current.currentCallId = newCallId;
-        webrtcManager.current.isInitiator = true;
-        
-        // Create peer connections for each participant
-        for (const participant of participants) {
-          await webrtcManager.current.initiateCallToUser(participant.userId);
-        }
-      }
-      
-      setRemoteParticipants(participants);
-    } catch (err) {
-      console.error('Error initiating call:', err);
-      setError(err.response?.data?.message || err.message || 'Failed to initiate call');
-      setCallStatus('idle');
-    }
-  };
-  
-  /**
-   * Answer incoming call
-   */
-  const answerCall = async () => {
-    try {
-      setError(null);
-      
-      // Get TURN credentials
-      const turnResponse = await axios.get('/api/calls/turn-credentials', {
-        headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
-      });
-      
-      if (webrtcManager.current && turnResponse.data.credentials) {
-        await webrtcManager.current.setTurnCredentials(turnResponse.data.credentials);
-      }
-      
-      // Initialize local media stream
-      if (webrtcManager.current) {
-        const localStream = await webrtcManager.current.initializeLocalStream(true, true);
-        
-        // Display local video
-        if (localVideoRef.current) {
-          localVideoRef.current.srcObject = localStream;
-        }
-      }
-      
-      // Answer call via API
-      await axios.post(`/api/calls/${callId}/answer`, {}, {
-        headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
-      });
-      
-      setCallStatus('connected');
-    } catch (err) {
-      console.error('Error answering call:', err);
-      setError(err.response?.data?.message || err.message || 'Failed to answer call');
-      setCallStatus('idle');
-    }
-  };
-  
-  /**
-   * Reject incoming call
-   */
-  const rejectCall = async () => {
-    try {
-      await axios.post(`/api/calls/${callId}/reject`, {}, {
-        headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
-      });
-      
-      setCallStatus('idle');
-      setCallId(null);
-    } catch (err) {
-      console.error('Error rejecting call:', err);
-      setError(err.response?.data?.message || err.message || 'Failed to reject call');
-    }
-  };
-  
-  /**
-   * End active call
-   */
-  const endCall = async () => {
-    try {
-      if (callId) {
-        await axios.post(`/api/calls/${callId}/end`, {}, {
-          headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
-        });
-      }
-      
-      if (webrtcManager.current) {
-        webrtcManager.current.cleanup();
-      }
-      
-      setCallStatus('ended');
-      setCallId(null);
-      
-      if (onCallEnd) {
-        onCallEnd({ reason: 'ended-by-user' });
-      }
-    } catch (err) {
-      console.error('Error ending call:', err);
-      setError(err.response?.data?.message || err.message || 'Failed to end call');
-    }
-  };
-  
-  /**
-   * Toggle audio on/off
-   */
-  const toggleAudio = async () => {
-    if (webrtcManager.current) {
-      const enabled = !isAudioEnabled;
-      webrtcManager.current.toggleAudio(enabled);
-      setIsAudioEnabled(enabled);
-      
-      // Update media state via API
-      if (callId) {
-        try {
-          await axios.patch(`/api/calls/${callId}/media`, {
-            audioEnabled: enabled
-          }, {
-            headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
-          });
-        } catch (err) {
-          console.error('Error updating media state:', err);
-        }
-      }
-    }
-  };
-  
-  /**
-   * Toggle video on/off
-   */
-  const toggleVideo = async () => {
-    if (webrtcManager.current) {
-      const enabled = !isVideoEnabled;
-      webrtcManager.current.toggleVideo(enabled);
-      setIsVideoEnabled(enabled);
-      
-      // Update media state via API
-      if (callId) {
-        try {
-          await axios.patch(`/api/calls/${callId}/media`, {
-            videoEnabled: enabled
-          }, {
-            headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
-          });
-        } catch (err) {
-          console.error('Error updating media state:', err);
-        }
-      }
-    }
-  };
-  
-  /**
-   * Toggle screen sharing
-   */
-  const toggleScreenShare = async () => {
-    if (webrtcManager.current) {
-      try {
-        if (isScreenSharing) {
-          webrtcManager.current.stopScreenShare();
-          setIsScreenSharing(false);
-          
-          // Restore local video
-          if (localVideoRef.current && webrtcManager.current.getLocalStream()) {
-            localVideoRef.current.srcObject = webrtcManager.current.getLocalStream();
-          }
-        } else {
-          const screenStream = await webrtcManager.current.startScreenShare();
-          setIsScreenSharing(true);
-          
-          // Display screen in local video
-          if (localVideoRef.current) {
-            localVideoRef.current.srcObject = screenStream;
-          }
-        }
-      } catch (err) {
-        console.error('Error toggling screen share:', err);
-        setError('Failed to share screen');
-      }
-    }
-  };
-  
-  /**
-   * Format call duration (HH:MM:SS or MM:SS)
-   */
-  const formatDuration = (seconds) => {
-    const hours = Math.floor(seconds / 3600);
-    const minutes = Math.floor((seconds % 3600) / 60);
-    const secs = seconds % 60;
-    
-    if (hours > 0) {
-      return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
-    }
-    return `${minutes}:${secs.toString().padStart(2, '0')}`;
-  };
-  
-  /**
-   * Render call controls
-   */
-  const renderControls = () => {
-    if (callStatus === 'ringing' && !webrtcManager.current?.isInitiator) {
-      return (
-        <div className="call-controls">
-          <button className="control-btn accept-btn" onClick={answerCall}>
-            <span className="icon">📞</span>
-            Answer
-          </button>
-          <button className="control-btn reject-btn" onClick={rejectCall}>
-            <span className="icon">📵</span>
-            Reject
-          </button>
-        </div>
-      );
-    }
-    
-    if (callStatus === 'connected' || callStatus === 'ringing') {
-      return (
-        <div className="call-controls">
-          <button 
-            className={`control-btn ${isAudioEnabled ? 'active' : 'inactive'}`} 
-            onClick={toggleAudio}
-          >
-            <span className="icon">{isAudioEnabled ? '🎤' : '🔇'}</span>
-          </button>
-          
-          <button 
-            className={`control-btn ${isVideoEnabled ? 'active' : 'inactive'}`} 
-            onClick={toggleVideo}
-          >
-            <span className="icon">{isVideoEnabled ? '📹' : '🚫'}</span>
-          </button>
-          
-          <button 
-            className={`control-btn ${isScreenSharing ? 'active' : ''}`} 
-            onClick={toggleScreenShare}
-          >
-            <span className="icon">🖥️</span>
-          </button>
-          
-          <button className="control-btn end-btn" onClick={endCall}>
-            <span className="icon">📵</span>
-            End
-          </button>
-        </div>
-      );
-    }
-    
-    return null;
-  };
-  
-  /**
-   * Render connection quality indicator
-   */
-  const renderQualityIndicator = () => {
-    if (callStatus !== 'connected') return null;
-    
-    const colors = {
-      good: '#4CAF50',
-      fair: '#FFC107',
-      poor: '#F44336'
-    };
-    
-    return (
-      <div className="quality-indicator" style={{ backgroundColor: colors[connectionQuality] }}>
-        {connectionQuality}
-      </div>
-    );
-  };
-  
-  return (
-    <div className="call-container">
-      {error && (
-        <div className="call-error">
-          {error}
-          <button onClick={() => setError(null)}>×</button>
-        </div>
-      )}
-      
-      <div className="call-header">
-        <div className="call-status">
-          {callStatus === 'ringing' && 'Calling...'}
-          {callStatus === 'connected' && `Call Duration: ${formatDuration(callDuration)}`}
-          {callStatus === 'ended' && 'Call Ended'}
-        </div>
-        {renderQualityIndicator()}
-      </div>
-      
-      <div className="video-container">
-        {/* Remote videos */}
-        <div className="remote-videos">
-          {remoteParticipants.map(participant => (
-            <div key={participant.userId} className="remote-video-wrapper">
-              <video
-                ref={el => {
-                  if (el) remoteVideosRef.current.set(participant.userId, el);
-                }}
-                autoPlay
-                playsInline
-                className="remote-video"
-              />
-              <div className="participant-name">{participant.userName || participant.userIdentifier}</div>
-            </div>
-          ))}
-        </div>
-        
-        {/* Local video */}
-        {(callStatus === 'ringing' || callStatus === 'connected') && (
-          <div className="local-video-wrapper">
-            <video
-              ref={localVideoRef}
-              autoPlay
-              playsInline
-              muted
-              className="local-video"
-            />
-            <div className="local-label">You</div>
-          </div>
-        )}
-      </div>
-      
-      {renderControls()}
-      
-      {callStatus === 'idle' && (
-        <div className="call-actions">
-          <button className="start-call-btn audio" onClick={() => initiateCall('audio')}>
-            🎤 Start Audio Call
-          </button>
-          <button className="start-call-btn video" onClick={() => initiateCall('video')}>
-            📹 Start Video Call
-          </button>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Call;
diff --git a/src/frontend/components/Chat/Chat.css b/src/frontend/components/Chat/Chat.css
deleted file mode 100644
index 4d79929..0000000
--- a/src/frontend/components/Chat/Chat.css
+++ /dev/null
@@ -1,156 +0,0 @@
-/* Chat Container - Dark Gaming Theme */
-.chat-container {
-  display: flex;
-  height: 100vh;
-  background: #000000;
-  position: relative;
-}
-
-.chat-status {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  z-index: 100;
-}
-
-.status-indicator {
-  padding: 6px 12px;
-  border-radius: 20px;
-  font-size: 0.875rem;
-  font-weight: 500;
-}
-
-.status-indicator.online {
-  background: rgba(0, 255, 136, 0.2);
-  color: #00ff88;
-  border: 1px solid #00ff88;
-}
-
-.status-indicator.offline {
-  background: rgba(239, 68, 68, 0.2);
-  color: #ef4444;
-  border: 1px solid #ef4444;
-}
-
-/* Main Chat Area */
-.chat-main {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  background: rgba(10, 10, 15, 0.6);
-  backdrop-filter: blur(20px);
-  border-left: 1px solid rgba(0, 217, 255, 0.1);
-}
-
-.chat-header {
-  padding: 1rem 1.5rem;
-  border-bottom: 1px solid rgba(0, 217, 255, 0.1);
-  background: rgba(10, 10, 15, 0.8);
-  backdrop-filter: blur(20px);
-}
-
-.conversation-info {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.conversation-avatar {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  font-weight: 600;
-  font-size: 1.25rem;
-}
-
-.conversation-info h3 {
-  margin: 0;
-  font-size: 1.125rem;
-  font-weight: 600;
-}
-
-.participant-info {
-  margin: 0.25rem 0 0 0;
-  font-size: 0.875rem;
-  color: #6b7280;
-}
-
-/* No Conversation Selected */
-.no-conversation-selected {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: #9ca3af;
-}
-
-.no-conversation-selected p {
-  margin: 0.5rem 0;
-}
-
-.no-conversation-selected .hint {
-  font-size: 0.875rem;
-  color: #d1d5db;
-}
-
-/* Loading/Error States */
-.chat-loading,
-.chat-error {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-  gap: 1rem;
-}
-
-.spinner {
-  width: 40px;
-  height: 40px;
-  border: 4px solid #e5e7eb;
-  border-top-color: #3b82f6;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.chat-error p {
-  color: #dc2626;
-  font-weight: 500;
-}
-
-.chat-error button {
-  padding: 0.5rem 1rem;
-  background: #3b82f6;
-  color: white;
-  border: none;
-  border-radius: 0.5rem;
-  cursor: pointer;
-  font-weight: 500;
-}
-
-.chat-error button:hover {
-  background: #2563eb;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .chat-container {
-    flex-direction: column;
-  }
-
-  .conversation-list {
-    max-width: 100%;
-  }
-}
diff --git a/src/frontend/components/Chat/Chat.jsx b/src/frontend/components/Chat/Chat.jsx
deleted file mode 100644
index 52b34b7..0000000
--- a/src/frontend/components/Chat/Chat.jsx
+++ /dev/null
@@ -1,436 +0,0 @@
-/**
- * Chat Component - Main messaging interface
- */
-
-import React, { useState, useEffect, useRef } from 'react';
-import { useSocket } from '../../contexts/SocketContext';
-import ConversationList from './ConversationList';
-import MessageList from './MessageList';
-import MessageInput from './MessageInput';
-import './Chat.css';
-
-export default function Chat() {
-  const { socket, connected } = useSocket();
-  const [conversations, setConversations] = useState([]);
-  const [activeConversation, setActiveConversation] = useState(null);
-  const [messages, setMessages] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [typingUsers, setTypingUsers] = useState(new Set());
-  const [error, setError] = useState(null);
-
-  const typingTimeoutRef = useRef(null);
-  const activeConversationRef = useRef(null);
-
-  // Load conversations on mount
-  useEffect(() => {
-    loadConversations();
-  }, []);
-
-  // Socket event listeners
-  useEffect(() => {
-    if (!socket || !connected) return;
-
-    // New message
-    socket.on('new_message', handleNewMessage);
-
-    // Message edited
-    socket.on('message_edited', handleMessageEdited);
-
-    // Message deleted
-    socket.on('message_deleted', handleMessageDeleted);
-
-    // Reaction added
-    socket.on('reaction_added', handleReactionAdded);
-
-    // Reaction removed
-    socket.on('reaction_removed', handleReactionRemoved);
-
-    // Typing indicators
-    socket.on('user_typing', handleTypingStart);
-    socket.on('user_stopped_typing', handleTypingStop);
-
-    // User status changed
-    socket.on('user_status_changed', handleStatusChange);
-
-    return () => {
-      socket.off('new_message', handleNewMessage);
-      socket.off('message_edited', handleMessageEdited);
-      socket.off('message_deleted', handleMessageDeleted);
-      socket.off('reaction_added', handleReactionAdded);
-      socket.off('reaction_removed', handleReactionRemoved);
-      socket.off('user_typing', handleTypingStart);
-      socket.off('user_stopped_typing', handleTypingStop);
-      socket.off('user_status_changed', handleStatusChange);
-    };
-  }, [socket, connected, activeConversation]);
-
-  // Load conversations from API
-  const loadConversations = async () => {
-    try {
-      const response = await fetch(`${import.meta.env.VITE_API_URL || 'http://localhost:3000'}/api/messaging/conversations`, {
-        headers: {
-          'Authorization': `Bearer ${localStorage.getItem('token')}`
-        }
-      });
-
-      const data = await response.json();
-
-      if (data.success) {
-        setConversations(data.conversations);
-      } else {
-        setError(data.error);
-      }
-    } catch (error) {
-      console.error('Failed to load conversations:', error);
-      setError('Failed to load conversations');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // Load messages for a conversation
-  const loadMessages = async (conversationId) => {
-    try {
-      const response = await fetch(
-        `${import.meta.env.VITE_API_URL || 'http://localhost:3000'}/api/messaging/conversations/${conversationId}/messages`,
-        {
-          headers: {
-            'Authorization': `Bearer ${localStorage.getItem('token')}`
-          }
-        }
-      );
-
-      const data = await response.json();
-
-      // Only update messages if this conversation is still active
-      // This prevents race conditions when rapidly switching conversations
-      if (data.success && activeConversationRef.current === conversationId) {
-        setMessages(data.messages);
-
-        // Mark as read
-        if (data.messages.length > 0) {
-          markAsRead(conversationId);
-        }
-      }
-    } catch (error) {
-      console.error('Failed to load messages:', error);
-    }
-  };
-
-  // Select conversation
-  const selectConversation = async (conversation) => {
-    const conversationId = conversation.id;
-
-    // Update state and ref immediately to prevent race conditions
-    setActiveConversation(conversation);
-    activeConversationRef.current = conversationId;
-
-    // Clear current messages while loading
-    setMessages([]);
-
-    await loadMessages(conversationId);
-  };
-
-  // Handle new message
-  const handleNewMessage = (message) => {
-    // If this conversation is active, add message
-    if (activeConversation && activeConversation.id === message.conversationId) {
-      setMessages(prev => [...prev, message]);
-
-      // Mark as read
-      markAsRead(message.conversationId);
-    }
-
-    // Update conversation list (move to top, update last message)
-    setConversations(prev => {
-      const updated = prev.map(conv => {
-        if (conv.id === message.conversationId) {
-          return {
-            ...conv,
-            lastMessage: message,
-            updatedAt: message.createdAt,
-            unreadCount: activeConversation?.id === message.conversationId ? 0 : conv.unreadCount + 1
-          };
-        }
-        return conv;
-      });
-
-      // Sort by updated_at
-      return updated.sort((a, b) => 
-        new Date(b.updatedAt) - new Date(a.updatedAt)
-      );
-    });
-  };
-
-  // Handle message edited
-  const handleMessageEdited = (data) => {
-    const { messageId, content, editedAt } = data;
-
-    setMessages(prev => prev.map(msg =>
-      msg.id === messageId
-        ? { ...msg, content: content, editedAt: editedAt }
-        : msg
-    ));
-  };
-
-  // Handle message deleted
-  const handleMessageDeleted = (data) => {
-    const { messageId } = data;
-    setMessages(prev => prev.filter(msg => msg.id !== messageId));
-  };
-
-  // Handle reaction added
-  const handleReactionAdded = (data) => {
-    const { messageId, emoji, userId } = data;
-
-    setMessages(prev => prev.map(msg => {
-      if (msg.id === messageId) {
-        const reactions = [...(msg.reactions || [])];
-        const existing = reactions.find(r => r.emoji === emoji);
-
-        if (existing) {
-          if (!existing.users.includes(userId)) {
-            existing.users.push(userId);
-          }
-        } else {
-          reactions.push({
-            emoji: emoji,
-            users: [userId]
-          });
-        }
-
-        return { ...msg, reactions: reactions };
-      }
-      return msg;
-    }));
-  };
-
-  // Handle reaction removed
-  const handleReactionRemoved = (data) => {
-    const { messageId, emoji, userId } = data;
-
-    setMessages(prev => prev.map(msg => {
-      if (msg.id === messageId) {
-        const reactions = (msg.reactions || [])
-          .map(r => {
-            if (r.emoji === emoji) {
-              return {
-                ...r,
-                users: r.users.filter(u => u !== userId)
-              };
-            }
-            return r;
-          })
-          .filter(r => r.users.length > 0);
-
-        return { ...msg, reactions: reactions };
-      }
-      return msg;
-    }));
-  };
-
-  // Handle typing start
-  const handleTypingStart = (data) => {
-    const { conversationId, userId } = data;
-
-    if (activeConversation && activeConversation.id === conversationId) {
-      setTypingUsers(prev => new Set([...prev, userId]));
-    }
-  };
-
-  // Handle typing stop
-  const handleTypingStop = (data) => {
-    const { conversationId, userId } = data;
-
-    if (activeConversation && activeConversation.id === conversationId) {
-      setTypingUsers(prev => {
-        const updated = new Set(prev);
-        updated.delete(userId);
-        return updated;
-      });
-    }
-  };
-
-  // Handle user status change
-  const handleStatusChange = (data) => {
-    const { userId, status } = data;
-
-    // Update conversation participants
-    setConversations(prev => prev.map(conv => ({
-      ...conv,
-      participants: conv.participants?.map(p =>
-        p.id === userId ? { ...p, status: status } : p
-      )
-    })));
-
-    // Update active conversation
-    if (activeConversation) {
-      setActiveConversation(prev => ({
-        ...prev,
-        participants: prev.participants?.map(p =>
-          p.id === userId ? { ...p, status: status } : p
-        )
-      }));
-    }
-  };
-
-  // Send message
-  const sendMessage = async (content) => {
-    if (!activeConversation || !content.trim()) return;
-
-    try {
-      const response = await fetch(
-        `${import.meta.env.VITE_API_URL || 'http://localhost:3000'}/api/messaging/conversations/${activeConversation.id}/messages`,
-        {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${localStorage.getItem('token')}`
-          },
-          body: JSON.stringify({
-            content: content,
-            contentType: 'text'
-          })
-        }
-      );
-
-      const data = await response.json();
-
-      if (!data.success) {
-        throw new Error(data.error);
-      }
-
-      // Message will be received via socket event
-    } catch (error) {
-      console.error('Failed to send message:', error);
-      setError('Failed to send message');
-    }
-  };
-
-  // Start typing indicator
-  const startTyping = () => {
-    if (!activeConversation || !socket) return;
-
-    socket.emit('typing_start', {
-      conversationId: activeConversation.id
-    });
-
-    // Auto-stop after 3 seconds
-    if (typingTimeoutRef.current) {
-      clearTimeout(typingTimeoutRef.current);
-    }
-
-    typingTimeoutRef.current = setTimeout(() => {
-      stopTyping();
-    }, 3000);
-  };
-
-  // Stop typing indicator
-  const stopTyping = () => {
-    if (!activeConversation || !socket) return;
-
-    socket.emit('typing_stop', {
-      conversationId: activeConversation.id
-    });
-
-    if (typingTimeoutRef.current) {
-      clearTimeout(typingTimeoutRef.current);
-      typingTimeoutRef.current = null;
-    }
-  };
-
-  // Mark conversation as read
-  const markAsRead = async (conversationId) => {
-    try {
-      await fetch(
-        `${import.meta.env.VITE_API_URL || 'http://localhost:3000'}/api/messaging/conversations/${conversationId}/read`,
-        {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${localStorage.getItem('token')}`
-          }
-        }
-      );
-
-      // Update local state
-      setConversations(prev => prev.map(conv =>
-        conv.id === conversationId ? { ...conv, unreadCount: 0 } : conv
-      ));
-    } catch (error) {
-      console.error('Failed to mark as read:', error);
-    }
-  };
-
-  if (loading) {
-    return (
-      <div className="chat-loading">
-        <div className="spinner"></div>
-        <p>Loading conversations...</p>
-      </div>
-    );
-  }
-
-  if (error && conversations.length === 0) {
-    return (
-      <div className="chat-error">
-        <p>⚠️ {error}</p>
-        <button onClick={loadConversations}>Retry</button>
-      </div>
-    );
-  }
-
-  return (
-    <div className="chat-container">
-      <div className="chat-status">
-        {connected ? (
-          <span className="status-indicator online">● Connected</span>
-        ) : (
-          <span className="status-indicator offline">○ Disconnected</span>
-        )}
-      </div>
-
-      <ConversationList
-        conversations={conversations}
-        activeConversation={activeConversation}
-        onSelectConversation={selectConversation}
-      />
-
-      <div className="chat-main">
-        {activeConversation ? (
-          <>
-            <div className="chat-header">
-              <div className="conversation-info">
-                <div className="conversation-avatar">
-                  {activeConversation.title?.[0] || '?'}
-                </div>
-                <div>
-                  <h3>{activeConversation.title || 'Direct Message'}</h3>
-                  <p className="participant-info">
-                    {activeConversation.otherParticipants?.length || 0} participants
-                  </p>
-                </div>
-              </div>
-            </div>
-
-            <MessageList
-              messages={messages}
-              typingUsers={Array.from(typingUsers)}
-            />
-
-            <MessageInput
-              onSend={sendMessage}
-              onTyping={startTyping}
-              onStopTyping={stopTyping}
-            />
-          </>
-        ) : (
-          <div className="no-conversation-selected">
-            <p>Select a conversation to start messaging</p>
-            <p className="hint">or create a new conversation</p>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/components/Chat/ConversationList.css b/src/frontend/components/Chat/ConversationList.css
deleted file mode 100644
index bf025cf..0000000
--- a/src/frontend/components/Chat/ConversationList.css
+++ /dev/null
@@ -1,201 +0,0 @@
-/* Conversation List Sidebar - Dark Gaming Theme */
-.conversation-list {
-  width: 320px;
-  background: rgba(10, 10, 15, 0.8);
-  backdrop-filter: blur(20px);
-  border-right: 1px solid rgba(0, 217, 255, 0.1);
-  display: flex;
-  flex-direction: column;
-}
-
-.conversation-list-header {
-  padding: 1rem 1.5rem;
-  border-bottom: 1px solid rgba(0, 217, 255, 0.1);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.conversation-list-header h2 {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #ffffff;
-}
-
-.btn-new-conversation {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, #00d9ff 0%, #00ff88 100%);
-  color: #000000;
-  border: none;
-  font-size: 1.5rem;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.3s;
-  box-shadow: 0 4px 12px rgba(0, 217, 255, 0.3);
-}
-
-.btn-new-conversation:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(0, 217, 255, 0.4);
-}
-
-/* Conversation Items */
-.conversation-list-items {
-  flex: 1;
-  overflow-y: auto;
-}
-
-.no-conversations {
-  padding: 2rem 1.5rem;
-  text-align: center;
-  color: #9ca3af;
-}
-
-.no-conversations p {
-  margin: 0.5rem 0;
-}
-
-.no-conversations .hint {
-  font-size: 0.875rem;
-  color: #d1d5db;
-}
-
-.conversation-item {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1rem 1.5rem;
-  cursor: pointer;
-  transition: background 0.15s;
-  border-bottom: 1px solid #f3f4f6;
-}
-
-.conversation-item:hover {
-  background: #f9fafb;
-}
-
-.conversation-item.active {
-  background: #eff6ff;
-  border-left: 3px solid #3b82f6;
-}
-
-/* Conversation Avatar */
-.conversation-avatar-container {
-  position: relative;
-  flex-shrink: 0;
-}
-
-.conversation-avatar-img {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  object-fit: cover;
-}
-
-.conversation-avatar-placeholder {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  font-weight: 600;
-  font-size: 1.25rem;
-}
-
-.online-indicator {
-  position: absolute;
-  bottom: 2px;
-  right: 2px;
-  width: 12px;
-  height: 12px;
-  background: #10b981;
-  border: 2px solid white;
-  border-radius: 50%;
-}
-
-/* Conversation Details */
-.conversation-details {
-  flex: 1;
-  min-width: 0;
-}
-
-.conversation-header-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 0.25rem;
-}
-
-.conversation-title {
-  margin: 0;
-  font-size: 0.9375rem;
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.conversation-time {
-  font-size: 0.75rem;
-  color: #9ca3af;
-  flex-shrink: 0;
-  margin-left: 0.5rem;
-}
-
-.conversation-last-message {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-}
-
-.last-message-text {
-  margin: 0;
-  font-size: 0.875rem;
-  color: #6b7280;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex: 1;
-}
-
-.unread-badge {
-  flex-shrink: 0;
-  min-width: 20px;
-  height: 20px;
-  padding: 0 6px;
-  background: #3b82f6;
-  color: white;
-  border-radius: 10px;
-  font-size: 0.75rem;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Scrollbar Styling */
-.conversation-list-items::-webkit-scrollbar {
-  width: 6px;
-}
-
-.conversation-list-items::-webkit-scrollbar-track {
-  background: #f3f4f6;
-}
-
-.conversation-list-items::-webkit-scrollbar-thumb {
-  background: #d1d5db;
-  border-radius: 3px;
-}
-
-.conversation-list-items::-webkit-scrollbar-thumb:hover {
-  background: #9ca3af;
-}
diff --git a/src/frontend/components/Chat/ConversationList.jsx b/src/frontend/components/Chat/ConversationList.jsx
deleted file mode 100644
index f768b9a..0000000
--- a/src/frontend/components/Chat/ConversationList.jsx
+++ /dev/null
@@ -1,110 +0,0 @@
-/**
- * ConversationList Component
- * Displays list of conversations in sidebar
- */
-
-import React from 'react';
-import './ConversationList.css';
-
-export default function ConversationList({ conversations, activeConversation, onSelectConversation }) {
-  
-  const formatTime = (timestamp) => {
-    const date = new Date(timestamp);
-    const now = new Date();
-    const diffMs = now - date;
-    const diffMins = Math.floor(diffMs / 60000);
-    const diffHours = Math.floor(diffMs / 3600000);
-    const diffDays = Math.floor(diffMs / 86400000);
-
-    if (diffMins < 1) return 'Just now';
-    if (diffMins < 60) return `${diffMins}m ago`;
-    if (diffHours < 24) return `${diffHours}h ago`;
-    if (diffDays < 7) return `${diffDays}d ago`;
-    return date.toLocaleDateString();
-  };
-
-  const getConversationTitle = (conv) => {
-    if (conv.title) return conv.title;
-    
-    // For direct conversations, show other participant's domain
-    if (conv.otherParticipants && conv.otherParticipants.length > 0) {
-      return conv.otherParticipants[0].verified_domain || conv.otherParticipants[0].username;
-    }
-    
-    return 'Unknown';
-  };
-
-  const getConversationAvatar = (conv) => {
-    if (conv.avatarUrl) return conv.avatarUrl;
-    
-    // For direct conversations, show other participant's avatar
-    if (conv.otherParticipants && conv.otherParticipants.length > 0) {
-      return conv.otherParticipants[0].avatar_url;
-    }
-    
-    return null;
-  };
-
-  return (
-    <div className="conversation-list">
-      <div className="conversation-list-header">
-        <h2>Messages</h2>
-        <button className="btn-new-conversation" title="New Conversation">
-          +
-        </button>
-      </div>
-
-      <div className="conversation-list-items">
-        {conversations.length === 0 ? (
-          <div className="no-conversations">
-            <p>No conversations yet</p>
-            <p className="hint">Start a new conversation to get started</p>
-          </div>
-        ) : (
-          conversations.map(conv => (
-            <div
-              key={conv.id}
-              className={`conversation-item ${activeConversation?.id === conv.id ? 'active' : ''}`}
-              onClick={() => onSelectConversation(conv)}
-            >
-              <div className="conversation-avatar-container">
-                {getConversationAvatar(conv) ? (
-                  <img 
-                    src={getConversationAvatar(conv)} 
-                    alt="Avatar"
-                    className="conversation-avatar-img"
-                  />
-                ) : (
-                  <div className="conversation-avatar-placeholder">
-                    {getConversationTitle(conv)[0]?.toUpperCase()}
-                  </div>
-                )}
-                {conv.otherParticipants?.[0]?.status === 'online' && (
-                  <span className="online-indicator"></span>
-                )}
-              </div>
-
-              <div className="conversation-details">
-                <div className="conversation-header-row">
-                  <h3 className="conversation-title">{getConversationTitle(conv)}</h3>
-                  <span className="conversation-time">
-                    {formatTime(conv.updatedAt)}
-                  </span>
-                </div>
-
-                <div className="conversation-last-message">
-                  <p className="last-message-text">
-                    {conv.lastMessage?.content || 'No messages yet'}
-                  </p>
-                  {conv.unreadCount > 0 && (
-                    <span className="unread-badge">{conv.unreadCount}</span>
-                  )}
-                </div>
-              </div>
-            </div>
-          ))
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/components/Chat/MessageInput.css b/src/frontend/components/Chat/MessageInput.css
deleted file mode 100644
index b5c4a02..0000000
--- a/src/frontend/components/Chat/MessageInput.css
+++ /dev/null
@@ -1,117 +0,0 @@
-/* Message Input Container - Dark Gaming Theme */
-.message-input {
-  padding: 1rem 1.5rem;
-  background: rgba(10, 10, 15, 0.8);
-  backdrop-filter: blur(20px);
-  border-top: 1px solid rgba(0, 217, 255, 0.1);
-  display: flex;
-  align-items: flex-end;
-  gap: 0.75rem;
-}
-
-/* Buttons */
-.btn-attach,
-.btn-emoji {
-  width: 36px;
-  height: 36px;
-  border: none;
-  background: rgba(0, 217, 255, 0.1);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  font-size: 1.25rem;
-  transition: all 0.3s;
-  flex-shrink: 0;
-  color: #00d9ff;
-}
-
-.btn-attach:hover,
-.btn-emoji:hover {
-  background: rgba(0, 217, 255, 0.2);
-  transform: scale(1.05);
-}
-
-.btn-attach:disabled,
-.btn-emoji:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Textarea */
-.message-textarea {
-  flex: 1;
-  min-height: 36px;
-  max-height: 120px;
-  padding: 0.5rem 0.75rem;
-  border: 1px solid rgba(0, 217, 255, 0.2);
-  background: rgba(0, 0, 0, 0.5);
-  color: #ffffff;
-  border-radius: 18px;
-  font-size: 0.9375rem;
-  font-family: inherit;
-  resize: none;
-  outline: none;
-  transition: border-color 0.2s;
-}
-
-.message-textarea:focus {
-  border-color: #00d9ff;
-  box-shadow: 0 0 0 2px rgba(0, 217, 255, 0.1);
-}
-
-.message-textarea:disabled {
-  background: rgba(0, 0, 0, 0.3);
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.message-textarea::placeholder {
-  color: #71717a;
-}
-
-/* Send Button */
-.btn-send {
-  padding: 0.5rem 1.5rem;
-  background: linear-gradient(135deg, #00d9ff 0%, #00ff88 100%);
-  color: #000000;
-  border: none;
-  border-radius: 18px;
-  font-size: 0.9375rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.3s;
-  flex-shrink: 0;
-  box-shadow: 0 4px 12px rgba(0, 217, 255, 0.3);
-}
-
-.btn-send:hover:not(:disabled) {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(0, 217, 255, 0.4);
-}
-
-.btn-send:disabled {
-  background: #9ca3af;
-  cursor: not-allowed;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .message-input {
-    padding: 0.75rem 1rem;
-    gap: 0.5rem;
-  }
-
-  .btn-attach,
-  .btn-emoji {
-    width: 32px;
-    height: 32px;
-    font-size: 1.125rem;
-  }
-
-  .btn-send {
-    padding: 0.5rem 1rem;
-    font-size: 0.875rem;
-  }
-}
diff --git a/src/frontend/components/Chat/MessageInput.jsx b/src/frontend/components/Chat/MessageInput.jsx
deleted file mode 100644
index ef74ec0..0000000
--- a/src/frontend/components/Chat/MessageInput.jsx
+++ /dev/null
@@ -1,134 +0,0 @@
-/**
- * MessageInput Component
- * Input field for sending messages
- */
-
-import React, { useState, useRef } from 'react';
-import './MessageInput.css';
-
-export default function MessageInput({ onSend, onTyping, onStopTyping }) {
-  const [message, setMessage] = useState('');
-  const [uploading, setUploading] = useState(false);
-  const fileInputRef = useRef(null);
-  const typingTimeoutRef = useRef(null);
-
-  const handleChange = (e) => {
-    setMessage(e.target.value);
-
-    // Trigger typing indicator
-    if (onTyping) onTyping();
-
-    // Reset stop-typing timeout
-    if (typingTimeoutRef.current) {
-      clearTimeout(typingTimeoutRef.current);
-    }
-
-    typingTimeoutRef.current = setTimeout(() => {
-      if (onStopTyping) onStopTyping();
-    }, 1000);
-  };
-
-  const handleSubmit = (e) => {
-    e.preventDefault();
-
-    if (!message.trim()) return;
-
-    onSend(message);
-    setMessage('');
-    
-    if (onStopTyping) onStopTyping();
-
-    if (typingTimeoutRef.current) {
-      clearTimeout(typingTimeoutRef.current);
-    }
-  };
-
-  const handleKeyPress = (e) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      handleSubmit(e);
-    }
-  };
-
-  const handleFileUpload = async (e) => {
-    const file = e.target.files[0];
-    if (!file) return;
-
-    setUploading(true);
-
-    try {
-      const formData = new FormData();
-      formData.append('file', file);
-
-      const response = await fetch(
-        `${import.meta.env.VITE_API_URL || 'http://localhost:3000'}/api/files/upload`,
-        {
-          method: 'POST',
-          headers: {
-            'Authorization': `Bearer ${localStorage.getItem('token')}`
-          },
-          body: formData
-        }
-      );
-
-      const data = await response.json();
-
-      if (data.success) {
-        // Send message with file attachment
-        onSend(`📎 ${file.name}`, [data.file]);
-      }
-    } catch (error) {
-      console.error('File upload failed:', error);
-      alert('Failed to upload file');
-    } finally {
-      setUploading(false);
-    }
-  };
-
-  return (
-    <form className="message-input" onSubmit={handleSubmit}>
-      <button
-        type="button"
-        className="btn-attach"
-        onClick={() => fileInputRef.current?.click()}
-        disabled={uploading}
-        title="Attach file"
-      >
-        {uploading ? '⏳' : '📎'}
-      </button>
-
-      <input
-        type="file"
-        ref={fileInputRef}
-        onChange={handleFileUpload}
-        style={{ display: 'none' }}
-      />
-
-      <textarea
-        value={message}
-        onChange={handleChange}
-        onKeyDown={handleKeyPress}
-        placeholder="Type a message..."
-        rows={1}
-        disabled={uploading}
-        className="message-textarea"
-      />
-
-      <button
-        type="button"
-        className="btn-emoji"
-        title="Add emoji"
-      >
-        😊
-      </button>
-
-      <button
-        type="submit"
-        className="btn-send"
-        disabled={!message.trim() || uploading}
-      >
-        Send
-      </button>
-    </form>
-  );
-}
diff --git a/src/frontend/components/Chat/MessageList.css b/src/frontend/components/Chat/MessageList.css
deleted file mode 100644
index b236599..0000000
--- a/src/frontend/components/Chat/MessageList.css
+++ /dev/null
@@ -1,310 +0,0 @@
-/* Message List Container - Dark Gaming Theme */
-.message-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1.5rem;
-  display: flex;
-  flex-direction: column-reverse;
-  gap: 1rem;
-  background: rgba(0, 0, 0, 0.5);
-}
-
-.message-list.empty {
-  justify-content: center;
-  align-items: center;
-}
-
-.no-messages {
-  text-align: center;
-  color: #9ca3af;
-}
-
-.no-messages p {
-  margin: 0.5rem 0;
-}
-
-.no-messages .hint {
-  font-size: 0.875rem;
-  color: #d1d5db;
-}
-
-/* Message Timestamp Divider */
-.message-timestamp-divider {
-  text-align: center;
-  margin: 1rem 0;
-  position: relative;
-}
-
-.message-timestamp-divider::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background: rgba(0, 217, 255, 0.1);
-  z-index: 0;
-}
-
-.message-timestamp-divider span,
-.message-timestamp-divider::after {
-  display: inline-block;
-  padding: 0.25rem 1rem;
-  background: rgba(0, 0, 0, 0.8);
-  color: #71717a;
-  font-size: 0.75rem;
-  border-radius: 12px;
-  position: relative;
-  z-index: 1;
-  border: 1px solid rgba(0, 217, 255, 0.1);
-}
-
-/* Message */
-.message {
-  display: flex;
-  gap: 0.75rem;
-  align-items: flex-start;
-}
-
-.message.own {
-  flex-direction: row-reverse;
-}
-
-.message.other {
-  flex-direction: row;
-}
-
-/* Message Avatar */
-.message-avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.message-avatar img {
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  object-fit: cover;
-}
-
-.avatar-placeholder {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, #00d9ff 0%, #00ff88 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #000000;
-  font-weight: 700;
-  font-size: 0.875rem;
-}
-
-/* Message Content */
-.message-content-wrapper {
-  max-width: 70%;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.message.own .message-content-wrapper {
-  align-items: flex-end;
-}
-
-.message.other .message-content-wrapper {
-  align-items: flex-start;
-}
-
-.message-sender {
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: #a1a1aa;
-  padding: 0 0.75rem;
-}
-
-.verified-badge {
-  color: #00d9ff;
-  margin-left: 0.25rem;
-}
-
-/* Message Bubble */
-.message-bubble {
-  padding: 0.75rem 1rem;
-  border-radius: 1rem;
-  position: relative;
-  word-wrap: break-word;
-}
-
-.message.own .message-bubble {
-  background: linear-gradient(135deg, #00d9ff 0%, #00ff88 100%);
-  color: #000000;
-  font-weight: 500;
-  border-bottom-right-radius: 0.25rem;
-  box-shadow: 0 4px 12px rgba(0, 217, 255, 0.3);
-}
-
-.message.other .message-bubble {
-  background: rgba(10, 10, 15, 0.8);
-  backdrop-filter: blur(20px);
-  color: #ffffff;
-  border: 1px solid rgba(0, 217, 255, 0.2);
-  border-bottom-left-radius: 0.25rem;
-}
-
-.message-reply-reference {
-  font-size: 0.75rem;
-  opacity: 0.7;
-  margin-bottom: 0.5rem;
-  padding-left: 0.5rem;
-  border-left: 2px solid currentColor;
-}
-
-.message-text {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  white-space: pre-wrap;
-}
-
-.message-attachments {
-  margin-top: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.attachment {
-  padding: 0.5rem;
-  background: rgba(0, 0, 0, 0.05);
-  border-radius: 0.5rem;
-  font-size: 0.875rem;
-}
-
-.message.own .attachment {
-  background: rgba(255, 255, 255, 0.2);
-}
-
-/* Message Footer */
-.message-footer {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-top: 0.25rem;
-  font-size: 0.6875rem;
-  opacity: 0.7;
-}
-
-.message-time {
-  font-weight: 400;
-}
-
-.edited-indicator {
-  font-style: italic;
-}
-
-.sending-indicator {
-  font-style: italic;
-  animation: pulse 1.5s ease-in-out infinite;
-}
-
-@keyframes pulse {
-  0%, 100% {
-    opacity: 0.5;
-  }
-  50% {
-    opacity: 1;
-  }
-}
-
-/* Message Reactions */
-.message-reactions {
-  display: flex;
-  gap: 0.25rem;
-  margin-top: 0.5rem;
-  flex-wrap: wrap;
-}
-
-.reaction {
-  padding: 0.25rem 0.5rem;
-  background: rgba(0, 0, 0, 0.05);
-  border-radius: 12px;
-  font-size: 0.875rem;
-  cursor: pointer;
-  transition: background 0.2s;
-}
-
-.message.own .reaction {
-  background: rgba(255, 255, 255, 0.2);
-}
-
-.reaction:hover {
-  background: rgba(0, 0, 0, 0.1);
-}
-
-.message.own .reaction:hover {
-  background: rgba(255, 255, 255, 0.3);
-}
-
-/* Typing Indicator */
-.typing-indicator {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 1rem;
-}
-
-.typing-dots {
-  display: flex;
-  gap: 0.25rem;
-}
-
-.typing-dots span {
-  width: 8px;
-  height: 8px;
-  background: #9ca3af;
-  border-radius: 50%;
-  animation: typing 1.4s ease-in-out infinite;
-}
-
-.typing-dots span:nth-child(2) {
-  animation-delay: 0.2s;
-}
-
-.typing-dots span:nth-child(3) {
-  animation-delay: 0.4s;
-}
-
-@keyframes typing {
-  0%, 60%, 100% {
-    transform: translateY(0);
-  }
-  30% {
-    transform: translateY(-10px);
-  }
-}
-
-.typing-text {
-  font-size: 0.875rem;
-  color: #6b7280;
-  font-style: italic;
-}
-
-/* Scrollbar */
-.message-list::-webkit-scrollbar {
-  width: 6px;
-}
-
-.message-list::-webkit-scrollbar-track {
-  background: #f3f4f6;
-}
-
-.message-list::-webkit-scrollbar-thumb {
-  background: #d1d5db;
-  border-radius: 3px;
-}
-
-.message-list::-webkit-scrollbar-thumb:hover {
-  background: #9ca3af;
-}
diff --git a/src/frontend/components/Chat/MessageList.jsx b/src/frontend/components/Chat/MessageList.jsx
deleted file mode 100644
index 974dd5a..0000000
--- a/src/frontend/components/Chat/MessageList.jsx
+++ /dev/null
@@ -1,139 +0,0 @@
-/**
- * MessageList Component
- * Displays messages in a conversation
- */
-
-import React, { useEffect, useRef } from 'react';
-import './MessageList.css';
-
-export default function MessageList({ messages, typingUsers }) {
-  const messagesEndRef = useRef(null);
-
-  // Auto-scroll to bottom when new messages arrive
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [messages]);
-
-  const formatTime = (timestamp) => {
-    const date = new Date(timestamp);
-    return date.toLocaleTimeString('en-US', { 
-      hour: 'numeric', 
-      minute: '2-digit',
-      hour12: true 
-    });
-  };
-
-  const getCurrentUserId = () => {
-    // In a real app, get this from auth context
-    return localStorage.getItem('userId');
-  };
-
-  const isOwnMessage = (message) => {
-    return message.senderId === getCurrentUserId();
-  };
-
-  if (messages.length === 0 && typingUsers.length === 0) {
-    return (
-      <div className="message-list empty">
-        <div className="no-messages">
-          <p>No messages yet</p>
-          <p className="hint">Send a message to start the conversation</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="message-list">
-      {messages.map((message, index) => {
-        const showAvatar = index === messages.length - 1 || 
-          messages[index + 1]?.senderId !== message.senderId;
-        
-        const showTimestamp = index === 0 || 
-          new Date(message.createdAt) - new Date(messages[index - 1].createdAt) > 300000; // 5 mins
-
-        return (
-          <div key={message.id}>
-            {showTimestamp && (
-              <div className="message-timestamp-divider">
-                {new Date(message.createdAt).toLocaleDateString()}
-              </div>
-            )}
-
-            <div className={`message ${isOwnMessage(message) ? 'own' : 'other'}`}>
-              {!isOwnMessage(message) && showAvatar && (
-                <div className="message-avatar">
-                  {message.senderAvatar ? (
-                    <img src={message.senderAvatar} alt={message.senderUsername} />
-                  ) : (
-                    <div className="avatar-placeholder">
-                      {message.senderUsername?.[0]?.toUpperCase()}
-                    </div>
-                  )}
-                </div>
-              )}
-
-              <div className="message-content-wrapper">
-                {!isOwnMessage(message) && (
-                  <div className="message-sender">
-                    {message.senderDomain || message.senderUsername}
-                    {message.senderDomain && <span className="verified-badge">✓</span>}
-                  </div>
-                )}
-
-                <div className="message-bubble">
-                  {message.replyToId && (
-                    <div className="message-reply-reference">
-                      Replying to a message
-                    </div>
-                  )}
-
-                  <div className="message-text">{message.content}</div>
-
-                  {message.metadata?.attachments && message.metadata.attachments.length > 0 && (
-                    <div className="message-attachments">
-                      {message.metadata.attachments.map((attachment, i) => (
-                        <div key={i} className="attachment">
-                          📎 {attachment.filename}
-                        </div>
-                      ))}
-                    </div>
-                  )}
-
-                  <div className="message-footer">
-                    <span className="message-time">{formatTime(message.createdAt)}</span>
-                    {message.editedAt && <span className="edited-indicator">edited</span>}
-                    {message._sending && <span className="sending-indicator">sending...</span>}
-                  </div>
-
-                  {message.reactions && message.reactions.length > 0 && (
-                    <div className="message-reactions">
-                      {message.reactions.map((reaction, i) => (
-                        <span key={i} className="reaction" title={`${reaction.users.length} reaction(s)`}>
-                          {reaction.emoji} {reaction.users.length > 1 && reaction.users.length}
-                        </span>
-                      ))}
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-          </div>
-        );
-      })}
-
-      {typingUsers.length > 0 && (
-        <div className="typing-indicator">
-          <div className="typing-dots">
-            <span></span>
-            <span></span>
-            <span></span>
-          </div>
-          <span className="typing-text">Someone is typing...</span>
-        </div>
-      )}
-
-      <div ref={messagesEndRef} />
-    </div>
-  );
-}
diff --git a/src/frontend/components/DomainVerification.css b/src/frontend/components/DomainVerification.css
deleted file mode 100644
index 2511788..0000000
--- a/src/frontend/components/DomainVerification.css
+++ /dev/null
@@ -1,316 +0,0 @@
-.domain-verification {
-  max-width: 600px;
-  margin: 0 auto;
-  padding: 24px;
-  background: #ffffff;
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.domain-verification h3 {
-  margin: 0 0 8px 0;
-  color: #1a1a1a;
-  font-size: 24px;
-  font-weight: 600;
-}
-
-.domain-verification .description {
-  margin: 0 0 24px 0;
-  color: #666;
-  font-size: 14px;
-}
-
-/* Error message */
-.error-message {
-  padding: 12px;
-  margin-bottom: 16px;
-  background: #fee;
-  border: 1px solid #fcc;
-  border-radius: 6px;
-  color: #c33;
-}
-
-/* Input section */
-.input-section {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.form-group label {
-  font-weight: 500;
-  color: #333;
-  font-size: 14px;
-}
-
-.domain-input,
-.wallet-input {
-  padding: 12px;
-  border: 2px solid #e0e0e0;
-  border-radius: 8px;
-  font-size: 16px;
-  transition: border-color 0.2s;
-}
-
-.domain-input:focus,
-.wallet-input:focus {
-  outline: none;
-  border-color: #4f46e5;
-}
-
-.domain-input:disabled,
-.wallet-input:disabled {
-  background: #f5f5f5;
-  cursor: not-allowed;
-}
-
-.help-text {
-  font-size: 12px;
-  color: #666;
-  margin-top: -4px;
-}
-
-/* Buttons */
-.primary-button,
-.secondary-button {
-  padding: 12px 24px;
-  border: none;
-  border-radius: 8px;
-  font-size: 16px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.primary-button {
-  background: #4f46e5;
-  color: white;
-}
-
-.primary-button:hover:not(:disabled) {
-  background: #4338ca;
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
-}
-
-.primary-button:disabled {
-  background: #9ca3af;
-  cursor: not-allowed;
-  transform: none;
-}
-
-.secondary-button {
-  background: #f3f4f6;
-  color: #374151;
-}
-
-.secondary-button:hover:not(:disabled) {
-  background: #e5e7eb;
-}
-
-.cancel-button {
-  margin-top: 12px;
-}
-
-/* Instructions section */
-.instructions-section {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.instructions-section h4 {
-  margin: 0;
-  color: #1a1a1a;
-  font-size: 18px;
-}
-
-/* DNS record display */
-.dns-record {
-  background: #f9fafb;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.record-field {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.record-field strong {
-  font-size: 12px;
-  text-transform: uppercase;
-  color: #6b7280;
-  letter-spacing: 0.5px;
-}
-
-.record-field span {
-  font-size: 14px;
-  color: #1f2937;
-}
-
-.value-container {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.value-container code {
-  flex: 1;
-  padding: 8px;
-  background: #fff;
-  border: 1px solid #e5e7eb;
-  border-radius: 4px;
-  font-size: 13px;
-  word-break: break-all;
-  font-family: 'Courier New', monospace;
-}
-
-.copy-button {
-  padding: 8px 12px;
-  background: #fff;
-  border: 1px solid #e5e7eb;
-  border-radius: 4px;
-  font-size: 12px;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: all 0.2s;
-}
-
-.copy-button:hover {
-  background: #f3f4f6;
-  border-color: #d1d5db;
-}
-
-/* Help section */
-.help-section {
-  background: #eff6ff;
-  border: 1px solid #bfdbfe;
-  border-radius: 8px;
-  padding: 16px;
-}
-
-.help-section p {
-  margin: 0 0 8px 0;
-  color: #1e40af;
-  font-size: 14px;
-}
-
-.help-section ol {
-  margin: 8px 0;
-  padding-left: 24px;
-  color: #1e3a8a;
-}
-
-.help-section li {
-  margin: 4px 0;
-  font-size: 14px;
-}
-
-.expires-note {
-  margin-top: 12px;
-  padding-top: 12px;
-  border-top: 1px solid #bfdbfe;
-  font-size: 13px;
-  color: #1e40af;
-}
-
-/* Status message */
-.status-message {
-  padding: 12px;
-  border-radius: 6px;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.status-message.success {
-  background: #d1fae5;
-  border: 1px solid #6ee7b7;
-  color: #065f46;
-}
-
-.status-message.error {
-  background: #fee2e2;
-  border: 1px solid #fca5a5;
-  color: #991b1b;
-}
-
-/* Blockchain verification */
-.blockchain-verification {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.blockchain-verification p {
-  margin: 0;
-  color: #374151;
-}
-
-/* Verified container */
-.verified-container {
-  text-align: center;
-}
-
-.verified-container h3 {
-  color: #059669;
-  font-size: 28px;
-}
-
-.verified-domain-display {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  margin: 20px 0;
-  padding: 16px;
-  background: #d1fae5;
-  border-radius: 8px;
-}
-
-.verified-domain-display strong {
-  font-size: 20px;
-  color: #065f46;
-}
-
-.verification-type {
-  padding: 4px 8px;
-  background: #059669;
-  color: white;
-  border-radius: 4px;
-  font-size: 12px;
-  text-transform: uppercase;
-}
-
-.verified-date {
-  color: #6b7280;
-  font-size: 14px;
-  margin-bottom: 20px;
-}
-
-/* Responsive */
-@media (max-width: 640px) {
-  .domain-verification {
-    padding: 16px;
-  }
-
-  .value-container {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .copy-button {
-    width: 100%;
-  }
-}
diff --git a/src/frontend/components/DomainVerification.jsx b/src/frontend/components/DomainVerification.jsx
deleted file mode 100644
index 5cacf7a..0000000
--- a/src/frontend/components/DomainVerification.jsx
+++ /dev/null
@@ -1,313 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import './DomainVerification.css';
-
-/**
- * Domain verification UI component
- * Allows users to verify domain ownership via DNS TXT records or blockchain
- */
-export default function DomainVerification({ apiBaseUrl = 'https://api.aethex.cloud/api/passport/domain' }) {
-  const [domain, setDomain] = useState('');
-  const [walletAddress, setWalletAddress] = useState('');
-  const [verificationInstructions, setVerificationInstructions] = useState(null);
-  const [verificationStatus, setVerificationStatus] = useState(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-  const [currentStatus, setCurrentStatus] = useState(null);
-
-  // Load current verification status on mount
-  useEffect(() => {
-    loadCurrentStatus();
-  }, []);
-
-  /**
-   * Load current verification status
-   */
-  async function loadCurrentStatus() {
-    try {
-      const token = localStorage.getItem('authToken');
-      const response = await fetch(`${apiBaseUrl}/status`, {
-        headers: {
-          'Authorization': `Bearer ${token}`
-        }
-      });
-
-      if (response.ok) {
-        const data = await response.json();
-        setCurrentStatus(data);
-      }
-    } catch (err) {
-      console.error('Failed to load status:', err);
-    }
-  }
-
-  /**
-   * Request verification token from backend
-   */
-  async function requestVerification() {
-    if (!domain) {
-      setError('Please enter a domain');
-      return;
-    }
-
-    setLoading(true);
-    setError(null);
-
-    try {
-      const token = localStorage.getItem('authToken');
-      const response = await fetch(`${apiBaseUrl}/request-verification`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${token}`
-        },
-        body: JSON.stringify({ domain })
-      });
-
-      const data = await response.json();
-
-      if (data.success) {
-        setVerificationInstructions(data.verification);
-      } else {
-        setError(data.error || 'Failed to request verification');
-      }
-    } catch (err) {
-      setError('Network error. Please try again.');
-      console.error('Failed to request verification:', err);
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  /**
-   * Verify domain ownership by checking DNS or blockchain
-   */
-  async function verifyDomain() {
-    setLoading(true);
-    setError(null);
-
-    try {
-      const token = localStorage.getItem('authToken');
-      const body = { domain };
-      
-      // Add wallet address if verifying .aethex domain
-      if (domain.endsWith('.aethex')) {
-        body.walletAddress = walletAddress;
-      }
-
-      const response = await fetch(`${apiBaseUrl}/verify`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${token}`
-        },
-        body: JSON.stringify(body)
-      });
-
-      const data = await response.json();
-      setVerificationStatus(data);
-
-      if (data.verified) {
-        // Refresh status and reload after short delay
-        setTimeout(() => {
-          loadCurrentStatus();
-          window.location.reload();
-        }, 1500);
-      } else {
-        setError(data.error || 'Verification failed');
-      }
-    } catch (err) {
-      setError('Network error. Please try again.');
-      console.error('Verification failed:', err);
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  /**
-   * Copy text to clipboard
-   */
-  function copyToClipboard(text) {
-    navigator.clipboard.writeText(text);
-    // You could add a toast notification here
-    alert('Copied to clipboard!');
-  }
-
-  /**
-   * Reset form
-   */
-  function resetForm() {
-    setVerificationInstructions(null);
-    setVerificationStatus(null);
-    setDomain('');
-    setWalletAddress('');
-    setError(null);
-  }
-
-  // Show current verified domain if exists
-  if (currentStatus?.hasVerifiedDomain) {
-    return (
-      <div className="domain-verification verified-container">
-        <h3>✓ Domain Verified</h3>
-        <div className="verified-domain-display">
-          <strong>{currentStatus.domain}</strong>
-          <span className="verification-type">
-            {currentStatus.verificationType === 'blockchain' ? 'Blockchain' : 'DNS'}
-          </span>
-        </div>
-        <p className="verified-date">
-          Verified on {new Date(currentStatus.verifiedAt).toLocaleDateString()}
-        </p>
-        <button 
-          className="secondary-button"
-          onClick={() => setCurrentStatus(null)}
-        >
-          Verify Another Domain
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <div className="domain-verification">
-      <h3>Verify Your Domain</h3>
-      <p className="description">
-        Prove ownership of a domain to display it on your profile
-      </p>
-
-      {error && (
-        <div className="error-message">
-          <span>⚠️ {error}</span>
-        </div>
-      )}
-
-      {!verificationInstructions ? (
-        <div className="input-section">
-          <div className="form-group">
-            <label htmlFor="domain">Domain Name</label>
-            <input
-              id="domain"
-              type="text"
-              placeholder="yourdomain.com or anderson.aethex"
-              value={domain}
-              onChange={(e) => setDomain(e.target.value.toLowerCase().trim())}
-              disabled={loading}
-              className="domain-input"
-            />
-            <small className="help-text">
-              Enter a traditional domain (e.g., dev.aethex.dev) or a .aethex blockchain domain
-            </small>
-          </div>
-
-          <button
-            onClick={requestVerification}
-            disabled={!domain || loading}
-            className="primary-button"
-          >
-            {loading ? 'Generating...' : 'Request Verification'}
-          </button>
-        </div>
-      ) : (
-        <div className="instructions-section">
-          <h4>
-            {domain.endsWith('.aethex') 
-              ? 'Connect Your Wallet' 
-              : `Add this DNS record to ${verificationInstructions.domain}:`
-            }
-          </h4>
-
-          {domain.endsWith('.aethex') ? (
-            // Blockchain verification
-            <div className="blockchain-verification">
-              <p>Connect the wallet that owns <strong>{domain}</strong></p>
-              <div className="form-group">
-                <label htmlFor="wallet">Wallet Address</label>
-                <input
-                  id="wallet"
-                  type="text"
-                  placeholder="0x..."
-                  value={walletAddress}
-                  onChange={(e) => setWalletAddress(e.target.value.trim())}
-                  disabled={loading}
-                  className="wallet-input"
-                />
-              </div>
-              <button
-                onClick={verifyDomain}
-                disabled={!walletAddress || loading}
-                className="primary-button verify-button"
-              >
-                {loading ? 'Verifying...' : 'Verify Ownership'}
-              </button>
-            </div>
-          ) : (
-            // DNS verification
-            <div className="dns-verification">
-              <div className="dns-record">
-                <div className="record-field">
-                  <strong>Type:</strong>
-                  <span>{verificationInstructions.recordType}</span>
-                </div>
-                <div className="record-field">
-                  <strong>Name:</strong>
-                  <span>{verificationInstructions.recordName}</span>
-                </div>
-                <div className="record-field">
-                  <strong>Value:</strong>
-                  <div className="value-container">
-                    <code>{verificationInstructions.recordValue}</code>
-                    <button
-                      onClick={() => copyToClipboard(verificationInstructions.recordValue)}
-                      className="copy-button"
-                      title="Copy to clipboard"
-                    >
-                      📋 Copy
-                    </button>
-                  </div>
-                </div>
-              </div>
-
-              <div className="help-section">
-                <p><strong>How to add DNS records:</strong></p>
-                <ol>
-                  <li>Go to your domain's DNS settings (Google Domains, Cloudflare, etc.)</li>
-                  <li>Add a new TXT record with the values above</li>
-                  <li>Wait 5-10 minutes for DNS to propagate</li>
-                  <li>Click "Verify Domain" below</li>
-                </ol>
-                <p className="expires-note">
-                  ⏱️ This verification expires on {new Date(verificationInstructions.expiresAt).toLocaleDateString()}
-                </p>
-              </div>
-
-              <button
-                onClick={verifyDomain}
-                disabled={loading}
-                className="primary-button verify-button"
-              >
-                {loading ? 'Verifying...' : 'Verify Domain'}
-              </button>
-
-              {verificationStatus && (
-                <div className={`status-message ${verificationStatus.verified ? 'success' : 'error'}`}>
-                  {verificationStatus.verified ? (
-                    <span>✓ Domain verified successfully!</span>
-                  ) : (
-                    <span>✗ {verificationStatus.error}</span>
-                  )}
-                </div>
-              )}
-            </div>
-          )}
-
-          <button
-            onClick={resetForm}
-            className="secondary-button cancel-button"
-            disabled={loading}
-          >
-            Cancel
-          </button>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/src/frontend/components/GameForgeChat/ChannelList.css b/src/frontend/components/GameForgeChat/ChannelList.css
deleted file mode 100644
index 041bc96..0000000
--- a/src/frontend/components/GameForgeChat/ChannelList.css
+++ /dev/null
@@ -1,84 +0,0 @@
-.channel-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 8px 0;
-}
-
-.channel-group {
-  margin-bottom: 16px;
-}
-
-.channel-group-header {
-  padding: 8px 16px;
-  font-size: 12px;
-  font-weight: 600;
-  text-transform: uppercase;
-  color: var(--text-tertiary, #999);
-  letter-spacing: 0.5px;
-}
-
-.channel-item {
-  display: flex;
-  align-items: center;
-  padding: 8px 16px;
-  cursor: pointer;
-  transition: background 0.2s;
-  gap: 12px;
-}
-
-.channel-item:hover {
-  background: var(--hover-bg, #f5f5f5);
-}
-
-.channel-item.active {
-  background: var(--active-bg, #e3f2fd);
-  border-left: 3px solid var(--primary-color, #2196F3);
-  padding-left: 13px;
-}
-
-.channel-item.unread {
-  font-weight: 600;
-}
-
-.channel-icon {
-  font-size: 18px;
-  flex-shrink: 0;
-}
-
-.channel-name {
-  flex: 1;
-  font-size: 14px;
-  color: var(--text-primary, #333);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.unread-badge {
-  background: var(--error-color, #f44336);
-  color: white;
-  font-size: 11px;
-  font-weight: 600;
-  padding: 2px 6px;
-  border-radius: 10px;
-  min-width: 18px;
-  text-align: center;
-}
-
-/* Scrollbar styling */
-.channel-list::-webkit-scrollbar {
-  width: 6px;
-}
-
-.channel-list::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.channel-list::-webkit-scrollbar-thumb {
-  background: var(--scrollbar-thumb, #ccc);
-  border-radius: 3px;
-}
-
-.channel-list::-webkit-scrollbar-thumb:hover {
-  background: var(--scrollbar-thumb-hover, #999);
-}
diff --git a/src/frontend/components/GameForgeChat/ChannelList.jsx b/src/frontend/components/GameForgeChat/ChannelList.jsx
deleted file mode 100644
index b4863aa..0000000
--- a/src/frontend/components/GameForgeChat/ChannelList.jsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react';
-import './ChannelList.css';
-
-export default function ChannelList({ channels, activeChannel, onSelectChannel }) {
-  // Group channels by type
-  const defaultChannels = channels.filter(c => 
-    ['general', 'announcements', 'dev', 'art', 'design', 'testing'].includes(c.name)
-  );
-  const customChannels = channels.filter(c => 
-    !['general', 'announcements', 'dev', 'art', 'design', 'testing'].includes(c.name)
-  );
-
-  const renderChannel = (channel) => {
-    const isActive = activeChannel?.id === channel.id;
-    const hasUnread = channel.unreadCount > 0;
-
-    // Channel icons
-    const icons = {
-      'general': '💬',
-      'announcements': '📢',
-      'dev': '💻',
-      'art': '🎨',
-      'design': '✏️',
-      'testing': '🧪',
-      'playtesting': '🎮'
-    };
-
-    const icon = icons[channel.name] || '#';
-
-    return (
-      <div
-        key={channel.id}
-        className={`channel-item ${isActive ? 'active' : ''} ${hasUnread ? 'unread' : ''}`}
-        onClick={() => onSelectChannel(channel)}
-      >
-        <span className="channel-icon">{icon}</span>
-        <span className="channel-name">{channel.name}</span>
-        {hasUnread && (
-          <span className="unread-badge">{channel.unreadCount}</span>
-        )}
-      </div>
-    );
-  };
-
-  return (
-    <div className="channel-list">
-      {defaultChannels.length > 0 && (
-        <div className="channel-group">
-          <div className="channel-group-header">Channels</div>
-          {defaultChannels.map(renderChannel)}
-        </div>
-      )}
-
-      {customChannels.length > 0 && (
-        <div className="channel-group">
-          <div className="channel-group-header">Custom Channels</div>
-          {customChannels.map(renderChannel)}
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/src/frontend/components/GameForgeChat/ChannelView.css b/src/frontend/components/GameForgeChat/ChannelView.css
deleted file mode 100644
index 94c5a3a..0000000
--- a/src/frontend/components/GameForgeChat/ChannelView.css
+++ /dev/null
@@ -1,46 +0,0 @@
-.channel-view {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background: var(--bg-primary, #ffffff);
-}
-
-.channel-view.loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-secondary, #666);
-}
-
-.channel-header {
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--border-color, #e0e0e0);
-  background: var(--bg-secondary, #fafafa);
-}
-
-.channel-header h3 {
-  margin: 0 0 4px 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--text-primary, #333);
-}
-
-.channel-description {
-  margin: 0;
-  font-size: 13px;
-  color: var(--text-secondary, #666);
-}
-
-.restricted-badge {
-  display: inline-block;
-  margin-top: 8px;
-  padding: 4px 8px;
-  background: var(--warning-bg, #fff3cd);
-  color: var(--warning-text, #856404);
-  border: 1px solid var(--warning-border, #ffeeba);
-  border-radius: 4px;
-  font-size: 12px;
-  font-weight: 500;
-}
-
-/* Reuse MessageList and MessageInput from Chat component */
diff --git a/src/frontend/components/GameForgeChat/ChannelView.jsx b/src/frontend/components/GameForgeChat/ChannelView.jsx
deleted file mode 100644
index 70819e8..0000000
--- a/src/frontend/components/GameForgeChat/ChannelView.jsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useSocket } from '../../contexts/SocketContext';
-import MessageList from '../Chat/MessageList';
-import MessageInput from '../Chat/MessageInput';
-import { encryptMessage, decryptMessage } from '../../utils/crypto';
-import { useAuth } from '../../contexts/AuthContext';
-import './ChannelView.css';
-
-export default function ChannelView({ channel, projectId }) {
-  const { socket } = useSocket();
-  const { user } = useAuth();
-  const [messages, setMessages] = useState([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    if (channel) {
-      loadMessages();
-    }
-  }, [channel]);
-
-  // Socket listeners
-  useEffect(() => {
-    if (!socket || !channel) return;
-
-    const handleNewMessage = async (data) => {
-      if (data.conversationId === channel.id) {
-        const message = data.message;
-
-        // Decrypt if not system message
-        if (message.contentType !== 'system') {
-          try {
-            const decrypted = await decryptMessage(
-              JSON.parse(message.content),
-              user.password
-            );
-            message.content = decrypted;
-          } catch (error) {
-            console.error('Failed to decrypt message:', error);
-            message.content = '[Failed to decrypt]';
-          }
-        }
-
-        setMessages(prev => [message, ...prev]);
-      }
-    };
-
-    socket.on('message:new', handleNewMessage);
-
-    return () => {
-      socket.off('message:new', handleNewMessage);
-    };
-  }, [socket, channel]);
-
-  const loadMessages = async () => {
-    try {
-      setLoading(true);
-
-      const response = await fetch(`/api/conversations/${channel.id}/messages`, {
-        headers: {
-          'Authorization': `Bearer ${localStorage.getItem('token')}`
-        }
-      });
-
-      const data = await response.json();
-
-      if (data.success) {
-        // Decrypt messages
-        const decryptedMessages = await Promise.all(
-          data.messages.map(async (msg) => {
-            // System messages are not encrypted
-            if (msg.contentType === 'system') {
-              return msg;
-            }
-
-            try {
-              const decrypted = await decryptMessage(
-                JSON.parse(msg.content),
-                user.password
-              );
-              return {
-                ...msg,
-                content: decrypted
-              };
-            } catch (error) {
-              console.error('Failed to decrypt message:', error);
-              return {
-                ...msg,
-                content: '[Failed to decrypt]'
-              };
-            }
-          })
-        );
-
-        setMessages(decryptedMessages);
-      }
-
-    } catch (error) {
-      console.error('Failed to load messages:', error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const sendMessage = async (content) => {
-    if (!content.trim()) return;
-
-    try {
-      // Get recipient public keys (all channel participants)
-      const participantsResponse = await fetch(`/api/conversations/${channel.id}`, {
-        headers: {
-          'Authorization': `Bearer ${localStorage.getItem('token')}`
-        }
-      });
-
-      const participantsData = await participantsResponse.json();
-
-      if (!participantsData.success) {
-        throw new Error('Failed to get participants');
-      }
-
-      const recipientKeys = participantsData.conversation.participants
-        .map(p => p.publicKey)
-        .filter(Boolean);
-
-      // Encrypt message
-      const encrypted = await encryptMessage(content, recipientKeys);
-
-      // Send via WebSocket
-      socket.emit('message:send', {
-        conversationId: channel.id,
-        content: JSON.stringify(encrypted),
-        contentType: 'text',
-        clientId: `temp-${Date.now()}`
-      });
-
-    } catch (error) {
-      console.error('Failed to send message:', error);
-    }
-  };
-
-  if (loading) {
-    return <div className="channel-view loading">Loading messages...</div>;
-  }
-
-  return (
-    <div className="channel-view">
-      <div className="channel-header">
-        <h3>#{channel.name}</h3>
-        <p className="channel-description">{channel.description}</p>
-        {channel.permissions && !channel.permissions.includes('all') && (
-          <span className="restricted-badge">
-            Restricted to: {channel.permissions.join(', ')}
-          </span>
-        )}
-      </div>
-
-      <MessageList
-        messages={messages}
-        currentUserId={user.id}
-        typingUsers={new Set()}
-        showSystemMessages={true}
-      />
-
-      <MessageInput
-        onSend={sendMessage}
-        onTyping={() => {}}
-        onStopTyping={() => {}}
-        placeholder={`Message #${channel.name}`}
-      />
-    </div>
-  );
-}
diff --git a/src/frontend/components/GameForgeChat/GameForgeChat.css b/src/frontend/components/GameForgeChat/GameForgeChat.css
deleted file mode 100644
index 6caecb2..0000000
--- a/src/frontend/components/GameForgeChat/GameForgeChat.css
+++ /dev/null
@@ -1,99 +0,0 @@
-.gameforge-chat {
-  display: flex;
-  height: 100%;
-  background: var(--bg-primary, #f5f5f5);
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.gameforge-chat.embedded {
-  border-radius: 0;
-  box-shadow: none;
-}
-
-.gameforge-chat-sidebar {
-  width: 260px;
-  background: var(--bg-secondary, #ffffff);
-  border-right: 1px solid var(--border-color, #e0e0e0);
-  display: flex;
-  flex-direction: column;
-}
-
-.gameforge-chat-main {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  background: var(--bg-primary, #f5f5f5);
-}
-
-.project-header {
-  padding: 16px;
-  border-bottom: 1px solid var(--border-color, #e0e0e0);
-  background: var(--bg-accent, #fafafa);
-}
-
-.project-header h3 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--text-primary, #333);
-}
-
-.loading,
-.error {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: var(--text-secondary, #666);
-}
-
-.error {
-  flex-direction: column;
-  gap: 16px;
-}
-
-.error button {
-  padding: 8px 16px;
-  background: var(--primary-color, #4CAF50);
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  transition: background 0.2s;
-}
-
-.error button:hover {
-  background: var(--primary-hover, #45a049);
-}
-
-.no-channel-selected {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: var(--text-secondary, #999);
-  font-size: 14px;
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
-  .gameforge-chat-sidebar {
-    width: 200px;
-  }
-}
-
-@media (max-width: 480px) {
-  .gameforge-chat {
-    flex-direction: column;
-  }
-
-  .gameforge-chat-sidebar {
-    width: 100%;
-    max-height: 200px;
-    border-right: none;
-    border-bottom: 1px solid var(--border-color, #e0e0e0);
-  }
-}
diff --git a/src/frontend/components/GameForgeChat/index.jsx b/src/frontend/components/GameForgeChat/index.jsx
deleted file mode 100644
index 5e9035e..0000000
--- a/src/frontend/components/GameForgeChat/index.jsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useParams } from 'react-router-dom';
-import { useSocket } from '../../contexts/SocketContext';
-import { useAuth } from '../../contexts/AuthContext';
-import ChannelList from './ChannelList';
-import ChannelView from './ChannelView';
-import './GameForgeChat.css';
-
-/**
- * Embedded chat component for GameForge projects
- * Can be embedded in GameForge UI via iframe or direct integration
- */
-export default function GameForgeChat({ projectId: propProjectId, embedded = false }) {
-  const { projectId: paramProjectId } = useParams();
-  const projectId = propProjectId || paramProjectId;
-
-  const { socket } = useSocket();
-  const { user } = useAuth();
-
-  const [channels, setChannels] = useState([]);
-  const [activeChannel, setActiveChannel] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-
-  // Load channels
-  useEffect(() => {
-    if (projectId) {
-      loadChannels();
-    }
-  }, [projectId]);
-
-  // Socket listeners for system notifications
-  useEffect(() => {
-    if (!socket) return;
-
-    socket.on('gameforge:notification', handleNotification);
-
-    return () => {
-      socket.off('gameforge:notification', handleNotification);
-    };
-  }, [socket]);
-
-  const loadChannels = async () => {
-    try {
-      setLoading(true);
-      setError(null);
-
-      const response = await fetch(`/api/gameforge/projects/${projectId}/channels`, {
-        headers: {
-          'Authorization': `Bearer ${localStorage.getItem('token')}`
-        }
-      });
-
-      const data = await response.json();
-
-      if (data.success) {
-        setChannels(data.channels);
-
-        // Auto-select general channel
-        const generalChannel = data.channels.find(c => c.name === 'general');
-        if (generalChannel) {
-          setActiveChannel(generalChannel);
-        }
-      } else {
-        setError(data.error);
-      }
-
-    } catch (err) {
-      console.error('Failed to load channels:', err);
-      setError('Failed to load project channels');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleNotification = (notification) => {
-    // Update channel with new system message
-    const { channelId, message } = notification;
-
-    setChannels(prev => prev.map(channel => {
-      if (channel.id === channelId) {
-        return {
-          ...channel,
-          lastMessage: message,
-          unreadCount: activeChannel?.id === channelId ? 0 : channel.unreadCount + 1
-        };
-      }
-      return channel;
-    }));
-  };
-
-  if (loading) {
-    return (
-      <div className={`gameforge-chat ${embedded ? 'embedded' : ''}`}>
-        <div className="loading">Loading project chat...</div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className={`gameforge-chat ${embedded ? 'embedded' : ''}`}>
-        <div className="error">
-          <p>{error}</p>
-          <button onClick={loadChannels}>Retry</button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={`gameforge-chat ${embedded ? 'embedded' : ''}`}>
-      <div className="gameforge-chat-sidebar">
-        <div className="project-header">
-          <h3>Project Channels</h3>
-        </div>
-
-        <ChannelList
-          channels={channels}
-          activeChannel={activeChannel}
-          onSelectChannel={setActiveChannel}
-        />
-      </div>
-
-      <div className="gameforge-chat-main">
-        {activeChannel ? (
-          <ChannelView
-            channel={activeChannel}
-            projectId={projectId}
-          />
-        ) : (
-          <div className="no-channel-selected">
-            <p>Select a channel to start chatting</p>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/components/Overlay/Overlay.css b/src/frontend/components/Overlay/Overlay.css
deleted file mode 100644
index 87dea93..0000000
--- a/src/frontend/components/Overlay/Overlay.css
+++ /dev/null
@@ -1,257 +0,0 @@
-.in-game-overlay {
-  position: fixed;
-  width: 320px;
-  height: 480px;
-  background: rgba(20, 20, 30, 0.95);
-  backdrop-filter: blur(10px);
-  border-radius: 12px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
-  display: flex;
-  flex-direction: column;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  color: #fff;
-  overflow: hidden;
-  z-index: 999999;
-}
-
-.overlay-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px;
-  background: rgba(30, 30, 40, 0.8);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.overlay-tabs {
-  display: flex;
-  gap: 8px;
-}
-
-.overlay-tabs button {
-  background: transparent;
-  border: none;
-  color: #aaa;
-  padding: 8px 12px;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 14px;
-  transition: all 0.2s;
-  position: relative;
-}
-
-.overlay-tabs button:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: #fff;
-}
-
-.overlay-tabs button.active {
-  background: rgba(88, 101, 242, 0.3);
-  color: #5865f2;
-}
-
-.overlay-tabs .badge {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  background: #ed4245;
-  color: #fff;
-  border-radius: 10px;
-  padding: 2px 6px;
-  font-size: 10px;
-  font-weight: bold;
-}
-
-.btn-minimize {
-  background: transparent;
-  border: none;
-  color: #aaa;
-  font-size: 18px;
-  cursor: pointer;
-  padding: 4px 12px;
-  border-radius: 4px;
-  transition: all 0.2s;
-}
-
-.btn-minimize:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: #fff;
-}
-
-.overlay-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 12px;
-}
-
-.overlay-content::-webkit-scrollbar {
-  width: 6px;
-}
-
-.overlay-content::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.overlay-content::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 3px;
-}
-
-.friends-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.friend-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px;
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 8px;
-  transition: all 0.2s;
-  cursor: pointer;
-}
-
-.friend-item:hover {
-  background: rgba(255, 255, 255, 0.1);
-}
-
-.friend-item img {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  object-fit: cover;
-}
-
-.friend-info {
-  flex: 1;
-}
-
-.friend-name {
-  font-size: 14px;
-  font-weight: 600;
-  color: #fff;
-  margin-bottom: 2px;
-}
-
-.friend-game {
-  font-size: 12px;
-  color: #aaa;
-}
-
-.status-indicator {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  margin-left: auto;
-}
-
-.status-indicator.online {
-  background: #23a55a;
-  box-shadow: 0 0 8px rgba(35, 165, 90, 0.6);
-}
-
-.status-indicator.away {
-  background: #f0b232;
-}
-
-.status-indicator.offline {
-  background: #80848e;
-}
-
-.messages-preview {
-  color: #aaa;
-  text-align: center;
-  padding: 40px 20px;
-  font-size: 14px;
-}
-
-/* Minimized overlay */
-.overlay-minimized {
-  position: fixed;
-  width: 60px;
-  height: 60px;
-  background: rgba(88, 101, 242, 0.9);
-  backdrop-filter: blur(10px);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
-  cursor: pointer;
-  transition: all 0.2s;
-  z-index: 999999;
-}
-
-.overlay-minimized:hover {
-  transform: scale(1.1);
-  background: rgba(88, 101, 242, 1);
-}
-
-.minimized-icon {
-  font-size: 28px;
-}
-
-.minimized-badge {
-  position: absolute;
-  top: -4px;
-  right: -4px;
-  background: #ed4245;
-  color: #fff;
-  border-radius: 12px;
-  padding: 3px 7px;
-  font-size: 11px;
-  font-weight: bold;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
-}
-
-/* In-game notification */
-.aethex-notification {
-  position: fixed;
-  top: 20px;
-  right: 20px;
-  width: 320px;
-  background: rgba(20, 20, 30, 0.95);
-  backdrop-filter: blur(10px);
-  border-radius: 8px;
-  padding: 16px;
-  display: flex;
-  gap: 12px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
-  animation: slideIn 0.3s ease-out;
-  z-index: 1000000;
-}
-
-@keyframes slideIn {
-  from {
-    transform: translateX(400px);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-.notif-icon {
-  font-size: 24px;
-  flex-shrink: 0;
-}
-
-.notif-content {
-  flex: 1;
-}
-
-.notif-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: #fff;
-  margin-bottom: 4px;
-}
-
-.notif-body {
-  font-size: 13px;
-  color: #aaa;
-}
diff --git a/src/frontend/components/Overlay/index.jsx b/src/frontend/components/Overlay/index.jsx
deleted file mode 100644
index 6dd76bf..0000000
--- a/src/frontend/components/Overlay/index.jsx
+++ /dev/null
@@ -1,270 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import './Overlay.css';
-
-/**
- * In-game overlay component
- * Runs in iframe embedded in games via Nexus Engine
- */
-export default function InGameOverlay() {
-  const [minimized, setMinimized] = useState(false);
-  const [activeTab, setActiveTab] = useState('friends');
-  const [friends, setFriends] = useState([]);
-  const [unreadMessages, setUnreadMessages] = useState(0);
-  const [inCall, setInCall] = useState(false);
-  const [socket, setSocket] = useState(null);
-
-  useEffect(() => {
-    initializeOverlay();
-    loadFriends();
-    setupWebSocket();
-
-    // Listen for messages from game
-    window.addEventListener('message', handleGameMessage);
-
-    return () => {
-      window.removeEventListener('message', handleGameMessage);
-      if (socket) {
-        socket.close();
-      }
-    };
-  }, []);
-
-  const initializeOverlay = () => {
-    // Get session ID from URL params
-    const params = new URLSearchParams(window.location.search);
-    const sessionId = params.get('session');
-    
-    if (sessionId) {
-      localStorage.setItem('overlay_session', sessionId);
-    }
-  };
-
-  const setupWebSocket = () => {
-    const token = localStorage.getItem('token');
-    if (!token) return;
-
-    const ws = new WebSocket(`ws://localhost:5000?token=${token}`);
-
-    ws.onopen = () => {
-      console.log('[Overlay] WebSocket connected');
-    };
-
-    ws.onmessage = (event) => {
-      const data = JSON.parse(event.data);
-      handleSocketMessage(data);
-    };
-
-    ws.onerror = (error) => {
-      console.error('[Overlay] WebSocket error:', error);
-    };
-
-    ws.onclose = () => {
-      console.log('[Overlay] WebSocket disconnected');
-      // Reconnect after 3 seconds
-      setTimeout(setupWebSocket, 3000);
-    };
-
-    setSocket(ws);
-  };
-
-  const loadFriends = async () => {
-    try {
-      const token = localStorage.getItem('token');
-      if (!token) return;
-
-      const response = await fetch('/api/friends', {
-        headers: {
-          'Authorization': `Bearer ${token}`
-        }
-      });
-
-      const data = await response.json();
-
-      if (data.success) {
-        setFriends(data.friends);
-      }
-    } catch (error) {
-      console.error('[Overlay] Failed to load friends:', error);
-    }
-  };
-
-  const handleSocketMessage = (data) => {
-    switch (data.type) {
-      case 'presence:updated':
-        handlePresenceUpdate(data);
-        break;
-      case 'message:new':
-        handleNewMessage(data);
-        break;
-      case 'friend:request':
-        showNotification({
-          icon: '👋',
-          title: 'Friend Request',
-          body: `${data.username} wants to be friends`
-        });
-        break;
-      case 'friend:accepted':
-        showNotification({
-          icon: '✅',
-          title: 'Friend Request Accepted',
-          body: `${data.username} accepted your friend request`
-        });
-        loadFriends(); // Refresh friends list
-        break;
-    }
-  };
-
-  const handlePresenceUpdate = (data) => {
-    setFriends(prev => prev.map(friend => 
-      friend.userId === data.userId 
-        ? { 
-            ...friend, 
-            status: data.status, 
-            lastSeen: data.lastSeenAt,
-            currentGame: data.currentGame
-          }
-        : friend
-    ));
-  };
-
-  const handleNewMessage = (data) => {
-    setUnreadMessages(prev => prev + 1);
-    
-    // Show notification
-    showNotification({
-      icon: '💬',
-      title: 'New Message',
-      body: `${data.senderDisplayName}: ${data.content.substring(0, 50)}${data.content.length > 50 ? '...' : ''}`
-    });
-  };
-
-  const showNotification = (notification) => {
-    // Notify parent window (game)
-    if (window.parent !== window) {
-      window.parent.postMessage({
-        type: 'notification',
-        data: notification
-      }, '*');
-    }
-
-    // Also show in overlay if not minimized
-    if (!minimized) {
-      // Could add in-overlay toast here
-    }
-  };
-
-  const handleGameMessage = (event) => {
-    // Handle messages from game
-    if (event.data.type === 'auto_mute') {
-      if (event.data.mute && inCall) {
-        console.log('[Overlay] Auto-muting for in-game match');
-        // Auto-mute logic would trigger call service here
-      } else {
-        console.log('[Overlay] Auto-unmuting');
-        // Auto-unmute logic
-      }
-    }
-  };
-
-  const toggleMinimize = () => {
-    setMinimized(!minimized);
-    
-    // Notify parent
-    if (window.parent !== window) {
-      window.parent.postMessage({
-        type: 'minimize',
-        minimized: !minimized
-      }, '*');
-    }
-  };
-
-  const handleFriendClick = (friend) => {
-    // Open quick actions menu for friend
-    console.log('[Overlay] Friend clicked:', friend.username);
-    // Could show: Send message, Join game, Voice call, etc.
-  };
-
-  if (minimized) {
-    return (
-      <div className="overlay-minimized" onClick={toggleMinimize}>
-        <div className="minimized-icon">💬</div>
-        {unreadMessages > 0 && (
-          <div className="minimized-badge">{unreadMessages}</div>
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <div className="in-game-overlay">
-      <div className="overlay-header">
-        <div className="overlay-tabs">
-          <button 
-            className={activeTab === 'friends' ? 'active' : ''}
-            onClick={() => setActiveTab('friends')}
-          >
-            Friends ({friends.filter(f => f.status === 'online').length})
-          </button>
-          <button 
-            className={activeTab === 'messages' ? 'active' : ''}
-            onClick={() => setActiveTab('messages')}
-          >
-            Messages
-            {unreadMessages > 0 && (
-              <span className="badge">{unreadMessages}</span>
-            )}
-          </button>
-        </div>
-        <button className="btn-minimize" onClick={toggleMinimize}>
-          —
-        </button>
-      </div>
-
-      <div className="overlay-content">
-        {activeTab === 'friends' && (
-          <div className="friends-list">
-            {friends.length === 0 ? (
-              <div className="messages-preview">
-                <p>No friends yet</p>
-              </div>
-            ) : (
-              friends.map(friend => (
-                <div 
-                  key={friend.userId} 
-                  className="friend-item"
-                  onClick={() => handleFriendClick(friend)}
-                >
-                  <img 
-                    src={friend.avatar || 'https://via.placeholder.com/40'} 
-                    alt={friend.username} 
-                  />
-                  <div className="friend-info">
-                    <div className="friend-name">{friend.username}</div>
-                    {friend.currentGame && (
-                      <div className="friend-game">
-                        🎮 {friend.currentGame.gameName}
-                      </div>
-                    )}
-                    {!friend.currentGame && friend.status === 'online' && (
-                      <div className="friend-game">Online</div>
-                    )}
-                  </div>
-                  <div className={`status-indicator ${friend.status || 'offline'}`} />
-                </div>
-              ))
-            )}
-          </div>
-        )}
-
-        {activeTab === 'messages' && (
-          <div className="messages-preview">
-            <p>Recent messages appear here</p>
-            <p style={{ fontSize: '12px', marginTop: '8px', color: '#666' }}>
-              Click a friend to start chatting
-            </p>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/components/Premium/UpgradeFlow.css b/src/frontend/components/Premium/UpgradeFlow.css
deleted file mode 100644
index d73dca4..0000000
--- a/src/frontend/components/Premium/UpgradeFlow.css
+++ /dev/null
@@ -1,217 +0,0 @@
-.upgrade-flow {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 40px 20px;
-}
-
-.upgrade-flow h1 {
-  text-align: center;
-  font-size: 36px;
-  margin-bottom: 40px;
-  color: #fff;
-}
-
-.tier-selection {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 24px;
-  margin-bottom: 40px;
-}
-
-.tier-card {
-  background: rgba(30, 30, 40, 0.8);
-  border: 2px solid rgba(255, 255, 255, 0.1);
-  border-radius: 12px;
-  padding: 32px;
-  cursor: pointer;
-  transition: all 0.3s;
-}
-
-.tier-card:hover {
-  border-color: rgba(88, 101, 242, 0.5);
-  transform: translateY(-4px);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-}
-
-.tier-card.selected {
-  border-color: #5865f2;
-  background: rgba(88, 101, 242, 0.1);
-}
-
-.tier-card h3 {
-  font-size: 24px;
-  margin-bottom: 16px;
-  color: #fff;
-}
-
-.tier-card .price {
-  font-size: 32px;
-  font-weight: bold;
-  color: #5865f2;
-  margin-bottom: 24px;
-}
-
-.tier-card ul {
-  list-style: none;
-  padding: 0;
-}
-
-.tier-card li {
-  padding: 8px 0;
-  color: #aaa;
-  font-size: 14px;
-}
-
-.domain-selection {
-  background: rgba(30, 30, 40, 0.8);
-  border-radius: 12px;
-  padding: 32px;
-  margin-bottom: 32px;
-}
-
-.domain-selection h3 {
-  margin-bottom: 24px;
-  color: #fff;
-}
-
-.domain-input-group {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 16px;
-}
-
-.domain-input {
-  flex: 1;
-  padding: 12px 16px;
-  background: rgba(0, 0, 0, 0.3);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 8px;
-  color: #fff;
-  font-size: 16px;
-}
-
-.domain-input:focus {
-  outline: none;
-  border-color: #5865f2;
-}
-
-.domain-suffix {
-  color: #aaa;
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.domain-input-group button {
-  padding: 12px 24px;
-  background: #5865f2;
-  border: none;
-  border-radius: 8px;
-  color: #fff;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.domain-input-group button:hover {
-  background: #4752c4;
-}
-
-.domain-input-group button:disabled {
-  background: #666;
-  cursor: not-allowed;
-}
-
-.domain-status {
-  padding: 16px;
-  border-radius: 8px;
-  margin-top: 16px;
-}
-
-.domain-status.available {
-  background: rgba(35, 165, 90, 0.1);
-  border: 1px solid rgba(35, 165, 90, 0.3);
-  color: #23a55a;
-}
-
-.domain-status.unavailable {
-  background: rgba(237, 66, 69, 0.1);
-  border: 1px solid rgba(237, 66, 69, 0.3);
-  color: #ed4245;
-}
-
-.domain-status ul {
-  list-style: none;
-  padding: 0;
-  margin-top: 12px;
-}
-
-.domain-status li {
-  padding: 8px 12px;
-  margin: 4px 0;
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.domain-status li:hover {
-  background: rgba(255, 255, 255, 0.1);
-}
-
-.checkout-form {
-  background: rgba(30, 30, 40, 0.8);
-  border-radius: 12px;
-  padding: 32px;
-}
-
-.card-element-wrapper {
-  padding: 16px;
-  background: rgba(0, 0, 0, 0.3);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 8px;
-  margin-bottom: 24px;
-}
-
-.error-message {
-  color: #ed4245;
-  padding: 12px;
-  background: rgba(237, 66, 69, 0.1);
-  border-radius: 8px;
-  margin-bottom: 16px;
-  font-size: 14px;
-}
-
-.btn-submit {
-  width: 100%;
-  padding: 16px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border: none;
-  border-radius: 8px;
-  color: #fff;
-  font-size: 16px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.3s;
-}
-
-.btn-submit:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
-}
-
-.btn-submit:disabled {
-  background: #666;
-  cursor: not-allowed;
-  transform: none;
-}
-
-@media (max-width: 768px) {
-  .tier-selection {
-    grid-template-columns: 1fr;
-  }
-
-  .upgrade-flow h1 {
-    font-size: 28px;
-  }
-}
diff --git a/src/frontend/components/Premium/index.jsx b/src/frontend/components/Premium/index.jsx
deleted file mode 100644
index 9318445..0000000
--- a/src/frontend/components/Premium/index.jsx
+++ /dev/null
@@ -1,307 +0,0 @@
-import React, { useState } from 'react';
-import { loadStripe } from '@stripe/stripe-js';
-import { Elements, CardElement, useStripe, useElements } from '@stripe/react-stripe-js';
-import './UpgradeFlow.css';
-
-const stripePromise = loadStripe(import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY || 'pk_test_51QTaIiRu6l8tVuJxtest_placeholder');
-
-/**
- * Checkout form component
- */
-function CheckoutForm({ tier, domain, onSuccess }) {
-  const stripe = useStripe();
-  const elements = useElements();
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-
-    if (!stripe || !elements) return;
-
-    setLoading(true);
-    setError(null);
-
-    try {
-      // Create payment method
-      const { error: pmError, paymentMethod } = await stripe.createPaymentMethod({
-        type: 'card',
-        card: elements.getElement(CardElement)
-      });
-
-      if (pmError) {
-        throw new Error(pmError.message);
-      }
-
-      // Subscribe or register domain
-      const endpoint = domain 
-        ? '/api/premium/domains/register'
-        : '/api/premium/subscribe';
-
-      const body = domain ? {
-        domain: domain,
-        walletAddress: window.ethereum?.selectedAddress || '0x0000000000000000000000000000000000000000',
-        paymentMethodId: paymentMethod.id
-      } : {
-        tier: tier,
-        paymentMethodId: paymentMethod.id,
-        billingPeriod: 'yearly'
-      };
-
-      const response = await fetch(endpoint, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${localStorage.getItem('token')}`
-        },
-        body: JSON.stringify(body)
-      });
-
-      const data = await response.json();
-
-      if (data.success) {
-        onSuccess(data);
-      } else {
-        throw new Error(data.error || 'Subscription failed');
-      }
-
-    } catch (err) {
-      setError(err.message);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const getAmount = () => {
-    if (domain) return '$100/year';
-    if (tier === 'premium') return '$100/year';
-    if (tier === 'enterprise') return '$500/month';
-    return '$0';
-  };
-
-  return (
-    <form onSubmit={handleSubmit} className="checkout-form">
-      <div className="card-element-wrapper">
-        <CardElement
-          options={{
-            style: {
-              base: {
-                fontSize: '16px',
-                color: '#fff',
-                '::placeholder': {
-                  color: '#9ca3af'
-                }
-              },
-              invalid: {
-                color: '#ed4245'
-              }
-            }
-          }}
-        />
-      </div>
-
-      {error && (
-        <div className="error-message">{error}</div>
-      )}
-
-      <button
-        type="submit"
-        disabled={!stripe || loading}
-        className="btn-submit"
-      >
-        {loading ? 'Processing...' : `Subscribe - ${getAmount()}`}
-      </button>
-
-      <p style={{ textAlign: 'center', marginTop: '16px', fontSize: '12px', color: '#aaa' }}>
-        By subscribing, you agree to our Terms of Service and Privacy Policy
-      </p>
-    </form>
-  );
-}
-
-/**
- * Main upgrade flow component
- */
-export default function UpgradeFlow({ currentTier = 'free' }) {
-  const [selectedTier, setSelectedTier] = useState('premium');
-  const [domainName, setDomainName] = useState('');
-  const [domainAvailable, setDomainAvailable] = useState(null);
-  const [checkingDomain, setCheckingDomain] = useState(false);
-
-  const checkDomain = async () => {
-    if (!domainName) {
-      setError('Please enter a domain name');
-      return;
-    }
-
-    setCheckingDomain(true);
-    setDomainAvailable(null);
-
-    try {
-      const response = await fetch('/api/premium/domains/check-availability', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${localStorage.getItem('token')}`
-        },
-        body: JSON.stringify({
-          domain: `${domainName}.aethex`
-        })
-      });
-
-      const data = await response.json();
-      
-      if (data.success) {
-        setDomainAvailable(data);
-      } else {
-        throw new Error(data.error);
-      }
-
-    } catch (error) {
-      console.error('Failed to check domain:', error);
-      setDomainAvailable({
-        available: false,
-        domain: `${domainName}.aethex`,
-        error: error.message
-      });
-    } finally {
-      setCheckingDomain(false);
-    }
-  };
-
-  const handleSuccess = (data) => {
-    alert('Subscription successful! Welcome to premium!');
-    // Redirect to dashboard or show success modal
-    window.location.href = '/dashboard';
-  };
-
-  return (
-    <div className="upgrade-flow">
-      <h1>Upgrade to Premium</h1>
-
-      <div className="tier-selection">
-        <div
-          className={`tier-card ${selectedTier === 'premium' ? 'selected' : ''}`}
-          onClick={() => setSelectedTier('premium')}
-        >
-          <h3>Premium</h3>
-          <div className="price">$100/year</div>
-          <ul>
-            <li>✓ Custom .aethex domain</li>
-            <li>✓ Blockchain NFT ownership</li>
-            <li>✓ Unlimited friends</li>
-            <li>✓ HD voice/video calls (1080p)</li>
-            <li>✓ 10 GB storage</li>
-            <li>✓ Custom branding</li>
-            <li>✓ Analytics dashboard</li>
-            <li>✓ Priority support</li>
-            <li>✓ Ad-free experience</li>
-          </ul>
-        </div>
-
-        <div
-          className={`tier-card ${selectedTier === 'enterprise' ? 'selected' : ''}`}
-          onClick={() => setSelectedTier('enterprise')}
-        >
-          <h3>Enterprise</h3>
-          <div className="price">$500+/month</div>
-          <ul>
-            <li>✓ Everything in Premium</li>
-            <li>✓ White-label platform</li>
-            <li>✓ Custom domain (chat.yoursite.com)</li>
-            <li>✓ Unlimited team members</li>
-            <li>✓ Dedicated infrastructure</li>
-            <li>✓ 4K video quality</li>
-            <li>✓ SLA guarantees (99.9% uptime)</li>
-            <li>✓ Dedicated account manager</li>
-            <li>✓ Custom integrations</li>
-          </ul>
-        </div>
-      </div>
-
-      {selectedTier === 'premium' && (
-        <div className="domain-selection">
-          <h3>Choose Your .aethex Domain</h3>
-          <p style={{ color: '#aaa', marginBottom: '16px' }}>
-            Your premium blockchain domain with NFT ownership proof
-          </p>
-          
-          <div className="domain-input-group">
-            <input
-              type="text"
-              value={domainName}
-              onChange={(e) => setDomainName(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ''))}
-              placeholder="yourname"
-              className="domain-input"
-              maxLength={50}
-            />
-            <span className="domain-suffix">.aethex</span>
-            <button 
-              type="button"
-              onClick={checkDomain} 
-              disabled={checkingDomain || !domainName}
-            >
-              {checkingDomain ? 'Checking...' : 'Check'}
-            </button>
-          </div>
-
-          {domainAvailable && (
-            <div className={`domain-status ${domainAvailable.available ? 'available' : 'unavailable'}`}>
-              {domainAvailable.available ? (
-                <>
-                  <p><strong>✓ {domainAvailable.domain} is available!</strong></p>
-                  <p style={{ fontSize: '14px', marginTop: '8px', opacity: 0.8 }}>
-                    Price: ${domainAvailable.price}/year
-                  </p>
-                </>
-              ) : (
-                <div>
-                  <p><strong>✗ {domainAvailable.domain} is taken</strong></p>
-                  {domainAvailable.error && (
-                    <p style={{ fontSize: '14px', marginTop: '4px' }}>{domainAvailable.error}</p>
-                  )}
-                  {domainAvailable.suggestedAlternatives && domainAvailable.suggestedAlternatives.length > 0 && (
-                    <>
-                      <p style={{ marginTop: '12px' }}>Try these alternatives:</p>
-                      <ul>
-                        {domainAvailable.suggestedAlternatives.map(alt => (
-                          <li 
-                            key={alt} 
-                            onClick={() => setDomainName(alt.replace('.aethex', ''))}
-                          >
-                            {alt}
-                          </li>
-                        ))}
-                      </ul>
-                    </>
-                  )}
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-      )}
-
-      {(selectedTier === 'enterprise' || (selectedTier === 'premium' && domainAvailable?.available)) && (
-        <Elements stripe={stripePromise}>
-          <CheckoutForm
-            tier={selectedTier}
-            domain={domainAvailable?.available ? `${domainName}.aethex` : null}
-            onSuccess={handleSuccess}
-          />
-        </Elements>
-      )}
-
-      {selectedTier === 'enterprise' && !domainAvailable && (
-        <div style={{ textAlign: 'center', padding: '40px', color: '#aaa' }}>
-          <p>For Enterprise plans, please contact our sales team:</p>
-          <p style={{ marginTop: '16px' }}>
-            <a href="mailto:enterprise@aethex.app" style={{ color: '#5865f2' }}>
-              enterprise@aethex.app
-            </a>
-          </p>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/src/frontend/components/VerifiedDomainBadge.css b/src/frontend/components/VerifiedDomainBadge.css
deleted file mode 100644
index e6495aa..0000000
--- a/src/frontend/components/VerifiedDomainBadge.css
+++ /dev/null
@@ -1,85 +0,0 @@
-.verified-domain-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
-  border: 2px solid #6ee7b7;
-  border-radius: 24px;
-  font-size: 14px;
-  font-weight: 500;
-  color: #065f46;
-  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
-  transition: all 0.2s;
-}
-
-.verified-domain-badge:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
-}
-
-.badge-content {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.domain-text {
-  font-family: 'Courier New', monospace;
-  font-weight: 600;
-  color: #047857;
-}
-
-.checkmark {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  background: #10b981;
-  color: white;
-  border-radius: 50%;
-  font-size: 12px;
-  font-weight: bold;
-}
-
-.blockchain-indicator {
-  font-size: 16px;
-  opacity: 0.8;
-}
-
-.verified-info {
-  font-size: 11px;
-  color: #047857;
-  opacity: 0.8;
-  margin-top: 4px;
-}
-
-/* Compact variant */
-.verified-domain-badge.compact {
-  padding: 4px 12px;
-  font-size: 12px;
-}
-
-.verified-domain-badge.compact .checkmark {
-  width: 16px;
-  height: 16px;
-  font-size: 10px;
-}
-
-/* Dark mode support */
-@media (prefers-color-scheme: dark) {
-  .verified-domain-badge {
-    background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
-    border-color: #047857;
-    color: #d1fae5;
-  }
-
-  .domain-text {
-    color: #a7f3d0;
-  }
-
-  .verified-info {
-    color: #a7f3d0;
-  }
-}
diff --git a/src/frontend/components/VerifiedDomainBadge.jsx b/src/frontend/components/VerifiedDomainBadge.jsx
deleted file mode 100644
index 28d1c32..0000000
--- a/src/frontend/components/VerifiedDomainBadge.jsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import './VerifiedDomainBadge.css';
-
-/**
- * Displays verified domain badge on user profile
- * @param {Object} props
- * @param {string} props.verifiedDomain - The verified domain name
- * @param {string} props.verificationType - Type of verification (dns or blockchain)
- * @param {Date} props.verifiedAt - When the domain was verified
- */
-export default function VerifiedDomainBadge({ 
-  verifiedDomain, 
-  verificationType = 'dns',
-  verifiedAt 
-}) {
-  if (!verifiedDomain) return null;
-
-  return (
-    <div className="verified-domain-badge">
-      <div className="badge-content">
-        <span className="domain-text">{verifiedDomain}</span>
-        <span 
-          className="checkmark" 
-          title={`Verified via ${verificationType === 'blockchain' ? 'blockchain' : 'DNS'}`}
-        >
-          ✓
-        </span>
-      </div>
-      {verificationType === 'blockchain' && (
-        <span className="blockchain-indicator" title="Verified via blockchain">
-          ⛓️
-        </span>
-      )}
-      {verifiedAt && (
-        <div className="verified-info">
-          Verified {new Date(verifiedAt).toLocaleDateString()}
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/src/frontend/contexts/AuthContext.jsx b/src/frontend/contexts/AuthContext.jsx
deleted file mode 100644
index dfafc2f..0000000
--- a/src/frontend/contexts/AuthContext.jsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import React, { createContext, useContext, useState, useEffect } from 'react';
-import { createClient } from '@supabase/supabase-js';
-
-const supabase = createClient(
-  import.meta.env.VITE_SUPABASE_URL || 'http://127.0.0.1:3000',
-  import.meta.env.VITE_SUPABASE_ANON_KEY || 'sb_publishable_ACJWlzQHlZjBrEguHvfOxg_3BJgxAaH'
-);
-
-const AuthContext = createContext();
-
-export function useAuth() {
-  const context = useContext(AuthContext);
-  if (!context) {
-    throw new Error('useAuth must be used within an AuthProvider');
-  }
-  return context;
-}
-
-export function AuthProvider({ children }) {
-  const [user, setUser] = useState(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    const getSession = async () => {
-      setLoading(true);
-      const { data: { session } } = await supabase.auth.getSession();
-      if (session?.user) {
-        setUser(session.user);
-      } else {
-        setUser(null);
-      }
-      setLoading(false);
-    };
-    getSession();
-    const { data: listener } = supabase.auth.onAuthStateChange((_event, session) => {
-      setUser(session?.user || null);
-    });
-    return () => {
-      listener?.subscription.unsubscribe();
-    };
-  }, []);
-
-  const login = async (email, password) => {
-    const { data, error } = await supabase.auth.signInWithPassword({ email, password });
-    if (error) {
-      return { success: false, error: error.message };
-    }
-    setUser(data.user);
-    return { success: true };
-  };
-
-  const register = async (email, password, metadata = {}) => {
-    const { data, error } = await supabase.auth.signUp({ 
-      email, 
-      password,
-      options: {
-        data: metadata
-      }
-    });
-    if (error) {
-      return { success: false, error: error.message };
-    }
-    setUser(data.user);
-    return { success: true };
-  };
-
-  const logout = async () => {
-    await supabase.auth.signOut();
-    setUser(null);
-  };
-
-  const updateUser = (updates) => {
-    setUser(prev => ({ ...prev, ...updates }));
-  };
-
-  const value = {
-    user,
-    loading,
-    login,
-    register,
-    logout,
-    updateUser,
-    isAuthenticated: !!user
-  };
-
-  return (
-    <AuthContext.Provider value={value}>
-      {children}
-    </AuthContext.Provider>
-  );
-}
-
-export default AuthContext;
diff --git a/src/frontend/contexts/MessagingContext.jsx b/src/frontend/contexts/MessagingContext.jsx
deleted file mode 100644
index df2ae62..0000000
--- a/src/frontend/contexts/MessagingContext.jsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
-import { messagingService, socket, connectSocket, disconnectSocket } from '../services/messaging';
-import { useAuth } from './AuthContext';
-
-const MessagingContext = createContext();
-
-export function useMessaging() {
-  const context = useContext(MessagingContext);
-  if (!context) {
-    throw new Error('useMessaging must be used within a MessagingProvider');
-  }
-  return context;
-}
-
-export function MessagingProvider({ children }) {
-  const { user } = useAuth();
-  const [conversations, setConversations] = useState([]);
-  const [currentConversation, setCurrentConversation] = useState(null);
-  const [messages, setMessages] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-
-  // Load conversations when user logs in
-  useEffect(() => {
-    if (user?.id) {
-      connectSocket(user.id);
-      loadConversations();
-    } else {
-      disconnectSocket();
-      setConversations([]);
-      setMessages([]);
-    }
-
-    return () => {
-      disconnectSocket();
-    };
-  }, [user?.id]);
-
-  // Listen for real-time messages
-  useEffect(() => {
-    const handleNewMessage = (message) => {
-      if (message.conversation_id === currentConversation?.id) {
-        setMessages(prev => [...prev, message]);
-      }
-      // Update conversation's last message
-      setConversations(prev =>
-        prev.map(conv =>
-          conv.id === message.conversation_id
-            ? { ...conv, lastMessage: message, updated_at: message.created_at }
-            : conv
-        )
-      );
-    };
-
-    socket.on('message:new', handleNewMessage);
-    return () => {
-      socket.off('message:new', handleNewMessage);
-    };
-  }, [currentConversation?.id]);
-
-  // Subscribe to current conversation's messages
-  useEffect(() => {
-    if (!currentConversation?.id) return;
-
-    const unsubscribe = messagingService.subscribeToMessages(
-      currentConversation.id,
-      (newMessage) => {
-        setMessages(prev => {
-          // Avoid duplicates
-          if (prev.find(m => m.id === newMessage.id)) return prev;
-          return [...prev, newMessage];
-        });
-      }
-    );
-
-    return unsubscribe;
-  }, [currentConversation?.id]);
-
-  const loadConversations = useCallback(async () => {
-    if (!user?.id) return;
-    
-    setLoading(true);
-    try {
-      const data = await messagingService.getConversations(user.id);
-      setConversations(data);
-    } catch (err) {
-      console.error('Failed to load conversations:', err);
-      setError(err.message);
-    } finally {
-      setLoading(false);
-    }
-  }, [user?.id]);
-
-  const selectConversation = useCallback(async (conversation) => {
-    setCurrentConversation(conversation);
-    setLoading(true);
-    try {
-      const msgs = await messagingService.getMessages(conversation.id);
-      setMessages(msgs);
-    } catch (err) {
-      console.error('Failed to load messages:', err);
-      setError(err.message);
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  const sendMessage = useCallback(async (content) => {
-    if (!currentConversation?.id || !user?.id || !content.trim()) return;
-
-    try {
-      const message = await messagingService.sendMessage(
-        currentConversation.id,
-        user.id,
-        content
-      );
-      // Optimistically add to local state
-      setMessages(prev => [...prev, message]);
-    } catch (err) {
-      console.error('Failed to send message:', err);
-      setError(err.message);
-    }
-  }, [currentConversation?.id, user?.id]);
-
-  const createConversation = useCallback(async (type, title, participantIds) => {
-    if (!user?.id) return;
-
-    try {
-      const conversation = await messagingService.createConversation(
-        type,
-        title,
-        [user.id, ...participantIds]
-      );
-      setConversations(prev => [conversation, ...prev]);
-      return conversation;
-    } catch (err) {
-      console.error('Failed to create conversation:', err);
-      setError(err.message);
-    }
-  }, [user?.id]);
-
-  const value = {
-    conversations,
-    currentConversation,
-    messages,
-    loading,
-    error,
-    selectConversation,
-    sendMessage,
-    createConversation,
-    refreshConversations: loadConversations,
-  };
-
-  return (
-    <MessagingContext.Provider value={value}>
-      {children}
-    </MessagingContext.Provider>
-  );
-}
diff --git a/src/frontend/contexts/SocketContext.jsx b/src/frontend/contexts/SocketContext.jsx
deleted file mode 100644
index 28c4563..0000000
--- a/src/frontend/contexts/SocketContext.jsx
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * Socket Context
- * Provides Socket.io connection to all components
- */
-
-import React, { createContext, useContext, useEffect, useState } from 'react';
-import { io } from 'socket.io-client';
-
-const SocketContext = createContext(null);
-
-export function SocketProvider({ children }) {
-  const [socket, setSocket] = useState(null);
-  const [connected, setConnected] = useState(false);
-
-  useEffect(() => {
-    const token = localStorage.getItem('token');
-    
-    if (!token) {
-      console.log('No auth token, skipping socket connection');
-      return;
-    }
-
-    // Connect to Socket.io server
-    const socketInstance = io(import.meta.env.VITE_API_URL || 'http://localhost:3000', {
-      auth: {
-        token: token
-      },
-      reconnection: true,
-      reconnectionDelay: 1000,
-      reconnectionAttempts: 5
-    });
-
-    socketInstance.on('connect', () => {
-      console.log('✓ Connected to Socket.io server');
-      setConnected(true);
-    });
-
-    socketInstance.on('disconnect', () => {
-      console.log('✗ Disconnected from Socket.io server');
-      setConnected(false);
-    });
-
-    socketInstance.on('connect_error', (error) => {
-      console.error('Socket connection error:', error.message);
-    });
-
-    socketInstance.on('error', (error) => {
-      console.error('Socket error:', error);
-    });
-
-    setSocket(socketInstance);
-
-    // Cleanup on unmount
-    return () => {
-      if (socketInstance) {
-        socketInstance.disconnect();
-      }
-    };
-  }, []);
-
-  return (
-    <SocketContext.Provider value={{ socket, connected }}>
-      {children}
-    </SocketContext.Provider>
-  );
-}
-
-export function useSocket() {
-  const context = useContext(SocketContext);
-  if (context === undefined) {
-    throw new Error('useSocket must be used within SocketProvider');
-  }
-  return context;
-}
diff --git a/src/frontend/index.css b/src/frontend/index.css
deleted file mode 100644
index 5c9cc6c..0000000
--- a/src/frontend/index.css
+++ /dev/null
@@ -1,31 +0,0 @@
-@import "tailwindcss";
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  background: #0a0a0a;
-  color: #e4e4e7;
-  line-height: 1.5;
-}
-
-::-webkit-scrollbar {
-  width: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: #111;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #333;
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #444;
-}
diff --git a/src/frontend/index.html b/src/frontend/index.html
deleted file mode 100644
index 233abf5..0000000
--- a/src/frontend/index.html
+++ /dev/null
@@ -1,99 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    
-    <!-- Primary Meta Tags -->
-    <title>AeThex Connect - Secure, Open-Source Communication Platform</title>
-    <meta name="title" content="AeThex Connect - Secure, Open-Source Communication Platform" />
-    <meta name="description" content="Privacy-first communication platform with end-to-end encryption, crystal-clear voice & video calls, and seamless cross-platform sync. Open source and community-driven." />
-    <meta name="keywords" content="AeThex, Connect, Discord alternative, secure messaging, encrypted chat, voice calls, video calls, open source, privacy, communication platform, gaming, community" />
-    <meta name="author" content="AeThex Corporation" />
-    <meta name="robots" content="index, follow" />
-    <meta name="language" content="English" />
-    <meta name="revisit-after" content="7 days" />
-    
-    <!-- Canonical URL -->
-    <link rel="canonical" href="https://aethex.online/" />
-    
-    <!-- Favicons -->
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-    <link rel="manifest" href="/site.webmanifest" />
-    <meta name="msapplication-TileColor" content="#0a0a0a" />
-    <meta name="theme-color" content="#0a0a0a" />
-    
-    <!-- Open Graph / Facebook -->
-    <meta property="og:type" content="website" />
-    <meta property="og:url" content="https://aethex.online/" />
-    <meta property="og:title" content="AeThex Connect - Secure, Open-Source Communication" />
-    <meta property="og:description" content="Privacy-first communication platform with end-to-end encryption, crystal-clear voice & video calls, and seamless cross-platform sync." />
-    <meta property="og:image" content="https://aethex.online/og-image.png" />
-    <meta property="og:image:width" content="1200" />
-    <meta property="og:image:height" content="630" />
-    <meta property="og:image:alt" content="AeThex Connect - The Trinity of Communication" />
-    <meta property="og:site_name" content="AeThex Connect" />
-    <meta property="og:locale" content="en_US" />
-    
-    <!-- Twitter Card -->
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:url" content="https://aethex.online/" />
-    <meta name="twitter:title" content="AeThex Connect - Secure, Open-Source Communication" />
-    <meta name="twitter:description" content="Privacy-first communication platform with end-to-end encryption, crystal-clear voice & video calls, and seamless cross-platform sync." />
-    <meta name="twitter:image" content="https://aethex.online/og-image.png" />
-    <meta name="twitter:image:alt" content="AeThex Connect - The Trinity of Communication" />
-    <meta name="twitter:site" content="@AeThexCorp" />
-    <meta name="twitter:creator" content="@AeThexCorp" />
-    
-    <!-- Additional SEO -->
-    <meta name="application-name" content="AeThex Connect" />
-    <meta name="apple-mobile-web-app-title" content="AeThex Connect" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-    <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="format-detection" content="telephone=no" />
-    
-    <!-- DNS Prefetch for performance -->
-    <link rel="dns-prefetch" href="//fonts.googleapis.com" />
-    <link rel="dns-prefetch" href="//fonts.gstatic.com" />
-    
-    <!-- Preconnect for critical resources -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    
-    <!-- JSON-LD Structured Data -->
-    <script type="application/ld+json">
-    {
-      "@context": "https://schema.org",
-      "@type": "SoftwareApplication",
-      "name": "AeThex Connect",
-      "applicationCategory": "CommunicationApplication",
-      "operatingSystem": "Web, Windows, macOS, Linux, iOS, Android",
-      "description": "Privacy-first communication platform with end-to-end encryption, voice & video calls, and cross-platform sync.",
-      "url": "https://aethex.online",
-      "author": {
-        "@type": "Organization",
-        "name": "AeThex Corporation",
-        "url": "https://aethex.online"
-      },
-      "offers": {
-        "@type": "Offer",
-        "price": "0",
-        "priceCurrency": "USD"
-      },
-      "aggregateRating": {
-        "@type": "AggregateRating",
-        "ratingValue": "4.9",
-        "ratingCount": "1250"
-      }
-    }
-    </script>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/main.jsx"></script>
-  </body>
-</html>
diff --git a/src/frontend/main.jsx b/src/frontend/main.jsx
deleted file mode 100644
index 8f4caa5..0000000
--- a/src/frontend/main.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import AppWrapper from './App';
-import './index.css';
-import './Demo.css';
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-    <AppWrapper />
-  </React.StrictMode>
-);
diff --git a/src/frontend/mockup/ActivityStatus.jsx b/src/frontend/mockup/ActivityStatus.jsx
deleted file mode 100644
index 4086ea5..0000000
--- a/src/frontend/mockup/ActivityStatus.jsx
+++ /dev/null
@@ -1,186 +0,0 @@
-import React from 'react';
-
-export default function ActivityStatus({ activity, size = 'normal' }) {
-  if (!activity) return null;
-
-  const activityTypes = {
-    playing: { icon: '🎮', label: 'Playing' },
-    streaming: { icon: '📺', label: 'Streaming' },
-    listening: { icon: '🎧', label: 'Listening to' },
-    watching: { icon: '📺', label: 'Watching' },
-    competing: { icon: '🏆', label: 'Competing in' },
-    custom: { icon: null, label: null },
-    developing: { icon: '💻', label: 'Developing' },
-    building: { icon: '🔨', label: 'Building' },
-  };
-
-  const typeInfo = activityTypes[activity.type] || activityTypes.custom;
-
-  if (size === 'small') {
-    return (
-      <div className="activity-status-small">
-        {typeInfo.icon && <span className="activity-icon-small">{typeInfo.icon}</span>}
-        <span className="activity-text-small">
-          {typeInfo.label ? `${typeInfo.label} ${activity.name}` : activity.name}
-        </span>
-      </div>
-    );
-  }
-
-  if (size === 'mini') {
-    return (
-      <span className="activity-status-mini">
-        {activity.name}
-      </span>
-    );
-  }
-
-  return (
-    <div className="activity-status">
-      <div className="activity-header">
-        {typeInfo.icon && <span className="activity-type-icon">{typeInfo.icon}</span>}
-        <span className="activity-type-label">{typeInfo.label || 'Activity'}</span>
-      </div>
-      
-      <div className="activity-content">
-        {activity.largeImage && (
-          <div className="activity-image">
-            <img src={activity.largeImage} alt="" />
-            {activity.smallImage && (
-              <img src={activity.smallImage} alt="" className="activity-image-small" />
-            )}
-          </div>
-        )}
-        
-        <div className="activity-details">
-          <div className="activity-name">{activity.name}</div>
-          {activity.details && <div className="activity-detail">{activity.details}</div>}
-          {activity.state && <div className="activity-state">{activity.state}</div>}
-          {activity.startTime && (
-            <div className="activity-time">
-              <ActivityTimer startTime={activity.startTime} />
-            </div>
-          )}
-        </div>
-      </div>
-
-      {activity.buttons && activity.buttons.length > 0 && (
-        <div className="activity-buttons">
-          {activity.buttons.map((btn, idx) => (
-            <button key={idx} className="activity-btn">
-              {btn.label}
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function ActivityTimer({ startTime }) {
-  const [elapsed, setElapsed] = React.useState('');
-
-  React.useEffect(() => {
-    const updateElapsed = () => {
-      const now = Date.now();
-      const diff = now - startTime;
-      const hours = Math.floor(diff / 3600000);
-      const minutes = Math.floor((diff % 3600000) / 60000);
-      const seconds = Math.floor((diff % 60000) / 1000);
-      
-      if (hours > 0) {
-        setElapsed(`${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')} elapsed`);
-      } else {
-        setElapsed(`${minutes}:${seconds.toString().padStart(2, '0')} elapsed`);
-      }
-    };
-
-    updateElapsed();
-    const interval = setInterval(updateElapsed, 1000);
-    return () => clearInterval(interval);
-  }, [startTime]);
-
-  return <span>{elapsed}</span>;
-}
-
-// Rich Presence card for games
-export function RichPresence({ game }) {
-  if (!game) return null;
-
-  return (
-    <div className="rich-presence">
-      <div className="rp-header">
-        <span className="rp-icon">🎮</span>
-        <span className="rp-label">Playing a game</span>
-      </div>
-      
-      <div className="rp-content">
-        <div className="rp-image">
-          {game.icon ? (
-            <img src={game.icon} alt={game.name} />
-          ) : (
-            <span className="rp-placeholder">🎮</span>
-          )}
-        </div>
-        
-        <div className="rp-info">
-          <div className="rp-name">{game.name}</div>
-          {game.details && <div className="rp-details">{game.details}</div>}
-          {game.state && <div className="rp-state">{game.state}</div>}
-          <div className="rp-elapsed">
-            <ActivityTimer startTime={game.startTime || Date.now() - 3600000} />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// Spotify-style listening activity
-export function SpotifyActivity({ track }) {
-  if (!track) return null;
-
-  return (
-    <div className="spotify-activity">
-      <div className="spotify-header">
-        <span className="spotify-icon">🎧</span>
-        <span className="spotify-label">Listening to Spotify</span>
-      </div>
-      
-      <div className="spotify-content">
-        <div className="spotify-album">
-          {track.albumArt ? (
-            <img src={track.albumArt} alt={track.album} />
-          ) : (
-            <span className="spotify-placeholder">🎵</span>
-          )}
-        </div>
-        
-        <div className="spotify-info">
-          <div className="spotify-song">{track.name}</div>
-          <div className="spotify-artist">by {track.artist}</div>
-          <div className="spotify-album-name">on {track.album}</div>
-        </div>
-      </div>
-
-      <div className="spotify-progress">
-        <div className="progress-bar">
-          <div 
-            className="progress-fill"
-            style={{ width: `${(track.elapsed / track.duration) * 100}%` }}
-          />
-        </div>
-        <div className="progress-times">
-          <span>{formatTime(track.elapsed)}</span>
-          <span>{formatTime(track.duration)}</span>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function formatTime(ms) {
-  const minutes = Math.floor(ms / 60000);
-  const seconds = Math.floor((ms % 60000) / 1000);
-  return `${minutes}:${seconds.toString().padStart(2, '0')}`;
-}
diff --git a/src/frontend/mockup/AppDirectory.jsx b/src/frontend/mockup/AppDirectory.jsx
deleted file mode 100644
index 09748fd..0000000
--- a/src/frontend/mockup/AppDirectory.jsx
+++ /dev/null
@@ -1,220 +0,0 @@
-import React, { useState } from 'react';
-
-const categories = [
-  { id: 'all', label: 'All Apps', icon: '🔷' },
-  { id: 'moderation', label: 'Moderation', icon: '🛡️' },
-  { id: 'entertainment', label: 'Entertainment', icon: '🎮' },
-  { id: 'social', label: 'Social', icon: '💬' },
-  { id: 'utility', label: 'Utility', icon: '🔧' },
-  { id: 'music', label: 'Music', icon: '🎵' },
-];
-
-const apps = [
-  {
-    id: 1,
-    name: 'MEE6',
-    icon: '🤖',
-    color: '#5865f2',
-    description: 'The most popular bot for moderation, leveling, and social commands.',
-    category: 'moderation',
-    verified: true,
-    servers: '19M+',
-    rating: 4.5,
-    features: ['Moderation', 'Leveling', 'Custom Commands', 'Music'],
-  },
-  {
-    id: 2,
-    name: 'Dyno',
-    icon: '⚡',
-    color: '#ffa500',
-    description: 'Fully customizable server moderation bot with a web dashboard.',
-    category: 'moderation',
-    verified: true,
-    servers: '4.7M+',
-    rating: 4.3,
-    features: ['Auto-mod', 'Dashboard', 'Logs', 'Announcements'],
-  },
-  {
-    id: 3,
-    name: 'Rythm',
-    icon: '🎵',
-    color: '#e91e63',
-    description: 'High quality music bot with support for multiple platforms.',
-    category: 'music',
-    verified: true,
-    servers: '6M+',
-    rating: 4.7,
-    features: ['Music', 'Playlists', 'Lyrics', 'Volume Control'],
-  },
-  {
-    id: 4,
-    name: 'Dank Memer',
-    icon: '🐸',
-    color: '#3ba55d',
-    description: 'Meme posting, currency system, and fun commands.',
-    category: 'entertainment',
-    verified: true,
-    servers: '8M+',
-    rating: 4.6,
-    features: ['Economy', 'Memes', 'Games', 'Gambling'],
-  },
-  {
-    id: 5,
-    name: 'Carl-bot',
-    icon: '🎭',
-    color: '#9b59b6',
-    description: 'Reaction roles, logging, automod, and utility commands.',
-    category: 'utility',
-    verified: true,
-    servers: '3.5M+',
-    rating: 4.4,
-    features: ['Reaction Roles', 'Logging', 'Tags', 'Embeds'],
-  },
-  {
-    id: 6,
-    name: 'Pokétwo',
-    icon: '🔴',
-    color: '#ff0000',
-    description: 'Catch, trade, and battle Pokémon in Discord.',
-    category: 'entertainment',
-    verified: true,
-    servers: '1.2M+',
-    rating: 4.5,
-    features: ['Pokémon', 'Trading', 'Battles', 'Events'],
-  },
-  {
-    id: 7,
-    name: 'Tickets',
-    icon: '🎫',
-    color: '#5865f2',
-    description: 'Simple and powerful ticket system for support.',
-    category: 'utility',
-    verified: false,
-    servers: '500K+',
-    rating: 4.2,
-    features: ['Tickets', 'Transcripts', 'Categories', 'Staff Roles'],
-  },
-  {
-    id: 8,
-    name: 'Arcane',
-    icon: '🔮',
-    color: '#eb459e',
-    description: 'XP leveling, role rewards, and leaderboards.',
-    category: 'social',
-    verified: false,
-    servers: '800K+',
-    rating: 4.1,
-    features: ['Leveling', 'Role Rewards', 'Leaderboard', 'Card Design'],
-  },
-];
-
-export default function AppDirectory({ onClose }) {
-  const [search, setSearch] = useState('');
-  const [activeCategory, setActiveCategory] = useState('all');
-  const [selectedApp, setSelectedApp] = useState(null);
-
-  const filteredApps = apps.filter(app => {
-    const matchesSearch = !search || 
-      app.name.toLowerCase().includes(search.toLowerCase()) ||
-      app.description.toLowerCase().includes(search.toLowerCase());
-    const matchesCategory = activeCategory === 'all' || app.category === activeCategory;
-    return matchesSearch && matchesCategory;
-  });
-
-  return (
-    <div className="app-directory">
-      <div className="app-dir-header">
-        <h2>🔷 App Directory</h2>
-        <button className="app-dir-close" onClick={onClose}>✕</button>
-      </div>
-
-      <div className="app-dir-search">
-        <span className="search-icon">🔍</span>
-        <input
-          type="text"
-          placeholder="Search apps..."
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-        />
-      </div>
-
-      <div className="app-dir-categories">
-        {categories.map(cat => (
-          <button
-            key={cat.id}
-            className={`app-cat-btn ${activeCategory === cat.id ? 'active' : ''}`}
-            onClick={() => setActiveCategory(cat.id)}
-          >
-            <span>{cat.icon}</span> {cat.label}
-          </button>
-        ))}
-      </div>
-
-      <div className="app-dir-content">
-        {selectedApp ? (
-          <div className="app-detail">
-            <button className="back-btn" onClick={() => setSelectedApp(null)}>
-              ← Back
-            </button>
-            <div className="app-detail-header">
-              <div 
-                className="app-icon-large"
-                style={{ background: selectedApp.color }}
-              >
-                {selectedApp.icon}
-              </div>
-              <div className="app-detail-info">
-                <div className="app-name-row">
-                  <h2>{selectedApp.name}</h2>
-                  {selectedApp.verified && <span className="verified-badge">✓ Verified</span>}
-                </div>
-                <p className="app-description">{selectedApp.description}</p>
-                <div className="app-stats">
-                  <span>📊 {selectedApp.servers} servers</span>
-                  <span>⭐ {selectedApp.rating}/5</span>
-                </div>
-              </div>
-              <button className="add-to-server-btn">Add to Server</button>
-            </div>
-            <div className="app-features">
-              <h3>Features</h3>
-              <div className="feature-tags">
-                {selectedApp.features.map((feature, idx) => (
-                  <span key={idx} className="feature-tag">{feature}</span>
-                ))}
-              </div>
-            </div>
-          </div>
-        ) : (
-          <div className="app-grid">
-            {filteredApps.map(app => (
-              <div 
-                key={app.id} 
-                className="app-card"
-                onClick={() => setSelectedApp(app)}
-              >
-                <div 
-                  className="app-card-icon"
-                  style={{ background: app.color }}
-                >
-                  {app.icon}
-                </div>
-                <div className="app-card-info">
-                  <div className="app-card-name">
-                    {app.name}
-                    {app.verified && <span className="verified-small">✓</span>}
-                  </div>
-                  <p className="app-card-desc">{app.description}</p>
-                  <div className="app-card-stats">
-                    <span>{app.servers} servers</span>
-                    <span>⭐ {app.rating}</span>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/AuditLog.jsx b/src/frontend/mockup/AuditLog.jsx
deleted file mode 100644
index 8258509..0000000
--- a/src/frontend/mockup/AuditLog.jsx
+++ /dev/null
@@ -1,170 +0,0 @@
-import React, { useState } from 'react';
-
-const mockLogs = [
-  { id: 1, action: 'member_kick', user: { name: 'ModUser', avatar: 'M', color: '#5865f2' }, target: 'SpamBot#1234', time: '2 minutes ago', reason: 'Spam' },
-  { id: 2, action: 'channel_create', user: { name: 'Admin', avatar: 'A', color: '#ff0000' }, target: '#announcements', time: '15 minutes ago' },
-  { id: 3, action: 'role_update', user: { name: 'Admin', avatar: 'A', color: '#ff0000' }, target: 'Moderator', time: '1 hour ago', changes: 'Added kick permission' },
-  { id: 4, action: 'member_ban', user: { name: 'ModUser', avatar: 'M', color: '#5865f2' }, target: 'ToxicUser#9999', time: '2 hours ago', reason: 'Harassment' },
-  { id: 5, action: 'message_delete', user: { name: 'AutoMod', avatar: '🤖', color: '#3ba55d' }, target: '5 messages', time: '3 hours ago', reason: 'Spam filter' },
-  { id: 6, action: 'invite_create', user: { name: 'Member', avatar: 'M', color: '#ffa500' }, target: 'discord.gg/abc123', time: '4 hours ago' },
-  { id: 7, action: 'member_timeout', user: { name: 'ModUser', avatar: 'M', color: '#5865f2' }, target: 'RuleBreaker#0001', time: '5 hours ago', reason: 'Breaking rules', duration: '10 minutes' },
-  { id: 8, action: 'server_update', user: { name: 'Owner', avatar: 'O', color: '#e91e63' }, target: 'Server name', time: '1 day ago', changes: 'Changed to AeThex Foundation' },
-  { id: 9, action: 'emoji_create', user: { name: 'Admin', avatar: 'A', color: '#ff0000' }, target: ':custom_emoji:', time: '2 days ago' },
-  { id: 10, action: 'webhook_create', user: { name: 'Developer', avatar: 'D', color: '#0066ff' }, target: 'GitHub Webhook', time: '3 days ago' },
-];
-
-const actionTypes = [
-  { id: 'all', label: 'All Actions' },
-  { id: 'member', label: 'Member Actions' },
-  { id: 'channel', label: 'Channel Actions' },
-  { id: 'role', label: 'Role Actions' },
-  { id: 'message', label: 'Message Actions' },
-  { id: 'server', label: 'Server Actions' },
-  { id: 'invite', label: 'Invite Actions' },
-];
-
-const actionIcons = {
-  member_kick: '👢',
-  member_ban: '🔨',
-  member_timeout: '⏰',
-  member_join: '📥',
-  member_leave: '📤',
-  channel_create: '➕',
-  channel_delete: '🗑️',
-  channel_update: '📝',
-  role_create: '🎭',
-  role_update: '🎭',
-  role_delete: '🎭',
-  message_delete: '💬',
-  message_pin: '📌',
-  server_update: '⚙️',
-  invite_create: '🔗',
-  invite_delete: '🔗',
-  emoji_create: '😀',
-  emoji_delete: '😀',
-  webhook_create: '🔌',
-  webhook_delete: '🔌',
-};
-
-const actionLabels = {
-  member_kick: 'kicked',
-  member_ban: 'banned',
-  member_timeout: 'timed out',
-  member_join: 'joined',
-  member_leave: 'left',
-  channel_create: 'created channel',
-  channel_delete: 'deleted channel',
-  channel_update: 'updated channel',
-  role_create: 'created role',
-  role_update: 'updated role',
-  role_delete: 'deleted role',
-  message_delete: 'deleted',
-  message_pin: 'pinned',
-  server_update: 'updated',
-  invite_create: 'created invite',
-  invite_delete: 'deleted invite',
-  emoji_create: 'added emoji',
-  emoji_delete: 'removed emoji',
-  webhook_create: 'created webhook',
-  webhook_delete: 'deleted webhook',
-};
-
-export default function AuditLog({ onClose }) {
-  const [filter, setFilter] = useState('all');
-  const [searchUser, setSearchUser] = useState('');
-  const [expandedLog, setExpandedLog] = useState(null);
-
-  const filteredLogs = mockLogs.filter(log => {
-    if (filter !== 'all' && !log.action.startsWith(filter)) return false;
-    if (searchUser && !log.user.name.toLowerCase().includes(searchUser.toLowerCase())) return false;
-    return true;
-  });
-
-  return (
-    <div className="audit-log">
-      <div className="audit-header">
-        <h2>📋 Audit Log</h2>
-        <button className="audit-close" onClick={onClose}>✕</button>
-      </div>
-
-      <div className="audit-filters">
-        <div className="audit-search">
-          <span>🔍</span>
-          <input
-            type="text"
-            placeholder="Filter by user..."
-            value={searchUser}
-            onChange={(e) => setSearchUser(e.target.value)}
-          />
-        </div>
-        <select 
-          className="audit-type-filter"
-          value={filter}
-          onChange={(e) => setFilter(e.target.value)}
-        >
-          {actionTypes.map(type => (
-            <option key={type.id} value={type.id}>{type.label}</option>
-          ))}
-        </select>
-      </div>
-
-      <div className="audit-list">
-        {filteredLogs.map(log => (
-          <div 
-            key={log.id} 
-            className={`audit-entry ${expandedLog === log.id ? 'expanded' : ''}`}
-            onClick={() => setExpandedLog(expandedLog === log.id ? null : log.id)}
-          >
-            <div className="audit-entry-main">
-              <span className="audit-icon">{actionIcons[log.action] || '📝'}</span>
-              <div 
-                className="audit-user-avatar"
-                style={{ background: log.user.color }}
-              >
-                {log.user.avatar}
-              </div>
-              <div className="audit-info">
-                <span className="audit-user-name">{log.user.name}</span>
-                <span className="audit-action">{actionLabels[log.action] || log.action}</span>
-                <span className="audit-target">{log.target}</span>
-              </div>
-              <span className="audit-time">{log.time}</span>
-            </div>
-            
-            {expandedLog === log.id && (
-              <div className="audit-details">
-                {log.reason && (
-                  <div className="audit-detail-row">
-                    <span className="detail-label">Reason:</span>
-                    <span className="detail-value">{log.reason}</span>
-                  </div>
-                )}
-                {log.duration && (
-                  <div className="audit-detail-row">
-                    <span className="detail-label">Duration:</span>
-                    <span className="detail-value">{log.duration}</span>
-                  </div>
-                )}
-                {log.changes && (
-                  <div className="audit-detail-row">
-                    <span className="detail-label">Changes:</span>
-                    <span className="detail-value">{log.changes}</span>
-                  </div>
-                )}
-                <div className="audit-detail-row">
-                  <span className="detail-label">ID:</span>
-                  <span className="detail-value audit-id">{log.id}</span>
-                </div>
-              </div>
-            )}
-          </div>
-        ))}
-      </div>
-
-      <div className="audit-footer">
-        <span className="audit-count">{filteredLogs.length} entries</span>
-        <button className="audit-load-more">Load More</button>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/AutoModSettings.jsx b/src/frontend/mockup/AutoModSettings.jsx
deleted file mode 100644
index 67fff47..0000000
--- a/src/frontend/mockup/AutoModSettings.jsx
+++ /dev/null
@@ -1,259 +0,0 @@
-import React, { useState } from 'react';
-
-const autoModRules = [
-  { 
-    id: 'profanity', 
-    name: 'Block Profanity', 
-    description: 'Automatically block common profane words',
-    icon: '🤬',
-    severity: 'high'
-  },
-  { 
-    id: 'spam', 
-    name: 'Block Spam', 
-    description: 'Prevent repeated messages, excessive mentions, and invite links',
-    icon: '📧',
-    severity: 'medium'
-  },
-  { 
-    id: 'links', 
-    name: 'Block Links', 
-    description: 'Block messages containing links (with allowlist)',
-    icon: '🔗',
-    severity: 'low'
-  },
-  { 
-    id: 'mentions', 
-    name: 'Limit Mentions', 
-    description: 'Block messages with excessive @mentions',
-    icon: '@',
-    severity: 'medium'
-  },
-  { 
-    id: 'caps', 
-    name: 'Block Excessive Caps', 
-    description: 'Block messages that are mostly uppercase',
-    icon: '🔠',
-    severity: 'low'
-  },
-  { 
-    id: 'attachments', 
-    name: 'Block Attachments', 
-    description: 'Restrict file attachments in messages',
-    icon: '📎',
-    severity: 'low'
-  },
-];
-
-const defaultActions = [
-  { id: 'delete', label: 'Delete Message', icon: '🗑️' },
-  { id: 'alert', label: 'Send Alert to Channel', icon: '⚠️' },
-  { id: 'timeout', label: 'Timeout Member', icon: '⏰' },
-  { id: 'log', label: 'Log to Mod Channel', icon: '📝' },
-];
-
-export default function AutoModSettings({ onSave, onClose }) {
-  const [rules, setRules] = useState({
-    profanity: { enabled: true, action: 'delete' },
-    spam: { enabled: true, action: 'delete' },
-    links: { enabled: false, action: 'delete', allowlist: [] },
-    mentions: { enabled: true, action: 'alert', limit: 5 },
-    caps: { enabled: false, action: 'delete', threshold: 70 },
-    attachments: { enabled: false, action: 'delete' },
-  });
-  
-  const [customWords, setCustomWords] = useState(['badword1', 'badword2']);
-  const [allowedLinks, setAllowedLinks] = useState(['youtube.com', 'twitter.com']);
-  const [logChannel, setLogChannel] = useState('mod-logs');
-  const [activeRule, setActiveRule] = useState(null);
-
-  const toggleRule = (ruleId) => {
-    setRules(prev => ({
-      ...prev,
-      [ruleId]: { ...prev[ruleId], enabled: !prev[ruleId]?.enabled }
-    }));
-  };
-
-  const updateRuleAction = (ruleId, action) => {
-    setRules(prev => ({
-      ...prev,
-      [ruleId]: { ...prev[ruleId], action }
-    }));
-  };
-
-  return (
-    <div className="automod-settings">
-      <div className="automod-header">
-        <h2>🤖 AutoMod</h2>
-        <p className="automod-subtitle">Automatically moderate your server with configurable rules</p>
-        <button className="automod-close" onClick={onClose}>✕</button>
-      </div>
-
-      <div className="automod-content">
-        <section className="automod-section">
-          <h3>Moderation Rules</h3>
-          <div className="rules-list">
-            {autoModRules.map(rule => (
-              <div 
-                key={rule.id} 
-                className={`rule-card ${rules[rule.id]?.enabled ? 'enabled' : ''}`}
-              >
-                <div className="rule-main">
-                  <div className="rule-toggle">
-                    <input
-                      type="checkbox"
-                      checked={rules[rule.id]?.enabled || false}
-                      onChange={() => toggleRule(rule.id)}
-                    />
-                  </div>
-                  <div className="rule-icon">{rule.icon}</div>
-                  <div className="rule-info">
-                    <h4>{rule.name}</h4>
-                    <p>{rule.description}</p>
-                  </div>
-                  <div className={`severity-badge ${rule.severity}`}>
-                    {rule.severity}
-                  </div>
-                  <button 
-                    className="configure-btn"
-                    onClick={() => setActiveRule(activeRule === rule.id ? null : rule.id)}
-                  >
-                    {activeRule === rule.id ? '▼' : '▶'}
-                  </button>
-                </div>
-                
-                {activeRule === rule.id && (
-                  <div className="rule-config">
-                    <div className="config-field">
-                      <label>Action when triggered</label>
-                      <div className="action-options">
-                        {defaultActions.map(action => (
-                          <button
-                            key={action.id}
-                            className={`action-btn ${rules[rule.id]?.action === action.id ? 'active' : ''}`}
-                            onClick={() => updateRuleAction(rule.id, action.id)}
-                          >
-                            <span className="action-icon">{action.icon}</span>
-                            <span>{action.label}</span>
-                          </button>
-                        ))}
-                      </div>
-                    </div>
-
-                    {rule.id === 'mentions' && (
-                      <div className="config-field">
-                        <label>Maximum mentions per message</label>
-                        <input
-                          type="number"
-                          min="1"
-                          max="20"
-                          value={rules.mentions?.limit || 5}
-                          onChange={(e) => setRules(prev => ({
-                            ...prev,
-                            mentions: { ...prev.mentions, limit: Number(e.target.value) }
-                          }))}
-                          className="number-input"
-                        />
-                      </div>
-                    )}
-
-                    {rule.id === 'caps' && (
-                      <div className="config-field">
-                        <label>Caps threshold (%)</label>
-                        <input
-                          type="range"
-                          min="50"
-                          max="100"
-                          value={rules.caps?.threshold || 70}
-                          onChange={(e) => setRules(prev => ({
-                            ...prev,
-                            caps: { ...prev.caps, threshold: Number(e.target.value) }
-                          }))}
-                        />
-                        <span>{rules.caps?.threshold || 70}%</span>
-                      </div>
-                    )}
-
-                    {rule.id === 'links' && (
-                      <div className="config-field">
-                        <label>Allowed Domains</label>
-                        <div className="tag-list">
-                          {allowedLinks.map((link, idx) => (
-                            <span key={idx} className="tag">
-                              {link}
-                              <button onClick={() => setAllowedLinks(prev => prev.filter((_, i) => i !== idx))}>✕</button>
-                            </span>
-                          ))}
-                        </div>
-                        <input
-                          type="text"
-                          placeholder="Add domain..."
-                          onKeyPress={(e) => {
-                            if (e.key === 'Enter' && e.target.value) {
-                              setAllowedLinks(prev => [...prev, e.target.value]);
-                              e.target.value = '';
-                            }
-                          }}
-                        />
-                      </div>
-                    )}
-                  </div>
-                )}
-              </div>
-            ))}
-          </div>
-        </section>
-
-        <section className="automod-section">
-          <h3>Custom Blocked Words</h3>
-          <p className="section-description">Add your own words to block in messages</p>
-          <div className="custom-words">
-            <div className="tag-list">
-              {customWords.map((word, idx) => (
-                <span key={idx} className="tag blocked">
-                  {word}
-                  <button onClick={() => setCustomWords(prev => prev.filter((_, i) => i !== idx))}>✕</button>
-                </span>
-              ))}
-            </div>
-            <input
-              type="text"
-              placeholder="Add word to block..."
-              onKeyPress={(e) => {
-                if (e.key === 'Enter' && e.target.value) {
-                  setCustomWords(prev => [...prev, e.target.value.toLowerCase()]);
-                  e.target.value = '';
-                }
-              }}
-            />
-          </div>
-        </section>
-
-        <section className="automod-section">
-          <h3>Log Channel</h3>
-          <p className="section-description">Where to send AutoMod logs</p>
-          <select 
-            value={logChannel}
-            onChange={(e) => setLogChannel(e.target.value)}
-            className="channel-select"
-          >
-            <option value="">None</option>
-            <option value="mod-logs"># mod-logs</option>
-            <option value="admin"># admin</option>
-            <option value="bot-logs"># bot-logs</option>
-          </select>
-        </section>
-      </div>
-
-      <div className="automod-footer">
-        <button className="cancel-btn" onClick={onClose}>Cancel</button>
-        <button 
-          className="save-btn"
-          onClick={() => onSave?.({ rules, customWords, allowedLinks, logChannel })}
-        >
-          Save Changes
-        </button>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/BanList.jsx b/src/frontend/mockup/BanList.jsx
deleted file mode 100644
index bad16b1..0000000
--- a/src/frontend/mockup/BanList.jsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import React, { useState } from 'react';
-
-const mockBans = [
-  { id: 1, user: { name: 'SpamBot_123', tag: '#0000', avatar: 'S' }, reason: 'Spamming invite links', bannedBy: 'Trevor', bannedAt: '2025-12-15T14:30:00' },
-  { id: 2, user: { name: 'ToxicUser', tag: '#6666', avatar: 'T' }, reason: 'Harassment and hate speech', bannedBy: 'Sarah', bannedAt: '2025-11-20T09:15:00' },
-  { id: 3, user: { name: 'RaidLeader', tag: '#9999', avatar: 'R' }, reason: 'Organizing raid against server', bannedBy: 'Trevor', bannedAt: '2025-10-05T18:45:00' },
-  { id: 4, user: { name: 'ScammerX', tag: '#1111', avatar: 'X' }, reason: 'Attempting to scam members', bannedBy: 'Sarah', bannedAt: '2025-09-12T11:00:00' },
-  { id: 5, user: { name: 'BadActor', tag: '#4321', avatar: 'B' }, reason: 'No reason given', bannedBy: 'Trevor', bannedAt: '2025-08-01T16:20:00' },
-];
-
-export default function BanList({ onClose }) {
-  const [bans, setBans] = useState(mockBans);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [selectedBan, setSelectedBan] = useState(null);
-  const [showRevokeConfirm, setShowRevokeConfirm] = useState(false);
-
-  const filteredBans = bans.filter(ban =>
-    ban.user.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-    ban.reason.toLowerCase().includes(searchQuery.toLowerCase())
-  );
-
-  const formatDate = (dateStr) => {
-    const date = new Date(dateStr);
-    return date.toLocaleDateString('en-US', {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-    });
-  };
-
-  const handleRevoke = (banId) => {
-    setBans(prev => prev.filter(b => b.id !== banId));
-    setShowRevokeConfirm(false);
-    setSelectedBan(null);
-  };
-
-  return (
-    <div className="modal-overlay" onClick={onClose}>
-      <div className="ban-list-modal" onClick={(e) => e.stopPropagation()}>
-        <div className="ban-list-header">
-          <h2>🚫 Server Bans</h2>
-          <button className="ban-list-close" onClick={onClose}>✕</button>
-        </div>
-
-        <div className="ban-list-search">
-          <input
-            type="text"
-            placeholder="Search bans..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-          />
-        </div>
-
-        <div className="ban-list-content">
-          {filteredBans.length === 0 ? (
-            <div className="no-bans">
-              <span className="no-bans-icon">✨</span>
-              <p>No bans found</p>
-              <span className="no-bans-hint">This server has no banned users</span>
-            </div>
-          ) : (
-            <>
-              <div className="ban-count">{filteredBans.length} banned user{filteredBans.length !== 1 ? 's' : ''}</div>
-              {filteredBans.map(ban => (
-                <div
-                  key={ban.id}
-                  className={`ban-item ${selectedBan === ban.id ? 'selected' : ''}`}
-                  onClick={() => setSelectedBan(selectedBan === ban.id ? null : ban.id)}
-                >
-                  <div className="ban-user-info">
-                    <div className="ban-avatar">{ban.user.avatar}</div>
-                    <div className="ban-user-details">
-                      <div className="ban-username">
-                        {ban.user.name}<span className="ban-tag">{ban.user.tag}</span>
-                      </div>
-                      <div className="ban-reason">{ban.reason}</div>
-                    </div>
-                  </div>
-
-                  <div className="ban-meta">
-                    <div className="ban-date">{formatDate(ban.bannedAt)}</div>
-                    <div className="ban-by">by {ban.bannedBy}</div>
-                  </div>
-
-                  {selectedBan === ban.id && (
-                    <div className="ban-actions">
-                      <button
-                        className="revoke-ban-btn"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          setShowRevokeConfirm(true);
-                        }}
-                      >
-                        Revoke Ban
-                      </button>
-                    </div>
-                  )}
-                </div>
-              ))}
-            </>
-          )}
-        </div>
-
-        {showRevokeConfirm && selectedBan && (
-          <div className="revoke-confirm-overlay" onClick={() => setShowRevokeConfirm(false)}>
-            <div className="revoke-confirm-modal" onClick={(e) => e.stopPropagation()}>
-              <h3>Revoke Ban</h3>
-              <p>
-                Are you sure you want to unban{' '}
-                <strong>{bans.find(b => b.id === selectedBan)?.user.name}</strong>?
-              </p>
-              <p className="revoke-warning">They will be able to rejoin the server with an invite.</p>
-              <div className="revoke-actions">
-                <button className="cancel-btn" onClick={() => setShowRevokeConfirm(false)}>
-                  Cancel
-                </button>
-                <button className="confirm-revoke-btn" onClick={() => handleRevoke(selectedBan)}>
-                  Revoke Ban
-                </button>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/CategoryEditor.jsx b/src/frontend/mockup/CategoryEditor.jsx
deleted file mode 100644
index af81e6f..0000000
--- a/src/frontend/mockup/CategoryEditor.jsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import React, { useState } from 'react';
-
-export default function CategoryEditor({ category, onClose, onSave, onDelete }) {
-  const categoryData = category || {
-    id: 'new',
-    name: '',
-    channels: [],
-  };
-
-  const [name, setName] = useState(categoryData.name);
-  const [isPrivate, setIsPrivate] = useState(false);
-  const [syncPermissions, setSyncPermissions] = useState(true);
-
-  const availableRoles = [
-    { id: 'founder', name: 'Founder', color: '#ff0000' },
-    { id: 'foundation', name: 'Foundation', color: '#ff0000' },
-    { id: 'corporation', name: 'Corporation', color: '#0066ff' },
-    { id: 'labs', name: 'Labs', color: '#ffa500' },
-    { id: 'everyone', name: '@everyone', color: '#99aab5' },
-  ];
-
-  const [allowedRoles, setAllowedRoles] = useState(['everyone']);
-
-  const toggleRole = (roleId) => {
-    setAllowedRoles(prev =>
-      prev.includes(roleId)
-        ? prev.filter(id => id !== roleId)
-        : [...prev, roleId]
-    );
-  };
-
-  const handleSave = () => {
-    onSave?.({
-      id: categoryData.id,
-      name: name.toUpperCase(),
-      isPrivate,
-      allowedRoles,
-      syncPermissions,
-    });
-  };
-
-  const isNew = !category?.name;
-
-  return (
-    <div className="modal-overlay" onClick={onClose}>
-      <div className="category-editor" onClick={(e) => e.stopPropagation()}>
-        <div className="category-editor-header">
-          <h2>{isNew ? 'Create Category' : 'Edit Category'}</h2>
-          <button className="category-close" onClick={onClose}>✕</button>
-        </div>
-
-        <div className="category-editor-content">
-          <div className="setting-group">
-            <label>Category Name</label>
-            <input
-              type="text"
-              className="category-name-input"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              placeholder="New Category"
-              maxLength={100}
-            />
-          </div>
-
-          <div className="setting-group toggle-group">
-            <div className="toggle-info">
-              <label>Private Category</label>
-              <p className="setting-hint">Only selected roles can view this category</p>
-            </div>
-            <label className="toggle-switch">
-              <input
-                type="checkbox"
-                checked={isPrivate}
-                onChange={(e) => setIsPrivate(e.target.checked)}
-              />
-              <span className="toggle-slider"></span>
-            </label>
-          </div>
-
-          {isPrivate && (
-            <div className="setting-group">
-              <label>Who can view this category?</label>
-              <div className="role-selector">
-                {availableRoles.map(role => (
-                  <label
-                    key={role.id}
-                    className={`role-checkbox ${allowedRoles.includes(role.id) ? 'checked' : ''}`}
-                  >
-                    <input
-                      type="checkbox"
-                      checked={allowedRoles.includes(role.id)}
-                      onChange={() => toggleRole(role.id)}
-                    />
-                    <span className="role-color" style={{ background: role.color }}></span>
-                    <span className="role-name">{role.name}</span>
-                  </label>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {!isNew && categoryData.channels?.length > 0 && (
-            <div className="setting-group toggle-group">
-              <div className="toggle-info">
-                <label>Sync Permissions</label>
-                <p className="setting-hint">
-                  Sync permissions with {categoryData.channels.length} channels in this category
-                </p>
-              </div>
-              <label className="toggle-switch">
-                <input
-                  type="checkbox"
-                  checked={syncPermissions}
-                  onChange={(e) => setSyncPermissions(e.target.checked)}
-                />
-                <span className="toggle-slider"></span>
-              </label>
-            </div>
-          )}
-
-          {!isNew && (
-            <div className="category-channels">
-              <label>Channels in this Category</label>
-              <div className="channel-list-preview">
-                {(categoryData.channels?.length > 0 ? categoryData.channels : [
-                  { id: 'general', name: 'general', type: 'text' },
-                  { id: 'api-discussion', name: 'api-discussion', type: 'text' },
-                ]).map(ch => (
-                  <div key={ch.id} className="channel-preview-item">
-                    <span className="channel-icon">{ch.type === 'voice' ? '🔊' : '#'}</span>
-                    <span>{ch.name}</span>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-        </div>
-
-        <div className="category-editor-footer">
-          {!isNew && (
-            <button className="delete-category-btn" onClick={onDelete}>
-              Delete Category
-            </button>
-          )}
-          <div className="footer-actions">
-            <button className="cancel-btn" onClick={onClose}>Cancel</button>
-            <button className="save-btn" onClick={handleSave} disabled={!name.trim()}>
-              {isNew ? 'Create Category' : 'Save Changes'}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/ChannelPermissions.jsx b/src/frontend/mockup/ChannelPermissions.jsx
deleted file mode 100644
index 86eb7dd..0000000
--- a/src/frontend/mockup/ChannelPermissions.jsx
+++ /dev/null
@@ -1,182 +0,0 @@
-import React, { useState } from 'react';
-
-const permissionCategories = [
-  {
-    name: 'General Channel Permissions',
-    permissions: [
-      { id: 'view_channel', label: 'View Channel', description: 'Allows members to view this channel' },
-      { id: 'manage_channel', label: 'Manage Channel', description: 'Allows members to change name, description, and settings' },
-      { id: 'manage_permissions', label: 'Manage Permissions', description: 'Allows members to change permission overrides' },
-      { id: 'manage_webhooks', label: 'Manage Webhooks', description: 'Allows members to create, edit and delete webhooks' },
-    ]
-  },
-  {
-    name: 'Text Channel Permissions',
-    permissions: [
-      { id: 'send_messages', label: 'Send Messages', description: 'Allows members to send messages in this channel' },
-      { id: 'send_messages_threads', label: 'Send Messages in Threads', description: 'Allows members to send messages in threads' },
-      { id: 'create_public_threads', label: 'Create Public Threads', description: 'Allows members to create public threads' },
-      { id: 'create_private_threads', label: 'Create Private Threads', description: 'Allows members to create private threads' },
-      { id: 'embed_links', label: 'Embed Links', description: 'Links will show preview embeds' },
-      { id: 'attach_files', label: 'Attach Files', description: 'Allows members to upload files and images' },
-      { id: 'add_reactions', label: 'Add Reactions', description: 'Allows members to add reactions to messages' },
-      { id: 'use_external_emoji', label: 'Use External Emoji', description: 'Allows members to use emoji from other servers' },
-      { id: 'use_external_stickers', label: 'Use External Stickers', description: 'Allows members to use stickers from other servers' },
-      { id: 'mention_everyone', label: 'Mention @everyone', description: 'Allows members to mention @everyone and @here' },
-      { id: 'manage_messages', label: 'Manage Messages', description: 'Allows members to delete and pin messages' },
-      { id: 'manage_threads', label: 'Manage Threads', description: 'Allows members to rename, delete, and archive threads' },
-      { id: 'read_message_history', label: 'Read Message History', description: 'Allows reading of message history' },
-      { id: 'send_tts', label: 'Send TTS Messages', description: 'Allows sending text-to-speech messages' },
-      { id: 'use_application_commands', label: 'Use Application Commands', description: 'Allows using slash commands' },
-    ]
-  },
-  {
-    name: 'Voice Channel Permissions',
-    permissions: [
-      { id: 'connect', label: 'Connect', description: 'Allows members to join this voice channel' },
-      { id: 'speak', label: 'Speak', description: 'Allows members to speak in this voice channel' },
-      { id: 'video', label: 'Video', description: 'Allows members to share video or stream' },
-      { id: 'mute_members', label: 'Mute Members', description: 'Allows muting other members' },
-      { id: 'deafen_members', label: 'Deafen Members', description: 'Allows deafening other members' },
-      { id: 'move_members', label: 'Move Members', description: 'Allows moving members between voice channels' },
-      { id: 'use_vad', label: 'Use Voice Activity', description: 'Allows using voice activity detection instead of push-to-talk' },
-      { id: 'priority_speaker', label: 'Priority Speaker', description: 'Allows using priority speaker mode' },
-      { id: 'request_to_speak', label: 'Request to Speak', description: 'Allows requesting to speak in stage channels' },
-    ]
-  }
-];
-
-export default function ChannelPermissions({ target, channelName, onClose, onSave }) {
-  const targetData = target || {
-    id: 'mod',
-    name: 'Moderator',
-    type: 'role',
-    color: '#5865f2',
-  };
-
-  const [permissions, setPermissions] = useState({});
-  const [searchQuery, setSearchQuery] = useState('');
-
-  const getPermState = (permId) => permissions[permId] || 'neutral';
-
-  const cyclePermission = (permId) => {
-    setPermissions(prev => {
-      const current = prev[permId] || 'neutral';
-      const next = current === 'neutral' ? 'allow' : current === 'allow' ? 'deny' : 'neutral';
-      return { ...prev, [permId]: next };
-    });
-  };
-
-  const setAllPermissions = (state) => {
-    const newPerms = {};
-    permissionCategories.forEach(cat => {
-      cat.permissions.forEach(perm => {
-        newPerms[perm.id] = state;
-      });
-    });
-    setPermissions(newPerms);
-  };
-
-  const handleSave = () => {
-    onSave?.(permissions);
-  };
-
-  const filteredCategories = permissionCategories.map(cat => ({
-    ...cat,
-    permissions: cat.permissions.filter(p =>
-      p.label.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      p.description.toLowerCase().includes(searchQuery.toLowerCase())
-    )
-  })).filter(cat => cat.permissions.length > 0);
-
-  return (
-    <div className="modal-overlay" onClick={onClose}>
-      <div className="channel-permissions-modal" onClick={(e) => e.stopPropagation()}>
-        <div className="permissions-header">
-          <div className="permissions-title">
-            <h2>Edit Permissions</h2>
-            <span className="permissions-context">
-              {targetData.type === 'role' ? '@' : ''}
-              <span style={targetData.color ? { color: targetData.color } : {}}>
-                {targetData.name}
-              </span>
-              <span className="channel-ref">in #{channelName || 'general'}</span>
-            </span>
-          </div>
-          <button className="permissions-close" onClick={onClose}>✕</button>
-        </div>
-
-        <div className="permissions-toolbar">
-          <input
-            type="text"
-            className="permissions-search"
-            placeholder="Search permissions..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-          />
-          <div className="bulk-actions">
-            <button onClick={() => setAllPermissions('allow')}>Allow All</button>
-            <button onClick={() => setAllPermissions('neutral')}>Clear All</button>
-            <button onClick={() => setAllPermissions('deny')}>Deny All</button>
-          </div>
-        </div>
-
-        <div className="permissions-legend">
-          <div className="legend-item">
-            <span className="legend-icon allow">✓</span>
-            <span>Allow</span>
-          </div>
-          <div className="legend-item">
-            <span className="legend-icon neutral">/</span>
-            <span>Inherit</span>
-          </div>
-          <div className="legend-item">
-            <span className="legend-icon deny">✕</span>
-            <span>Deny</span>
-          </div>
-        </div>
-
-        <div className="permissions-list">
-          {filteredCategories.map(category => (
-            <div key={category.name} className="permission-category">
-              <h3>{category.name}</h3>
-              {category.permissions.map(perm => (
-                <div key={perm.id} className="permission-row">
-                  <div className="permission-info">
-                    <span className="permission-label">{perm.label}</span>
-                    <span className="permission-desc">{perm.description}</span>
-                  </div>
-                  <div className="permission-toggles">
-                    <button
-                      className={`perm-btn allow ${getPermState(perm.id) === 'allow' ? 'active' : ''}`}
-                      onClick={() => setPermissions(p => ({ ...p, [perm.id]: 'allow' }))}
-                    >
-                      ✓
-                    </button>
-                    <button
-                      className={`perm-btn neutral ${getPermState(perm.id) === 'neutral' ? 'active' : ''}`}
-                      onClick={() => setPermissions(p => ({ ...p, [perm.id]: 'neutral' }))}
-                    >
-                      /
-                    </button>
-                    <button
-                      className={`perm-btn deny ${getPermState(perm.id) === 'deny' ? 'active' : ''}`}
-                      onClick={() => setPermissions(p => ({ ...p, [perm.id]: 'deny' }))}
-                    >
-                      ✕
-                    </button>
-                  </div>
-                </div>
-              ))}
-            </div>
-          ))}
-        </div>
-
-        <div className="permissions-footer">
-          <button className="cancel-btn" onClick={onClose}>Cancel</button>
-          <button className="save-btn" onClick={handleSave}>Save Permissions</button>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/ChannelSettings.jsx b/src/frontend/mockup/ChannelSettings.jsx
deleted file mode 100644
index 9e2550f..0000000
--- a/src/frontend/mockup/ChannelSettings.jsx
+++ /dev/null
@@ -1,271 +0,0 @@
-import React, { useState } from 'react';
-
-export default function ChannelSettings({ channel, onClose, onSave }) {
-  const [activeTab, setActiveTab] = useState('overview');
-  
-  const channelData = channel || {
-    id: 'general',
-    name: 'general',
-    type: 'text',
-    topic: 'Welcome to the general chat!',
-    slowMode: 0,
-    nsfw: false,
-    category: 'Development',
-  };
-
-  const [name, setName] = useState(channelData.name);
-  const [topic, setTopic] = useState(channelData.topic);
-  const [slowMode, setSlowMode] = useState(channelData.slowMode);
-  const [nsfw, setNsfw] = useState(channelData.nsfw);
-
-  const tabs = [
-    { id: 'overview', label: 'Overview', icon: '📋' },
-    { id: 'permissions', label: 'Permissions', icon: '🔒' },
-    { id: 'invites', label: 'Invites', icon: '✉️' },
-    { id: 'integrations', label: 'Integrations', icon: '🔗' },
-  ];
-
-  const slowModeOptions = [
-    { value: 0, label: 'Off' },
-    { value: 5, label: '5s' },
-    { value: 10, label: '10s' },
-    { value: 15, label: '15s' },
-    { value: 30, label: '30s' },
-    { value: 60, label: '1m' },
-    { value: 300, label: '5m' },
-    { value: 600, label: '10m' },
-    { value: 900, label: '15m' },
-    { value: 1800, label: '30m' },
-    { value: 3600, label: '1h' },
-    { value: 7200, label: '2h' },
-    { value: 21600, label: '6h' },
-  ];
-
-  const permissionOverrides = [
-    { id: 'founder', name: 'Founder', color: '#ff0000', type: 'role', allow: ['all'], deny: [] },
-    { id: 'mod', name: 'Moderator', color: '#5865f2', type: 'role', allow: ['manage_messages'], deny: [] },
-    { id: 'user123', name: 'SpecificUser', color: null, type: 'member', allow: [], deny: ['send_messages'] },
-  ];
-
-  const handleSave = () => {
-    onSave?.({ name, topic, slowMode, nsfw });
-    onClose?.();
-  };
-
-  return (
-    <div className="modal-overlay" onClick={onClose}>
-      <div className="channel-settings-modal" onClick={(e) => e.stopPropagation()}>
-        <div className="settings-sidebar">
-          <div className="settings-channel-info">
-            <span className="channel-hash">#</span>
-            <span className="settings-channel-name">{name}</span>
-          </div>
-
-          <div className="settings-nav">
-            {tabs.map(tab => (
-              <div
-                key={tab.id}
-                className={`settings-nav-item ${activeTab === tab.id ? 'active' : ''}`}
-                onClick={() => setActiveTab(tab.id)}
-              >
-                <span className="nav-icon">{tab.icon}</span>
-                <span>{tab.label}</span>
-              </div>
-            ))}
-
-            <div className="settings-divider"></div>
-
-            <div className="settings-nav-item danger">
-              <span className="nav-icon">🗑️</span>
-              <span>Delete Channel</span>
-            </div>
-          </div>
-        </div>
-
-        <div className="settings-content">
-          <div className="settings-header">
-            <h2>{tabs.find(t => t.id === activeTab)?.label}</h2>
-            <button className="settings-close" onClick={onClose}>✕</button>
-          </div>
-
-          {activeTab === 'overview' && (
-            <div className="channel-overview">
-              <div className="setting-group">
-                <label>Channel Name</label>
-                <div className="channel-name-input">
-                  <span className="input-prefix">#</span>
-                  <input
-                    type="text"
-                    value={name}
-                    onChange={(e) => setName(e.target.value.toLowerCase().replace(/\s+/g, '-'))}
-                  />
-                </div>
-              </div>
-
-              <div className="setting-group">
-                <label>Channel Topic</label>
-                <textarea
-                  className="setting-textarea"
-                  value={topic}
-                  onChange={(e) => setTopic(e.target.value)}
-                  placeholder="Let everyone know what this channel is about"
-                  maxLength={1024}
-                />
-                <span className="char-count">{topic.length}/1024</span>
-              </div>
-
-              <div className="setting-group">
-                <label>Slowmode</label>
-                <div className="slowmode-select">
-                  <select value={slowMode} onChange={(e) => setSlowMode(parseInt(e.target.value))}>
-                    {slowModeOptions.map(opt => (
-                      <option key={opt.value} value={opt.value}>{opt.label}</option>
-                    ))}
-                  </select>
-                </div>
-                <p className="setting-hint">Members can only send one message per this interval</p>
-              </div>
-
-              <div className="setting-group toggle-group">
-                <div className="toggle-info">
-                  <label>NSFW Channel</label>
-                  <p className="setting-hint">Users must verify their age to view content</p>
-                </div>
-                <label className="toggle-switch">
-                  <input type="checkbox" checked={nsfw} onChange={(e) => setNsfw(e.target.checked)} />
-                  <span className="toggle-slider"></span>
-                </label>
-              </div>
-
-              <div className="setting-group">
-                <label>Category</label>
-                <select className="setting-select" defaultValue={channelData.category}>
-                  <option>Announcements</option>
-                  <option>Development</option>
-                  <option>Support</option>
-                  <option>Voice Channels</option>
-                  <option>No Category</option>
-                </select>
-              </div>
-            </div>
-          )}
-
-          {activeTab === 'permissions' && (
-            <div className="channel-permissions">
-              <div className="permissions-info">
-                <p>Channel permissions override server-level permissions for specific roles or members.</p>
-              </div>
-
-              <div className="permissions-section">
-                <div className="section-header">
-                  <h3>Roles/Members</h3>
-                  <button className="add-override-btn">+ Add Role or Member</button>
-                </div>
-
-                <div className="overrides-list">
-                  {permissionOverrides.map(override => (
-                    <div key={override.id} className="override-item">
-                      <div className="override-info">
-                        {override.type === 'role' ? (
-                          <span className="role-indicator" style={{ background: override.color }}>@</span>
-                        ) : (
-                          <span className="member-indicator">👤</span>
-                        )}
-                        <span className="override-name" style={override.color ? { color: override.color } : {}}>
-                          {override.name}
-                        </span>
-                        <span className="override-type">{override.type}</span>
-                      </div>
-                      <div className="override-actions">
-                        <button className="edit-override">Edit</button>
-                        <button className="remove-override">✕</button>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </div>
-
-              <div className="permissions-section">
-                <h3>Advanced Permissions</h3>
-                <div className="advanced-perms-grid">
-                  <div className="perm-category">
-                    <h4>General Channel Permissions</h4>
-                    <div className="perm-item">
-                      <span>View Channel</span>
-                      <div className="perm-toggles">
-                        <button className="perm-btn allow">✓</button>
-                        <button className="perm-btn neutral active">/</button>
-                        <button className="perm-btn deny">✕</button>
-                      </div>
-                    </div>
-                    <div className="perm-item">
-                      <span>Manage Channel</span>
-                      <div className="perm-toggles">
-                        <button className="perm-btn allow">✓</button>
-                        <button className="perm-btn neutral active">/</button>
-                        <button className="perm-btn deny">✕</button>
-                      </div>
-                    </div>
-                  </div>
-
-                  <div className="perm-category">
-                    <h4>Text Channel Permissions</h4>
-                    <div className="perm-item">
-                      <span>Send Messages</span>
-                      <div className="perm-toggles">
-                        <button className="perm-btn allow active">✓</button>
-                        <button className="perm-btn neutral">/</button>
-                        <button className="perm-btn deny">✕</button>
-                      </div>
-                    </div>
-                    <div className="perm-item">
-                      <span>Embed Links</span>
-                      <div className="perm-toggles">
-                        <button className="perm-btn allow active">✓</button>
-                        <button className="perm-btn neutral">/</button>
-                        <button className="perm-btn deny">✕</button>
-                      </div>
-                    </div>
-                    <div className="perm-item">
-                      <span>Attach Files</span>
-                      <div className="perm-toggles">
-                        <button className="perm-btn allow">✓</button>
-                        <button className="perm-btn neutral active">/</button>
-                        <button className="perm-btn deny">✕</button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {activeTab === 'invites' && (
-            <div className="channel-invites">
-              <p className="no-invites">No invites have been created for this channel yet.</p>
-              <button className="create-invite-btn">Create Invite</button>
-            </div>
-          )}
-
-          {activeTab === 'integrations' && (
-            <div className="channel-integrations">
-              <div className="integration-section">
-                <h3>Webhooks</h3>
-                <p className="integration-desc">Webhooks allow external services to send messages to this channel.</p>
-                <button className="create-webhook-btn">Create Webhook</button>
-              </div>
-            </div>
-          )}
-
-          <div className="settings-save-bar">
-            <span>Careful — you have unsaved changes!</span>
-            <div className="save-actions">
-              <button className="reset-btn" onClick={onClose}>Reset</button>
-              <button className="save-btn" onClick={handleSave}>Save Changes</button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/ChannelSidebar.jsx b/src/frontend/mockup/ChannelSidebar.jsx
deleted file mode 100644
index a552971..0000000
--- a/src/frontend/mockup/ChannelSidebar.jsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import React, { useState } from 'react';
-import UserSettingsBar from './UserSettingsBar';
-import VoiceChannel from './VoiceChannel';
-
-const channels = [
-  { category: 'Announcements', items: [
-    { id: 'updates', icon: '📢', name: 'updates', badge: 3 },
-    { id: 'changelog', icon: '📜', name: 'changelog' },
-  ]},
-  { category: 'Development', items: [
-    { id: 'general', icon: '#', name: 'general' },
-    { id: 'api-discussion', icon: '#', name: 'api-discussion' },
-    { id: 'passport-development', icon: '#', name: 'passport-development' },
-  ]},
-  { category: 'Support', items: [
-    { id: 'help', icon: '❓', name: 'help' },
-    { id: 'bug-reports', icon: '🐛', name: 'bug-reports' },
-  ]},
-];
-
-const voiceChannels = [
-  { id: 'nexus-lounge', name: 'Nexus Lounge', users: [
-    { id: 1, name: 'Trevor', avatar: 'T', color: '#ff0000', speaking: true, muted: false },
-    { id: 2, name: 'Sarah', avatar: 'S', color: '#ffa500', speaking: false, muted: true },
-    { id: 3, name: 'DevUser_2847', avatar: 'D', color: '#666', speaking: false, muted: false, streaming: true },
-  ]},
-  { id: 'collab-space', name: 'Collab Space', users: [] },
-];
-
-export default function ChannelSidebar({ onCreateChannel, onSettingsClick, onJoinVoice }) {
-  const [activeChannel, setActiveChannel] = useState('general');
-  const [expandedVoice, setExpandedVoice] = useState(['nexus-lounge']);
-  const [hoveredCategory, setHoveredCategory] = useState(null);
-
-  return (
-    <div className="channel-sidebar">
-      <div className="server-header">
-        <span>AeThex Foundation</span>
-        <span className="server-badge foundation">Official</span>
-      </div>
-      
-      <div className="channel-list">
-        {channels.map((category) => (
-          <div key={category.category}>
-            <div 
-              className="channel-category"
-              onMouseEnter={() => setHoveredCategory(category.category)}
-              onMouseLeave={() => setHoveredCategory(null)}
-            >
-              {category.category}
-              {hoveredCategory === category.category && onCreateChannel && (
-                <button 
-                  className="category-add-btn" 
-                  onClick={(e) => { e.stopPropagation(); onCreateChannel(); }}
-                  title="Create Channel"
-                >
-                  +
-                </button>
-              )}
-            </div>
-            {category.items.map((channel) => (
-              <div
-                key={channel.id}
-                className={`channel-item${activeChannel === channel.id ? ' active' : ''}`}
-                onClick={() => setActiveChannel(channel.id)}
-              >
-                <span className="channel-icon">{channel.icon}</span>
-                <span className="channel-name">{channel.name}</span>
-                {channel.badge && <span className="channel-badge">{channel.badge}</span>}
-              </div>
-            ))}
-          </div>
-        ))}
-        
-        {/* Voice Channels */}
-        <div 
-          className="channel-category"
-          onMouseEnter={() => setHoveredCategory('voice')}
-          onMouseLeave={() => setHoveredCategory(null)}
-        >
-          Voice Channels
-          {hoveredCategory === 'voice' && onCreateChannel && (
-            <button 
-              className="category-add-btn" 
-              onClick={(e) => { e.stopPropagation(); onCreateChannel(); }}
-              title="Create Channel"
-            >
-              +
-            </button>
-          )}
-        </div>
-        {voiceChannels.map((vc) => (
-          <VoiceChannel
-            key={vc.id}
-            channel={vc}
-            expanded={expandedVoice.includes(vc.id)}
-            onToggle={() => {
-              setExpandedVoice((prev) =>
-                prev.includes(vc.id)
-                  ? prev.filter((id) => id !== vc.id)
-                  : [...prev, vc.id]
-              );
-            }}
-            onJoin={onJoinVoice}
-          />
-        ))}
-      </div>
-      
-      <UserSettingsBar onSettingsClick={onSettingsClick} />
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/ChatArea.jsx b/src/frontend/mockup/ChatArea.jsx
deleted file mode 100644
index 9cd1ce7..0000000
--- a/src/frontend/mockup/ChatArea.jsx
+++ /dev/null
@@ -1,283 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import MessageActions from './MessageActions';
-import TypingIndicator from './TypingIndicator';
-import EmojiPicker from './EmojiPicker';
-
-const initialMessages = [
-  {
-    type: 'system',
-    division: 'foundation',
-    label: '[FOUNDATION] System Announcement',
-    text: 'Foundation authentication services upgraded to v2.1.0. Enhanced security protocols now active across all AeThex infrastructure.',
-  },
-  {
-    type: 'message',
-    id: 1,
-    author: 'Trevor',
-    badge: 'foundation',
-    badgeLabel: 'Foundation',
-    time: '10:34 AM',
-    avatar: { initial: 'T', gradient: 'linear-gradient(135deg, #ff0000, #cc0000)' },
-    text: 'Just pushed the authentication updates. All services should automatically migrate to the new protocols within 24 hours.',
-    reactions: [{ emoji: '🔥', count: 3, reacted: true }, { emoji: '👍', count: 2, reacted: false }],
-  },
-  {
-    type: 'message',
-    id: 2,
-    author: 'Marcus',
-    time: '10:41 AM',
-    avatar: { initial: 'M', gradient: 'linear-gradient(135deg, #0066ff, #003380)' },
-    text: "Excellent work! I've been testing the new Passport integration and it's incredibly smooth. The Trinity color-coding in the UI makes it really clear which division is handling what.",
-  },
-  {
-    type: 'system',
-    division: 'labs',
-    label: '[LABS] Experimental Feature Alert',
-    text: 'Nexus Engine v2.0-beta now available for testing. New cross-platform sync reduces latency by 40%. Join #labs-testing to participate.',
-  },
-  {
-    type: 'message',
-    id: 3,
-    author: 'Sarah',
-    badge: 'labs',
-    badgeLabel: 'Labs',
-    time: '11:15 AM',
-    avatar: { initial: 'S', gradient: 'linear-gradient(135deg, #ffa500, #ff8c00)' },
-    text: 'The Nexus v2 parallel compilation is insane. Cut my build time from 3 minutes to under 2. Still some edge cases with complex state synchronization but wow...',
-    reactions: [{ emoji: '🚀', count: 5, reacted: true }],
-  },
-  {
-    type: 'message',
-    id: 4,
-    author: 'Anderson',
-    badge: 'foundation',
-    badgeLabel: 'Founder',
-    time: '11:47 AM',
-    avatar: { initial: 'A', gradient: 'linear-gradient(135deg, #ff0000, #0066ff, #ffa500)' },
-    text: 'Love seeing the Trinity infrastructure working in harmony. Foundation keeping everything secure, Labs pushing the boundaries, Corporation delivering production-ready tools. This is exactly the vision.',
-    reactions: [{ emoji: '❤️', count: 8, reacted: false }, { emoji: '🔥', count: 4, reacted: true }],
-  },
-  {
-    type: 'message',
-    id: 5,
-    author: 'DevUser_2847',
-    time: '12:03 PM',
-    avatar: { initial: 'D' },
-    text: 'Quick question - when using AeThex Studio, does the Terminal automatically connect to all three Trinity divisions, or do I need to configure that?',
-  },
-  {
-    type: 'system',
-    division: 'corporation',
-    label: '[CORPORATION] Service Update',
-    text: 'AeThex Studio Pro users: New Railway deployment templates available. Optimized configurations for Foundation APIs, Corporation services, and Labs experiments.',
-  },
-];
-
-export default function ChatArea({ onOpenSearch, onOpenThread, onPinnedClick, onNotificationsClick, onContextMenu }) {
-  const [messages, setMessages] = useState(initialMessages);
-  const [inputValue, setInputValue] = useState('');
-  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
-  const [hoveredMessage, setHoveredMessage] = useState(null);
-  const [typingUsers] = useState(['Sarah', 'Marcus']); // Simulated typing
-  const messagesEndRef = useRef(null);
-
-  const scrollToBottom = () => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  };
-
-  useEffect(() => {
-    scrollToBottom();
-  }, [messages]);
-
-  const handleSend = () => {
-    if (!inputValue.trim()) return;
-    
-    const newMessage = {
-      type: 'message',
-      id: Date.now(),
-      author: 'You',
-      time: new Date().toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }),
-      avatar: { initial: 'Y', gradient: 'linear-gradient(135deg, #0066ff, #003380)' },
-      text: inputValue,
-    };
-    
-    setMessages([...messages, newMessage]);
-    setInputValue('');
-  };
-
-  const handleKeyPress = (e) => {
-    if (e.key === 'Enter') {
-      handleSend();
-    }
-  };
-
-  const handleEmojiSelect = (emoji) => {
-    setInputValue((prev) => prev + emoji);
-    setShowEmojiPicker(false);
-  };
-
-  const handleReaction = (messageId, emoji) => {
-    setMessages((prev) =>
-      prev.map((msg) => {
-        if (msg.id !== messageId) return msg;
-        const reactions = msg.reactions || [];
-        const existing = reactions.find((r) => r.emoji === emoji);
-        if (existing) {
-          return {
-            ...msg,
-            reactions: reactions.map((r) =>
-              r.emoji === emoji
-                ? { ...r, count: r.reacted ? r.count - 1 : r.count + 1, reacted: !r.reacted }
-                : r
-            ).filter((r) => r.count > 0),
-          };
-        }
-        return {
-          ...msg,
-          reactions: [...reactions, { emoji, count: 1, reacted: true }],
-        };
-      })
-    );
-  };
-
-  return (
-    <div className="chat-area">
-      <div className="chat-header">
-        <span className="channel-name-header"># general</span>
-        <div className="chat-tools">
-          <span 
-            className="chat-tool" 
-            onClick={onNotificationsClick} 
-            style={{ cursor: 'pointer' }}
-            title="Notifications"
-          >
-            🔔
-          </span>
-          <span 
-            className="chat-tool" 
-            onClick={onPinnedClick} 
-            style={{ cursor: 'pointer' }}
-            title="Pinned Messages"
-          >
-            📌
-          </span>
-          <span className="chat-tool">👥 128</span>
-          <span className="chat-tool" onClick={onOpenSearch} style={{ cursor: 'pointer' }} title="Search">🔍</span>
-        </div>
-      </div>
-      
-      <div className="chat-messages">
-        {messages.map((msg, idx) => {
-          if (msg.type === 'system') {
-            return (
-              <div key={`system-${idx}`} className={`message-system ${msg.division}`}>
-                <div className={`system-label ${msg.division}`}>{msg.label}</div>
-                <div>{msg.text}</div>
-              </div>
-            );
-          }
-          
-          return (
-            <div 
-              key={msg.id} 
-              className="message"
-              onMouseEnter={() => setHoveredMessage(msg.id)}
-              onMouseLeave={() => setHoveredMessage(null)}
-            >
-              <div 
-                className="message-avatar" 
-                style={msg.avatar.gradient ? { background: msg.avatar.gradient } : undefined}
-              >
-                {msg.avatar.initial}
-              </div>
-              <div className="message-content">
-                <div className="message-header">
-                  <span className="message-author">{msg.author}</span>
-                  {msg.badge && (
-                    <span className={`message-badge ${msg.badge}`}>{msg.badgeLabel}</span>
-                  )}
-                  <span className="message-time">{msg.time}</span>
-                </div>
-                <div className="message-text">{msg.text}</div>
-                
-                {/* Reactions */}
-                {msg.reactions && msg.reactions.length > 0 && (
-                  <div className="message-reactions" style={{ display: 'flex', gap: '6px', marginTop: '6px' }}>
-                    {msg.reactions.map((r) => (
-                      <button
-                        key={r.emoji}
-                        onClick={() => handleReaction(msg.id, r.emoji)}
-                        style={{
-                          display: 'flex',
-                          alignItems: 'center',
-                          gap: '4px',
-                          padding: '2px 8px',
-                          background: r.reacted ? 'rgba(88, 101, 242, 0.3)' : '#2f3136',
-                          border: r.reacted ? '1px solid #5865f2' : '1px solid transparent',
-                          borderRadius: '4px',
-                          cursor: 'pointer',
-                          fontSize: '0.85em',
-                        }}
-                      >
-                        <span>{r.emoji}</span>
-                        <span style={{ color: r.reacted ? '#5865f2' : '#b9bbbe' }}>{r.count}</span>
-                      </button>
-                    ))}
-                  </div>
-                )}
-              </div>
-              
-              {/* Message Actions on Hover */}
-              {hoveredMessage === msg.id && (
-                <MessageActions
-                  onReact={(emoji) => handleReaction(msg.id, emoji)}
-                  onReply={() => onOpenThread && onOpenThread(msg)}
-                  onThread={() => onOpenThread && onOpenThread(msg)}
-                  isOwn={msg.author === 'You'}
-                />
-              )}
-            </div>
-          );
-        })}
-        <div ref={messagesEndRef} />
-      </div>
-      
-      {/* Typing Indicator */}
-      {typingUsers.length > 0 && <TypingIndicator users={typingUsers} />}
-      
-      <div className="message-input-container" style={{ position: 'relative' }}>
-        <button
-          onClick={() => setShowEmojiPicker(!showEmojiPicker)}
-          style={{
-            position: 'absolute',
-            right: '12px',
-            top: '50%',
-            transform: 'translateY(-50%)',
-            background: 'none',
-            border: 'none',
-            cursor: 'pointer',
-            fontSize: '1.2em',
-            zIndex: 10,
-          }}
-        >
-          😊
-        </button>
-        <input
-          type="text"
-          className="message-input"
-          placeholder="Message #general (Foundation infrastructure channel)"
-          value={inputValue}
-          onChange={(e) => setInputValue(e.target.value)}
-          onKeyPress={handleKeyPress}
-          style={{ paddingRight: '48px' }}
-        />
-        {showEmojiPicker && (
-          <EmojiPicker
-            onSelect={handleEmojiSelect}
-            onClose={() => setShowEmojiPicker(false)}
-          />
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/ContextMenu.jsx b/src/frontend/mockup/ContextMenu.jsx
deleted file mode 100644
index b81103b..0000000
--- a/src/frontend/mockup/ContextMenu.jsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-
-export default function ContextMenu({ x, y, type, data, onClose, onAction }) {
-  const menuRef = useRef(null);
-
-  useEffect(() => {
-    const handleClickOutside = (e) => {
-      if (menuRef.current && !menuRef.current.contains(e.target)) {
-        onClose?.();
-      }
-    };
-    const handleEscape = (e) => {
-      if (e.key === 'Escape') onClose?.();
-    };
-    
-    document.addEventListener('mousedown', handleClickOutside);
-    document.addEventListener('keydown', handleEscape);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('keydown', handleEscape);
-    };
-  }, [onClose]);
-
-  const menuItems = {
-    message: [
-      { id: 'add-reaction', label: 'Add Reaction', icon: '😀' },
-      { divider: true },
-      { id: 'reply', label: 'Reply', icon: '↩️' },
-      { id: 'create-thread', label: 'Create Thread', icon: '🧵' },
-      { divider: true },
-      { id: 'edit', label: 'Edit Message', icon: '✏️', ownerOnly: true },
-      { id: 'pin', label: 'Pin Message', icon: '📌' },
-      { id: 'mark-unread', label: 'Mark Unread', icon: '📩' },
-      { id: 'copy-text', label: 'Copy Text', icon: '📋' },
-      { id: 'copy-link', label: 'Copy Message Link', icon: '🔗' },
-      { divider: true },
-      { id: 'speak', label: 'Speak Message', icon: '🔊' },
-      { divider: true },
-      { id: 'delete', label: 'Delete Message', icon: '🗑️', danger: true, ownerOnly: true },
-      { id: 'report', label: 'Report Message', icon: '🚩', danger: true },
-    ],
-    user: [
-      { id: 'profile', label: 'Profile', icon: '👤' },
-      { id: 'mention', label: 'Mention', icon: '@' },
-      { id: 'message', label: 'Message', icon: '💬' },
-      { divider: true },
-      { id: 'call', label: 'Call', icon: '📞' },
-      { id: 'video-call', label: 'Video Call', icon: '📹' },
-      { divider: true },
-      { id: 'add-note', label: 'Add Note', icon: '📝' },
-      { id: 'add-friend', label: 'Add Friend', icon: '👋' },
-      { divider: true },
-      { id: 'invite', label: 'Invite to Server', icon: '➕', submenu: true },
-      { divider: true },
-      { id: 'mute', label: 'Mute', icon: '🔇' },
-      { id: 'block', label: 'Block', icon: '🚫', danger: true },
-      { id: 'report', label: 'Report', icon: '🚩', danger: true },
-    ],
-    channel: [
-      { id: 'mark-read', label: 'Mark As Read', icon: '✓' },
-      { divider: true },
-      { id: 'mute', label: 'Mute Channel', icon: '🔇', submenu: true },
-      { id: 'notification-settings', label: 'Notification Settings', icon: '🔔' },
-      { divider: true },
-      { id: 'edit', label: 'Edit Channel', icon: '✏️' },
-      { id: 'duplicate', label: 'Duplicate Channel', icon: '📋' },
-      { id: 'create-invite', label: 'Create Invite', icon: '✉️' },
-      { divider: true },
-      { id: 'copy-link', label: 'Copy Channel Link', icon: '🔗' },
-      { id: 'copy-id', label: 'Copy Channel ID', icon: '#️⃣' },
-      { divider: true },
-      { id: 'delete', label: 'Delete Channel', icon: '🗑️', danger: true },
-    ],
-    server: [
-      { id: 'mark-read', label: 'Mark As Read', icon: '✓' },
-      { divider: true },
-      { id: 'invite-people', label: 'Invite People', icon: '👋' },
-      { divider: true },
-      { id: 'mute', label: 'Mute Server', icon: '🔇', submenu: true },
-      { id: 'notification-settings', label: 'Notification Settings', icon: '🔔' },
-      { id: 'hide-muted', label: 'Hide Muted Channels', icon: '👁️' },
-      { divider: true },
-      { id: 'privacy-settings', label: 'Privacy Settings', icon: '🔒' },
-      { id: 'edit-nickname', label: 'Edit Server Nickname', icon: '✏️' },
-      { divider: true },
-      { id: 'server-settings', label: 'Server Settings', icon: '⚙️' },
-      { id: 'create-channel', label: 'Create Channel', icon: '➕' },
-      { id: 'create-category', label: 'Create Category', icon: '📁' },
-      { divider: true },
-      { id: 'copy-id', label: 'Copy Server ID', icon: '#️⃣' },
-      { divider: true },
-      { id: 'leave', label: 'Leave Server', icon: '🚪', danger: true },
-    ],
-  };
-
-  const items = menuItems[type] || [];
-  const isOwn = data?.isOwn;
-
-  // Adjust position to stay within viewport
-  const adjustedStyle = {
-    position: 'fixed',
-    top: y,
-    left: x,
-    zIndex: 10000,
-  };
-
-  return (
-    <div className="context-menu" ref={menuRef} style={adjustedStyle}>
-      {items.map((item, idx) => {
-        if (item.divider) {
-          return <div key={`divider-${idx}`} className="context-menu-divider" />;
-        }
-        
-        if (item.ownerOnly && !isOwn) return null;
-
-        return (
-          <div
-            key={item.id}
-            className={`context-menu-item ${item.danger ? 'danger' : ''}`}
-            onClick={() => {
-              onAction?.(item.id, data);
-              onClose?.();
-            }}
-          >
-            <span className="context-menu-icon">{item.icon}</span>
-            <span className="context-menu-label">{item.label}</span>
-            {item.submenu && <span className="context-menu-arrow">▶</span>}
-          </div>
-        );
-      })}
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/CreateChannelModal.jsx b/src/frontend/mockup/CreateChannelModal.jsx
deleted file mode 100644
index 591b8b0..0000000
--- a/src/frontend/mockup/CreateChannelModal.jsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import React, { useState } from 'react';
-
-export default function CreateChannelModal({ category, onClose, onCreate }) {
-  const [channelType, setChannelType] = useState('text');
-  const [channelName, setChannelName] = useState('');
-  const [isPrivate, setIsPrivate] = useState(false);
-
-  const channelTypes = [
-    { id: 'text', icon: '#', label: 'Text', description: 'Send messages, images, GIFs, emoji, opinions, and puns' },
-    { id: 'voice', icon: '🔊', label: 'Voice', description: 'Hang out together with voice, video, and screen share' },
-    { id: 'forum', icon: '💬', label: 'Forum', description: 'Create a space for organized discussions' },
-    { id: 'announcement', icon: '📢', label: 'Announcement', description: 'Important updates followers can subscribe to' },
-    { id: 'stage', icon: '🎭', label: 'Stage', description: 'Host events with moderated discussions' },
-  ];
-
-  const handleCreate = () => {
-    if (!channelName.trim()) return;
-    
-    onCreate?.({
-      type: channelType,
-      name: channelName.toLowerCase().replace(/\s+/g, '-'),
-      isPrivate,
-      category,
-    });
-    onClose?.();
-  };
-
-  return (
-    <div className="modal-overlay" onClick={onClose}>
-      <div className="create-channel-modal" onClick={(e) => e.stopPropagation()}>
-        <div className="modal-header">
-          <h2>Create Channel</h2>
-          {category && <span className="category-name">in {category}</span>}
-          <button className="modal-close" onClick={onClose}>✕</button>
-        </div>
-
-        <div className="modal-content">
-          <div className="channel-type-section">
-            <label className="section-label">CHANNEL TYPE</label>
-            <div className="channel-types">
-              {channelTypes.map((type) => (
-                <label 
-                  key={type.id}
-                  className={`channel-type-option ${channelType === type.id ? 'selected' : ''}`}
-                >
-                  <input
-                    type="radio"
-                    name="channelType"
-                    value={type.id}
-                    checked={channelType === type.id}
-                    onChange={() => setChannelType(type.id)}
-                  />
-                  <span className="type-icon">{type.icon}</span>
-                  <div className="type-info">
-                    <span className="type-label">{type.label}</span>
-                    <span className="type-description">{type.description}</span>
-                  </div>
-                </label>
-              ))}
-            </div>
-          </div>
-
-          <div className="channel-name-section">
-            <label className="section-label">CHANNEL NAME</label>
-            <div className="channel-name-input">
-              <span className="channel-prefix">
-                {channelType === 'text' ? '#' : 
-                 channelType === 'voice' ? '🔊' : 
-                 channelType === 'forum' ? '💬' :
-                 channelType === 'announcement' ? '📢' : '🎭'}
-              </span>
-              <input
-                type="text"
-                placeholder="new-channel"
-                value={channelName}
-                onChange={(e) => setChannelName(e.target.value)}
-                maxLength={100}
-              />
-            </div>
-          </div>
-
-          <div className="channel-privacy-section">
-            <label className="privacy-toggle">
-              <div className="privacy-info">
-                <span className="privacy-icon">🔒</span>
-                <div>
-                  <span className="privacy-label">Private Channel</span>
-                  <span className="privacy-description">
-                    Only selected members and roles will be able to view this channel.
-                  </span>
-                </div>
-              </div>
-              <input
-                type="checkbox"
-                checked={isPrivate}
-                onChange={(e) => setIsPrivate(e.target.checked)}
-              />
-            </label>
-          </div>
-        </div>
-
-        <div className="modal-footer">
-          <button className="modal-cancel" onClick={onClose}>Cancel</button>
-          <button 
-            className="modal-submit"
-            onClick={handleCreate}
-            disabled={!channelName.trim()}
-          >
-            Create Channel
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/DMsView.jsx b/src/frontend/mockup/DMsView.jsx
deleted file mode 100644
index 1ef8284..0000000
--- a/src/frontend/mockup/DMsView.jsx
+++ /dev/null
@@ -1,242 +0,0 @@
-import React, { useState } from 'react';
-
-const friends = [
-  { id: 1, name: 'Trevor', tag: 'Trevor#0042', avatar: 'T', gradient: 'linear-gradient(135deg, #ff0000, #cc0000)', status: 'online', activity: 'Working on AeThex' },
-  { id: 2, name: 'Sarah', tag: 'Sarah#1337', avatar: 'S', gradient: 'linear-gradient(135deg, #ffa500, #ff8c00)', status: 'online', activity: 'Playing Valorant' },
-  { id: 3, name: 'Marcus', tag: 'Marcus#2048', avatar: 'M', gradient: 'linear-gradient(135deg, #0066ff, #003380)', status: 'idle' },
-  { id: 4, name: 'DevUser_2847', tag: 'DevUser_2847#2847', avatar: 'D', status: 'dnd', activity: 'Do Not Disturb' },
-  { id: 5, name: 'JohnDev', tag: 'JohnDev#9999', avatar: 'J', status: 'offline' },
-];
-
-const dmConversations = [
-  { id: 1, user: friends[0], lastMessage: 'The auth system is ready!', time: '2m', unread: 2 },
-  { id: 2, user: friends[1], lastMessage: 'Check out the new Nexus build', time: '15m', unread: 0 },
-  { id: 3, user: friends[2], lastMessage: 'Thanks for the help!', time: '1h', unread: 0 },
-  { id: 4, user: { name: 'Group Chat', avatar: '👥', isGroup: true, members: ['Trevor', 'Sarah', 'Marcus'] }, lastMessage: 'Sarah: Let\'s sync up tomorrow', time: '3h', unread: 5 },
-];
-
-const pendingRequests = [
-  { id: 1, name: 'NewDev123', tag: 'NewDev123#4567', avatar: 'N', type: 'incoming', mutualServers: 2 },
-  { id: 2, name: 'CoolCoder', tag: 'CoolCoder#8899', avatar: 'C', type: 'outgoing' },
-];
-
-export default function DMsView({ onSelectDM, onOpenProfile }) {
-  const [activeTab, setActiveTab] = useState('online');
-  const [searchQuery, setSearchQuery] = useState('');
-
-  const tabs = [
-    { id: 'online', label: 'Online' },
-    { id: 'all', label: 'All' },
-    { id: 'pending', label: 'Pending', count: pendingRequests.length },
-    { id: 'blocked', label: 'Blocked' },
-    { id: 'add', label: 'Add Friend', isAction: true },
-  ];
-
-  const statusColors = {
-    online: '#3ba55d',
-    idle: '#faa61a',
-    dnd: '#ed4245',
-    offline: '#747f8d',
-  };
-
-  const filteredFriends = friends.filter((f) => {
-    if (activeTab === 'online') return f.status === 'online';
-    if (activeTab === 'all') return true;
-    return true;
-  }).filter((f) => 
-    f.name.toLowerCase().includes(searchQuery.toLowerCase())
-  );
-
-  return (
-    <div className="dms-view">
-      {/* DMs Sidebar */}
-      <div className="dms-sidebar">
-        <div className="dms-search">
-          <input 
-            type="text" 
-            placeholder="Find or start a conversation"
-            className="dms-search-input"
-          />
-        </div>
-
-        <div className="dms-section">
-          <div className="dms-section-header">
-            <span>Friends</span>
-          </div>
-          <div 
-            className="dms-nav-item"
-            onClick={() => setActiveTab('online')}
-          >
-            <span className="nav-icon">👥</span>
-            <span>Friends</span>
-          </div>
-          <div className="dms-nav-item">
-            <span className="nav-icon">🚀</span>
-            <span>Nitro</span>
-          </div>
-          <div className="dms-nav-item">
-            <span className="nav-icon">🛒</span>
-            <span>Shop</span>
-          </div>
-        </div>
-
-        <div className="dms-section">
-          <div className="dms-section-header">
-            <span>Direct Messages</span>
-            <button className="add-dm-btn">+</button>
-          </div>
-          
-          {dmConversations.map((dm) => (
-            <div 
-              key={dm.id}
-              className="dm-item"
-              onClick={() => onSelectDM?.(dm)}
-            >
-              <div className="dm-avatar" style={{ background: dm.user.gradient || '#36393f' }}>
-                {dm.user.avatar}
-                {!dm.user.isGroup && (
-                  <div 
-                    className="dm-status"
-                    style={{ background: statusColors[dm.user.status] || statusColors.offline }}
-                  />
-                )}
-              </div>
-              <div className="dm-info">
-                <div className="dm-name">
-                  {dm.user.name}
-                  {dm.user.isGroup && <span className="group-count">{dm.user.members?.length}</span>}
-                </div>
-                <div className="dm-preview">{dm.lastMessage}</div>
-              </div>
-              {dm.unread > 0 && (
-                <div className="dm-unread">{dm.unread}</div>
-              )}
-              <button className="dm-close" onClick={(e) => { e.stopPropagation(); }}>✕</button>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Friends List Panel */}
-      <div className="friends-panel">
-        <div className="friends-header">
-          <div className="friends-title">
-            <span className="friends-icon">👥</span>
-            <span>Friends</span>
-          </div>
-          <div className="friends-tabs">
-            {tabs.map((tab) => (
-              <button
-                key={tab.id}
-                className={`friends-tab ${activeTab === tab.id ? 'active' : ''} ${tab.isAction ? 'action' : ''}`}
-                onClick={() => setActiveTab(tab.id)}
-              >
-                {tab.label}
-                {tab.count > 0 && <span className="tab-count">{tab.count}</span>}
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {activeTab === 'add' ? (
-          <div className="add-friend-panel">
-            <h2>Add Friend</h2>
-            <p>You can add friends with their AeThex username.</p>
-            <div className="add-friend-input">
-              <input 
-                type="text" 
-                placeholder="Enter a Username#0000"
-                className="friend-input"
-              />
-              <button className="send-request-btn">Send Friend Request</button>
-            </div>
-          </div>
-        ) : activeTab === 'pending' ? (
-          <div className="pending-requests">
-            <div className="friends-search">
-              <input 
-                type="text" 
-                placeholder="Search"
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-              />
-            </div>
-            <div className="friends-count">PENDING — {pendingRequests.length}</div>
-            {pendingRequests.map((req) => (
-              <div key={req.id} className="friend-item">
-                <div className="friend-avatar">{req.avatar}</div>
-                <div className="friend-info">
-                  <div className="friend-name">{req.name}</div>
-                  <div className="friend-tag">
-                    {req.type === 'incoming' ? 'Incoming Friend Request' : 'Outgoing Friend Request'}
-                  </div>
-                </div>
-                <div className="friend-actions">
-                  {req.type === 'incoming' && (
-                    <>
-                      <button className="friend-action accept">✓</button>
-                      <button className="friend-action decline">✕</button>
-                    </>
-                  )}
-                  {req.type === 'outgoing' && (
-                    <button className="friend-action decline">✕</button>
-                  )}
-                </div>
-              </div>
-            ))}
-          </div>
-        ) : (
-          <>
-            <div className="friends-search">
-              <input 
-                type="text" 
-                placeholder="Search"
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-              />
-            </div>
-            <div className="friends-count">
-              {activeTab === 'online' ? 'ONLINE' : 'ALL FRIENDS'} — {filteredFriends.length}
-            </div>
-            <div className="friends-list">
-              {filteredFriends.map((friend) => (
-                <div 
-                  key={friend.id} 
-                  className="friend-item"
-                  onClick={() => onOpenProfile?.(friend)}
-                >
-                  <div className="friend-avatar" style={{ background: friend.gradient || '#36393f' }}>
-                    {friend.avatar}
-                    <div 
-                      className="friend-status"
-                      style={{ background: statusColors[friend.status] }}
-                    />
-                  </div>
-                  <div className="friend-info">
-                    <div className="friend-name">{friend.name}</div>
-                    <div className="friend-activity">{friend.activity || friend.status}</div>
-                  </div>
-                  <div className="friend-actions">
-                    <button className="friend-action" title="Message">💬</button>
-                    <button className="friend-action" title="Voice Call">📞</button>
-                    <button className="friend-action" title="Video Call">📹</button>
-                    <button className="friend-action" title="More">⋯</button>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </>
-        )}
-      </div>
-
-      {/* Activity/Now Playing Panel */}
-      <div className="activity-panel">
-        <h3>Active Now</h3>
-        <div className="activity-placeholder">
-          <p>It's quiet for now...</p>
-          <p className="activity-hint">When a friend starts an activity—like playing a game or hanging out on voice—we'll show it here!</p>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/EmojiPicker.jsx b/src/frontend/mockup/EmojiPicker.jsx
deleted file mode 100644
index 89f15f9..0000000
--- a/src/frontend/mockup/EmojiPicker.jsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React, { useState } from 'react';
-
-const emojiCategories = [
-  { id: 'recent', icon: '🕐', name: 'Recent', emojis: ['👍', '❤️', '😂', '🔥', '✅', '👀', '🎉', '💯'] },
-  { id: 'smileys', icon: '😀', name: 'Smileys', emojis: ['😀', '😃', '😄', '😁', '😅', '😂', '🤣', '😊', '😇', '🙂', '😉', '😌', '😍', '🥰', '😘', '😗', '😋', '😛', '😜', '🤪', '😝', '🤑', '🤗', '🤭', '🤫', '🤔', '🤐', '🤨', '😐', '😑', '😶', '😏', '😒', '🙄', '😬', '😮', '🤤', '😪', '😴', '😷', '🤒', '🤕', '🤢', '🤮', '🥵', '🥶', '😵', '🤯', '😎', '🥳', '😱', '😨', '😰', '😥', '😢', '😭', '😤', '😡', '🤬'] },
-  { id: 'people', icon: '👋', name: 'People', emojis: ['👋', '🤚', '🖐️', '✋', '🖖', '👌', '🤌', '🤏', '✌️', '🤞', '🤟', '🤘', '🤙', '👈', '👉', '👆', '🖕', '👇', '☝️', '👍', '👎', '✊', '👊', '🤛', '🤜', '👏', '🙌', '👐', '🤲', '🤝', '🙏', '✍️', '💪', '🦾', '🦿', '🦵', '🦶', '👂', '🦻', '👃', '🧠', '🫀', '🫁', '🦷', '🦴', '👀', '👁️', '👅', '👄'] },
-  { id: 'nature', icon: '🌿', name: 'Nature', emojis: ['🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯', '🦁', '🐮', '🐷', '🐸', '🐵', '🌸', '🌺', '🌻', '🌹', '🌷', '🌲', '🌳', '🌴', '🌵', '🌾', '☀️', '🌙', '⭐', '🌈', '☁️', '⛈️', '❄️', '🔥', '💧'] },
-  { id: 'food', icon: '🍔', name: 'Food', emojis: ['🍎', '🍊', '🍋', '🍌', '🍉', '🍇', '🍓', '🫐', '🍒', '🍑', '🥭', '🍍', '🥥', '🥝', '🍅', '🍆', '🥑', '🥦', '🌽', '🌶️', '🫑', '🥒', '🥬', '🧄', '🧅', '🥔', '🍠', '🥐', '🍞', '🥖', '🥨', '🧀', '🍖', '🍗', '🥩', '🥓', '🍔', '🍟', '🍕', '🌭', '🥪', '🌮', '🌯', '🫔', '🥙', '🧆', '🥚', '🍳', '🥘', '🍲', '🫕', '🥣', '🥗', '🍿', '🧈', '🧂', '🥫'] },
-  { id: 'activities', icon: '⚽', name: 'Activities', emojis: ['⚽', '🏀', '🏈', '⚾', '🥎', '🎾', '🏐', '🏉', '🥏', '🎱', '🪀', '🏓', '🏸', '🏒', '🏑', '🥍', '🏏', '🪃', '🥅', '⛳', '🪁', '🏹', '🎣', '🤿', '🥊', '🥋', '🎽', '🛹', '🛼', '🛷', '⛸️', '🥌', '🎿', '⛷️', '🏂', '🎮', '🕹️', '🎲', '🧩', '♟️', '🎯', '🎳', '🎭', '🎨', '🎬', '🎤', '🎧', '🎼', '🎹', '🥁', '🪘', '🎷', '🎺', '🪗', '🎸', '🪕', '🎻'] },
-  { id: 'objects', icon: '💡', name: 'Objects', emojis: ['💻', '🖥️', '🖨️', '⌨️', '🖱️', '💽', '💾', '💿', '📀', '📱', '📲', '☎️', '📞', '📟', '📠', '🔋', '🔌', '💡', '🔦', '🕯️', '🧯', '🛢️', '💸', '💵', '💴', '💶', '💷', '🪙', '💰', '💳', '💎', '⚖️', '🪜', '🧰', '🪛', '🔧', '🔨', '⚒️', '🛠️', '⛏️', '🪚', '🔩', '⚙️', '🪤', '🧱', '⛓️', '🧲', '🔫', '💣', '🧨', '🪓', '🔪', '🗡️', '⚔️', '🛡️', '🚬', '⚰️', '🪦', '⚱️', '🏺'] },
-  { id: 'symbols', icon: '❤️', name: 'Symbols', emojis: ['❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍', '🤎', '💔', '❣️', '💕', '💞', '💓', '💗', '💖', '💘', '💝', '💟', '☮️', '✝️', '☪️', '🕉️', '☸️', '✡️', '🔯', '🕎', '☯️', '☦️', '🛐', '⛎', '♈', '♉', '♊', '♋', '♌', '♍', '♎', '♏', '♐', '♑', '♒', '♓', '🆔', '⚛️', '🉑', '☢️', '☣️', '📴', '📳', '🈶', '🈚', '🈸', '🈺', '🈷️', '✴️', '🆚', '💮', '🉐', '㊙️', '㊗️'] },
-  { id: 'custom', icon: '⭐', name: 'AeThex', emojis: ['🔴', '🔵', '🟠', '⚡', '🛡️', '🧪', '🏢', '🚀', '💻', '🔐', '🌐', '⚙️'] },
-];
-
-export default function EmojiPicker({ onSelect, onClose }) {
-  const [activeCategory, setActiveCategory] = useState('smileys');
-  const [searchQuery, setSearchQuery] = useState('');
-
-  const currentCategory = emojiCategories.find(c => c.id === activeCategory);
-  const filteredEmojis = searchQuery 
-    ? emojiCategories.flatMap(c => c.emojis)
-    : currentCategory?.emojis || [];
-
-  return (
-    <div className="emoji-picker">
-      <div className="emoji-picker-header">
-        <input
-          type="text"
-          className="emoji-search"
-          placeholder="Search emoji..."
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-        />
-      </div>
-      
-      <div className="emoji-categories">
-        {emojiCategories.map(cat => (
-          <button
-            key={cat.id}
-            className={`emoji-category-btn ${activeCategory === cat.id ? 'active' : ''}`}
-            onClick={() => { setActiveCategory(cat.id); setSearchQuery(''); }}
-            title={cat.name}
-          >
-            {cat.icon}
-          </button>
-        ))}
-      </div>
-      
-      <div className="emoji-grid">
-        {filteredEmojis.slice(0, 64).map((emoji, idx) => (
-          <button
-            key={idx}
-            className="emoji-btn"
-            onClick={() => onSelect?.(emoji)}
-          >
-            {emoji}
-          </button>
-        ))}
-      </div>
-      
-      <div className="emoji-picker-footer">
-        <span className="emoji-preview">
-          {currentCategory?.name || 'Search Results'}
-        </span>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/EmojiUpload.jsx b/src/frontend/mockup/EmojiUpload.jsx
deleted file mode 100644
index a7d078b..0000000
--- a/src/frontend/mockup/EmojiUpload.jsx
+++ /dev/null
@@ -1,185 +0,0 @@
-import React, { useState, useRef } from 'react';
-
-const existingEmojis = [
-  { id: 1, name: 'pepehype', image: '🐸', animated: false },
-  { id: 2, name: 'monkaS', image: '😰', animated: false },
-  { id: 3, name: 'KEKW', image: '🤣', animated: false },
-  { id: 4, name: 'Pog', image: '😮', animated: true },
-  { id: 5, name: 'catJAM', image: '🐱', animated: true },
-  { id: 6, name: 'aethex_logo', image: '🔺', animated: false },
-];
-
-const existingStickers = [
-  { id: 1, name: 'Wave', emoji: '👋', description: 'A friendly wave' },
-  { id: 2, name: 'Love', emoji: '❤️', description: 'Show some love' },
-  { id: 3, name: 'Party', emoji: '🎉', description: 'Party time!' },
-];
-
-export default function EmojiUpload({ type = 'emoji', onUpload, onClose }) {
-  const [activeTab, setActiveTab] = useState(type);
-  const [uploadedFiles, setUploadedFiles] = useState([]);
-  const [emojiName, setEmojiName] = useState('');
-  const [stickerDescription, setStickerDescription] = useState('');
-  const [relatedEmoji, setRelatedEmoji] = useState('');
-  const fileInputRef = useRef(null);
-
-  const handleFileSelect = (e) => {
-    const files = Array.from(e.target.files);
-    const newFiles = files.map(file => ({
-      id: Date.now() + Math.random(),
-      file,
-      name: file.name.split('.')[0],
-      preview: URL.createObjectURL(file),
-      size: (file.size / 1024).toFixed(1) + ' KB',
-      animated: file.type === 'image/gif',
-    }));
-    setUploadedFiles(prev => [...prev, ...newFiles]);
-  };
-
-  const handleDrop = (e) => {
-    e.preventDefault();
-    const files = Array.from(e.dataTransfer.files);
-    const newFiles = files.map(file => ({
-      id: Date.now() + Math.random(),
-      file,
-      name: file.name.split('.')[0],
-      preview: URL.createObjectURL(file),
-      size: (file.size / 1024).toFixed(1) + ' KB',
-      animated: file.type === 'image/gif',
-    }));
-    setUploadedFiles(prev => [...prev, ...newFiles]);
-  };
-
-  const removeFile = (fileId) => {
-    setUploadedFiles(prev => prev.filter(f => f.id !== fileId));
-  };
-
-  const updateFileName = (fileId, name) => {
-    setUploadedFiles(prev => prev.map(f => 
-      f.id === fileId ? { ...f, name } : f
-    ));
-  };
-
-  return (
-    <div className="modal-overlay" onClick={onClose}>
-      <div className="emoji-upload-modal" onClick={(e) => e.stopPropagation()}>
-        <div className="emoji-upload-header">
-          <h2>Upload {activeTab === 'emoji' ? 'Emoji' : 'Sticker'}</h2>
-          <button className="close-btn" onClick={onClose}>✕</button>
-        </div>
-
-        <div className="emoji-upload-tabs">
-          <button
-            className={`upload-tab ${activeTab === 'emoji' ? 'active' : ''}`}
-            onClick={() => setActiveTab('emoji')}
-          >
-            😀 Emoji
-          </button>
-          <button
-            className={`upload-tab ${activeTab === 'sticker' ? 'active' : ''}`}
-            onClick={() => setActiveTab('sticker')}
-          >
-            🎨 Sticker
-          </button>
-        </div>
-
-        <div className="emoji-upload-content">
-          {/* Existing items */}
-          <div className="existing-items">
-            <h3>{activeTab === 'emoji' ? 'Server Emoji' : 'Server Stickers'}</h3>
-            <div className="items-grid">
-              {activeTab === 'emoji' ? (
-                existingEmojis.map(emoji => (
-                  <div key={emoji.id} className="item-card">
-                    <div className="item-preview">{emoji.image}</div>
-                    <span className="item-name">:{emoji.name}:</span>
-                    {emoji.animated && <span className="animated-badge">GIF</span>}
-                  </div>
-                ))
-              ) : (
-                existingStickers.map(sticker => (
-                  <div key={sticker.id} className="item-card sticker">
-                    <div className="item-preview">{sticker.emoji}</div>
-                    <span className="item-name">{sticker.name}</span>
-                  </div>
-                ))
-              )}
-            </div>
-            <div className="slots-info">
-              {activeTab === 'emoji' ? (
-                <span>6/50 slots used ({existingEmojis.filter(e => e.animated).length}/50 animated)</span>
-              ) : (
-                <span>3/15 sticker slots used</span>
-              )}
-            </div>
-          </div>
-
-          {/* Upload zone */}
-          <div 
-            className="upload-zone"
-            onDragOver={(e) => e.preventDefault()}
-            onDrop={handleDrop}
-            onClick={() => fileInputRef.current?.click()}
-          >
-            <input
-              ref={fileInputRef}
-              type="file"
-              accept={activeTab === 'emoji' ? 'image/png,image/gif' : 'image/png,image/apng'}
-              multiple
-              onChange={handleFileSelect}
-              hidden
-            />
-            <div className="upload-icon">📤</div>
-            <p>Drag and drop or click to upload</p>
-            <span className="upload-hint">
-              {activeTab === 'emoji' 
-                ? 'PNG or GIF, 256KB max, 128x128 recommended'
-                : 'PNG or APNG, 512KB max, 320x320 size'
-              }
-            </span>
-          </div>
-
-          {/* Pending uploads */}
-          {uploadedFiles.length > 0 && (
-            <div className="pending-uploads">
-              <h3>Ready to Upload</h3>
-              {uploadedFiles.map(file => (
-                <div key={file.id} className="pending-file">
-                  <img src={file.preview} alt="" className="pending-preview" />
-                  <div className="pending-info">
-                    <input
-                      type="text"
-                      value={file.name}
-                      onChange={(e) => updateFileName(file.id, e.target.value)}
-                      placeholder="Name"
-                      className="pending-name-input"
-                    />
-                    <span className="pending-size">{file.size}</span>
-                    {file.animated && <span className="animated-badge">GIF</span>}
-                  </div>
-                  <button 
-                    className="pending-remove"
-                    onClick={() => removeFile(file.id)}
-                  >
-                    ✕
-                  </button>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-
-        <div className="emoji-upload-footer">
-          <button className="cancel-btn" onClick={onClose}>Cancel</button>
-          <button 
-            className="upload-btn"
-            disabled={uploadedFiles.length === 0}
-            onClick={() => onUpload?.(uploadedFiles)}
-          >
-            Upload {uploadedFiles.length > 0 ? `(${uploadedFiles.length})` : ''}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/EventsPanel.jsx b/src/frontend/mockup/EventsPanel.jsx
deleted file mode 100644
index 1d4ba72..0000000
--- a/src/frontend/mockup/EventsPanel.jsx
+++ /dev/null
@@ -1,392 +0,0 @@
-import React, { useState } from 'react';
-
-const mockEvents = [
-  {
-    id: 1,
-    title: 'Monthly Community Townhall',
-    description: 'Join us for our monthly Q&A session with the AeThex team. Ask questions, get updates, and connect with the community.',
-    type: 'stage',
-    channel: 'community-stage',
-    startTime: new Date(Date.now() + 2 * 60 * 60 * 1000), // 2 hours from now
-    endTime: new Date(Date.now() + 4 * 60 * 60 * 1000),
-    host: { name: 'Anderson', avatar: 'A', color: '#ff0000' },
-    interested: 234,
-    image: null,
-    recurring: 'monthly',
-  },
-  {
-    id: 2,
-    title: 'Game Night: Among Us',
-    description: 'Weekly game night! This week we\'re playing Among Us. Join the voice channel 10 minutes early.',
-    type: 'voice',
-    channel: 'gaming-voice',
-    startTime: new Date(Date.now() + 26 * 60 * 60 * 1000), // Tomorrow
-    endTime: new Date(Date.now() + 29 * 60 * 60 * 1000),
-    host: { name: 'Sarah', avatar: 'S', color: '#ffa500' },
-    interested: 89,
-    image: null,
-    recurring: 'weekly',
-  },
-  {
-    id: 3,
-    title: 'AeThex SDK Workshop',
-    description: 'Learn how to integrate the AeThex SDK into your projects. Hands-on coding session with live Q&A.',
-    type: 'external',
-    location: 'https://workshop.aethex.com',
-    startTime: new Date(Date.now() + 3 * 24 * 60 * 60 * 1000), // 3 days
-    endTime: new Date(Date.now() + 3 * 24 * 60 * 60 * 1000 + 2 * 60 * 60 * 1000),
-    host: { name: 'Trevor', avatar: 'T', color: '#0066ff' },
-    interested: 456,
-    image: null,
-    recurring: null,
-  },
-];
-
-export default function EventsPanel({ onClose, onCreateEvent }) {
-  const [activeTab, setActiveTab] = useState('upcoming');
-  const [selectedEvent, setSelectedEvent] = useState(null);
-
-  const formatDate = (date) => {
-    const now = new Date();
-    const diff = date - now;
-    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
-    
-    if (days === 0) {
-      const hours = Math.floor(diff / (1000 * 60 * 60));
-      if (hours === 0) {
-        const minutes = Math.floor(diff / (1000 * 60));
-        return `In ${minutes} minutes`;
-      }
-      return `In ${hours} hours`;
-    } else if (days === 1) {
-      return 'Tomorrow';
-    } else {
-      return date.toLocaleDateString('en-US', { weekday: 'long', month: 'short', day: 'numeric' });
-    }
-  };
-
-  const formatTime = (date) => {
-    return date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
-  };
-
-  const getTypeIcon = (type) => {
-    switch (type) {
-      case 'stage': return '📢';
-      case 'voice': return '🔊';
-      case 'external': return '🔗';
-      default: return '📅';
-    }
-  };
-
-  if (selectedEvent) {
-    return (
-      <EventDetail 
-        event={selectedEvent} 
-        onBack={() => setSelectedEvent(null)}
-        formatDate={formatDate}
-        formatTime={formatTime}
-        getTypeIcon={getTypeIcon}
-      />
-    );
-  }
-
-  return (
-    <div className="events-panel">
-      <div className="events-header">
-        <h2>Events</h2>
-        <div className="events-actions">
-          <button className="create-event-btn" onClick={onCreateEvent}>
-            + Create Event
-          </button>
-          <button className="events-close" onClick={onClose}>✕</button>
-        </div>
-      </div>
-
-      <div className="events-tabs">
-        <button 
-          className={`events-tab ${activeTab === 'upcoming' ? 'active' : ''}`}
-          onClick={() => setActiveTab('upcoming')}
-        >
-          Upcoming
-        </button>
-        <button 
-          className={`events-tab ${activeTab === 'recurring' ? 'active' : ''}`}
-          onClick={() => setActiveTab('recurring')}
-        >
-          Recurring
-        </button>
-        <button 
-          className={`events-tab ${activeTab === 'past' ? 'active' : ''}`}
-          onClick={() => setActiveTab('past')}
-        >
-          Past
-        </button>
-      </div>
-
-      <div className="events-list">
-        {mockEvents.map(event => (
-          <div 
-            key={event.id} 
-            className="event-card"
-            onClick={() => setSelectedEvent(event)}
-          >
-            <div className="event-date-badge">
-              <span className="event-month">
-                {event.startTime.toLocaleDateString('en-US', { month: 'short' })}
-              </span>
-              <span className="event-day">
-                {event.startTime.getDate()}
-              </span>
-            </div>
-            
-            <div className="event-info">
-              <div className="event-timing">
-                <span className="event-time-label">{formatDate(event.startTime)}</span>
-                <span className="event-time">
-                  {formatTime(event.startTime)} - {formatTime(event.endTime)}
-                </span>
-              </div>
-              
-              <h3 className="event-title">
-                <span className="event-type-icon">{getTypeIcon(event.type)}</span>
-                {event.title}
-              </h3>
-              
-              <p className="event-description">{event.description}</p>
-              
-              <div className="event-meta">
-                <div className="event-host">
-                  <div 
-                    className="host-avatar"
-                    style={event.host.color ? { background: event.host.color } : undefined}
-                  >
-                    {event.host.avatar}
-                  </div>
-                  <span>Hosted by {event.host.name}</span>
-                </div>
-                
-                <div className="event-interested">
-                  <span className="interested-count">⭐ {event.interested} interested</span>
-                </div>
-              </div>
-
-              {event.recurring && (
-                <div className="recurring-badge">
-                  🔄 Repeats {event.recurring}
-                </div>
-              )}
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {mockEvents.length === 0 && (
-        <div className="events-empty">
-          <span className="empty-icon">📅</span>
-          <h3>No upcoming events</h3>
-          <p>Create an event to bring your community together!</p>
-          <button className="create-event-btn" onClick={onCreateEvent}>
-            Create Event
-          </button>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function EventDetail({ event, onBack, formatDate, formatTime, getTypeIcon }) {
-  const [isInterested, setIsInterested] = useState(false);
-
-  return (
-    <div className="event-detail">
-      <button className="back-btn" onClick={onBack}>
-        ← Back to Events
-      </button>
-
-      <div className="event-detail-header">
-        <div className="event-type-badge">
-          {getTypeIcon(event.type)} {event.type.charAt(0).toUpperCase() + event.type.slice(1)}
-        </div>
-        <h1>{event.title}</h1>
-      </div>
-
-      <div className="event-detail-content">
-        <div className="detail-section">
-          <h4>📅 Date & Time</h4>
-          <p>{formatDate(event.startTime)}</p>
-          <p className="time-range">
-            {formatTime(event.startTime)} - {formatTime(event.endTime)}
-          </p>
-          {event.recurring && (
-            <p className="recurring-info">🔄 Repeats {event.recurring}</p>
-          )}
-        </div>
-
-        <div className="detail-section">
-          <h4>📍 Location</h4>
-          {event.type === 'external' ? (
-            <a href={event.location} className="external-link">
-              {event.location}
-            </a>
-          ) : (
-            <p>#{event.channel}</p>
-          )}
-        </div>
-
-        <div className="detail-section">
-          <h4>📝 Description</h4>
-          <p>{event.description}</p>
-        </div>
-
-        <div className="detail-section">
-          <h4>👤 Host</h4>
-          <div className="host-info">
-            <div 
-              className="host-avatar large"
-              style={event.host.color ? { background: event.host.color } : undefined}
-            >
-              {event.host.avatar}
-            </div>
-            <span>{event.host.name}</span>
-          </div>
-        </div>
-
-        <div className="interested-section">
-          <span>⭐ {event.interested + (isInterested ? 1 : 0)} interested</span>
-        </div>
-      </div>
-
-      <div className="event-detail-actions">
-        <button 
-          className={`interested-btn ${isInterested ? 'active' : ''}`}
-          onClick={() => setIsInterested(!isInterested)}
-        >
-          {isInterested ? '⭐ Interested' : '☆ Mark as Interested'}
-        </button>
-        <button className="share-event-btn">
-          📤 Share
-        </button>
-      </div>
-    </div>
-  );
-}
-
-// Event creation modal
-export function CreateEventModal({ onSubmit, onClose }) {
-  const [title, setTitle] = useState('');
-  const [description, setDescription] = useState('');
-  const [type, setType] = useState('voice');
-  const [date, setDate] = useState('');
-  const [startTime, setStartTime] = useState('');
-  const [endTime, setEndTime] = useState('');
-
-  const handleSubmit = () => {
-    if (!title.trim() || !date || !startTime) return;
-    
-    onSubmit?.({
-      title,
-      description,
-      type,
-      date,
-      startTime,
-      endTime,
-    });
-    onClose?.();
-  };
-
-  return (
-    <div className="modal-overlay" onClick={onClose}>
-      <div className="create-event-modal" onClick={(e) => e.stopPropagation()}>
-        <div className="modal-header">
-          <h2>Create Event</h2>
-          <button className="modal-close" onClick={onClose}>✕</button>
-        </div>
-
-        <div className="modal-content">
-          <div className="form-group">
-            <label>Event Type</label>
-            <div className="event-type-options">
-              <button 
-                className={`type-option ${type === 'stage' ? 'active' : ''}`}
-                onClick={() => setType('stage')}
-              >
-                📢 Stage
-              </button>
-              <button 
-                className={`type-option ${type === 'voice' ? 'active' : ''}`}
-                onClick={() => setType('voice')}
-              >
-                🔊 Voice
-              </button>
-              <button 
-                className={`type-option ${type === 'external' ? 'active' : ''}`}
-                onClick={() => setType('external')}
-              >
-                🔗 External
-              </button>
-            </div>
-          </div>
-
-          <div className="form-group">
-            <label>Event Title</label>
-            <input
-              type="text"
-              placeholder="What's your event called?"
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-              maxLength={100}
-            />
-          </div>
-
-          <div className="form-group">
-            <label>Description</label>
-            <textarea
-              placeholder="Tell people what this event is about..."
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              rows={3}
-            />
-          </div>
-
-          <div className="form-row">
-            <div className="form-group">
-              <label>Date</label>
-              <input
-                type="date"
-                value={date}
-                onChange={(e) => setDate(e.target.value)}
-              />
-            </div>
-            <div className="form-group">
-              <label>Start Time</label>
-              <input
-                type="time"
-                value={startTime}
-                onChange={(e) => setStartTime(e.target.value)}
-              />
-            </div>
-            <div className="form-group">
-              <label>End Time</label>
-              <input
-                type="time"
-                value={endTime}
-                onChange={(e) => setEndTime(e.target.value)}
-              />
-            </div>
-          </div>
-        </div>
-
-        <div className="modal-footer">
-          <button className="cancel-btn" onClick={onClose}>Cancel</button>
-          <button 
-            className="submit-btn"
-            onClick={handleSubmit}
-            disabled={!title.trim() || !date || !startTime}
-          >
-            Create Event
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/FileUpload.jsx b/src/frontend/mockup/FileUpload.jsx
deleted file mode 100644
index de1eb54..0000000
--- a/src/frontend/mockup/FileUpload.jsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import React, { useState, useRef, useCallback } from 'react';
-
-export default function FileUpload({ onUpload, onClose, maxSize = 25 }) {
-  const [files, setFiles] = useState([]);
-  const [isDragging, setIsDragging] = useState(false);
-  const [comment, setComment] = useState('');
-  const [isSpoiler, setIsSpoiler] = useState(false);
-  const fileInputRef = useRef(null);
-
-  const handleDragOver = useCallback((e) => {
-    e.preventDefault();
-    setIsDragging(true);
-  }, []);
-
-  const handleDragLeave = useCallback((e) => {
-    e.preventDefault();
-    setIsDragging(false);
-  }, []);
-
-  const handleDrop = useCallback((e) => {
-    e.preventDefault();
-    setIsDragging(false);
-    
-    const droppedFiles = Array.from(e.dataTransfer.files);
-    addFiles(droppedFiles);
-  }, []);
-
-  const handleFileSelect = (e) => {
-    const selectedFiles = Array.from(e.target.files);
-    addFiles(selectedFiles);
-  };
-
-  const addFiles = (newFiles) => {
-    const processedFiles = newFiles.map((file) => ({
-      file,
-      id: Date.now() + Math.random(),
-      name: file.name,
-      size: file.size,
-      type: file.type,
-      preview: file.type.startsWith('image/') ? URL.createObjectURL(file) : null,
-      progress: 100, // Simulated upload progress
-    }));
-    
-    setFiles((prev) => [...prev, ...processedFiles]);
-  };
-
-  const removeFile = (id) => {
-    setFiles((prev) => {
-      const removed = prev.find((f) => f.id === id);
-      if (removed?.preview) {
-        URL.revokeObjectURL(removed.preview);
-      }
-      return prev.filter((f) => f.id !== id);
-    });
-  };
-
-  const formatSize = (bytes) => {
-    if (bytes < 1024) return `${bytes} B`;
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-  };
-
-  const getFileIcon = (type) => {
-    if (type.startsWith('image/')) return '🖼️';
-    if (type.startsWith('video/')) return '🎬';
-    if (type.startsWith('audio/')) return '🎵';
-    if (type.includes('pdf')) return '📄';
-    if (type.includes('zip') || type.includes('rar')) return '📦';
-    if (type.includes('text') || type.includes('document')) return '📝';
-    return '📎';
-  };
-
-  const handleUpload = () => {
-    onUpload?.({
-      files,
-      comment,
-      isSpoiler,
-    });
-    onClose?.();
-  };
-
-  const totalSize = files.reduce((acc, f) => acc + f.size, 0);
-  const isOverLimit = totalSize > maxSize * 1024 * 1024;
-
-  return (
-    <div className="file-upload-modal">
-      <div className="file-upload-header">
-        <h3>Upload to #general</h3>
-        <button className="upload-close" onClick={onClose}>✕</button>
-      </div>
-
-      <div 
-        className={`file-drop-zone ${isDragging ? 'dragging' : ''}`}
-        onDragOver={handleDragOver}
-        onDragLeave={handleDragLeave}
-        onDrop={handleDrop}
-        onClick={() => fileInputRef.current?.click()}
-      >
-        <input
-          ref={fileInputRef}
-          type="file"
-          multiple
-          onChange={handleFileSelect}
-          style={{ display: 'none' }}
-        />
-        <div className="drop-zone-content">
-          <span className="drop-icon">📁</span>
-          <p>Drag & drop files here or click to browse</p>
-          <span className="drop-hint">Max file size: {maxSize} MB</span>
-        </div>
-      </div>
-
-      {files.length > 0 && (
-        <div className="file-list">
-          {files.map((file) => (
-            <div key={file.id} className="file-item">
-              {file.preview ? (
-                <img src={file.preview} alt={file.name} className="file-preview" />
-              ) : (
-                <div className="file-icon">{getFileIcon(file.type)}</div>
-              )}
-              <div className="file-info">
-                <div className="file-name">{file.name}</div>
-                <div className="file-size">{formatSize(file.size)}</div>
-              </div>
-              <button 
-                className="file-remove"
-                onClick={() => removeFile(file.id)}
-              >
-                ✕
-              </button>
-            </div>
-          ))}
-        </div>
-      )}
-
-      <div className="upload-options">
-        <label className="spoiler-option">
-          <input 
-            type="checkbox"
-            checked={isSpoiler}
-            onChange={(e) => setIsSpoiler(e.target.checked)}
-          />
-          <span>Mark as spoiler</span>
-        </label>
-      </div>
-
-      <div className="upload-comment">
-        <textarea
-          placeholder="Add a comment (optional)"
-          value={comment}
-          onChange={(e) => setComment(e.target.value)}
-          rows={2}
-        />
-      </div>
-
-      {isOverLimit && (
-        <div className="upload-warning">
-          Total size exceeds {maxSize} MB limit. Some files may not upload.
-        </div>
-      )}
-
-      <div className="upload-footer">
-        <div className="upload-summary">
-          {files.length} file{files.length !== 1 ? 's' : ''} • {formatSize(totalSize)}
-        </div>
-        <div className="upload-actions">
-          <button className="upload-cancel" onClick={onClose}>Cancel</button>
-          <button 
-            className="upload-submit"
-            disabled={files.length === 0}
-            onClick={handleUpload}
-          >
-            Upload
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/ForumChannel.jsx b/src/frontend/mockup/ForumChannel.jsx
deleted file mode 100644
index 01655f6..0000000
--- a/src/frontend/mockup/ForumChannel.jsx
+++ /dev/null
@@ -1,293 +0,0 @@
-import React, { useState } from 'react';
-
-const mockPosts = [
-  {
-    id: 1,
-    title: 'How to set up AeThex Passport for your game?',
-    author: { name: 'Trevor', avatar: 'T', color: '#ff0000' },
-    content: 'I want to integrate Passport authentication into my Unity game. What are the steps?',
-    tags: ['question', 'passport', 'unity'],
-    replies: 12,
-    reactions: { '👍': 24, '❤️': 5 },
-    pinned: true,
-    createdAt: '2 hours ago',
-    lastActivity: '15 minutes ago',
-  },
-  {
-    id: 2,
-    title: '[Tutorial] Complete Nexus SDK Integration Guide',
-    author: { name: 'Sarah', avatar: 'S', color: '#ffa500' },
-    content: 'Step-by-step guide for integrating the Nexus SDK into your application...',
-    tags: ['tutorial', 'nexus', 'sdk'],
-    replies: 45,
-    reactions: { '🔥': 89, '👍': 67, '❤️': 23 },
-    pinned: true,
-    createdAt: '1 day ago',
-    lastActivity: '30 minutes ago',
-  },
-  {
-    id: 3,
-    title: 'Bug: Voice chat not working on Linux',
-    author: { name: 'DevUser_456', avatar: 'D' },
-    content: 'Getting an error when trying to join voice channels on Ubuntu 22.04...',
-    tags: ['bug', 'linux', 'voice'],
-    replies: 8,
-    reactions: { '👍': 12 },
-    pinned: false,
-    createdAt: '5 hours ago',
-    lastActivity: '1 hour ago',
-  },
-  {
-    id: 4,
-    title: 'Show off your AeThex-powered projects!',
-    author: { name: 'Anderson', avatar: 'A', color: '#5865f2' },
-    content: 'Share what you\'ve built with AeThex tools and get feedback from the community.',
-    tags: ['showcase', 'community'],
-    replies: 156,
-    reactions: { '🚀': 234, '❤️': 145, '👏': 89 },
-    pinned: false,
-    createdAt: '3 days ago',
-    lastActivity: '10 minutes ago',
-  },
-];
-
-const tags = [
-  { id: 'all', label: 'All Posts', color: '#5865f2' },
-  { id: 'question', label: 'Question', color: '#3ba55d' },
-  { id: 'tutorial', label: 'Tutorial', color: '#faa61a' },
-  { id: 'bug', label: 'Bug Report', color: '#ed4245' },
-  { id: 'showcase', label: 'Showcase', color: '#9b59b6' },
-  { id: 'discussion', label: 'Discussion', color: '#747f8d' },
-];
-
-export default function ForumChannel({ channel, onClose }) {
-  const [activeTag, setActiveTag] = useState('all');
-  const [sortBy, setSortBy] = useState('activity');
-  const [search, setSearch] = useState('');
-  const [selectedPost, setSelectedPost] = useState(null);
-
-  const channelData = channel || {
-    name: 'help-forum',
-    description: 'Get help with AeThex products and services',
-    guidelines: 'Be respectful, search before posting, use appropriate tags.',
-  };
-
-  const filteredPosts = mockPosts.filter(post => {
-    const matchesTag = activeTag === 'all' || post.tags.includes(activeTag);
-    const matchesSearch = !search || 
-      post.title.toLowerCase().includes(search.toLowerCase()) ||
-      post.content.toLowerCase().includes(search.toLowerCase());
-    return matchesTag && matchesSearch;
-  });
-
-  const sortedPosts = [...filteredPosts].sort((a, b) => {
-    if (a.pinned && !b.pinned) return -1;
-    if (!a.pinned && b.pinned) return 1;
-    return 0;
-  });
-
-  if (selectedPost) {
-    return (
-      <ForumPost 
-        post={selectedPost} 
-        onBack={() => setSelectedPost(null)} 
-      />
-    );
-  }
-
-  return (
-    <div className="forum-channel">
-      <div className="forum-header">
-        <div className="forum-title">
-          <span className="forum-icon">💬</span>
-          <h2>{channelData.name}</h2>
-        </div>
-        <p className="forum-description">{channelData.description}</p>
-      </div>
-
-      <div className="forum-toolbar">
-        <div className="forum-search">
-          <span className="search-icon">🔍</span>
-          <input
-            type="text"
-            placeholder="Search posts..."
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-          />
-        </div>
-
-        <div className="forum-filters">
-          <select 
-            value={sortBy} 
-            onChange={(e) => setSortBy(e.target.value)}
-            className="sort-select"
-          >
-            <option value="activity">Recent Activity</option>
-            <option value="newest">Newest</option>
-            <option value="oldest">Oldest</option>
-            <option value="popular">Most Popular</option>
-          </select>
-        </div>
-
-        <button className="new-post-btn">
-          + New Post
-        </button>
-      </div>
-
-      <div className="forum-tags">
-        {tags.map(tag => (
-          <button
-            key={tag.id}
-            className={`tag-btn ${activeTag === tag.id ? 'active' : ''}`}
-            style={activeTag === tag.id ? { background: tag.color } : undefined}
-            onClick={() => setActiveTag(tag.id)}
-          >
-            {tag.label}
-          </button>
-        ))}
-      </div>
-
-      <div className="forum-posts">
-        {sortedPosts.map(post => (
-          <div 
-            key={post.id} 
-            className={`forum-post-card ${post.pinned ? 'pinned' : ''}`}
-            onClick={() => setSelectedPost(post)}
-          >
-            {post.pinned && <span className="pinned-badge">📌 Pinned</span>}
-            <div className="post-main">
-              <div 
-                className="post-avatar"
-                style={post.author.color ? { background: post.author.color } : undefined}
-              >
-                {post.author.avatar}
-              </div>
-              <div className="post-content">
-                <h3 className="post-title">{post.title}</h3>
-                <p className="post-preview">{post.content}</p>
-                <div className="post-tags">
-                  {post.tags.map(tagId => {
-                    const tag = tags.find(t => t.id === tagId);
-                    return tag ? (
-                      <span 
-                        key={tagId} 
-                        className="post-tag"
-                        style={{ background: tag.color }}
-                      >
-                        {tag.label}
-                      </span>
-                    ) : null;
-                  })}
-                </div>
-              </div>
-            </div>
-            <div className="post-meta">
-              <div className="post-stats">
-                <span className="reply-count">💬 {post.replies}</span>
-                {Object.entries(post.reactions).map(([emoji, count]) => (
-                  <span key={emoji} className="reaction-count">{emoji} {count}</span>
-                ))}
-              </div>
-              <div className="post-time">
-                <span className="author-name">{post.author.name}</span>
-                <span>•</span>
-                <span>Last activity {post.lastActivity}</span>
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {filteredPosts.length === 0 && (
-        <div className="forum-empty">
-          <span className="empty-icon">📭</span>
-          <p>No posts found</p>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function ForumPost({ post, onBack }) {
-  const [replyContent, setReplyContent] = useState('');
-
-  const replies = [
-    { id: 1, author: { name: 'Marcus', avatar: 'M' }, content: 'Have you checked the documentation? There\'s a great guide at docs.aethex.com/passport', time: '1 hour ago', reactions: { '👍': 5 } },
-    { id: 2, author: { name: 'Sarah', avatar: 'S', color: '#ffa500' }, content: 'I wrote a tutorial for this! Check out post #2 in this forum.', time: '45 minutes ago', reactions: { '❤️': 3 } },
-  ];
-
-  return (
-    <div className="forum-post-detail">
-      <button className="back-btn" onClick={onBack}>
-        ← Back to posts
-      </button>
-
-      <div className="post-header">
-        <h1>{post.title}</h1>
-        <div className="post-author-info">
-          <div 
-            className="author-avatar"
-            style={post.author.color ? { background: post.author.color } : undefined}
-          >
-            {post.author.avatar}
-          </div>
-          <span className="author-name">{post.author.name}</span>
-          <span className="post-date">Posted {post.createdAt}</span>
-        </div>
-      </div>
-
-      <div className="post-body">
-        <p>{post.content}</p>
-      </div>
-
-      <div className="post-reactions">
-        {Object.entries(post.reactions).map(([emoji, count]) => (
-          <button key={emoji} className="reaction-btn">
-            {emoji} {count}
-          </button>
-        ))}
-        <button className="reaction-btn add">+</button>
-      </div>
-
-      <div className="post-replies">
-        <h3>Replies ({replies.length})</h3>
-        {replies.map(reply => (
-          <div key={reply.id} className="reply-card">
-            <div 
-              className="reply-avatar"
-              style={reply.author.color ? { background: reply.author.color } : undefined}
-            >
-              {reply.author.avatar}
-            </div>
-            <div className="reply-content">
-              <div className="reply-header">
-                <span className="reply-author">{reply.author.name}</span>
-                <span className="reply-time">{reply.time}</span>
-              </div>
-              <p>{reply.content}</p>
-              <div className="reply-actions">
-                {Object.entries(reply.reactions).map(([emoji, count]) => (
-                  <button key={emoji} className="reaction-btn small">
-                    {emoji} {count}
-                  </button>
-                ))}
-                <button className="reply-btn">Reply</button>
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      <div className="reply-input">
-        <textarea
-          placeholder="Write a reply..."
-          value={replyContent}
-          onChange={(e) => setReplyContent(e.target.value)}
-        />
-        <button className="send-reply-btn" disabled={!replyContent.trim()}>
-          Send Reply
-        </button>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/GifPicker.jsx b/src/frontend/mockup/GifPicker.jsx
deleted file mode 100644
index 3bf966a..0000000
--- a/src/frontend/mockup/GifPicker.jsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import React, { useState } from 'react';
-
-const categories = [
-  { id: 'trending', label: 'Trending', icon: '🔥' },
-  { id: 'reactions', label: 'Reactions', icon: '😂' },
-  { id: 'actions', label: 'Actions', icon: '👋' },
-  { id: 'anime', label: 'Anime', icon: '🎌' },
-  { id: 'memes', label: 'Memes', icon: '🐸' },
-  { id: 'cats', label: 'Cats', icon: '🐱' },
-  { id: 'dogs', label: 'Dogs', icon: '🐕' },
-  { id: 'gaming', label: 'Gaming', icon: '🎮' },
-];
-
-const mockGifs = [
-  { id: 1, url: '#', preview: '👍', title: 'Thumbs Up' },
-  { id: 2, url: '#', preview: '😂', title: 'Laughing' },
-  { id: 3, url: '#', preview: '🎉', title: 'Celebration' },
-  { id: 4, url: '#', preview: '❤️', title: 'Heart' },
-  { id: 5, url: '#', preview: '🔥', title: 'Fire' },
-  { id: 6, url: '#', preview: '👀', title: 'Eyes' },
-  { id: 7, url: '#', preview: '💀', title: 'Skull' },
-  { id: 8, url: '#', preview: '🙌', title: 'Raised Hands' },
-  { id: 9, url: '#', preview: '😭', title: 'Crying' },
-  { id: 10, url: '#', preview: '🤔', title: 'Thinking' },
-  { id: 11, url: '#', preview: '👏', title: 'Clapping' },
-  { id: 12, url: '#', preview: '😎', title: 'Cool' },
-];
-
-export default function GifPicker({ onSelect, onClose }) {
-  const [search, setSearch] = useState('');
-  const [activeCategory, setActiveCategory] = useState('trending');
-  const [favorites, setFavorites] = useState([1, 5]);
-
-  const filteredGifs = search 
-    ? mockGifs.filter(g => g.title.toLowerCase().includes(search.toLowerCase()))
-    : mockGifs;
-
-  return (
-    <div className="gif-picker">
-      <div className="gif-picker-header">
-        <div className="gif-search">
-          <span className="search-icon">🔍</span>
-          <input
-            type="text"
-            placeholder="Search Tenor"
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-          />
-          {search && (
-            <button className="clear-search" onClick={() => setSearch('')}>✕</button>
-          )}
-        </div>
-      </div>
-
-      {!search && (
-        <div className="gif-categories">
-          {categories.map(cat => (
-            <button
-              key={cat.id}
-              className={`gif-category ${activeCategory === cat.id ? 'active' : ''}`}
-              onClick={() => setActiveCategory(cat.id)}
-              title={cat.label}
-            >
-              <span className="cat-icon">{cat.icon}</span>
-              <span className="cat-label">{cat.label}</span>
-            </button>
-          ))}
-        </div>
-      )}
-
-      <div className="gif-tabs">
-        <button className="gif-tab active">GIFs</button>
-        <button className="gif-tab">Favorites</button>
-      </div>
-
-      <div className="gif-grid">
-        {filteredGifs.map(gif => (
-          <div
-            key={gif.id}
-            className="gif-item"
-            onClick={() => onSelect?.(gif)}
-            title={gif.title}
-          >
-            <div className="gif-preview">{gif.preview}</div>
-            <button 
-              className={`gif-favorite ${favorites.includes(gif.id) ? 'active' : ''}`}
-              onClick={(e) => {
-                e.stopPropagation();
-                setFavorites(prev => 
-                  prev.includes(gif.id) 
-                    ? prev.filter(id => id !== gif.id)
-                    : [...prev, gif.id]
-                );
-              }}
-            >
-              {favorites.includes(gif.id) ? '⭐' : '☆'}
-            </button>
-          </div>
-        ))}
-      </div>
-
-      <div className="gif-footer">
-        <span className="powered-by">Powered by Tenor</span>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/InviteManager.jsx b/src/frontend/mockup/InviteManager.jsx
deleted file mode 100644
index d9d72d1..0000000
--- a/src/frontend/mockup/InviteManager.jsx
+++ /dev/null
@@ -1,185 +0,0 @@
-import React, { useState } from 'react';
-
-const mockInvites = [
-  { code: 'aethex123', channel: 'general', uses: 45, maxUses: 0, expiresAt: null, createdBy: 'Trevor', createdAt: '2025-01-10T10:00:00' },
-  { code: 'devjoin', channel: 'api-discussion', uses: 12, maxUses: 50, expiresAt: '2026-02-15T00:00:00', createdBy: 'Sarah', createdAt: '2025-02-01T14:30:00' },
-  { code: 'labsonly', channel: 'labs-chat', uses: 8, maxUses: 25, expiresAt: '2026-03-01T00:00:00', createdBy: 'DevUser_2847', createdAt: '2025-02-03T09:15:00' },
-  { code: 'temp7day', channel: 'help', uses: 3, maxUses: 10, expiresAt: '2026-02-12T00:00:00', createdBy: 'Trevor', createdAt: '2025-02-05T16:45:00' },
-];
-
-export default function InviteManager({ onClose, onCreate }) {
-  const [invites, setInvites] = useState(mockInvites);
-  const [showCreateModal, setShowCreateModal] = useState(false);
-  const [copiedCode, setCopiedCode] = useState(null);
-
-  // Create invite form state
-  const [selectedChannel, setSelectedChannel] = useState('general');
-  const [maxUses, setMaxUses] = useState(0);
-  const [expiresIn, setExpiresIn] = useState('never');
-
-  const channels = ['general', 'api-discussion', 'help', 'announcements', 'labs-chat'];
-
-  const formatDate = (dateStr) => {
-    if (!dateStr) return 'Never';
-    const date = new Date(dateStr);
-    const now = new Date();
-    const diff = date.getTime() - now.getTime();
-    const days = Math.ceil(diff / (1000 * 60 * 60 * 24));
-    if (days < 0) return 'Expired';
-    if (days === 0) return 'Today';
-    if (days === 1) return 'Tomorrow';
-    return `${days} days`;
-  };
-
-  const copyInvite = (code) => {
-    navigator.clipboard.writeText(`https://aethex.gg/invite/${code}`);
-    setCopiedCode(code);
-    setTimeout(() => setCopiedCode(null), 2000);
-  };
-
-  const deleteInvite = (code) => {
-    setInvites(prev => prev.filter(inv => inv.code !== code));
-  };
-
-  const createInvite = () => {
-    const newCode = Math.random().toString(36).substring(2, 10);
-    const expiresAt = expiresIn === 'never' ? null :
-      new Date(Date.now() + parseInt(expiresIn) * 1000).toISOString();
-
-    setInvites(prev => [{
-      code: newCode,
-      channel: selectedChannel,
-      uses: 0,
-      maxUses: maxUses,
-      expiresAt,
-      createdBy: 'You',
-      createdAt: new Date().toISOString(),
-    }, ...prev]);
-
-    setShowCreateModal(false);
-    copyInvite(newCode);
-  };
-
-  return (
-    <div className="modal-overlay" onClick={onClose}>
-      <div className="invite-manager-modal" onClick={(e) => e.stopPropagation()}>
-        <div className="invite-manager-header">
-          <h2>✉️ Server Invites</h2>
-          <button className="invite-manager-close" onClick={onClose}>✕</button>
-        </div>
-
-        <div className="invite-manager-actions">
-          <button className="create-invite-btn" onClick={() => setShowCreateModal(true)}>
-            + Create Invite
-          </button>
-        </div>
-
-        <div className="invite-list">
-          {invites.length === 0 ? (
-            <div className="no-invites">
-              <p>No active invites</p>
-              <span>Create an invite to share your server</span>
-            </div>
-          ) : (
-            <>
-              <div className="invite-list-header">
-                <span className="col-code">Invite Code</span>
-                <span className="col-channel">Channel</span>
-                <span className="col-uses">Uses</span>
-                <span className="col-expires">Expires</span>
-                <span className="col-creator">Created By</span>
-                <span className="col-actions"></span>
-              </div>
-              {invites.map(invite => (
-                <div key={invite.code} className="invite-item">
-                  <div className="invite-code">
-                    <code>{invite.code}</code>
-                    <button
-                      className={`copy-btn ${copiedCode === invite.code ? 'copied' : ''}`}
-                      onClick={() => copyInvite(invite.code)}
-                    >
-                      {copiedCode === invite.code ? '✓' : '📋'}
-                    </button>
-                  </div>
-                  <div className="invite-channel">#{invite.channel}</div>
-                  <div className="invite-uses">
-                    {invite.uses}{invite.maxUses > 0 ? ` / ${invite.maxUses}` : ''}
-                  </div>
-                  <div className="invite-expires">{formatDate(invite.expiresAt)}</div>
-                  <div className="invite-creator">{invite.createdBy}</div>
-                  <div className="invite-actions">
-                    <button
-                      className="delete-invite-btn"
-                      onClick={() => deleteInvite(invite.code)}
-                      title="Delete invite"
-                    >
-                      🗑️
-                    </button>
-                  </div>
-                </div>
-              ))}
-            </>
-          )}
-        </div>
-
-        <div className="invite-manager-footer">
-          <span className="invite-hint">
-            Invite links: aethex.gg/invite/CODE
-          </span>
-        </div>
-
-        {showCreateModal && (
-          <div className="create-invite-overlay" onClick={() => setShowCreateModal(false)}>
-            <div className="create-invite-modal" onClick={(e) => e.stopPropagation()}>
-              <h3>Create Invite Link</h3>
-
-              <div className="create-field">
-                <label>Invite to Channel</label>
-                <select value={selectedChannel} onChange={(e) => setSelectedChannel(e.target.value)}>
-                  {channels.map(ch => (
-                    <option key={ch} value={ch}>#{ch}</option>
-                  ))}
-                </select>
-              </div>
-
-              <div className="create-field">
-                <label>Expire After</label>
-                <select value={expiresIn} onChange={(e) => setExpiresIn(e.target.value)}>
-                  <option value="1800">30 minutes</option>
-                  <option value="3600">1 hour</option>
-                  <option value="21600">6 hours</option>
-                  <option value="43200">12 hours</option>
-                  <option value="86400">1 day</option>
-                  <option value="604800">7 days</option>
-                  <option value="never">Never</option>
-                </select>
-              </div>
-
-              <div className="create-field">
-                <label>Max Uses</label>
-                <select value={maxUses} onChange={(e) => setMaxUses(parseInt(e.target.value))}>
-                  <option value="0">No limit</option>
-                  <option value="1">1 use</option>
-                  <option value="5">5 uses</option>
-                  <option value="10">10 uses</option>
-                  <option value="25">25 uses</option>
-                  <option value="50">50 uses</option>
-                  <option value="100">100 uses</option>
-                </select>
-              </div>
-
-              <div className="create-actions">
-                <button className="cancel-btn" onClick={() => setShowCreateModal(false)}>
-                  Cancel
-                </button>
-                <button className="generate-btn" onClick={createInvite}>
-                  Generate Invite
-                </button>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/InviteModal.jsx b/src/frontend/mockup/InviteModal.jsx
deleted file mode 100644
index 86bf17c..0000000
--- a/src/frontend/mockup/InviteModal.jsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import React, { useState } from 'react';
-
-export default function InviteModal({ server, channel, onClose }) {
-  const [inviteLink, setInviteLink] = useState('https://aethex.gg/invite/Xk9Q3p5');
-  const [copied, setCopied] = useState(false);
-  const [expiresIn, setExpiresIn] = useState('7');
-  const [maxUses, setMaxUses] = useState('0');
-  const [showAdvanced, setShowAdvanced] = useState(false);
-
-  const serverName = server?.name || 'AeThex Foundation';
-  const channelName = channel?.name || 'general';
-
-  const copyLink = () => {
-    navigator.clipboard.writeText(inviteLink);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  const generateNewLink = () => {
-    // Simulate generating a new invite code
-    const code = Math.random().toString(36).substring(2, 8);
-    setInviteLink(`https://aethex.gg/invite/${code}`);
-    setCopied(false);
-  };
-
-  const friends = [
-    { id: 1, name: 'Sarah', avatar: 'S', gradient: 'linear-gradient(135deg, #ffa500, #ff8c00)', status: 'online' },
-    { id: 2, name: 'Marcus', avatar: 'M', gradient: 'linear-gradient(135deg, #0066ff, #003380)', status: 'online' },
-    { id: 3, name: 'JohnDev', avatar: 'J', status: 'idle' },
-  ];
-
-  return (
-    <div className="modal-overlay" onClick={onClose}>
-      <div className="invite-modal" onClick={(e) => e.stopPropagation()}>
-        <div className="invite-header">
-          <h2>Invite friends to {serverName}</h2>
-          <span className="invite-channel">#{channelName}</span>
-          <button className="modal-close" onClick={onClose}>✕</button>
-        </div>
-
-        <div className="invite-content">
-          <div className="invite-search">
-            <input 
-              type="text" 
-              placeholder="Search for friends"
-              className="friend-search-input"
-            />
-          </div>
-
-          <div className="invite-friends-list">
-            {friends.map((friend) => (
-              <div key={friend.id} className="invite-friend-item">
-                <div 
-                  className="invite-friend-avatar"
-                  style={{ background: friend.gradient || '#36393f' }}
-                >
-                  {friend.avatar}
-                </div>
-                <span className="invite-friend-name">{friend.name}</span>
-                <button className="invite-btn">Invite</button>
-              </div>
-            ))}
-          </div>
-
-          <div className="invite-link-section">
-            <label>OR, SEND A SERVER INVITE LINK TO A FRIEND</label>
-            <div className="invite-link-row">
-              <input 
-                type="text" 
-                value={inviteLink}
-                readOnly
-                className="invite-link-input"
-              />
-              <button 
-                className={`copy-link-btn ${copied ? 'copied' : ''}`}
-                onClick={copyLink}
-              >
-                {copied ? 'Copied!' : 'Copy'}
-              </button>
-            </div>
-            <p className="link-expires">
-              Your invite link expires in 7 days. 
-              <button className="edit-link-btn" onClick={() => setShowAdvanced(!showAdvanced)}>
-                Edit invite link
-              </button>
-            </p>
-          </div>
-
-          {showAdvanced && (
-            <div className="invite-advanced">
-              <div className="advanced-option">
-                <label>EXPIRE AFTER</label>
-                <select 
-                  value={expiresIn}
-                  onChange={(e) => setExpiresIn(e.target.value)}
-                  className="advanced-select"
-                >
-                  <option value="1800">30 minutes</option>
-                  <option value="3600">1 hour</option>
-                  <option value="21600">6 hours</option>
-                  <option value="43200">12 hours</option>
-                  <option value="86400">1 day</option>
-                  <option value="7">7 days</option>
-                  <option value="0">Never</option>
-                </select>
-              </div>
-
-              <div className="advanced-option">
-                <label>MAX NUMBER OF USES</label>
-                <select 
-                  value={maxUses}
-                  onChange={(e) => setMaxUses(e.target.value)}
-                  className="advanced-select"
-                >
-                  <option value="0">No limit</option>
-                  <option value="1">1 use</option>
-                  <option value="5">5 uses</option>
-                  <option value="10">10 uses</option>
-                  <option value="25">25 uses</option>
-                  <option value="50">50 uses</option>
-                  <option value="100">100 uses</option>
-                </select>
-              </div>
-
-              <label className="temporary-toggle">
-                <input type="checkbox" />
-                <span>Grant temporary membership</span>
-              </label>
-
-              <button className="generate-new-btn" onClick={generateNewLink}>
-                Generate a New Link
-              </button>
-            </div>
-          )}
-        </div>
-
-        <div className="invite-footer">
-          <div className="invite-tip">
-            <span className="tip-icon">💡</span>
-            <span>Customize your invite link with Server Boost</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/MainLayout.jsx b/src/frontend/mockup/MainLayout.jsx
deleted file mode 100644
index e1b6016..0000000
--- a/src/frontend/mockup/MainLayout.jsx
+++ /dev/null
@@ -1,199 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import ServerList from './ServerList';
-import ChannelSidebar from './ChannelSidebar';
-import ChatArea from './ChatArea';
-import MemberSidebar from './MemberSidebar';
-import SearchPanel from './SearchPanel';
-import ThreadPanel from './ThreadPanel';
-import ServerSettingsModal from './ServerSettingsModal';
-import UserProfileCard from './UserProfileCard';
-import DMsView from './DMsView';
-import UserSettingsModal from './UserSettingsModal';
-import ContextMenu from './ContextMenu';
-import PinnedMessagesPanel from './PinnedMessagesPanel';
-import CreateChannelModal from './CreateChannelModal';
-import InviteModal from './InviteModal';
-import NotificationsPanel from './NotificationsPanel';
-import VideoCall from './VideoCall';
-import './mockup.css';
-
-export default function MainLayout() {
-  // UI State
-  const [showSearch, setShowSearch] = useState(false);
-  const [showThread, setShowThread] = useState(false);
-  const [threadParent, setThreadParent] = useState(null);
-  const [showServerSettings, setShowServerSettings] = useState(false);
-  const [showUserProfile, setShowUserProfile] = useState(false);
-  const [selectedUser, setSelectedUser] = useState(null);
-  
-  // New feature states
-  const [showDMs, setShowDMs] = useState(false);
-  const [showUserSettings, setShowUserSettings] = useState(false);
-  const [showPinnedMessages, setShowPinnedMessages] = useState(false);
-  const [showCreateChannel, setShowCreateChannel] = useState(false);
-  const [showInvite, setShowInvite] = useState(false);
-  const [showNotifications, setShowNotifications] = useState(false);
-  const [showVideoCall, setShowVideoCall] = useState(false);
-  
-  // Context menu state
-  const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0, type: 'message', data: null });
-
-  // Current server/channel context for modals
-  const [currentServer, setCurrentServer] = useState({
-    id: '1',
-    name: 'AeThex Gaming',
-    icon: '🎮'
-  });
-
-  const handleOpenSearch = () => {
-    setShowSearch(true);
-    setShowThread(false);
-  };
-
-  const handleOpenThread = (message) => {
-    setThreadParent(message);
-    setShowThread(true);
-    setShowSearch(false);
-  };
-
-  const handleOpenUserProfile = (user) => {
-    setSelectedUser(user);
-    setShowUserProfile(true);
-  };
-
-  // Context menu handlers
-  const handleContextMenu = useCallback((e, type, data) => {
-    e.preventDefault();
-    setContextMenu({
-      visible: true,
-      x: e.clientX,
-      y: e.clientY,
-      type,
-      data
-    });
-  }, []);
-
-  const closeContextMenu = useCallback(() => {
-    setContextMenu(prev => ({ ...prev, visible: false }));
-  }, []);
-
-  const handleContextMenuAction = useCallback((action) => {
-    console.log('Context menu action:', action, contextMenu.data);
-    closeContextMenu();
-    // Handle actions
-    if (action === 'pin') setShowPinnedMessages(true);
-    if (action === 'create_thread') handleOpenThread(contextMenu.data);
-  }, [contextMenu.data, closeContextMenu]);
-
-  // Video call handlers
-  const handleJoinVoice = useCallback(() => {
-    setShowVideoCall(true);
-  }, []);
-
-  return (
-    <div className="connect-container" onClick={closeContextMenu}>
-      {showDMs ? (
-        <>
-          <ServerList 
-            onOpenSettings={() => setShowServerSettings(true)} 
-            onDMsClick={() => setShowDMs(true)}
-            selectedDMs={true}
-          />
-          <DMsView onClose={() => setShowDMs(false)} />
-        </>
-      ) : (
-        <>
-          <ServerList 
-            onOpenSettings={() => setShowServerSettings(true)}
-            onDMsClick={() => setShowDMs(true)}
-          />
-          <ChannelSidebar 
-            onCreateChannel={() => setShowCreateChannel(true)}
-            onSettingsClick={() => setShowUserSettings(true)}
-            onJoinVoice={handleJoinVoice}
-          />
-          <ChatArea 
-            onOpenSearch={handleOpenSearch}
-            onOpenThread={handleOpenThread}
-            onPinnedClick={() => setShowPinnedMessages(true)}
-            onNotificationsClick={() => setShowNotifications(true)}
-            onContextMenu={handleContextMenu}
-          />
-          <MemberSidebar onMemberClick={handleOpenUserProfile} />
-        </>
-      )}
-      
-      {/* Overlays */}
-      {showSearch && (
-        <SearchPanel onClose={() => setShowSearch(false)} />
-      )}
-      
-      {showThread && threadParent && (
-        <ThreadPanel 
-          parentMessage={threadParent}
-          onClose={() => setShowThread(false)}
-        />
-      )}
-      
-      {showServerSettings && (
-        <ServerSettingsModal onClose={() => setShowServerSettings(false)} />
-      )}
-      
-      {showUserProfile && selectedUser && (
-        <UserProfileCard 
-          user={selectedUser}
-          onClose={() => setShowUserProfile(false)}
-        />
-      )}
-
-      {/* New Modals */}
-      {showUserSettings && (
-        <UserSettingsModal onClose={() => setShowUserSettings(false)} />
-      )}
-
-      {showPinnedMessages && (
-        <PinnedMessagesPanel onClose={() => setShowPinnedMessages(false)} />
-      )}
-
-      {showCreateChannel && (
-        <CreateChannelModal 
-          onClose={() => setShowCreateChannel(false)}
-          onSubmit={(data) => {
-            console.log('Create channel:', data);
-            setShowCreateChannel(false);
-          }}
-        />
-      )}
-
-      {showInvite && (
-        <InviteModal 
-          server={currentServer}
-          onClose={() => setShowInvite(false)}
-        />
-      )}
-
-      {showNotifications && (
-        <NotificationsPanel onClose={() => setShowNotifications(false)} />
-      )}
-
-      {showVideoCall && (
-        <VideoCall 
-          channel={{ name: 'General Voice' }}
-          onLeave={() => setShowVideoCall(false)}
-        />
-      )}
-
-      {/* Context Menu */}
-      {contextMenu.visible && (
-        <ContextMenu
-          x={contextMenu.x}
-          y={contextMenu.y}
-          type={contextMenu.type}
-          data={contextMenu.data}
-          onAction={handleContextMenuAction}
-          onClose={closeContextMenu}
-        />
-      )}
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/MarkdownText.jsx b/src/frontend/mockup/MarkdownText.jsx
deleted file mode 100644
index c690210..0000000
--- a/src/frontend/mockup/MarkdownText.jsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import React from 'react';
-
-// Simple markdown-like parsing for Discord-style formatting
-export function parseMarkdown(text) {
-  if (!text) return null;
-
-  const elements = [];
-  let remaining = text;
-  let key = 0;
-
-  const patterns = [
-    // Code blocks (```)
-    { regex: /```(\w+)?\n?([\s\S]*?)```/g, render: (match, lang, code) => (
-      <pre key={key++} className="code-block" data-language={lang}>
-        <code>{code}</code>
-      </pre>
-    )},
-    // Inline code (`)
-    { regex: /`([^`]+)`/g, render: (match, code) => (
-      <code key={key++} className="inline-code">{code}</code>
-    )},
-    // Spoiler (||text||)
-    { regex: /\|\|([^|]+)\|\|/g, render: (match, content) => (
-      <span key={key++} className="spoiler" onClick={(e) => e.target.classList.toggle('revealed')}>
-        {content}
-      </span>
-    )},
-    // Bold (**text**)
-    { regex: /\*\*([^*]+)\*\*/g, render: (match, content) => (
-      <strong key={key++}>{content}</strong>
-    )},
-    // Italic (*text* or _text_)
-    { regex: /(?:\*|_)([^*_]+)(?:\*|_)/g, render: (match, content) => (
-      <em key={key++}>{content}</em>
-    )},
-    // Strikethrough (~~text~~)
-    { regex: /~~([^~]+)~~/g, render: (match, content) => (
-      <del key={key++}>{content}</del>
-    )},
-    // Underline (__text__)
-    { regex: /__([^_]+)__/g, render: (match, content) => (
-      <u key={key++}>{content}</u>
-    )},
-    // Links [text](url)
-    { regex: /\[([^\]]+)\]\(([^)]+)\)/g, render: (match, text, url) => (
-      <a key={key++} href={url} target="_blank" rel="noopener noreferrer" className="message-link">
-        {text}
-      </a>
-    )},
-    // Auto-link URLs
-    { regex: /(https?:\/\/[^\s<]+)/g, render: (match, url) => (
-      <a key={key++} href={url} target="_blank" rel="noopener noreferrer" className="message-link">
-        {url}
-      </a>
-    )},
-    // Mentions (@user)
-    { regex: /@(\w+)/g, render: (match, user) => (
-      <span key={key++} className="mention">@{user}</span>
-    )},
-    // Channel mentions (#channel)
-    { regex: /#(\w+)/g, render: (match, channel) => (
-      <span key={key++} className="channel-mention">#{channel}</span>
-    )},
-    // Role mentions (@&role)
-    { regex: /@&(\w+)/g, render: (match, role) => (
-      <span key={key++} className="role-mention">@{role}</span>
-    )},
-    // Emoji :emoji_name:
-    { regex: /:(\w+):/g, render: (match, name) => {
-      const emojiMap = {
-        smile: '😊', laughing: '😆', heart: '❤️', fire: '🔥', 
-        rocket: '🚀', thumbsup: '👍', thumbsdown: '👎', check: '✅',
-        x: '❌', star: '⭐', eyes: '👀', thinking: '🤔',
-        aethex: '🔺', foundation: '🔴', corporation: '🔵', labs: '🟠',
-      };
-      const emoji = emojiMap[name.toLowerCase()];
-      return emoji ? <span key={key++} className="emoji">{emoji}</span> : match;
-    }},
-    // Block quote (> text)
-    { regex: /^>\s(.+)$/gm, render: (match, content) => (
-      <blockquote key={key++} className="block-quote">{content}</blockquote>
-    )},
-  ];
-
-  // Process special patterns
-  // For simplicity, we'll do a basic render with some patterns
-  const processedText = text
-    .replace(/```(\w+)?\n?([\s\S]*?)```/g, '⟦CODE_BLOCK⟧$1⟦SEP⟧$2⟦END_CODE⟧')
-    .replace(/`([^`]+)`/g, '⟦INLINE_CODE⟧$1⟦END_INLINE⟧')
-    .replace(/\|\|([^|]+)\|\|/g, '⟦SPOILER⟧$1⟦END_SPOILER⟧')
-    .replace(/\*\*([^*]+)\*\*/g, '⟦BOLD⟧$1⟦END_BOLD⟧')
-    .replace(/~~([^~]+)~~/g, '⟦STRIKE⟧$1⟦END_STRIKE⟧')
-    .replace(/__([^_]+)__/g, '⟦UNDERLINE⟧$1⟦END_UNDERLINE⟧')
-    .replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, '⟦ITALIC⟧$1⟦END_ITALIC⟧')
-    .replace(/(?<!_)_([^_]+)_(?!_)/g, '⟦ITALIC⟧$1⟦END_ITALIC⟧');
-
-  return <span dangerouslySetInnerHTML={{ __html: renderMarkdown(text) }} />;
-}
-
-function renderMarkdown(text) {
-  let html = text
-    // Escape HTML
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    // Code blocks
-    .replace(/```(\w+)?\n?([\s\S]*?)```/g, '<pre class="code-block"><code>$2</code></pre>')
-    // Inline code
-    .replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>')
-    // Spoilers
-    .replace(/\|\|([^|]+)\|\|/g, '<span class="spoiler">$1</span>')
-    // Bold
-    .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
-    // Strikethrough
-    .replace(/~~([^~]+)~~/g, '<del>$1</del>')
-    // Underline
-    .replace(/__([^_]+)__/g, '<u>$1</u>')
-    // Italic
-    .replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, '<em>$1</em>')
-    // Mentions
-    .replace(/@(\w+)/g, '<span class="mention">@$1</span>')
-    // Channel mentions
-    .replace(/#(\w[-\w]*)/g, '<span class="channel-mention">#$1</span>')
-    // Links
-    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" class="message-link" target="_blank">$1</a>')
-    // Auto URLs
-    .replace(/(https?:\/\/[^\s<]+)/g, '<a href="$1" class="message-link" target="_blank">$1</a>')
-    // Block quotes
-    .replace(/^&gt;\s(.+)$/gm, '<blockquote class="block-quote">$1</blockquote>')
-    // Newlines
-    .replace(/\n/g, '<br>');
-
-  return html;
-}
-
-export default function MarkdownText({ children }) {
-  if (typeof children !== 'string') return children;
-  return parseMarkdown(children);
-}
diff --git a/src/frontend/mockup/MemberListPanel.jsx b/src/frontend/mockup/MemberListPanel.jsx
deleted file mode 100644
index 7f9c5e9..0000000
--- a/src/frontend/mockup/MemberListPanel.jsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import React, { useState } from 'react';
-
-const mockMembers = [
-  { id: 1, name: 'Trevor', tag: '#0001', avatar: 'T', status: 'online', roles: ['founder', 'foundation'], joinedAt: '2024-01-15' },
-  { id: 2, name: 'Sarah', tag: '#1234', avatar: 'S', status: 'online', roles: ['foundation', 'corporation'], joinedAt: '2024-02-20' },
-  { id: 3, name: 'DevUser_2847', tag: '#9876', avatar: 'D', status: 'idle', roles: ['labs'], joinedAt: '2024-03-10' },
-  { id: 4, name: 'Alex', tag: '#5555', avatar: 'A', status: 'dnd', roles: ['corporation'], joinedAt: '2024-04-05' },
-  { id: 5, name: 'Jordan', tag: '#7777', avatar: 'J', status: 'offline', roles: [], joinedAt: '2024-05-12' },
-  { id: 6, name: 'Casey', tag: '#3333', avatar: 'C', status: 'online', roles: ['labs', 'corporation'], joinedAt: '2024-06-01' },
-  { id: 7, name: 'Morgan', tag: '#2222', avatar: 'M', status: 'online', roles: ['foundation'], joinedAt: '2024-06-15' },
-  { id: 8, name: 'Riley', tag: '#4444', avatar: 'R', status: 'offline', roles: [], joinedAt: '2024-07-20' },
-];
-
-const allRoles = [
-  { id: 'founder', name: 'Founder', color: '#ff0000' },
-  { id: 'foundation', name: 'Foundation', color: '#ff0000' },
-  { id: 'corporation', name: 'Corporation', color: '#0066ff' },
-  { id: 'labs', name: 'Labs', color: '#ffa500' },
-];
-
-export default function MemberListPanel({ onClose }) {
-  const [searchQuery, setSearchQuery] = useState('');
-  const [filterRole, setFilterRole] = useState('all');
-  const [selectedMember, setSelectedMember] = useState(null);
-  const [showRoleMenu, setShowRoleMenu] = useState(false);
-
-  const filteredMembers = mockMembers.filter(member => {
-    const matchesSearch = member.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-                          member.tag.includes(searchQuery);
-    const matchesRole = filterRole === 'all' || member.roles.includes(filterRole);
-    return matchesSearch && matchesRole;
-  });
-
-  const getMemberRoles = (member) => {
-    return allRoles.filter(role => member.roles.includes(role.id));
-  };
-
-  const getStatusColor = (status) => {
-    const colors = { online: '#3ba55d', idle: '#faa61a', dnd: '#ed4245', offline: '#747f8d' };
-    return colors[status] || colors.offline;
-  };
-
-  const toggleMemberRole = (memberId, roleId) => {
-    // Mock implementation - in real app would update backend
-    console.log(`Toggle role ${roleId} for member ${memberId}`);
-  };
-
-  return (
-    <div className="member-list-panel">
-      <div className="member-list-header">
-        <h2>Members — {mockMembers.length}</h2>
-        <button className="member-list-close" onClick={onClose}>✕</button>
-      </div>
-
-      <div className="member-list-filters">
-        <input
-          type="text"
-          className="member-search"
-          placeholder="Search members..."
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-        />
-        <select
-          className="role-filter"
-          value={filterRole}
-          onChange={(e) => setFilterRole(e.target.value)}
-        >
-          <option value="all">All Roles</option>
-          {allRoles.map(role => (
-            <option key={role.id} value={role.id}>{role.name}</option>
-          ))}
-          <option value="">No Roles</option>
-        </select>
-      </div>
-
-      <div className="member-list-content">
-        {filteredMembers.length === 0 ? (
-          <div className="no-members">No members found</div>
-        ) : (
-          filteredMembers.map(member => (
-            <div
-              key={member.id}
-              className={`member-list-item ${selectedMember === member.id ? 'selected' : ''}`}
-              onClick={() => setSelectedMember(member.id)}
-            >
-              <div className="member-avatar-wrapper">
-                <div className="member-avatar">{member.avatar}</div>
-                <div
-                  className="member-status-dot"
-                  style={{ background: getStatusColor(member.status) }}
-                />
-              </div>
-
-              <div className="member-info">
-                <div className="member-name-row">
-                  <span className="member-name">{member.name}</span>
-                  <span className="member-tag">{member.tag}</span>
-                </div>
-                <div className="member-roles">
-                  {getMemberRoles(member).map(role => (
-                    <span
-                      key={role.id}
-                      className="member-role-badge"
-                      style={{ borderColor: role.color, color: role.color }}
-                    >
-                      {role.name}
-                    </span>
-                  ))}
-                </div>
-              </div>
-
-              <div className="member-actions">
-                <button
-                  className="member-action-btn"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setSelectedMember(member.id);
-                    setShowRoleMenu(!showRoleMenu);
-                  }}
-                  title="Manage Roles"
-                >
-                  🎭
-                </button>
-                <button className="member-action-btn" title="Message">💬</button>
-                <button className="member-action-btn" title="More">⋯</button>
-              </div>
-
-              {selectedMember === member.id && showRoleMenu && (
-                <div className="role-assignment-menu" onClick={(e) => e.stopPropagation()}>
-                  <div className="role-menu-header">Manage Roles</div>
-                  {allRoles.map(role => (
-                    <label key={role.id} className="role-menu-item">
-                      <input
-                        type="checkbox"
-                        checked={member.roles.includes(role.id)}
-                        onChange={() => toggleMemberRole(member.id, role.id)}
-                      />
-                      <span className="role-dot" style={{ background: role.color }}></span>
-                      <span>{role.name}</span>
-                    </label>
-                  ))}
-                </div>
-              )}
-            </div>
-          ))
-        )}
-      </div>
-
-      <div className="member-list-footer">
-        <button className="prune-members-btn">Prune Members</button>
-        <button className="invite-members-btn">Invite People</button>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/MemberSidebar.jsx b/src/frontend/mockup/MemberSidebar.jsx
deleted file mode 100644
index abca915..0000000
--- a/src/frontend/mockup/MemberSidebar.jsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from 'react';
-
-const memberSections = [
-  {
-    title: 'Foundation Team',
-    count: 8,
-    members: [
-      { id: 1, name: 'Anderson', tag: 'Anderson#0001', initial: 'A', gradient: 'linear-gradient(135deg, #ff0000, #cc0000)', status: 'online', banner: '#ff0000', customStatus: '🔥 Building AeThex', badge: 'Founder', roles: [{ name: 'Founder', color: '#ff0000' }, { name: 'Foundation', color: '#cc0000' }], about: 'Creator of AeThex ecosystem. Building the future of developer tools.' },
-      { id: 2, name: 'Trevor', tag: 'Trevor#0042', initial: 'T', gradient: 'linear-gradient(135deg, #ff0000, #cc0000)', status: 'online', banner: '#cc0000', badge: 'Foundation', roles: [{ name: 'Foundation', color: '#cc0000' }, { name: 'Developer', color: '#5865f2' }], about: 'Lead developer on authentication systems.' },
-    ],
-  },
-  {
-    title: 'Labs Team',
-    count: 12,
-    members: [
-      { id: 3, name: 'Sarah', tag: 'Sarah#1337', initial: 'S', gradient: 'linear-gradient(135deg, #ffa500, #ff8c00)', status: 'labs', banner: '#ffa500', activity: 'Testing v2.0', badge: 'Labs', roles: [{ name: 'Labs', color: '#ffa500' }, { name: 'Tester', color: '#3ba55d' }], about: 'Experimental features lead. Breaking things so you don\'t have to.' },
-    ],
-  },
-  {
-    title: 'Developers',
-    count: 47,
-    members: [
-      { id: 4, name: 'Marcus', tag: 'Marcus#2048', initial: 'M', gradient: 'linear-gradient(135deg, #0066ff, #003380)', status: 'in-game', activity: 'Building', banner: '#0066ff', roles: [{ name: 'Developer', color: '#5865f2' }], about: 'Full-stack developer passionate about clean code.' },
-      { id: 5, name: 'DevUser_2847', tag: 'DevUser_2847#2847', initial: 'D', status: 'online', roles: [{ name: 'Member', color: '#99aab5' }] },
-    ],
-  },
-  {
-    title: 'Community',
-    count: 61,
-    members: [
-      { id: 6, name: 'JohnDev', tag: 'JohnDev#9999', initial: 'J', status: 'idle', roles: [{ name: 'Member', color: '#99aab5' }] },
-    ],
-  },
-];
-
-export default function MemberSidebar({ onMemberClick }) {
-  return (
-    <div className="member-sidebar">
-      <div className="member-header">Members — 128</div>
-      
-      <div className="member-list">
-        {memberSections.map((section) => (
-          <div key={section.title} className="member-section">
-            <div className="member-section-title">{section.title} — {section.count}</div>
-            {section.members.map((member) => (
-              <div 
-                key={member.id} 
-                className="member-item"
-                onClick={() => onMemberClick?.(member)}
-                style={{ cursor: 'pointer' }}
-              >
-                <div 
-                  className="member-avatar-small"
-                  style={member.gradient ? { background: member.gradient } : undefined}
-                >
-                  {member.initial}
-                  {member.status && (
-                    <div className={`online-indicator ${member.status}`}></div>
-                  )}
-                </div>
-                <div className="member-name">{member.name}</div>
-                {member.activity && (
-                  <div className="member-activity">{member.activity}</div>
-                )}
-              </div>
-            ))}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/Message.jsx b/src/frontend/mockup/Message.jsx
deleted file mode 100644
index a868461..0000000
--- a/src/frontend/mockup/Message.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from "react";
-
-export default function Message(props) {
-  if (props.type === "system") {
-    return (
-      <div className={`message-system ${props.className} bg-[#0f0f0f] border-l-4 pl-4 pr-4 py-3 mb-4 text-sm`}>
-        <div className={`system-label ${props.className} text-xs uppercase tracking-wider font-bold mb-1`}>[{props.label}] System Announcement</div>
-        <div>{props.text}</div>
-      </div>
-    );
-  }
-  return (
-    <div className="message flex gap-4 mb-5 p-3 rounded transition hover:bg-[#0f0f0f]">
-      <div className={`message-avatar w-10 h-10 rounded-full flex items-center justify-center font-bold text-base flex-shrink-0 bg-gradient-to-tr ${props.avatarBg}`}>{props.avatar}</div>
-      <div className="message-content flex-1">
-        <div className="message-header flex items-baseline gap-3 mb-1">
-          <span className="message-author font-bold">{props.author}</span>
-          {props.badge && (
-            <span className={`message-badge ${props.className} text-xs px-2 py-1 rounded uppercase tracking-wider font-bold`}>{props.badge}</span>
-          )}
-          <span className="message-time text-xs text-gray-500">{props.time}</span>
-        </div>
-        <div className="message-text leading-relaxed text-gray-300">{props.text}</div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/MessageActions.jsx b/src/frontend/mockup/MessageActions.jsx
deleted file mode 100644
index 964954a..0000000
--- a/src/frontend/mockup/MessageActions.jsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import React, { useState } from 'react';
-
-export default function MessageActions({ message, onReact, onReply, onEdit, onDelete, onPin, onThread }) {
-  const [showMore, setShowMore] = useState(false);
-  
-  const quickReactions = ['👍', '❤️', '😂', '😮', '😢', '😡'];
-
-  return (
-    <div className="message-actions">
-      <div className="quick-reactions">
-        {quickReactions.map((emoji, idx) => (
-          <button
-            key={idx}
-            className="reaction-btn"
-            onClick={() => onReact?.(emoji)}
-            title={`React with ${emoji}`}
-          >
-            {emoji}
-          </button>
-        ))}
-        <button className="reaction-btn add-reaction" title="Add Reaction">
-          😀+
-        </button>
-      </div>
-      
-      <div className="action-buttons">
-        <button className="action-btn" onClick={() => onReply?.()} title="Reply">
-          ↩️
-        </button>
-        <button className="action-btn" onClick={() => onThread?.()} title="Create Thread">
-          🧵
-        </button>
-        {message?.isOwn && (
-          <button className="action-btn" onClick={() => onEdit?.()} title="Edit">
-            ✏️
-          </button>
-        )}
-        <button 
-          className="action-btn more-btn" 
-          onClick={() => setShowMore(!showMore)}
-          title="More"
-        >
-          ⋯
-        </button>
-      </div>
-      
-      {showMore && (
-        <div className="more-menu">
-          <div className="menu-item" onClick={() => onPin?.()}>
-            📌 {message?.isPinned ? 'Unpin' : 'Pin'} Message
-          </div>
-          <div className="menu-item">
-            📋 Copy Text
-          </div>
-          <div className="menu-item">
-            🔗 Copy Link
-          </div>
-          <div className="menu-item">
-            🚩 Mark Unread
-          </div>
-          <div className="menu-divider"></div>
-          <div className="menu-item">
-            💬 Reply
-          </div>
-          <div className="menu-item">
-            🧵 Create Thread
-          </div>
-          <div className="menu-divider"></div>
-          <div className="menu-item">
-            🚫 Report Message
-          </div>
-          {message?.isOwn && (
-            <>
-              <div className="menu-divider"></div>
-              <div className="menu-item danger" onClick={() => onDelete?.()}>
-                🗑️ Delete Message
-              </div>
-            </>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/MessageInput.jsx b/src/frontend/mockup/MessageInput.jsx
deleted file mode 100644
index 4e7721a..0000000
--- a/src/frontend/mockup/MessageInput.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-
-export default function MessageInput() {
-  return (
-    <div className="flex items-center gap-2">
-      <button className="attachButton w-10 h-10 flex items-center justify-center rounded bg-[#1a1a1a] text-xl text-gray-400 mr-2">+</button>
-      <input
-        type="text"
-        className="message-input flex-1 bg-[#0f0f0f] border border-[#1a1a1a] rounded-lg px-4 py-3 text-gray-200 text-sm focus:outline-none focus:border-blue-500 placeholder:text-gray-500"
-        placeholder="Message #general (Foundation infrastructure channel)"
-        maxLength={2000}
-      />
-      <button className="sendButton w-10 h-10 flex items-center justify-center rounded bg-blue-600 text-xl text-white ml-2">🎤</button>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/ModerationModal.jsx b/src/frontend/mockup/ModerationModal.jsx
deleted file mode 100644
index 267529e..0000000
--- a/src/frontend/mockup/ModerationModal.jsx
+++ /dev/null
@@ -1,273 +0,0 @@
-import React, { useState } from 'react';
-
-// Moderation action modal - for kicks, bans, timeouts
-export default function ModerationModal({ type, user, onSubmit, onClose }) {
-  const [reason, setReason] = useState('');
-  const [deleteMessages, setDeleteMessages] = useState('none');
-  const [duration, setDuration] = useState('1h');
-
-  const typeConfig = {
-    kick: {
-      title: 'Kick Member',
-      icon: '👢',
-      action: 'Kick',
-      color: '#faa61a',
-      description: `Are you sure you want to kick ${user?.name}? They will be able to rejoin with a new invite.`,
-    },
-    ban: {
-      title: 'Ban Member',
-      icon: '🔨',
-      action: 'Ban',
-      color: '#ed4245',
-      description: `Are you sure you want to ban ${user?.name}? They will not be able to rejoin unless unbanned.`,
-      showDeleteMessages: true,
-    },
-    timeout: {
-      title: 'Timeout Member',
-      icon: '⏰',
-      action: 'Timeout',
-      color: '#faa61a',
-      description: `Temporarily mute ${user?.name}. They won't be able to send messages, react, or join voice.`,
-      showDuration: true,
-    },
-    warn: {
-      title: 'Warn Member',
-      icon: '⚠️',
-      action: 'Warn',
-      color: '#faa61a',
-      description: `Send a warning to ${user?.name}. This will be logged in the audit log.`,
-    },
-  };
-
-  const config = typeConfig[type] || typeConfig.kick;
-
-  const durations = [
-    { value: '60s', label: '60 seconds' },
-    { value: '5m', label: '5 minutes' },
-    { value: '10m', label: '10 minutes' },
-    { value: '1h', label: '1 hour' },
-    { value: '1d', label: '1 day' },
-    { value: '1w', label: '1 week' },
-  ];
-
-  const deleteOptions = [
-    { value: 'none', label: "Don't delete any" },
-    { value: '1h', label: 'Previous hour' },
-    { value: '24h', label: 'Previous 24 hours' },
-    { value: '7d', label: 'Previous 7 days' },
-  ];
-
-  const handleSubmit = () => {
-    onSubmit?.({
-      type,
-      userId: user?.id,
-      reason,
-      deleteMessages: config.showDeleteMessages ? deleteMessages : undefined,
-      duration: config.showDuration ? duration : undefined,
-    });
-  };
-
-  return (
-    <div className="modal-overlay" onClick={onClose}>
-      <div className="moderation-modal" onClick={(e) => e.stopPropagation()}>
-        <div className="mod-header" style={{ borderColor: config.color }}>
-          <span className="mod-icon">{config.icon}</span>
-          <h2>{config.title}</h2>
-        </div>
-
-        <div className="mod-content">
-          <div className="mod-user">
-            <div 
-              className="mod-user-avatar"
-              style={user?.color ? { background: user.color } : undefined}
-            >
-              {user?.avatar || user?.name?.[0]}
-            </div>
-            <div className="mod-user-info">
-              <span className="mod-user-name">{user?.name}</span>
-              {user?.tag && <span className="mod-user-tag">{user.tag}</span>}
-            </div>
-          </div>
-
-          <p className="mod-description">{config.description}</p>
-
-          {config.showDuration && (
-            <div className="mod-field">
-              <label>Duration</label>
-              <select 
-                value={duration}
-                onChange={(e) => setDuration(e.target.value)}
-                className="mod-select"
-              >
-                {durations.map(d => (
-                  <option key={d.value} value={d.value}>{d.label}</option>
-                ))}
-              </select>
-            </div>
-          )}
-
-          {config.showDeleteMessages && (
-            <div className="mod-field">
-              <label>Delete message history</label>
-              <select 
-                value={deleteMessages}
-                onChange={(e) => setDeleteMessages(e.target.value)}
-                className="mod-select"
-              >
-                {deleteOptions.map(d => (
-                  <option key={d.value} value={d.value}>{d.label}</option>
-                ))}
-              </select>
-            </div>
-          )}
-
-          <div className="mod-field">
-            <label>Reason (optional)</label>
-            <textarea
-              placeholder="Enter a reason..."
-              value={reason}
-              onChange={(e) => setReason(e.target.value)}
-              rows={3}
-            />
-            <span className="field-hint">This will be recorded in the audit log</span>
-          </div>
-        </div>
-
-        <div className="mod-footer">
-          <button className="cancel-btn" onClick={onClose}>Cancel</button>
-          <button 
-            className="action-btn"
-            style={{ background: config.color }}
-            onClick={handleSubmit}
-          >
-            {config.action}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// User notes modal
-export function UserNotesModal({ user, onSave, onClose }) {
-  const [note, setNote] = useState(user?.note || '');
-
-  return (
-    <div className="modal-overlay" onClick={onClose}>
-      <div className="notes-modal" onClick={(e) => e.stopPropagation()}>
-        <div className="notes-header">
-          <h2>Note about {user?.name}</h2>
-          <button className="modal-close" onClick={onClose}>✕</button>
-        </div>
-
-        <div className="notes-content">
-          <textarea
-            placeholder="Click to add a note..."
-            value={note}
-            onChange={(e) => setNote(e.target.value)}
-            rows={5}
-          />
-          <span className="notes-hint">Only you can see this note</span>
-        </div>
-
-        <div className="notes-footer">
-          <button className="cancel-btn" onClick={onClose}>Cancel</button>
-          <button 
-            className="save-btn"
-            onClick={() => onSave?.(note)}
-          >
-            Save Note
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// Report user modal
-export function ReportModal({ user, message, onSubmit, onClose }) {
-  const [category, setCategory] = useState('');
-  const [details, setDetails] = useState('');
-
-  const categories = [
-    { value: 'harassment', label: 'Harassment or Bullying' },
-    { value: 'spam', label: 'Spam or Scam' },
-    { value: 'hate', label: 'Hate Speech or Discrimination' },
-    { value: 'nsfw', label: 'Inappropriate Content' },
-    { value: 'impersonation', label: 'Impersonation' },
-    { value: 'threats', label: 'Threats or Violence' },
-    { value: 'other', label: 'Other' },
-  ];
-
-  return (
-    <div className="modal-overlay" onClick={onClose}>
-      <div className="report-modal" onClick={(e) => e.stopPropagation()}>
-        <div className="report-header">
-          <span className="report-icon">🚩</span>
-          <h2>Report {message ? 'Message' : 'User'}</h2>
-        </div>
-
-        <div className="report-content">
-          {user && (
-            <div className="report-target">
-              <div 
-                className="target-avatar"
-                style={user.color ? { background: user.color } : undefined}
-              >
-                {user.avatar || user.name?.[0]}
-              </div>
-              <span className="target-name">{user.name}</span>
-            </div>
-          )}
-
-          {message && (
-            <div className="reported-message">
-              <div className="reported-content">{message.text}</div>
-            </div>
-          )}
-
-          <div className="report-field">
-            <label>What's the issue?</label>
-            <div className="category-options">
-              {categories.map(cat => (
-                <button
-                  key={cat.value}
-                  className={`category-btn ${category === cat.value ? 'selected' : ''}`}
-                  onClick={() => setCategory(cat.value)}
-                >
-                  {cat.label}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          <div className="report-field">
-            <label>Additional details (optional)</label>
-            <textarea
-              placeholder="Provide more context about this issue..."
-              value={details}
-              onChange={(e) => setDetails(e.target.value)}
-              rows={3}
-            />
-          </div>
-
-          <div className="report-notice">
-            <span className="notice-icon">ℹ️</span>
-            <p>Reports are confidential. The reported user won't know who reported them.</p>
-          </div>
-        </div>
-
-        <div className="report-footer">
-          <button className="cancel-btn" onClick={onClose}>Cancel</button>
-          <button 
-            className="submit-btn"
-            onClick={() => onSubmit?.({ category, details })}
-            disabled={!category}
-          >
-            Submit Report
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/NitroPanel.jsx b/src/frontend/mockup/NitroPanel.jsx
deleted file mode 100644
index 2b4e6d3..0000000
--- a/src/frontend/mockup/NitroPanel.jsx
+++ /dev/null
@@ -1,233 +0,0 @@
-import React, { useState } from 'react';
-
-const nitroFeatures = [
-  { id: 'animated-avatar', icon: '👤', title: 'Animated Avatar', description: 'Use GIFs as your profile picture' },
-  { id: 'animated-emoji', icon: '😄', title: 'Animated Emoji', description: 'Use animated emojis anywhere' },
-  { id: 'larger-uploads', icon: '📁', title: '500MB Uploads', description: 'Share large files up to 500MB' },
-  { id: 'hd-streaming', icon: '📺', title: 'HD Streaming', description: 'Stream in 4K at 60fps' },
-  { id: 'custom-tag', icon: '🏷️', title: 'Custom Tag', description: 'Choose your own 4-digit tag' },
-  { id: 'server-boost', icon: '🚀', title: '2 Free Boosts', description: 'Boost your favorite servers' },
-  { id: 'profile-banner', icon: '🖼️', title: 'Profile Banner', description: 'Add a custom banner to your profile' },
-  { id: 'custom-themes', icon: '🎨', title: 'Custom Themes', description: 'Personalize your client' },
-  { id: 'super-reactions', icon: '✨', title: 'Super Reactions', description: 'Send enhanced animated reactions' },
-  { id: 'soundboard', icon: '🔊', title: 'More Sounds', description: 'Upload more soundboard sounds' },
-];
-
-const plans = [
-  {
-    id: 'nitro',
-    name: 'Nitro',
-    price: '$9.99',
-    period: '/month',
-    yearlyPrice: '$99.99',
-    features: nitroFeatures.map(f => f.id),
-    popular: true,
-  },
-  {
-    id: 'nitro-basic',
-    name: 'Nitro Basic',
-    price: '$2.99',
-    period: '/month',
-    yearlyPrice: '$29.99',
-    features: ['animated-emoji', 'larger-uploads', 'custom-tag'],
-    popular: false,
-  },
-];
-
-const boostPerks = [
-  { level: 1, boosts: 2, perks: ['50 extra emoji slots', '128kbps audio', 'Animated server icon', 'Custom invite background'] },
-  { level: 2, boosts: 7, perks: ['100 extra emoji slots', '256kbps audio', '50MB upload limit', 'Server banner'] },
-  { level: 3, boosts: 14, perks: ['250 extra emoji slots', '384kbps audio', '100MB upload limit', 'Vanity URL'] },
-];
-
-export default function NitroPanel({ onClose }) {
-  const [activeTab, setActiveTab] = useState('subscribe');
-  const [billingCycle, setBillingCycle] = useState('monthly');
-  const [selectedPlan, setSelectedPlan] = useState('nitro');
-
-  return (
-    <div className="nitro-panel">
-      <div className="nitro-header">
-        <div className="nitro-branding">
-          <span className="nitro-logo">🚀</span>
-          <h1>Nitro</h1>
-        </div>
-        <button className="nitro-close" onClick={onClose}>✕</button>
-      </div>
-
-      <div className="nitro-tabs">
-        <button 
-          className={`nitro-tab ${activeTab === 'subscribe' ? 'active' : ''}`}
-          onClick={() => setActiveTab('subscribe')}
-        >
-          Subscribe
-        </button>
-        <button 
-          className={`nitro-tab ${activeTab === 'boost' ? 'active' : ''}`}
-          onClick={() => setActiveTab('boost')}
-        >
-          Server Boost
-        </button>
-        <button 
-          className={`nitro-tab ${activeTab === 'gift' ? 'active' : ''}`}
-          onClick={() => setActiveTab('gift')}
-        >
-          Gift
-        </button>
-      </div>
-
-      {activeTab === 'subscribe' && (
-        <div className="nitro-content">
-          <div className="nitro-hero">
-            <h2>Unleash more fun</h2>
-            <p>Subscribe to Nitro to unlock features and perks</p>
-          </div>
-
-          <div className="billing-toggle">
-            <button 
-              className={`billing-option ${billingCycle === 'monthly' ? 'active' : ''}`}
-              onClick={() => setBillingCycle('monthly')}
-            >
-              Monthly
-            </button>
-            <button 
-              className={`billing-option ${billingCycle === 'yearly' ? 'active' : ''}`}
-              onClick={() => setBillingCycle('yearly')}
-            >
-              Yearly <span className="save-badge">Save 16%</span>
-            </button>
-          </div>
-
-          <div className="plans-grid">
-            {plans.map(plan => (
-              <div 
-                key={plan.id}
-                className={`plan-card ${plan.popular ? 'popular' : ''} ${selectedPlan === plan.id ? 'selected' : ''}`}
-                onClick={() => setSelectedPlan(plan.id)}
-              >
-                {plan.popular && <div className="popular-badge">Most Popular</div>}
-                <h3>{plan.name}</h3>
-                <div className="plan-price">
-                  <span className="price">{billingCycle === 'yearly' ? plan.yearlyPrice : plan.price}</span>
-                  <span className="period">{billingCycle === 'yearly' ? '/year' : plan.period}</span>
-                </div>
-                <ul className="plan-features">
-                  {nitroFeatures.filter(f => plan.features.includes(f.id)).map(feature => (
-                    <li key={feature.id}>
-                      <span className="check">✓</span>
-                      {feature.title}
-                    </li>
-                  ))}
-                </ul>
-                <button className="select-plan-btn">
-                  {selectedPlan === plan.id ? 'Selected' : 'Select'}
-                </button>
-              </div>
-            ))}
-          </div>
-
-          <button className="subscribe-btn">
-            Subscribe to {plans.find(p => p.id === selectedPlan)?.name}
-          </button>
-        </div>
-      )}
-
-      {activeTab === 'boost' && (
-        <div className="nitro-content">
-          <div className="boost-hero">
-            <span className="boost-icon">🚀</span>
-            <h2>Server Boost</h2>
-            <p>Unlock perks for your favorite communities</p>
-          </div>
-
-          <div className="boost-levels">
-            {boostPerks.map(level => (
-              <div key={level.level} className="boost-level-card">
-                <div className="level-header">
-                  <span className="level-badge">Level {level.level}</span>
-                  <span className="boost-requirement">{level.boosts} Boosts</span>
-                </div>
-                <ul className="level-perks">
-                  {level.perks.map((perk, idx) => (
-                    <li key={idx}>
-                      <span className="perk-check">✓</span>
-                      {perk}
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            ))}
-          </div>
-
-          <div className="boost-cta">
-            <button className="boost-btn">
-              🚀 Boost a Server
-            </button>
-            <p className="boost-price">$4.99/month or included with Nitro</p>
-          </div>
-        </div>
-      )}
-
-      {activeTab === 'gift' && (
-        <div className="nitro-content">
-          <div className="gift-hero">
-            <span className="gift-icon">🎁</span>
-            <h2>Gift Nitro</h2>
-            <p>Send the gift of Nitro to a friend</p>
-          </div>
-
-          <div className="gift-options">
-            <div className="gift-card">
-              <h3>Nitro</h3>
-              <div className="gift-durations">
-                <button className="duration-btn active">1 Month - $9.99</button>
-                <button className="duration-btn">1 Year - $99.99</button>
-              </div>
-            </div>
-            <div className="gift-card">
-              <h3>Nitro Basic</h3>
-              <div className="gift-durations">
-                <button className="duration-btn active">1 Month - $2.99</button>
-                <button className="duration-btn">1 Year - $29.99</button>
-              </div>
-            </div>
-          </div>
-
-          <div className="gift-recipient">
-            <label>Send to</label>
-            <input type="text" placeholder="Enter a username" />
-          </div>
-
-          <div className="gift-message">
-            <label>Add a message (optional)</label>
-            <textarea placeholder="Write a message to include with your gift..." rows={3} />
-          </div>
-
-          <button className="purchase-gift-btn">
-            🎁 Purchase Gift
-          </button>
-        </div>
-      )}
-
-      <div className="nitro-footer">
-        <a href="#" className="nitro-link">Nitro Terms</a>
-        <span>•</span>
-        <a href="#" className="nitro-link">Paid Services Terms</a>
-      </div>
-    </div>
-  );
-}
-
-// Nitro badge component
-export function NitroBadge({ type = 'full' }) {
-  if (type === 'icon') {
-    return <span className="nitro-badge-icon">🚀</span>;
-  }
-  
-  return (
-    <div className="nitro-badge">
-      <span className="badge-icon">🚀</span>
-      <span className="badge-text">Nitro</span>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/NotificationSettings.jsx b/src/frontend/mockup/NotificationSettings.jsx
deleted file mode 100644
index 81afd7e..0000000
--- a/src/frontend/mockup/NotificationSettings.jsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import React, { useState } from 'react';
-
-export default function NotificationSettings({ server, channel, onClose, onSave }) {
-  const isChannelSettings = !!channel;
-  const name = channel?.name || server?.name || 'AeThex Foundation';
-
-  const [notifSetting, setNotifSetting] = useState('all');
-  const [suppressEveryone, setSuppressEveryone] = useState(false);
-  const [suppressRoles, setSuppressRoles] = useState(false);
-  const [muteUntil, setMuteUntil] = useState('none');
-  const [mobilePush, setMobilePush] = useState(true);
-
-  const notifOptions = [
-    { id: 'all', label: 'All Messages', desc: 'Get notified for all messages' },
-    { id: 'mentions', label: 'Only @mentions', desc: 'Only notify when mentioned' },
-    { id: 'nothing', label: 'Nothing', desc: 'Mute all notifications' },
-  ];
-
-  if (isChannelSettings) {
-    notifOptions.unshift({ id: 'default', label: 'Default', desc: 'Use server default setting' });
-  }
-
-  const muteOptions = [
-    { value: 'none', label: 'Not muted' },
-    { value: '15min', label: 'For 15 minutes' },
-    { value: '1hour', label: 'For 1 hour' },
-    { value: '8hours', label: 'For 8 hours' },
-    { value: '24hours', label: 'For 24 hours' },
-    { value: 'forever', label: 'Until I turn it back on' },
-  ];
-
-  const handleSave = () => {
-    onSave?.({
-      notifSetting,
-      suppressEveryone,
-      suppressRoles,
-      muteUntil,
-      mobilePush,
-    });
-  };
-
-  return (
-    <div className="modal-overlay" onClick={onClose}>
-      <div className="notification-settings-modal" onClick={(e) => e.stopPropagation()}>
-        <div className="notif-header">
-          <h2>🔔 Notification Settings</h2>
-          <button className="notif-close" onClick={onClose}>✕</button>
-        </div>
-
-        <div className="notif-target">
-          <span className="target-icon">{isChannelSettings ? '#' : '🏠'}</span>
-          <span className="target-name">{name}</span>
-        </div>
-
-        <div className="notif-content">
-          <div className="notif-section">
-            <h3>Notification Frequency</h3>
-            <div className="notif-options">
-              {notifOptions.map(opt => (
-                <label
-                  key={opt.id}
-                  className={`notif-option ${notifSetting === opt.id ? 'selected' : ''}`}
-                >
-                  <input
-                    type="radio"
-                    name="notifSetting"
-                    value={opt.id}
-                    checked={notifSetting === opt.id}
-                    onChange={() => setNotifSetting(opt.id)}
-                  />
-                  <div className="option-content">
-                    <span className="option-label">{opt.label}</span>
-                    <span className="option-desc">{opt.desc}</span>
-                  </div>
-                </label>
-              ))}
-            </div>
-          </div>
-
-          <div className="notif-section">
-            <h3>Mute {isChannelSettings ? 'Channel' : 'Server'}</h3>
-            <select
-              className="mute-select"
-              value={muteUntil}
-              onChange={(e) => setMuteUntil(e.target.value)}
-            >
-              {muteOptions.map(opt => (
-                <option key={opt.value} value={opt.value}>{opt.label}</option>
-              ))}
-            </select>
-          </div>
-
-          <div className="notif-section">
-            <h3>Suppress</h3>
-            <div className="suppress-options">
-              <label className="suppress-option">
-                <input
-                  type="checkbox"
-                  checked={suppressEveryone}
-                  onChange={(e) => setSuppressEveryone(e.target.checked)}
-                />
-                <span>Suppress @everyone and @here</span>
-              </label>
-              <label className="suppress-option">
-                <input
-                  type="checkbox"
-                  checked={suppressRoles}
-                  onChange={(e) => setSuppressRoles(e.target.checked)}
-                />
-                <span>Suppress All Role @mentions</span>
-              </label>
-            </div>
-          </div>
-
-          <div className="notif-section">
-            <div className="toggle-row">
-              <div className="toggle-info">
-                <h3>Mobile Push Notifications</h3>
-                <p>Receive push notifications on mobile</p>
-              </div>
-              <label className="toggle-switch">
-                <input
-                  type="checkbox"
-                  checked={mobilePush}
-                  onChange={(e) => setMobilePush(e.target.checked)}
-                />
-                <span className="toggle-slider"></span>
-              </label>
-            </div>
-          </div>
-
-          {!isChannelSettings && (
-            <div className="notif-section channel-overrides">
-              <h3>Channel Overrides</h3>
-              <p className="override-hint">You can customize notifications for individual channels</p>
-              <div className="override-list">
-                <div className="override-item">
-                  <span>#announcements</span>
-                  <span className="override-value">All Messages</span>
-                </div>
-                <div className="override-item">
-                  <span>#spam</span>
-                  <span className="override-value">Muted</span>
-                </div>
-              </div>
-              <button className="add-override-btn">+ Add Override</button>
-            </div>
-          )}
-        </div>
-
-        <div className="notif-footer">
-          <button className="cancel-btn" onClick={onClose}>Cancel</button>
-          <button className="save-btn" onClick={handleSave}>Done</button>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/NotificationsPanel.jsx b/src/frontend/mockup/NotificationsPanel.jsx
deleted file mode 100644
index aab9bea..0000000
--- a/src/frontend/mockup/NotificationsPanel.jsx
+++ /dev/null
@@ -1,189 +0,0 @@
-import React, { useState } from 'react';
-
-const allNotifications = [
-  { 
-    id: 1, 
-    type: 'mention', 
-    server: 'AeThex Foundation', 
-    serverIcon: 'F', 
-    serverGradient: 'linear-gradient(135deg, #ff0000, #990000)',
-    channel: 'general',
-    author: 'Trevor',
-    authorAvatar: 'T',
-    message: '@Anderson check out the new auth flow!',
-    time: '2 minutes ago',
-    unread: true,
-  },
-  {
-    id: 2,
-    type: 'reply',
-    server: 'AeThex Labs',
-    serverIcon: 'L',
-    serverGradient: 'linear-gradient(135deg, #ffa500, #ff8c00)',
-    channel: 'testing',
-    author: 'Sarah',
-    authorAvatar: 'S',
-    message: 'Great point! I\'ll add that to the test suite.',
-    time: '15 minutes ago',
-    unread: true,
-  },
-  {
-    id: 3,
-    type: 'dm',
-    author: 'Marcus',
-    authorAvatar: 'M',
-    authorGradient: 'linear-gradient(135deg, #0066ff, #003380)',
-    message: 'The API integration is ready for review!',
-    time: '1 hour ago',
-    unread: true,
-  },
-  {
-    id: 4,
-    type: 'friend-request',
-    author: 'NewDev123',
-    authorAvatar: 'N',
-    message: 'sent you a friend request.',
-    time: '2 hours ago',
-    unread: false,
-  },
-  {
-    id: 5,
-    type: 'server-invite',
-    server: 'Dev Community',
-    serverIcon: 'DC',
-    author: 'JohnDev',
-    message: 'invited you to join the server.',
-    time: '3 hours ago',
-    unread: false,
-  },
-];
-
-export default function NotificationsPanel({ onClose, onNotificationClick }) {
-  const [filter, setFilter] = useState('all');
-  const [notifications, setNotifications] = useState(allNotifications);
-
-  const filters = [
-    { id: 'all', label: 'All' },
-    { id: 'mentions', label: 'Mentions' },
-    { id: 'unreads', label: 'Unreads' },
-  ];
-
-  const filteredNotifications = notifications.filter((n) => {
-    if (filter === 'mentions') return n.type === 'mention';
-    if (filter === 'unreads') return n.unread;
-    return true;
-  });
-
-  const markAllRead = () => {
-    setNotifications((prev) => prev.map((n) => ({ ...n, unread: false })));
-  };
-
-  const clearAll = () => {
-    setNotifications([]);
-  };
-
-  const getNotificationIcon = (type) => {
-    switch (type) {
-      case 'mention': return '@';
-      case 'reply': return '↩️';
-      case 'dm': return '💬';
-      case 'friend-request': return '👋';
-      case 'server-invite': return '✉️';
-      default: return '🔔';
-    }
-  };
-
-  return (
-    <div className="notifications-panel">
-      <div className="notifications-header">
-        <h3>Inbox</h3>
-        <div className="notifications-actions">
-          <button className="mark-read-btn" onClick={markAllRead}>Mark All Read</button>
-          <button className="clear-btn" onClick={clearAll}>Clear All</button>
-        </div>
-        <button className="notifications-close" onClick={onClose}>✕</button>
-      </div>
-
-      <div className="notifications-filters">
-        {filters.map((f) => (
-          <button
-            key={f.id}
-            className={`filter-btn ${filter === f.id ? 'active' : ''}`}
-            onClick={() => setFilter(f.id)}
-          >
-            {f.label}
-          </button>
-        ))}
-      </div>
-
-      <div className="notifications-list">
-        {filteredNotifications.length === 0 ? (
-          <div className="notifications-empty">
-            <span className="empty-icon">📭</span>
-            <p>You're all caught up!</p>
-          </div>
-        ) : (
-          filteredNotifications.map((notification) => (
-            <div 
-              key={notification.id}
-              className={`notification-item ${notification.unread ? 'unread' : ''}`}
-              onClick={() => onNotificationClick?.(notification)}
-            >
-              <div className="notification-icon-container">
-                {notification.type === 'dm' || notification.type === 'friend-request' ? (
-                  <div 
-                    className="notification-avatar"
-                    style={{ background: notification.authorGradient || '#36393f' }}
-                  >
-                    {notification.authorAvatar}
-                  </div>
-                ) : notification.serverIcon ? (
-                  <div 
-                    className="notification-server-icon"
-                    style={{ background: notification.serverGradient || '#36393f' }}
-                  >
-                    {notification.serverIcon}
-                  </div>
-                ) : (
-                  <div className="notification-type-icon">
-                    {getNotificationIcon(notification.type)}
-                  </div>
-                )}
-                <div className="notification-type-badge">
-                  {getNotificationIcon(notification.type)}
-                </div>
-              </div>
-
-              <div className="notification-content">
-                <div className="notification-header-row">
-                  {notification.server && (
-                    <>
-                      <span className="notification-server">{notification.server}</span>
-                      <span className="notification-separator">•</span>
-                      <span className="notification-channel">#{notification.channel}</span>
-                    </>
-                  )}
-                  {notification.type === 'dm' && (
-                    <span className="notification-author">{notification.author}</span>
-                  )}
-                  {notification.type === 'friend-request' && (
-                    <span className="notification-author">{notification.author}</span>
-                  )}
-                </div>
-                <div className="notification-message">
-                  {notification.author && notification.type !== 'dm' && notification.type !== 'friend-request' && (
-                    <strong>{notification.author}: </strong>
-                  )}
-                  {notification.message}
-                </div>
-                <div className="notification-time">{notification.time}</div>
-              </div>
-
-              {notification.unread && <div className="unread-dot" />}
-            </div>
-          ))
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/PinnedMessagesPanel.jsx b/src/frontend/mockup/PinnedMessagesPanel.jsx
deleted file mode 100644
index 3b9a282..0000000
--- a/src/frontend/mockup/PinnedMessagesPanel.jsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React from 'react';
-
-const pinnedMessages = [
-  {
-    id: 1,
-    author: 'Anderson',
-    avatar: 'A',
-    gradient: 'linear-gradient(135deg, #ff0000, #0066ff, #ffa500)',
-    badge: 'Founder',
-    time: 'Jan 15, 2026',
-    text: 'Welcome to AeThex Connect! Please read the rules in #rules and introduce yourself in #introductions. The Trinity awaits! 🔥',
-    pinnedBy: 'Anderson',
-  },
-  {
-    id: 2,
-    author: 'Trevor',
-    avatar: 'T',
-    gradient: 'linear-gradient(135deg, #ff0000, #cc0000)',
-    badge: 'Foundation',
-    time: 'Jan 20, 2026',
-    text: 'Important: Authentication v2.1.0 is now live! All users should update their Passport credentials. Check #updates for migration guide.',
-    pinnedBy: 'Trevor',
-  },
-  {
-    id: 3,
-    author: 'Sarah',
-    avatar: 'S',
-    gradient: 'linear-gradient(135deg, #ffa500, #ff8c00)',
-    badge: 'Labs',
-    time: 'Feb 1, 2026',
-    text: 'Nexus Engine v2.0 is officially out of beta! Huge thanks to everyone who helped test. Read the changelog in #changelog 🚀',
-    pinnedBy: 'Sarah',
-  },
-];
-
-export default function PinnedMessagesPanel({ channelName, onClose, onJumpToMessage }) {
-  return (
-    <div className="pinned-panel">
-      <div className="pinned-header">
-        <span className="pinned-icon">📌</span>
-        <span className="pinned-title">Pinned Messages</span>
-        <span className="pinned-channel">#{channelName || 'general'}</span>
-        <button className="pinned-close" onClick={onClose}>✕</button>
-      </div>
-
-      <div className="pinned-content">
-        {pinnedMessages.length === 0 ? (
-          <div className="pinned-empty">
-            <span className="empty-icon">📌</span>
-            <p>This channel doesn't have any pinned messages... yet.</p>
-          </div>
-        ) : (
-          <div className="pinned-list">
-            {pinnedMessages.map((msg) => (
-              <div key={msg.id} className="pinned-message">
-                <div className="pinned-message-header">
-                  <div 
-                    className="pinned-avatar"
-                    style={{ background: msg.gradient || '#36393f' }}
-                  >
-                    {msg.avatar}
-                  </div>
-                  <div className="pinned-author-info">
-                    <span className="pinned-author">{msg.author}</span>
-                    {msg.badge && <span className={`pinned-badge ${msg.badge.toLowerCase()}`}>{msg.badge}</span>}
-                    <span className="pinned-time">{msg.time}</span>
-                  </div>
-                </div>
-                <div className="pinned-message-text">{msg.text}</div>
-                <div className="pinned-message-footer">
-                  <span className="pinned-by">Pinned by {msg.pinnedBy}</span>
-                  <button 
-                    className="jump-to-btn"
-                    onClick={() => onJumpToMessage?.(msg)}
-                  >
-                    Jump
-                  </button>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-
-      <div className="pinned-footer">
-        <span className="protip">
-          <strong>PROTIP:</strong> You can pin up to 50 messages in a channel.
-        </span>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/PollCreator.jsx b/src/frontend/mockup/PollCreator.jsx
deleted file mode 100644
index 6947cc6..0000000
--- a/src/frontend/mockup/PollCreator.jsx
+++ /dev/null
@@ -1,234 +0,0 @@
-import React, { useState } from 'react';
-
-export default function PollCreator({ onSubmit, onClose }) {
-  const [question, setQuestion] = useState('');
-  const [options, setOptions] = useState(['', '']);
-  const [duration, setDuration] = useState('24h');
-  const [multiSelect, setMultiSelect] = useState(false);
-
-  const durations = [
-    { value: '1h', label: '1 Hour' },
-    { value: '4h', label: '4 Hours' },
-    { value: '8h', label: '8 Hours' },
-    { value: '24h', label: '24 Hours' },
-    { value: '3d', label: '3 Days' },
-    { value: '7d', label: '1 Week' },
-  ];
-
-  const addOption = () => {
-    if (options.length < 10) {
-      setOptions([...options, '']);
-    }
-  };
-
-  const removeOption = (index) => {
-    if (options.length > 2) {
-      setOptions(options.filter((_, i) => i !== index));
-    }
-  };
-
-  const updateOption = (index, value) => {
-    setOptions(options.map((opt, i) => i === index ? value : opt));
-  };
-
-  const handleSubmit = () => {
-    if (!question.trim() || options.filter(o => o.trim()).length < 2) return;
-    
-    onSubmit?.({
-      question,
-      options: options.filter(o => o.trim()),
-      duration,
-      multiSelect,
-    });
-    onClose?.();
-  };
-
-  const validOptions = options.filter(o => o.trim()).length;
-
-  return (
-    <div className="modal-overlay" onClick={onClose}>
-      <div className="poll-creator" onClick={(e) => e.stopPropagation()}>
-        <div className="poll-header">
-          <h2>Create Poll</h2>
-          <button className="poll-close" onClick={onClose}>✕</button>
-        </div>
-
-        <div className="poll-content">
-          <div className="poll-field">
-            <label>Question</label>
-            <textarea
-              placeholder="Ask something..."
-              value={question}
-              onChange={(e) => setQuestion(e.target.value)}
-              maxLength={300}
-              rows={2}
-            />
-            <span className="char-count">{question.length}/300</span>
-          </div>
-
-          <div className="poll-field">
-            <label>Answers</label>
-            <div className="poll-options">
-              {options.map((opt, idx) => (
-                <div key={idx} className="poll-option">
-                  <span className="option-number">{idx + 1}</span>
-                  <input
-                    type="text"
-                    placeholder={`Option ${idx + 1}`}
-                    value={opt}
-                    onChange={(e) => updateOption(idx, e.target.value)}
-                    maxLength={55}
-                  />
-                  {options.length > 2 && (
-                    <button 
-                      className="remove-option"
-                      onClick={() => removeOption(idx)}
-                    >
-                      ✕
-                    </button>
-                  )}
-                </div>
-              ))}
-            </div>
-            {options.length < 10 && (
-              <button className="add-option" onClick={addOption}>
-                + Add another answer
-              </button>
-            )}
-          </div>
-
-          <div className="poll-field">
-            <label>Duration</label>
-            <select 
-              value={duration} 
-              onChange={(e) => setDuration(e.target.value)}
-              className="poll-select"
-            >
-              {durations.map(d => (
-                <option key={d.value} value={d.value}>{d.label}</option>
-              ))}
-            </select>
-          </div>
-
-          <div className="poll-toggle">
-            <label className="toggle-label">
-              <input
-                type="checkbox"
-                checked={multiSelect}
-                onChange={(e) => setMultiSelect(e.target.checked)}
-              />
-              <span className="toggle-switch"></span>
-              <span>Allow multiple answers</span>
-            </label>
-          </div>
-        </div>
-
-        <div className="poll-preview">
-          <h4>Preview</h4>
-          <div className="preview-card">
-            <div className="preview-question">{question || 'Your question here'}</div>
-            <div className="preview-options">
-              {options.filter(o => o.trim()).map((opt, idx) => (
-                <div key={idx} className="preview-option">
-                  <div className="option-circle" />
-                  <span>{opt}</span>
-                </div>
-              ))}
-            </div>
-            <div className="preview-footer">
-              <span>0 votes</span>
-              <span>•</span>
-              <span>{durations.find(d => d.value === duration)?.label} remaining</span>
-            </div>
-          </div>
-        </div>
-
-        <div className="poll-footer">
-          <button className="poll-cancel" onClick={onClose}>Cancel</button>
-          <button 
-            className="poll-submit" 
-            onClick={handleSubmit}
-            disabled={!question.trim() || validOptions < 2}
-          >
-            Create Poll
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// Poll display component for messages
-export function Poll({ poll, onVote }) {
-  const [selected, setSelected] = useState([]);
-  const [hasVoted, setHasVoted] = useState(false);
-
-  const totalVotes = poll.options.reduce((sum, opt) => sum + (opt.votes || 0), 0);
-
-  const handleVote = (optionIndex) => {
-    if (hasVoted) return;
-    
-    if (poll.multiSelect) {
-      setSelected(prev => 
-        prev.includes(optionIndex)
-          ? prev.filter(i => i !== optionIndex)
-          : [...prev, optionIndex]
-      );
-    } else {
-      setSelected([optionIndex]);
-    }
-  };
-
-  const submitVote = () => {
-    if (selected.length === 0) return;
-    onVote?.(selected);
-    setHasVoted(true);
-  };
-
-  return (
-    <div className="poll-message">
-      <div className="poll-question">{poll.question}</div>
-      <div className="poll-options-list">
-        {poll.options.map((opt, idx) => {
-          const percentage = hasVoted && totalVotes > 0 
-            ? Math.round((opt.votes / totalVotes) * 100) 
-            : 0;
-          
-          return (
-            <button
-              key={idx}
-              className={`poll-vote-option ${selected.includes(idx) ? 'selected' : ''} ${hasVoted ? 'voted' : ''}`}
-              onClick={() => handleVote(idx)}
-              disabled={hasVoted}
-            >
-              {hasVoted && (
-                <div className="vote-bar" style={{ width: `${percentage}%` }} />
-              )}
-              <div className="vote-content">
-                {!hasVoted && (
-                  <div className={`vote-checkbox ${poll.multiSelect ? 'multi' : ''}`}>
-                    {selected.includes(idx) && '✓'}
-                  </div>
-                )}
-                <span className="vote-text">{opt.text}</span>
-                {hasVoted && (
-                  <span className="vote-percentage">{percentage}%</span>
-                )}
-              </div>
-            </button>
-          );
-        })}
-      </div>
-      {!hasVoted && selected.length > 0 && (
-        <button className="submit-vote" onClick={submitVote}>
-          Vote
-        </button>
-      )}
-      <div className="poll-info">
-        <span>{totalVotes} vote{totalVotes !== 1 ? 's' : ''}</span>
-        <span>•</span>
-        <span>{poll.timeLeft}</span>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/QuickSwitcher.jsx b/src/frontend/mockup/QuickSwitcher.jsx
deleted file mode 100644
index ff94372..0000000
--- a/src/frontend/mockup/QuickSwitcher.jsx
+++ /dev/null
@@ -1,216 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-
-const recentItems = [
-  { type: 'channel', id: 'general', name: 'general', server: 'AeThex Foundation', icon: '#' },
-  { type: 'dm', id: 'dm-1', name: 'Trevor', avatar: 'T', color: '#ff0000' },
-  { type: 'channel', id: 'api-discussion', name: 'api-discussion', server: 'AeThex Foundation', icon: '#' },
-];
-
-const allItems = [
-  // Channels
-  { type: 'channel', id: 'general', name: 'general', server: 'AeThex Foundation', icon: '#' },
-  { type: 'channel', id: 'updates', name: 'updates', server: 'AeThex Foundation', icon: '📢' },
-  { type: 'channel', id: 'api-discussion', name: 'api-discussion', server: 'AeThex Foundation', icon: '#' },
-  { type: 'channel', id: 'bug-reports', name: 'bug-reports', server: 'AeThex Foundation', icon: '🐛' },
-  { type: 'channel', id: 'nexus-lounge', name: 'Nexus Lounge', server: 'AeThex Foundation', icon: '🔊', isVoice: true },
-  { type: 'channel', id: 'labs-general', name: 'general', server: 'AeThex Labs', icon: '#' },
-  { type: 'channel', id: 'experiments', name: 'experiments', server: 'AeThex Labs', icon: '🧪' },
-  // Users/DMs
-  { type: 'user', id: 'u-1', name: 'Trevor', tag: '#0001', avatar: 'T', color: '#ff0000' },
-  { type: 'user', id: 'u-2', name: 'Sarah', tag: '#0042', avatar: 'S', color: '#ffa500' },
-  { type: 'user', id: 'u-3', name: 'Marcus', tag: '#1234', avatar: 'M', color: '#0066ff' },
-  { type: 'user', id: 'u-4', name: 'Anderson', tag: '#0001', avatar: 'A', color: '#5865f2' },
-  // Servers
-  { type: 'server', id: 's-1', name: 'AeThex Foundation', icon: 'F', color: '#ff0000' },
-  { type: 'server', id: 's-2', name: 'AeThex Labs', icon: 'L', color: '#ffa500' },
-  { type: 'server', id: 's-3', name: 'AeThex Corporation', icon: 'C', color: '#0066ff' },
-];
-
-export default function QuickSwitcher({ onSelect, onClose }) {
-  const [query, setQuery] = useState('');
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const [filter, setFilter] = useState('all'); // all, channels, users, servers
-
-  const getFilteredItems = useCallback(() => {
-    let items = query ? allItems : recentItems;
-    
-    if (query) {
-      const lowerQuery = query.toLowerCase();
-      items = items.filter(item => 
-        item.name.toLowerCase().includes(lowerQuery) ||
-        (item.server && item.server.toLowerCase().includes(lowerQuery))
-      );
-    }
-
-    if (filter !== 'all') {
-      const typeMap = {
-        channels: 'channel',
-        users: ['user', 'dm'],
-        servers: 'server',
-      };
-      const types = typeMap[filter];
-      items = items.filter(item => 
-        Array.isArray(types) ? types.includes(item.type) : item.type === types
-      );
-    }
-
-    return items.slice(0, 10);
-  }, [query, filter]);
-
-  const filteredItems = getFilteredItems();
-
-  useEffect(() => {
-    setSelectedIndex(0);
-  }, [query, filter]);
-
-  const handleKeyDown = useCallback((e) => {
-    switch (e.key) {
-      case 'ArrowDown':
-        e.preventDefault();
-        setSelectedIndex(prev => Math.min(prev + 1, filteredItems.length - 1));
-        break;
-      case 'ArrowUp':
-        e.preventDefault();
-        setSelectedIndex(prev => Math.max(prev - 1, 0));
-        break;
-      case 'Enter':
-        e.preventDefault();
-        if (filteredItems[selectedIndex]) {
-          onSelect?.(filteredItems[selectedIndex]);
-          onClose?.();
-        }
-        break;
-      case 'Escape':
-        e.preventDefault();
-        onClose?.();
-        break;
-      case 'Tab':
-        e.preventDefault();
-        // Cycle through filters
-        const filters = ['all', 'channels', 'users', 'servers'];
-        const currentIdx = filters.indexOf(filter);
-        setFilter(filters[(currentIdx + 1) % filters.length]);
-        break;
-    }
-  }, [filteredItems, selectedIndex, filter, onSelect, onClose]);
-
-  useEffect(() => {
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [handleKeyDown]);
-
-  const getItemIcon = (item) => {
-    if (item.type === 'channel') {
-      return item.isVoice ? '🔊' : item.icon;
-    }
-    if (item.type === 'user' || item.type === 'dm') {
-      return (
-        <div 
-          className="qs-avatar"
-          style={item.color ? { background: item.color } : undefined}
-        >
-          {item.avatar}
-        </div>
-      );
-    }
-    if (item.type === 'server') {
-      return (
-        <div 
-          className="qs-server-icon"
-          style={item.color ? { background: item.color } : undefined}
-        >
-          {item.icon}
-        </div>
-      );
-    }
-  };
-
-  return (
-    <div className="modal-overlay dark" onClick={onClose}>
-      <div className="quick-switcher" onClick={(e) => e.stopPropagation()}>
-        <div className="qs-search">
-          <input
-            type="text"
-            placeholder="Where would you like to go?"
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            autoFocus
-          />
-        </div>
-
-        <div className="qs-filters">
-          <button 
-            className={`qs-filter ${filter === 'all' ? 'active' : ''}`}
-            onClick={() => setFilter('all')}
-          >
-            All
-          </button>
-          <button 
-            className={`qs-filter ${filter === 'channels' ? 'active' : ''}`}
-            onClick={() => setFilter('channels')}
-          >
-            # Channels
-          </button>
-          <button 
-            className={`qs-filter ${filter === 'users' ? 'active' : ''}`}
-            onClick={() => setFilter('users')}
-          >
-            @ Users
-          </button>
-          <button 
-            className={`qs-filter ${filter === 'servers' ? 'active' : ''}`}
-            onClick={() => setFilter('servers')}
-          >
-            🏠 Servers
-          </button>
-        </div>
-
-        <div className="qs-results">
-          {!query && (
-            <div className="qs-section-header">Recent</div>
-          )}
-          {filteredItems.map((item, idx) => (
-            <div
-              key={item.id}
-              className={`qs-item ${idx === selectedIndex ? 'selected' : ''}`}
-              onClick={() => {
-                onSelect?.(item);
-                onClose?.();
-              }}
-              onMouseEnter={() => setSelectedIndex(idx)}
-            >
-              <span className="qs-icon">{getItemIcon(item)}</span>
-              <div className="qs-item-info">
-                <span className="qs-item-name">{item.name}</span>
-                {item.tag && <span className="qs-item-tag">{item.tag}</span>}
-                {item.server && <span className="qs-item-server">{item.server}</span>}
-              </div>
-              {item.type === 'channel' && <span className="qs-type">#</span>}
-              {item.type === 'user' && <span className="qs-type">@</span>}
-            </div>
-          ))}
-          {filteredItems.length === 0 && (
-            <div className="qs-empty">
-              <p>No results found</p>
-            </div>
-          )}
-        </div>
-
-        <div className="qs-footer">
-          <span className="qs-hint">
-            <kbd>↑</kbd><kbd>↓</kbd> to navigate
-          </span>
-          <span className="qs-hint">
-            <kbd>Enter</kbd> to select
-          </span>
-          <span className="qs-hint">
-            <kbd>Tab</kbd> to filter
-          </span>
-          <span className="qs-hint">
-            <kbd>Esc</kbd> to close
-          </span>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/ReplyPreview.jsx b/src/frontend/mockup/ReplyPreview.jsx
deleted file mode 100644
index 79b310d..0000000
--- a/src/frontend/mockup/ReplyPreview.jsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-
-export default function ReplyPreview({ message, onCancel, onClose }) {
-  if (!message) return null;
-
-  return (
-    <div className="reply-preview">
-      <div className="reply-line" />
-      <div className="reply-content">
-        <span className="replying-to">Replying to</span>
-        <span 
-          className="reply-author"
-          style={{ color: message.badge === 'foundation' ? '#ff0000' : 
-                          message.badge === 'labs' ? '#ffa500' : 
-                          message.badge === 'corporation' ? '#0066ff' : '#b9bbbe' }}
-        >
-          {message.author}
-        </span>
-        <span className="reply-text">{message.text?.substring(0, 100)}{message.text?.length > 100 ? '...' : ''}</span>
-      </div>
-      <button className="reply-cancel" onClick={onCancel || onClose}>✕</button>
-    </div>
-  );
-}
-
-export function MessageWithReply({ message, replyTo }) {
-  if (!replyTo) return null;
-
-  return (
-    <div className="message-reply-context">
-      <div className="reply-connector">
-        <div className="reply-line-vertical" />
-        <div className="reply-line-horizontal" />
-      </div>
-      <div 
-        className="reply-avatar-mini"
-        style={{ background: replyTo.avatar?.gradient || '#36393f' }}
-      >
-        {replyTo.avatar?.initial || replyTo.author?.charAt(0)}
-      </div>
-      <span 
-        className="reply-author-mini"
-        style={{ color: replyTo.badge === 'foundation' ? '#ff0000' : 
-                        replyTo.badge === 'labs' ? '#ffa500' : 
-                        replyTo.badge === 'corporation' ? '#0066ff' : '#b9bbbe' }}
-      >
-        {replyTo.author}
-      </span>
-      <span className="reply-text-mini">
-        {replyTo.text?.substring(0, 50)}{replyTo.text?.length > 50 ? '...' : ''}
-      </span>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/RoleEditor.jsx b/src/frontend/mockup/RoleEditor.jsx
deleted file mode 100644
index 4c22067..0000000
--- a/src/frontend/mockup/RoleEditor.jsx
+++ /dev/null
@@ -1,272 +0,0 @@
-import React, { useState } from 'react';
-
-const permissions = [
-  { category: 'General', items: [
-    { id: 'view_channels', label: 'View Channels', description: 'Members can view channels by default' },
-    { id: 'manage_channels', label: 'Manage Channels', description: 'Create, edit, and delete channels', dangerous: true },
-    { id: 'manage_roles', label: 'Manage Roles', description: 'Create and edit roles below this one', dangerous: true },
-    { id: 'manage_emoji', label: 'Manage Emoji & Stickers', description: 'Add, remove, and manage custom emojis' },
-    { id: 'view_audit', label: 'View Audit Log', description: 'View a log of all moderation actions' },
-    { id: 'manage_webhooks', label: 'Manage Webhooks', description: 'Create, edit, and delete webhooks' },
-    { id: 'manage_server', label: 'Manage Server', description: 'Change server name, region, etc.', dangerous: true },
-  ]},
-  { category: 'Membership', items: [
-    { id: 'create_invite', label: 'Create Invite', description: 'Invite new people to this server' },
-    { id: 'change_nickname', label: 'Change Nickname', description: 'Change their own nickname' },
-    { id: 'manage_nicknames', label: 'Manage Nicknames', description: 'Change nicknames of other members' },
-    { id: 'kick_members', label: 'Kick Members', description: 'Remove members from the server', dangerous: true },
-    { id: 'ban_members', label: 'Ban Members', description: 'Permanently ban members', dangerous: true },
-    { id: 'timeout_members', label: 'Timeout Members', description: 'Temporarily mute members' },
-  ]},
-  { category: 'Text', items: [
-    { id: 'send_messages', label: 'Send Messages', description: 'Send messages in text channels' },
-    { id: 'send_tts', label: 'Send TTS Messages', description: 'Send text-to-speech messages' },
-    { id: 'manage_messages', label: 'Manage Messages', description: 'Delete and pin messages from others', dangerous: true },
-    { id: 'embed_links', label: 'Embed Links', description: 'Links will show a preview' },
-    { id: 'attach_files', label: 'Attach Files', description: 'Upload images and files' },
-    { id: 'add_reactions', label: 'Add Reactions', description: 'React to messages with emoji' },
-    { id: 'use_external_emoji', label: 'Use External Emoji', description: 'Use emoji from other servers' },
-    { id: 'mention_everyone', label: 'Mention @everyone', description: 'Can use @everyone and @here', dangerous: true },
-  ]},
-  { category: 'Voice', items: [
-    { id: 'connect', label: 'Connect', description: 'Join voice channels' },
-    { id: 'speak', label: 'Speak', description: 'Talk in voice channels' },
-    { id: 'video', label: 'Video', description: 'Share camera in voice channels' },
-    { id: 'mute_members', label: 'Mute Members', description: 'Mute other members' },
-    { id: 'deafen_members', label: 'Deafen Members', description: 'Deafen other members' },
-    { id: 'move_members', label: 'Move Members', description: 'Move members between voice channels' },
-    { id: 'use_vad', label: 'Use Voice Activity', description: 'Use voice activity detection' },
-    { id: 'priority_speaker', label: 'Priority Speaker', description: 'Be more easily heard' },
-  ]},
-];
-
-export default function RoleEditor({ role, onSave, onClose }) {
-  const [roleName, setRoleName] = useState(role?.name || 'New Role');
-  const [roleColor, setRoleColor] = useState(role?.color || '#99aab5');
-  const [rolePermissions, setRolePermissions] = useState(role?.permissions || {});
-  const [displaySeparately, setDisplaySeparately] = useState(role?.displaySeparately || false);
-  const [mentionable, setMentionable] = useState(role?.mentionable || false);
-  const [activeTab, setActiveTab] = useState('display');
-
-  const colors = [
-    '#99aab5', '#1abc9c', '#2ecc71', '#3498db', '#9b59b6',
-    '#e91e63', '#f1c40f', '#e67e22', '#e74c3c', '#95a5a6',
-    '#607d8b', '#11806a', '#1f8b4c', '#206694', '#71368a',
-    '#ad1457', '#c27c0e', '#a84300', '#992d22', '#979c9f',
-  ];
-
-  const togglePermission = (permId) => {
-    setRolePermissions(prev => ({
-      ...prev,
-      [permId]: prev[permId] === true ? false : prev[permId] === false ? null : true
-    }));
-  };
-
-  const getPermState = (permId) => {
-    const state = rolePermissions[permId];
-    if (state === true) return 'granted';
-    if (state === false) return 'denied';
-    return 'inherit';
-  };
-
-  return (
-    <div className="role-editor">
-      <div className="role-editor-sidebar">
-        <div className="role-preview">
-          <div className="role-color-preview" style={{ background: roleColor }} />
-          <input 
-            type="text" 
-            value={roleName}
-            onChange={(e) => setRoleName(e.target.value)}
-            className="role-name-input"
-          />
-        </div>
-
-        <div className="editor-tabs">
-          <button 
-            className={`editor-tab ${activeTab === 'display' ? 'active' : ''}`}
-            onClick={() => setActiveTab('display')}
-          >
-            Display
-          </button>
-          <button 
-            className={`editor-tab ${activeTab === 'permissions' ? 'active' : ''}`}
-            onClick={() => setActiveTab('permissions')}
-          >
-            Permissions
-          </button>
-          <button 
-            className={`editor-tab ${activeTab === 'members' ? 'active' : ''}`}
-            onClick={() => setActiveTab('members')}
-          >
-            Members
-          </button>
-        </div>
-      </div>
-
-      <div className="role-editor-content">
-        <div className="editor-header">
-          <h2>Edit Role — {roleName}</h2>
-          <button className="editor-close" onClick={onClose}>✕</button>
-        </div>
-
-        {activeTab === 'display' && (
-          <div className="editor-section">
-            <div className="setting-group">
-              <label>Role Name</label>
-              <input
-                type="text"
-                value={roleName}
-                onChange={(e) => setRoleName(e.target.value)}
-                className="text-input"
-              />
-            </div>
-
-            <div className="setting-group">
-              <label>Role Color</label>
-              <div className="color-grid">
-                {colors.map(color => (
-                  <button
-                    key={color}
-                    className={`color-btn ${roleColor === color ? 'selected' : ''}`}
-                    style={{ background: color }}
-                    onClick={() => setRoleColor(color)}
-                  />
-                ))}
-              </div>
-              <div className="custom-color">
-                <input
-                  type="color"
-                  value={roleColor}
-                  onChange={(e) => setRoleColor(e.target.value)}
-                />
-                <input
-                  type="text"
-                  value={roleColor}
-                  onChange={(e) => setRoleColor(e.target.value)}
-                  className="color-text-input"
-                />
-              </div>
-            </div>
-
-            <div className="setting-group">
-              <label className="toggle-setting">
-                <div className="setting-info">
-                  <span>Display role members separately</span>
-                  <span className="setting-desc">Show members with this role in a separate category</span>
-                </div>
-                <input
-                  type="checkbox"
-                  checked={displaySeparately}
-                  onChange={(e) => setDisplaySeparately(e.target.checked)}
-                />
-              </label>
-            </div>
-
-            <div className="setting-group">
-              <label className="toggle-setting">
-                <div className="setting-info">
-                  <span>Allow anyone to @mention this role</span>
-                  <span className="setting-desc">Members can mention this role in chat</span>
-                </div>
-                <input
-                  type="checkbox"
-                  checked={mentionable}
-                  onChange={(e) => setMentionable(e.target.checked)}
-                />
-              </label>
-            </div>
-
-            <div className="role-icon-section">
-              <label>Role Icon</label>
-              <div className="role-icon-upload">
-                <div className="icon-placeholder">🎭</div>
-                <button className="upload-icon-btn">Upload Image</button>
-                <span className="icon-hint">Recommended 64x64</span>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {activeTab === 'permissions' && (
-          <div className="editor-section permissions-section">
-            <div className="permissions-warning">
-              ⚠️ Be careful! Granting dangerous permissions can allow members to harm your server.
-            </div>
-
-            {permissions.map(category => (
-              <div key={category.category} className="permission-category">
-                <h3>{category.category}</h3>
-                {category.items.map(perm => (
-                  <div 
-                    key={perm.id} 
-                    className={`permission-item ${perm.dangerous ? 'dangerous' : ''}`}
-                  >
-                    <div className="perm-info">
-                      <span className="perm-label">{perm.label}</span>
-                      <span className="perm-description">{perm.description}</span>
-                    </div>
-                    <div className="perm-toggle">
-                      <button 
-                        className={`toggle-btn ${getPermState(perm.id) === 'denied' ? 'active' : ''}`}
-                        onClick={() => setRolePermissions(prev => ({ ...prev, [perm.id]: false }))}
-                      >
-                        ✕
-                      </button>
-                      <button 
-                        className={`toggle-btn neutral ${getPermState(perm.id) === 'inherit' ? 'active' : ''}`}
-                        onClick={() => setRolePermissions(prev => ({ ...prev, [perm.id]: null }))}
-                      >
-                        /
-                      </button>
-                      <button 
-                        className={`toggle-btn ${getPermState(perm.id) === 'granted' ? 'active' : ''}`}
-                        onClick={() => setRolePermissions(prev => ({ ...prev, [perm.id]: true }))}
-                      >
-                        ✓
-                      </button>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            ))}
-          </div>
-        )}
-
-        {activeTab === 'members' && (
-          <div className="editor-section">
-            <div className="members-header">
-              <input type="text" placeholder="Search members" className="members-search" />
-              <button className="add-members-btn">+ Add Members</button>
-            </div>
-            <div className="role-members-list">
-              <div className="member-item">
-                <div className="member-avatar" style={{ background: '#ff0000' }}>T</div>
-                <span className="member-name">Trevor</span>
-                <button className="remove-member-btn">✕</button>
-              </div>
-              <div className="member-item">
-                <div className="member-avatar" style={{ background: '#ffa500' }}>S</div>
-                <span className="member-name">Sarah</span>
-                <button className="remove-member-btn">✕</button>
-              </div>
-            </div>
-          </div>
-        )}
-
-        <div className="editor-footer">
-          <button className="delete-role-btn">Delete Role</button>
-          <div className="footer-actions">
-            <button className="cancel-btn" onClick={onClose}>Cancel</button>
-            <button 
-              className="save-btn"
-              onClick={() => onSave?.({ name: roleName, color: roleColor, permissions: rolePermissions, displaySeparately, mentionable })}
-            >
-              Save Changes
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/SearchPanel.jsx b/src/frontend/mockup/SearchPanel.jsx
deleted file mode 100644
index acc7f19..0000000
--- a/src/frontend/mockup/SearchPanel.jsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import React, { useState } from 'react';
-
-export default function SearchPanel({ onClose, onSearch }) {
-  const [query, setQuery] = useState('');
-  const [filter, setFilter] = useState('all');
-  const [results, setResults] = useState([]);
-  const [isSearching, setIsSearching] = useState(false);
-
-  const filters = [
-    { id: 'all', label: 'All', icon: '🔍' },
-    { id: 'messages', label: 'Messages', icon: '💬' },
-    { id: 'files', label: 'Files', icon: '📎' },
-    { id: 'links', label: 'Links', icon: '🔗' },
-    { id: 'images', label: 'Images', icon: '🖼️' },
-    { id: 'mentions', label: 'Mentions', icon: '@' },
-    { id: 'pinned', label: 'Pinned', icon: '📌' },
-  ];
-
-  const recentSearches = [
-    'authentication update',
-    'from: Anderson',
-    'has: link',
-    'in: general',
-    'before: 2026-01-15',
-  ];
-
-  const mockResults = [
-    {
-      type: 'message',
-      channel: '#general',
-      author: 'Trevor',
-      avatar: 'T',
-      gradient: 'linear-gradient(135deg, #ff0000, #cc0000)',
-      content: 'Just pushed the authentication updates...',
-      timestamp: '10:34 AM',
-      highlight: 'authentication',
-    },
-    {
-      type: 'message',
-      channel: '#api-discussion',
-      author: 'Marcus',
-      avatar: 'M',
-      gradient: 'linear-gradient(135deg, #0066ff, #003380)',
-      content: 'The new auth flow is working perfectly now',
-      timestamp: 'Yesterday',
-      highlight: 'auth',
-    },
-    {
-      type: 'file',
-      channel: '#development',
-      author: 'Sarah',
-      filename: 'auth-documentation.pdf',
-      size: '2.4 MB',
-      timestamp: 'Jan 15',
-    },
-  ];
-
-  const handleSearch = (e) => {
-    e.preventDefault();
-    if (!query.trim()) return;
-    setIsSearching(true);
-    // Simulate search
-    setTimeout(() => {
-      setResults(mockResults);
-      setIsSearching(false);
-    }, 500);
-  };
-
-  return (
-    <div className="search-panel">
-      <div className="search-header">
-        <form className="search-form" onSubmit={handleSearch}>
-          <span className="search-icon">🔍</span>
-          <input
-            type="text"
-            className="search-input"
-            placeholder="Search messages, files, and more..."
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            autoFocus
-          />
-          {query && (
-            <button type="button" className="clear-btn" onClick={() => setQuery('')}>
-              ✕
-            </button>
-          )}
-        </form>
-        <button className="close-search" onClick={onClose}>✕</button>
-      </div>
-
-      <div className="search-filters">
-        {filters.map(f => (
-          <button
-            key={f.id}
-            className={`filter-btn ${filter === f.id ? 'active' : ''}`}
-            onClick={() => setFilter(f.id)}
-          >
-            <span>{f.icon}</span>
-            <span>{f.label}</span>
-          </button>
-        ))}
-      </div>
-
-      <div className="search-content">
-        {!query && (
-          <div className="search-suggestions">
-            <h4>Recent Searches</h4>
-            {recentSearches.map((search, idx) => (
-              <div 
-                key={idx} 
-                className="recent-search"
-                onClick={() => setQuery(search)}
-              >
-                <span className="history-icon">🕐</span>
-                <span>{search}</span>
-              </div>
-            ))}
-            
-            <h4>Search Options</h4>
-            <div className="search-options">
-              <div className="option"><code>from:</code> user</div>
-              <div className="option"><code>mentions:</code> user</div>
-              <div className="option"><code>has:</code> link, embed, file</div>
-              <div className="option"><code>before:</code> date</div>
-              <div className="option"><code>after:</code> date</div>
-              <div className="option"><code>in:</code> channel</div>
-            </div>
-          </div>
-        )}
-
-        {isSearching && (
-          <div className="search-loading">
-            <div className="spinner"></div>
-            <span>Searching...</span>
-          </div>
-        )}
-
-        {results.length > 0 && !isSearching && (
-          <div className="search-results">
-            <h4>{results.length} results found</h4>
-            {results.map((result, idx) => (
-              <div key={idx} className="search-result">
-                {result.type === 'message' && (
-                  <>
-                    <div className="result-avatar" style={{ background: result.gradient }}>
-                      {result.avatar}
-                    </div>
-                    <div className="result-content">
-                      <div className="result-header">
-                        <span className="result-author">{result.author}</span>
-                        <span className="result-channel">{result.channel}</span>
-                        <span className="result-time">{result.timestamp}</span>
-                      </div>
-                      <div className="result-text">{result.content}</div>
-                    </div>
-                  </>
-                )}
-                {result.type === 'file' && (
-                  <>
-                    <div className="result-icon">📄</div>
-                    <div className="result-content">
-                      <div className="result-filename">{result.filename}</div>
-                      <div className="result-meta">
-                        {result.size} • {result.channel} • {result.timestamp}
-                      </div>
-                    </div>
-                  </>
-                )}
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/ServerBanner.jsx b/src/frontend/mockup/ServerBanner.jsx
deleted file mode 100644
index 5ae158e..0000000
--- a/src/frontend/mockup/ServerBanner.jsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import React from 'react';
-
-export default function ServerBanner({ server, isCollapsed }) {
-  const serverData = server || {
-    name: 'AeThex Foundation',
-    icon: 'F',
-    gradient: 'linear-gradient(135deg, #ff0000, #990000)',
-    banner: 'linear-gradient(180deg, #ff0000 0%, transparent 100%)',
-    description: 'Official AeThex Foundation server',
-    boostLevel: 3,
-    boostCount: 14,
-    memberCount: 128,
-    onlineCount: 47,
-    features: ['ANIMATED_BANNER', 'ANIMATED_ICON', 'BANNER', 'INVITE_SPLASH', 'VANITY_URL', 'VIP_REGIONS'],
-    vanityUrl: 'aethex',
-  };
-
-  const boostFeatures = [
-    { level: 1, features: ['50 Emoji Slots', '128 Kbps Audio', 'Custom Invite Background', 'Animated Server Icon'] },
-    { level: 2, features: ['100 Emoji Slots', '256 Kbps Audio', 'Server Banner', '50 MB Uploads', 'Custom Role Icons'] },
-    { level: 3, features: ['250 Emoji Slots', '384 Kbps Audio', 'Vanity URL', '100 MB Uploads', 'Animated Banner'] },
-  ];
-
-  if (isCollapsed) {
-    return (
-      <div className="server-banner-mini">
-        <div className="banner-gradient" style={{ background: serverData.banner }}></div>
-        <span className="server-name-mini">{serverData.name}</span>
-      </div>
-    );
-  }
-
-  return (
-    <div className="server-banner">
-      <div className="banner-image" style={{ background: serverData.banner }}>
-        <div className="banner-overlay">
-          <div className="banner-content">
-            <h2 className="banner-title">{serverData.name}</h2>
-            <p className="banner-description">{serverData.description}</p>
-          </div>
-        </div>
-      </div>
-
-      <div className="server-info-bar">
-        <div className="server-stats">
-          <div className="stat">
-            <span className="stat-icon">👥</span>
-            <span className="stat-value">{serverData.memberCount}</span>
-            <span className="stat-label">Members</span>
-          </div>
-          <div className="stat">
-            <span className="stat-indicator online"></span>
-            <span className="stat-value">{serverData.onlineCount}</span>
-            <span className="stat-label">Online</span>
-          </div>
-        </div>
-
-        <div className="boost-status">
-          <span className="boost-icon">🚀</span>
-          <span className="boost-level">Level {serverData.boostLevel}</span>
-          <span className="boost-count">{serverData.boostCount} Boosts</span>
-        </div>
-      </div>
-
-      {serverData.boostLevel > 0 && (
-        <div className="boost-perks">
-          <div className="perks-header">
-            <span className="perks-icon">✨</span>
-            <span>Server Boost Perks</span>
-          </div>
-          <div className="perks-list">
-            {boostFeatures.slice(0, serverData.boostLevel).map((tier) => (
-              tier.features.map((feature, idx) => (
-                <div key={`${tier.level}-${idx}`} className="perk-item">
-                  <span className="perk-check">✓</span>
-                  <span className="perk-name">{feature}</span>
-                </div>
-              ))
-            ))}
-          </div>
-        </div>
-      )}
-
-      {serverData.vanityUrl && (
-        <div className="vanity-url">
-          <span className="vanity-label">Vanity URL</span>
-          <span className="vanity-link">aethex.gg/{serverData.vanityUrl}</span>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// Progress bar for boost goals
-export function BoostProgress({ currentBoosts, currentLevel }) {
-  const levels = [
-    { level: 1, required: 2 },
-    { level: 2, required: 7 },
-    { level: 3, required: 14 },
-  ];
-
-  const nextLevel = levels.find((l) => l.level > currentLevel);
-  const prevLevel = levels.find((l) => l.level === currentLevel) || { required: 0 };
-
-  if (!nextLevel) {
-    return (
-      <div className="boost-progress max-level">
-        <span className="boost-label">Maximum Level Reached!</span>
-        <div className="boost-bar">
-          <div className="boost-fill" style={{ width: '100%' }}></div>
-        </div>
-        <span className="boost-count">{currentBoosts} Boosts</span>
-      </div>
-    );
-  }
-
-  const progress = ((currentBoosts - prevLevel.required) / (nextLevel.required - prevLevel.required)) * 100;
-
-  return (
-    <div className="boost-progress">
-      <div className="boost-header">
-        <span className="current-level">Level {currentLevel}</span>
-        <span className="next-level">Level {nextLevel.level}</span>
-      </div>
-      <div className="boost-bar">
-        <div className="boost-fill" style={{ width: `${Math.min(progress, 100)}%` }}></div>
-      </div>
-      <span className="boost-count">
-        {currentBoosts} / {nextLevel.required} Boosts
-      </span>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/ServerDiscovery.jsx b/src/frontend/mockup/ServerDiscovery.jsx
deleted file mode 100644
index be9277b..0000000
--- a/src/frontend/mockup/ServerDiscovery.jsx
+++ /dev/null
@@ -1,199 +0,0 @@
-import React, { useState } from 'react';
-
-const categories = [
-  { id: 'home', label: 'Home', icon: '🏠' },
-  { id: 'gaming', label: 'Gaming', icon: '🎮' },
-  { id: 'music', label: 'Music', icon: '🎵' },
-  { id: 'entertainment', label: 'Entertainment', icon: '🎬' },
-  { id: 'education', label: 'Education', icon: '📚' },
-  { id: 'science', label: 'Science & Tech', icon: '🔬' },
-  { id: 'crypto', label: 'Crypto', icon: '💰' },
-];
-
-const featuredServers = [
-  {
-    id: 1,
-    name: 'AeThex Foundation',
-    description: 'Official home of AeThex. Security, authentication, and core infrastructure discussions.',
-    icon: 'F',
-    gradient: 'linear-gradient(135deg, #ff0000, #990000)',
-    members: '128.5K',
-    online: '24.2K',
-    verified: true,
-    partnered: true,
-    banner: 'linear-gradient(135deg, #1a0000, #ff0000)',
-    tags: ['Security', 'Development', 'Official'],
-  },
-  {
-    id: 2,
-    name: 'AeThex Labs',
-    description: 'Experimental features, beta testing, and bleeding-edge technology development.',
-    icon: 'L',
-    gradient: 'linear-gradient(135deg, #ffa500, #ff6b00)',
-    members: '45.2K',
-    online: '8.1K',
-    verified: true,
-    partnered: false,
-    banner: 'linear-gradient(135deg, #1a0f00, #ffa500)',
-    tags: ['Beta', 'Innovation', 'Research'],
-  },
-  {
-    id: 3,
-    name: 'GameForge Community',
-    description: 'The ultimate gaming community. LFG, tournaments, and game discussions.',
-    icon: '🎮',
-    members: '892.1K',
-    online: '156.3K',
-    verified: true,
-    partnered: true,
-    banner: 'linear-gradient(135deg, #2d1b69, #5865f2)',
-    tags: ['Gaming', 'LFG', 'Tournaments'],
-  },
-  {
-    id: 4,
-    name: 'Lofi Beats',
-    description: '24/7 lofi hip hop radio - beats to relax/study to',
-    icon: '🎧',
-    members: '1.2M',
-    online: '89.4K',
-    verified: true,
-    partnered: true,
-    banner: 'linear-gradient(135deg, #1a1a2e, #16213e)',
-    tags: ['Music', 'Chill', 'Study'],
-  },
-];
-
-const popularServers = [
-  { id: 5, name: 'Python', icon: '🐍', members: '456K', tags: ['Programming'] },
-  { id: 6, name: 'Anime Hub', icon: '🎌', members: '1.8M', tags: ['Anime'] },
-  { id: 7, name: 'Art & Design', icon: '🎨', members: '234K', tags: ['Creative'] },
-  { id: 8, name: 'Crypto Trading', icon: '📈', members: '567K', tags: ['Crypto'] },
-  { id: 9, name: 'Movie Night', icon: '🎬', members: '123K', tags: ['Movies'] },
-  { id: 10, name: 'Book Club', icon: '📚', members: '89K', tags: ['Books'] },
-];
-
-export default function ServerDiscovery({ onJoin, onClose }) {
-  const [search, setSearch] = useState('');
-  const [activeCategory, setActiveCategory] = useState('home');
-
-  return (
-    <div className="server-discovery">
-      <div className="discovery-sidebar">
-        <div className="discovery-header">
-          <h2>Discover</h2>
-        </div>
-        
-        <div className="discovery-search">
-          <span className="search-icon">🔍</span>
-          <input
-            type="text"
-            placeholder="Explore servers"
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-          />
-        </div>
-
-        <div className="discovery-nav">
-          {categories.map(cat => (
-            <button
-              key={cat.id}
-              className={`discovery-nav-item ${activeCategory === cat.id ? 'active' : ''}`}
-              onClick={() => setActiveCategory(cat.id)}
-            >
-              <span className="nav-icon">{cat.icon}</span>
-              <span>{cat.label}</span>
-            </button>
-          ))}
-        </div>
-      </div>
-
-      <div className="discovery-content">
-        <button className="discovery-close" onClick={onClose}>✕</button>
-
-        <section className="discovery-section">
-          <h3>Featured Communities</h3>
-          <div className="featured-grid">
-            {featuredServers.map(server => (
-              <div key={server.id} className="featured-card">
-                <div 
-                  className="card-banner" 
-                  style={{ background: server.banner }}
-                >
-                  {server.verified && <span className="verified-badge">✓</span>}
-                  {server.partnered && <span className="partner-badge">🤝</span>}
-                </div>
-                <div className="card-content">
-                  <div 
-                    className="card-icon"
-                    style={server.gradient ? { background: server.gradient } : undefined}
-                  >
-                    {server.icon}
-                  </div>
-                  <h4 className="card-name">{server.name}</h4>
-                  <p className="card-description">{server.description}</p>
-                  <div className="card-tags">
-                    {server.tags.map(tag => (
-                      <span key={tag} className="tag">{tag}</span>
-                    ))}
-                  </div>
-                  <div className="card-stats">
-                    <span className="stat">
-                      <span className="online-dot" />
-                      {server.online} Online
-                    </span>
-                    <span className="stat">
-                      👥 {server.members} Members
-                    </span>
-                  </div>
-                </div>
-                <button 
-                  className="join-btn"
-                  onClick={() => onJoin?.(server)}
-                >
-                  Join
-                </button>
-              </div>
-            ))}
-          </div>
-        </section>
-
-        <section className="discovery-section">
-          <h3>Popular Right Now</h3>
-          <div className="popular-grid">
-            {popularServers.map(server => (
-              <div key={server.id} className="popular-card">
-                <div className="popular-icon">{server.icon}</div>
-                <div className="popular-info">
-                  <h4>{server.name}</h4>
-                  <span className="popular-members">{server.members} members</span>
-                </div>
-                <button 
-                  className="join-btn small"
-                  onClick={() => onJoin?.(server)}
-                >
-                  Join
-                </button>
-              </div>
-            ))}
-          </div>
-        </section>
-
-        <section className="discovery-section">
-          <h3>Browse by Category</h3>
-          <div className="category-grid">
-            {categories.filter(c => c.id !== 'home').map(cat => (
-              <button 
-                key={cat.id} 
-                className="category-card"
-                onClick={() => setActiveCategory(cat.id)}
-              >
-                <span className="category-icon">{cat.icon}</span>
-                <span className="category-label">{cat.label}</span>
-              </button>
-            ))}
-          </div>
-        </section>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/ServerInsights.jsx b/src/frontend/mockup/ServerInsights.jsx
deleted file mode 100644
index 23e0194..0000000
--- a/src/frontend/mockup/ServerInsights.jsx
+++ /dev/null
@@ -1,256 +0,0 @@
-import React, { useState } from 'react';
-
-const mockData = {
-  overview: {
-    totalMembers: 12847,
-    membersChange: '+342',
-    activeMembers: 3241,
-    activeChange: '+12%',
-    messagesPerDay: 8432,
-    messagesChange: '-5%',
-    joinRate: 89,
-    retentionRate: 76,
-  },
-  growth: [
-    { date: 'Jan 29', joins: 45, leaves: 12 },
-    { date: 'Jan 30', joins: 52, leaves: 8 },
-    { date: 'Jan 31', joins: 38, leaves: 15 },
-    { date: 'Feb 1', joins: 67, leaves: 10 },
-    { date: 'Feb 2', joins: 89, leaves: 7 },
-    { date: 'Feb 3', joins: 72, leaves: 11 },
-    { date: 'Feb 4', joins: 85, leaves: 9 },
-  ],
-  topChannels: [
-    { name: 'general', messages: 2341, percentage: 28 },
-    { name: 'gaming', messages: 1892, percentage: 22 },
-    { name: 'off-topic', messages: 1456, percentage: 17 },
-    { name: 'development', messages: 1234, percentage: 15 },
-    { name: 'announcements', messages: 892, percentage: 11 },
-  ],
-  peakHours: [
-    { hour: '12AM', activity: 15 },
-    { hour: '4AM', activity: 8 },
-    { hour: '8AM', activity: 25 },
-    { hour: '12PM', activity: 65 },
-    { hour: '4PM', activity: 85 },
-    { hour: '8PM', activity: 100 },
-  ],
-  demographics: {
-    regions: [
-      { name: 'North America', percentage: 42 },
-      { name: 'Europe', percentage: 31 },
-      { name: 'Asia', percentage: 18 },
-      { name: 'Other', percentage: 9 },
-    ],
-    platforms: [
-      { name: 'Desktop', percentage: 58 },
-      { name: 'Mobile', percentage: 35 },
-      { name: 'Web', percentage: 7 },
-    ],
-  },
-  invites: [
-    { code: 'abc123', uses: 234, creator: 'Admin' },
-    { code: 'def456', uses: 156, creator: 'Mod' },
-    { code: 'ghi789', uses: 89, creator: 'Member' },
-  ],
-};
-
-export default function ServerInsights({ onClose }) {
-  const [activeTab, setActiveTab] = useState('overview');
-  const [timeRange, setTimeRange] = useState('7d');
-
-  const tabs = [
-    { id: 'overview', label: 'Overview', icon: '📊' },
-    { id: 'growth', label: 'Growth', icon: '📈' },
-    { id: 'engagement', label: 'Engagement', icon: '💬' },
-    { id: 'audience', label: 'Audience', icon: '👥' },
-  ];
-
-  return (
-    <div className="server-insights">
-      <div className="insights-header">
-        <h2>📊 Server Insights</h2>
-        <div className="insights-controls">
-          <select 
-            className="time-range-select"
-            value={timeRange}
-            onChange={(e) => setTimeRange(e.target.value)}
-          >
-            <option value="24h">Last 24 hours</option>
-            <option value="7d">Last 7 days</option>
-            <option value="30d">Last 30 days</option>
-            <option value="90d">Last 90 days</option>
-          </select>
-          <button className="insights-close" onClick={onClose}>✕</button>
-        </div>
-      </div>
-
-      <div className="insights-tabs">
-        {tabs.map(tab => (
-          <button
-            key={tab.id}
-            className={`insights-tab ${activeTab === tab.id ? 'active' : ''}`}
-            onClick={() => setActiveTab(tab.id)}
-          >
-            <span>{tab.icon}</span> {tab.label}
-          </button>
-        ))}
-      </div>
-
-      <div className="insights-content">
-        {activeTab === 'overview' && (
-          <div className="insights-overview">
-            <div className="stat-cards">
-              <div className="stat-card">
-                <div className="stat-icon">👥</div>
-                <div className="stat-info">
-                  <span className="stat-value">{mockData.overview.totalMembers.toLocaleString()}</span>
-                  <span className="stat-label">Total Members</span>
-                  <span className="stat-change positive">{mockData.overview.membersChange}</span>
-                </div>
-              </div>
-              <div className="stat-card">
-                <div className="stat-icon">🟢</div>
-                <div className="stat-info">
-                  <span className="stat-value">{mockData.overview.activeMembers.toLocaleString()}</span>
-                  <span className="stat-label">Active Members</span>
-                  <span className="stat-change positive">{mockData.overview.activeChange}</span>
-                </div>
-              </div>
-              <div className="stat-card">
-                <div className="stat-icon">💬</div>
-                <div className="stat-info">
-                  <span className="stat-value">{mockData.overview.messagesPerDay.toLocaleString()}</span>
-                  <span className="stat-label">Messages/Day</span>
-                  <span className="stat-change negative">{mockData.overview.messagesChange}</span>
-                </div>
-              </div>
-              <div className="stat-card">
-                <div className="stat-icon">📥</div>
-                <div className="stat-info">
-                  <span className="stat-value">{mockData.overview.joinRate}%</span>
-                  <span className="stat-label">Join Rate</span>
-                </div>
-              </div>
-            </div>
-
-            <div className="insights-chart">
-              <h3>Member Growth</h3>
-              <div className="simple-chart">
-                {mockData.growth.map((day, idx) => (
-                  <div key={idx} className="chart-bar-container">
-                    <div className="chart-bar joins" style={{ height: `${day.joins}%` }} title={`+${day.joins} joins`} />
-                    <div className="chart-bar leaves" style={{ height: `${day.leaves}%` }} title={`-${day.leaves} leaves`} />
-                    <span className="chart-label">{day.date}</span>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        )}
-
-        {activeTab === 'growth' && (
-          <div className="insights-growth">
-            <div className="growth-stats">
-              <div className="growth-stat">
-                <span className="growth-number positive">+{mockData.growth.reduce((a, d) => a + d.joins, 0)}</span>
-                <span className="growth-label">New Members</span>
-              </div>
-              <div className="growth-stat">
-                <span className="growth-number negative">-{mockData.growth.reduce((a, d) => a + d.leaves, 0)}</span>
-                <span className="growth-label">Members Left</span>
-              </div>
-              <div className="growth-stat">
-                <span className="growth-number">{mockData.overview.retentionRate}%</span>
-                <span className="growth-label">Retention Rate</span>
-              </div>
-            </div>
-
-            <div className="top-invites">
-              <h3>Top Invite Links</h3>
-              {mockData.invites.map((invite, idx) => (
-                <div key={idx} className="invite-row">
-                  <span className="invite-code">discord.gg/{invite.code}</span>
-                  <span className="invite-uses">{invite.uses} uses</span>
-                  <span className="invite-creator">by {invite.creator}</span>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {activeTab === 'engagement' && (
-          <div className="insights-engagement">
-            <div className="top-channels">
-              <h3>Most Active Channels</h3>
-              {mockData.topChannels.map((channel, idx) => (
-                <div key={idx} className="channel-stat">
-                  <span className="channel-rank">#{idx + 1}</span>
-                  <span className="channel-name">#{channel.name}</span>
-                  <div className="channel-bar">
-                    <div 
-                      className="channel-bar-fill" 
-                      style={{ width: `${channel.percentage}%` }}
-                    />
-                  </div>
-                  <span className="channel-messages">{channel.messages.toLocaleString()}</span>
-                </div>
-              ))}
-            </div>
-
-            <div className="peak-hours">
-              <h3>Peak Activity Hours</h3>
-              <div className="hours-chart">
-                {mockData.peakHours.map((hour, idx) => (
-                  <div key={idx} className="hour-bar-container">
-                    <div 
-                      className="hour-bar" 
-                      style={{ height: `${hour.activity}%` }}
-                    />
-                    <span className="hour-label">{hour.hour}</span>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        )}
-
-        {activeTab === 'audience' && (
-          <div className="insights-audience">
-            <div className="audience-section">
-              <h3>Top Regions</h3>
-              {mockData.demographics.regions.map((region, idx) => (
-                <div key={idx} className="demographic-row">
-                  <span className="demo-name">{region.name}</span>
-                  <div className="demo-bar">
-                    <div 
-                      className="demo-bar-fill" 
-                      style={{ width: `${region.percentage}%` }}
-                    />
-                  </div>
-                  <span className="demo-percentage">{region.percentage}%</span>
-                </div>
-              ))}
-            </div>
-
-            <div className="audience-section">
-              <h3>Platforms</h3>
-              {mockData.demographics.platforms.map((platform, idx) => (
-                <div key={idx} className="demographic-row">
-                  <span className="demo-name">{platform.name}</span>
-                  <div className="demo-bar">
-                    <div 
-                      className="demo-bar-fill" 
-                      style={{ width: `${platform.percentage}%` }}
-                    />
-                  </div>
-                  <span className="demo-percentage">{platform.percentage}%</span>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/ServerList.jsx b/src/frontend/mockup/ServerList.jsx
deleted file mode 100644
index 93d6846..0000000
--- a/src/frontend/mockup/ServerList.jsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import React, { useState } from 'react';
-
-const servers = [
-  { id: 'home', name: 'Direct Messages', initial: '🏠', type: 'home', notifications: 4 },
-  { divider: true },
-  { id: 'foundation', name: 'AeThex Foundation', initial: 'F', type: 'foundation', notifications: 0 },
-  { id: 'corporation', name: 'AeThex Corporation', initial: 'C', type: 'corporation', notifications: 12 },
-  { id: 'labs', name: 'AeThex Labs', initial: 'L', type: 'labs', notifications: 0, hasUpdate: true },
-  { divider: true },
-  { id: 'gaming', name: 'AeThex Gaming', initial: 'AG', type: 'community', notifications: 0 },
-  { id: 'dev', name: 'Dev Community', initial: 'DC', type: 'community', notifications: 3 },
-  { id: 'music', name: 'Music Lounge', initial: '🎵', type: 'community', notifications: 0 },
-  { divider: true },
-  { id: 'add', name: 'Add a Server', initial: '+', type: 'add' },
-  { id: 'explore', name: 'Explore Servers', initial: '🧭', type: 'explore' },
-];
-
-export default function ServerList({ activeServer, setActiveServer, onOpenDMs, onDMsClick, selectedDMs, onOpenSettings }) {
-  const [hoveredServer, setHoveredServer] = useState(null);
-
-  return (
-    <div className="server-list">
-      {servers.map((server, idx) => {
-        if (server.divider) {
-          return <div key={`divider-${idx}`} className="server-divider" />;
-        }
-        
-        const isActive = activeServer === server.id || (server.id === 'home' && selectedDMs);
-        const isHovered = hoveredServer === server.id;
-        let className = 'server-icon';
-        if (server.type !== 'home' && server.type !== 'add' && server.type !== 'explore') {
-          className += ` ${server.type}`;
-        }
-        if (isActive) className += ' active';
-        
-        return (
-          <div
-            key={server.id}
-            className={className}
-            onClick={() => {
-              if (server.id === 'home') {
-                onOpenDMs?.();
-                onDMsClick?.();
-              }
-              setActiveServer?.(server.id);
-            }}
-            onMouseEnter={() => setHoveredServer(server.id)}
-            onMouseLeave={() => setHoveredServer(null)}
-            title={server.name}
-            style={server.type === 'home' ? { background: isActive ? '#5865f2' : '#36393f' } : 
-                   server.type === 'add' ? { background: '#36393f', color: '#3ba55d' } :
-                   server.type === 'explore' ? { background: '#36393f', color: '#3ba55d' } : undefined}
-          >
-            {server.initial}
-            
-            {/* Notification Badge */}
-            {server.notifications > 0 && (
-              <div className="notification-badge">
-                {server.notifications > 99 ? '99+' : server.notifications}
-              </div>
-            )}
-            
-            {/* Update dot */}
-            {server.hasUpdate && !server.notifications && (
-              <div className="update-dot"></div>
-            )}
-            
-            {/* Tooltip */}
-            {isHovered && (
-              <div className="server-tooltip">
-                {server.name}
-              </div>
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/ServerSettingsModal.jsx b/src/frontend/mockup/ServerSettingsModal.jsx
deleted file mode 100644
index dfd1a7b..0000000
--- a/src/frontend/mockup/ServerSettingsModal.jsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import React, { useState } from 'react';
-
-export default function ServerSettingsModal({ server, onClose }) {
-  const [activeTab, setActiveTab] = useState('overview');
-  
-  const serverData = server || {
-    name: 'AeThex Foundation',
-    icon: 'F',
-    gradient: 'linear-gradient(135deg, #ff0000, #990000)',
-    description: 'Official AeThex Foundation server. Security, authentication, and core infrastructure discussions.',
-    region: 'US East',
-    memberCount: 128,
-    boostLevel: 3,
-    boostCount: 14,
-  };
-
-  const tabs = [
-    { id: 'overview', label: 'Overview', icon: '📋' },
-    { id: 'roles', label: 'Roles', icon: '🎭' },
-    { id: 'emoji', label: 'Emoji', icon: '😀' },
-    { id: 'stickers', label: 'Stickers', icon: '🎨' },
-    { id: 'moderation', label: 'Moderation', icon: '🛡️' },
-    { id: 'audit-log', label: 'Audit Log', icon: '📜' },
-    { id: 'integrations', label: 'Integrations', icon: '🔗' },
-    { id: 'members', label: 'Members', icon: '👥' },
-    { id: 'invites', label: 'Invites', icon: '✉️' },
-    { id: 'bans', label: 'Bans', icon: '🚫' },
-  ];
-
-  return (
-    <div className="modal-overlay" onClick={onClose}>
-      <div className="server-settings-modal" onClick={(e) => e.stopPropagation()}>
-        <div className="settings-sidebar">
-          <div className="settings-server-info">
-            <div className="settings-server-icon" style={{ background: serverData.gradient }}>
-              {serverData.icon}
-            </div>
-            <div className="settings-server-name">{serverData.name}</div>
-          </div>
-          
-          <div className="settings-nav">
-            {tabs.map(tab => (
-              <div
-                key={tab.id}
-                className={`settings-nav-item ${activeTab === tab.id ? 'active' : ''}`}
-                onClick={() => setActiveTab(tab.id)}
-              >
-                <span className="nav-icon">{tab.icon}</span>
-                <span>{tab.label}</span>
-              </div>
-            ))}
-            
-            <div className="settings-divider"></div>
-            
-            <div className="settings-nav-item danger">
-              <span className="nav-icon">🗑️</span>
-              <span>Delete Server</span>
-            </div>
-          </div>
-        </div>
-        
-        <div className="settings-content">
-          <div className="settings-header">
-            <h2>{tabs.find(t => t.id === activeTab)?.label}</h2>
-            <button className="settings-close" onClick={onClose}>✕</button>
-          </div>
-          
-          {activeTab === 'overview' && (
-            <div className="settings-overview">
-              <div className="setting-group">
-                <label>Server Name</label>
-                <input type="text" className="setting-input" defaultValue={serverData.name} />
-              </div>
-              
-              <div className="setting-group">
-                <label>Server Icon</label>
-                <div className="icon-upload">
-                  <div className="current-icon" style={{ background: serverData.gradient }}>
-                    {serverData.icon}
-                  </div>
-                  <button className="upload-btn">Upload Image</button>
-                </div>
-              </div>
-              
-              <div className="setting-group">
-                <label>Description</label>
-                <textarea 
-                  className="setting-textarea" 
-                  defaultValue={serverData.description}
-                  rows={3}
-                />
-              </div>
-              
-              <div className="setting-group">
-                <label>Server Region</label>
-                <select className="setting-select" defaultValue={serverData.region}>
-                  <option>US East</option>
-                  <option>US West</option>
-                  <option>Europe</option>
-                  <option>Asia</option>
-                </select>
-              </div>
-              
-              <div className="boost-info">
-                <div className="boost-level">
-                  <span className="boost-icon">🚀</span>
-                  <span>Level {serverData.boostLevel}</span>
-                </div>
-                <div className="boost-count">{serverData.boostCount} Boosts</div>
-              </div>
-            </div>
-          )}
-          
-          {activeTab === 'roles' && (
-            <div className="settings-roles">
-              <div className="roles-header">
-                <button className="create-role-btn">+ Create Role</button>
-              </div>
-              <div className="roles-list">
-                <div className="role-item">
-                  <span className="role-color" style={{ background: '#ff0000' }}></span>
-                  <span className="role-name">Founder</span>
-                  <span className="role-members">1 member</span>
-                </div>
-                <div className="role-item">
-                  <span className="role-color" style={{ background: '#ff0000' }}></span>
-                  <span className="role-name">Foundation</span>
-                  <span className="role-members">8 members</span>
-                </div>
-                <div className="role-item">
-                  <span className="role-color" style={{ background: '#0066ff' }}></span>
-                  <span className="role-name">Corporation</span>
-                  <span className="role-members">24 members</span>
-                </div>
-                <div className="role-item">
-                  <span className="role-color" style={{ background: '#ffa500' }}></span>
-                  <span className="role-name">Labs</span>
-                  <span className="role-members">12 members</span>
-                </div>
-                <div className="role-item">
-                  <span className="role-color" style={{ background: '#99aab5' }}></span>
-                  <span className="role-name">@everyone</span>
-                  <span className="role-members">128 members</span>
-                </div>
-              </div>
-            </div>
-          )}
-          
-          {activeTab !== 'overview' && activeTab !== 'roles' && (
-            <div className="settings-placeholder">
-              <span className="placeholder-icon">🔧</span>
-              <p>Settings for {tabs.find(t => t.id === activeTab)?.label} coming soon</p>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/ServerTemplate.jsx b/src/frontend/mockup/ServerTemplate.jsx
deleted file mode 100644
index 8290508..0000000
--- a/src/frontend/mockup/ServerTemplate.jsx
+++ /dev/null
@@ -1,247 +0,0 @@
-import React, { useState } from 'react';
-
-const builtInTemplates = [
-  { id: 'gaming', name: 'Gaming', icon: '🎮', description: 'Perfect for gaming communities', channels: ['general', 'voice-chat', 'lfg', 'clips', 'memes'], roles: ['Admin', 'Moderator', 'Member'] },
-  { id: 'school', name: 'School Club', icon: '📚', description: 'For study groups and school clubs', channels: ['announcements', 'homework-help', 'resources', 'off-topic', 'voice-study'], roles: ['Teacher', 'TA', 'Student'] },
-  { id: 'creator', name: 'Content Creator', icon: '🎬', description: 'For streamers and creators', channels: ['announcements', 'stream-chat', 'clips', 'fan-art', 'suggestions'], roles: ['Creator', 'Mod', 'Subscriber', 'Fan'] },
-  { id: 'friends', name: 'Friends', icon: '👥', description: 'Casual hangout space', channels: ['general', 'memes', 'music', 'gaming'], roles: ['Admin', 'Member'] },
-  { id: 'local', name: 'Local Community', icon: '🏘️', description: 'For local groups and neighborhoods', channels: ['announcements', 'events', 'marketplace', 'discussion'], roles: ['Organizer', 'Member'] },
-];
-
-const myTemplates = [
-  { id: 'my-dev', name: 'Dev Team Setup', icon: '💻', description: 'My development team template', channels: ['general', 'backend', 'frontend', 'devops', 'standup'], roles: ['Lead', 'Senior', 'Junior', 'Intern'], createdAt: '2025-01-15' },
-];
-
-export default function ServerTemplate({ mode = 'apply', currentServer, onClose, onApply, onSave }) {
-  const [activeTab, setActiveTab] = useState('browse');
-  const [selectedTemplate, setSelectedTemplate] = useState(null);
-  const [templateName, setTemplateName] = useState('');
-  const [templateDesc, setTemplateDesc] = useState('');
-  const [includeChannels, setIncludeChannels] = useState(true);
-  const [includeRoles, setIncludeRoles] = useState(true);
-  const [includeSettings, setIncludeSettings] = useState(true);
-
-  const handleApplyTemplate = () => {
-    if (selectedTemplate) {
-      onApply?.(selectedTemplate);
-    }
-  };
-
-  const handleSaveTemplate = () => {
-    onSave?.({
-      name: templateName,
-      description: templateDesc,
-      includeChannels,
-      includeRoles,
-      includeSettings,
-    });
-  };
-
-  return (
-    <div className="modal-overlay" onClick={onClose}>
-      <div className="server-template-modal" onClick={(e) => e.stopPropagation()}>
-        <div className="template-header">
-          <h2>📋 Server Templates</h2>
-          <button className="template-close" onClick={onClose}>✕</button>
-        </div>
-
-        <div className="template-tabs">
-          <button
-            className={`template-tab ${activeTab === 'browse' ? 'active' : ''}`}
-            onClick={() => setActiveTab('browse')}
-          >
-            Browse Templates
-          </button>
-          <button
-            className={`template-tab ${activeTab === 'my-templates' ? 'active' : ''}`}
-            onClick={() => setActiveTab('my-templates')}
-          >
-            My Templates
-          </button>
-          <button
-            className={`template-tab ${activeTab === 'create' ? 'active' : ''}`}
-            onClick={() => setActiveTab('create')}
-          >
-            Create Template
-          </button>
-        </div>
-
-        <div className="template-content">
-          {activeTab === 'browse' && (
-            <div className="template-browse">
-              <p className="template-intro">
-                Start your server with a template to get channels, roles, and settings pre-configured.
-              </p>
-              <div className="template-grid">
-                {builtInTemplates.map(template => (
-                  <div
-                    key={template.id}
-                    className={`template-card ${selectedTemplate?.id === template.id ? 'selected' : ''}`}
-                    onClick={() => setSelectedTemplate(template)}
-                  >
-                    <div className="template-icon">{template.icon}</div>
-                    <div className="template-info">
-                      <h3>{template.name}</h3>
-                      <p>{template.description}</p>
-                    </div>
-                    <div className="template-preview">
-                      <div className="preview-section">
-                        <span className="preview-label">Channels:</span>
-                        <span className="preview-count">{template.channels.length}</span>
-                      </div>
-                      <div className="preview-section">
-                        <span className="preview-label">Roles:</span>
-                        <span className="preview-count">{template.roles.length}</span>
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-
-              {selectedTemplate && (
-                <div className="template-detail">
-                  <h3>{selectedTemplate.icon} {selectedTemplate.name}</h3>
-                  <div className="detail-section">
-                    <h4>Channels</h4>
-                    <div className="detail-items">
-                      {selectedTemplate.channels.map(ch => (
-                        <span key={ch} className="detail-item">#{ch}</span>
-                      ))}
-                    </div>
-                  </div>
-                  <div className="detail-section">
-                    <h4>Roles</h4>
-                    <div className="detail-items">
-                      {selectedTemplate.roles.map(role => (
-                        <span key={role} className="detail-item role">@{role}</span>
-                      ))}
-                    </div>
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
-
-          {activeTab === 'my-templates' && (
-            <div className="my-templates">
-              {myTemplates.length === 0 ? (
-                <div className="no-templates">
-                  <span className="no-templates-icon">📁</span>
-                  <p>No saved templates</p>
-                  <span>Create a template from your server to save it here</span>
-                </div>
-              ) : (
-                <div className="template-list">
-                  {myTemplates.map(template => (
-                    <div
-                      key={template.id}
-                      className={`template-list-item ${selectedTemplate?.id === template.id ? 'selected' : ''}`}
-                      onClick={() => setSelectedTemplate(template)}
-                    >
-                      <div className="template-icon">{template.icon}</div>
-                      <div className="template-info">
-                        <h3>{template.name}</h3>
-                        <p>{template.description}</p>
-                        <span className="template-date">Created {template.createdAt}</span>
-                      </div>
-                      <div className="template-actions">
-                        <button className="template-action-btn" title="Edit">✏️</button>
-                        <button className="template-action-btn" title="Delete">🗑️</button>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          )}
-
-          {activeTab === 'create' && (
-            <div className="create-template">
-              <p className="create-intro">
-                Create a template from your current server configuration.
-              </p>
-
-              <div className="create-form">
-                <div className="form-group">
-                  <label>Template Name</label>
-                  <input
-                    type="text"
-                    value={templateName}
-                    onChange={(e) => setTemplateName(e.target.value)}
-                    placeholder="My Server Template"
-                  />
-                </div>
-
-                <div className="form-group">
-                  <label>Description</label>
-                  <textarea
-                    value={templateDesc}
-                    onChange={(e) => setTemplateDesc(e.target.value)}
-                    placeholder="Describe what this template is for..."
-                    rows={3}
-                  />
-                </div>
-
-                <div className="form-group">
-                  <label>Include in Template</label>
-                  <div className="include-options">
-                    <label className="include-option">
-                      <input
-                        type="checkbox"
-                        checked={includeChannels}
-                        onChange={(e) => setIncludeChannels(e.target.checked)}
-                      />
-                      <span>Channels & Categories</span>
-                    </label>
-                    <label className="include-option">
-                      <input
-                        type="checkbox"
-                        checked={includeRoles}
-                        onChange={(e) => setIncludeRoles(e.target.checked)}
-                      />
-                      <span>Roles & Permissions</span>
-                    </label>
-                    <label className="include-option">
-                      <input
-                        type="checkbox"
-                        checked={includeSettings}
-                        onChange={(e) => setIncludeSettings(e.target.checked)}
-                      />
-                      <span>Server Settings</span>
-                    </label>
-                  </div>
-                </div>
-
-                <div className="template-warning">
-                  <span>⚠️</span>
-                  <span>Templates do not include messages, members, or server-specific content.</span>
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-
-        <div className="template-footer">
-          <button className="cancel-btn" onClick={onClose}>Cancel</button>
-          {activeTab === 'create' ? (
-            <button
-              className="save-btn"
-              onClick={handleSaveTemplate}
-              disabled={!templateName.trim()}
-            >
-              Create Template
-            </button>
-          ) : (
-            <button
-              className="apply-btn"
-              onClick={handleApplyTemplate}
-              disabled={!selectedTemplate}
-            >
-              Use Template
-            </button>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/SlowModeSettings.jsx b/src/frontend/mockup/SlowModeSettings.jsx
deleted file mode 100644
index 25086b8..0000000
--- a/src/frontend/mockup/SlowModeSettings.jsx
+++ /dev/null
@@ -1,186 +0,0 @@
-import React, { useState } from 'react';
-
-const slowModePresets = [
-  { value: 0, label: 'Off' },
-  { value: 5, label: '5s' },
-  { value: 10, label: '10s' },
-  { value: 15, label: '15s' },
-  { value: 30, label: '30s' },
-  { value: 60, label: '1m' },
-  { value: 120, label: '2m' },
-  { value: 300, label: '5m' },
-  { value: 600, label: '10m' },
-  { value: 900, label: '15m' },
-  { value: 1800, label: '30m' },
-  { value: 3600, label: '1h' },
-  { value: 7200, label: '2h' },
-  { value: 21600, label: '6h' },
-];
-
-export default function SlowModeSettings({ channel, onSave, onClose }) {
-  const [slowMode, setSlowMode] = useState(channel?.slowMode || 0);
-  const [customMode, setCustomMode] = useState(false);
-  const [customSeconds, setCustomSeconds] = useState('');
-  const [exemptRoles, setExemptRoles] = useState(channel?.exemptRoles || []);
-  const [showExemptSettings, setShowExemptSettings] = useState(false);
-
-  const roles = [
-    { id: 'admin', name: 'Admin', color: '#ff0000' },
-    { id: 'mod', name: 'Moderator', color: '#5865f2' },
-    { id: 'helper', name: 'Helper', color: '#3ba55d' },
-    { id: 'vip', name: 'VIP', color: '#faa61a' },
-    { id: 'booster', name: 'Server Booster', color: '#ff73fa' },
-  ];
-
-  const formatDuration = (seconds) => {
-    if (seconds === 0) return 'Off';
-    if (seconds < 60) return `${seconds} second${seconds !== 1 ? 's' : ''}`;
-    if (seconds < 3600) return `${Math.floor(seconds / 60)} minute${seconds >= 120 ? 's' : ''}`;
-    return `${Math.floor(seconds / 3600)} hour${seconds >= 7200 ? 's' : ''}`;
-  };
-
-  const handlePresetClick = (value) => {
-    setSlowMode(value);
-    setCustomMode(false);
-  };
-
-  const handleCustomApply = () => {
-    const value = parseInt(customSeconds);
-    if (!isNaN(value) && value >= 0 && value <= 21600) {
-      setSlowMode(value);
-      setCustomMode(false);
-    }
-  };
-
-  const toggleExemptRole = (roleId) => {
-    setExemptRoles(prev =>
-      prev.includes(roleId)
-        ? prev.filter(id => id !== roleId)
-        : [...prev, roleId]
-    );
-  };
-
-  const handleSave = () => {
-    onSave?.({
-      slowMode,
-      exemptRoles,
-    });
-  };
-
-  return (
-    <div className="modal-overlay" onClick={onClose}>
-      <div className="slowmode-modal" onClick={(e) => e.stopPropagation()}>
-        <div className="slowmode-header">
-          <h2>⏱️ Slowmode Settings</h2>
-          <button className="slowmode-close" onClick={onClose}>✕</button>
-        </div>
-
-        <div className="slowmode-content">
-          <div className="slowmode-channel">
-            <span className="channel-icon">#</span>
-            <span className="channel-name">{channel?.name || 'general'}</span>
-          </div>
-
-          <div className="slowmode-section">
-            <h3>Slowmode Duration</h3>
-            <p className="slowmode-description">
-              Members can only send one message per {formatDuration(slowMode)}.
-            </p>
-
-            <div className="slowmode-presets">
-              {slowModePresets.map(preset => (
-                <button
-                  key={preset.value}
-                  className={`preset-btn ${slowMode === preset.value && !customMode ? 'active' : ''}`}
-                  onClick={() => handlePresetClick(preset.value)}
-                >
-                  {preset.label}
-                </button>
-              ))}
-              <button
-                className={`preset-btn ${customMode ? 'active' : ''}`}
-                onClick={() => setCustomMode(true)}
-              >
-                Custom
-              </button>
-            </div>
-
-            {customMode && (
-              <div className="custom-input">
-                <input
-                  type="number"
-                  min="0"
-                  max="21600"
-                  value={customSeconds}
-                  onChange={(e) => setCustomSeconds(e.target.value)}
-                  placeholder="Seconds (0-21600)"
-                />
-                <button className="apply-custom" onClick={handleCustomApply}>
-                  Apply
-                </button>
-              </div>
-            )}
-
-            <div className="slowmode-slider">
-              <input
-                type="range"
-                min="0"
-                max="21600"
-                step="5"
-                value={slowMode}
-                onChange={(e) => setSlowMode(parseInt(e.target.value))}
-              />
-              <span className="slider-value">{formatDuration(slowMode)}</span>
-            </div>
-          </div>
-
-          <div className="slowmode-section">
-            <div 
-              className="section-header-toggle"
-              onClick={() => setShowExemptSettings(!showExemptSettings)}
-            >
-              <h3>Exempt Roles</h3>
-              <span className="toggle-icon">{showExemptSettings ? '▼' : '▶'}</span>
-            </div>
-            
-            {showExemptSettings && (
-              <div className="exempt-roles">
-                <p className="exempt-description">
-                  These roles won't be affected by slowmode.
-                </p>
-                {roles.map(role => (
-                  <label key={role.id} className="exempt-role">
-                    <input
-                      type="checkbox"
-                      checked={exemptRoles.includes(role.id)}
-                      onChange={() => toggleExemptRole(role.id)}
-                    />
-                    <span 
-                      className="role-name"
-                      style={{ color: role.color }}
-                    >
-                      @{role.name}
-                    </span>
-                  </label>
-                ))}
-              </div>
-            )}
-          </div>
-
-          <div className="slowmode-info">
-            <span className="info-icon">ℹ️</span>
-            <span>
-              Slowmode helps prevent spam by limiting how often members can send messages.
-              Members with "Manage Channel" permission are always exempt.
-            </span>
-          </div>
-        </div>
-
-        <div className="slowmode-footer">
-          <button className="cancel-btn" onClick={onClose}>Cancel</button>
-          <button className="save-btn" onClick={handleSave}>Save Changes</button>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/Soundboard.jsx b/src/frontend/mockup/Soundboard.jsx
deleted file mode 100644
index 1f8b16d..0000000
--- a/src/frontend/mockup/Soundboard.jsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import React, { useState } from 'react';
-
-const sounds = [
-  { id: 1, name: 'Airhorn', emoji: '📯', duration: '1.2s', category: 'effects' },
-  { id: 2, name: 'Cricket', emoji: '🦗', duration: '2.0s', category: 'effects' },
-  { id: 3, name: 'Sad Trombone', emoji: '📯', duration: '1.8s', category: 'effects' },
-  { id: 4, name: 'Clap', emoji: '👏', duration: '0.5s', category: 'effects' },
-  { id: 5, name: 'Dun Dun Dun', emoji: '🎵', duration: '1.5s', category: 'effects' },
-  { id: 6, name: 'Wow', emoji: '😮', duration: '0.8s', category: 'voice' },
-  { id: 7, name: 'Bruh', emoji: '😐', duration: '0.5s', category: 'voice' },
-  { id: 8, name: "Let's Go", emoji: '🔥', duration: '0.7s', category: 'voice' },
-  { id: 9, name: 'GG', emoji: '🎮', duration: '0.6s', category: 'voice' },
-  { id: 10, name: 'Oof', emoji: '💀', duration: '0.4s', category: 'voice' },
-  { id: 11, name: 'Windows Error', emoji: '💻', duration: '0.8s', category: 'memes' },
-  { id: 12, name: 'Vine Boom', emoji: '💥', duration: '0.6s', category: 'memes' },
-];
-
-export default function Soundboard({ onPlay, onClose }) {
-  const [search, setSearch] = useState('');
-  const [activeCategory, setActiveCategory] = useState('all');
-  const [volume, setVolume] = useState(50);
-  const [playing, setPlaying] = useState(null);
-  const [favorites, setFavorites] = useState([1, 8, 12]);
-
-  const categories = [
-    { id: 'all', label: 'All' },
-    { id: 'favorites', label: '⭐ Favorites' },
-    { id: 'effects', label: 'Effects' },
-    { id: 'voice', label: 'Voice' },
-    { id: 'memes', label: 'Memes' },
-  ];
-
-  const filteredSounds = sounds.filter(s => {
-    const matchesSearch = !search || s.name.toLowerCase().includes(search.toLowerCase());
-    const matchesCategory = activeCategory === 'all' || 
-      (activeCategory === 'favorites' ? favorites.includes(s.id) : s.category === activeCategory);
-    return matchesSearch && matchesCategory;
-  });
-
-  const handlePlay = (sound) => {
-    setPlaying(sound.id);
-    onPlay?.(sound);
-    // Simulate sound duration
-    setTimeout(() => setPlaying(null), parseFloat(sound.duration) * 1000);
-  };
-
-  const toggleFavorite = (e, soundId) => {
-    e.stopPropagation();
-    setFavorites(prev => 
-      prev.includes(soundId) 
-        ? prev.filter(id => id !== soundId)
-        : [...prev, soundId]
-    );
-  };
-
-  return (
-    <div className="soundboard">
-      <div className="soundboard-header">
-        <h3>Soundboard</h3>
-        <button className="soundboard-close" onClick={onClose}>✕</button>
-      </div>
-
-      <div className="soundboard-search">
-        <span className="search-icon">🔍</span>
-        <input
-          type="text"
-          placeholder="Search sounds"
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-        />
-      </div>
-
-      <div className="soundboard-categories">
-        {categories.map(cat => (
-          <button
-            key={cat.id}
-            className={`sb-category ${activeCategory === cat.id ? 'active' : ''}`}
-            onClick={() => setActiveCategory(cat.id)}
-          >
-            {cat.label}
-          </button>
-        ))}
-      </div>
-
-      <div className="soundboard-grid">
-        {filteredSounds.map(sound => (
-          <button
-            key={sound.id}
-            className={`sound-btn ${playing === sound.id ? 'playing' : ''}`}
-            onClick={() => handlePlay(sound)}
-          >
-            <span className="sound-emoji">{sound.emoji}</span>
-            <span className="sound-name">{sound.name}</span>
-            <span className="sound-duration">{sound.duration}</span>
-            <button 
-              className={`sound-favorite ${favorites.includes(sound.id) ? 'active' : ''}`}
-              onClick={(e) => toggleFavorite(e, sound.id)}
-            >
-              {favorites.includes(sound.id) ? '⭐' : '☆'}
-            </button>
-            {playing === sound.id && <div className="sound-playing-indicator" />}
-          </button>
-        ))}
-      </div>
-
-      {filteredSounds.length === 0 && (
-        <div className="soundboard-empty">
-          <span>No sounds found</span>
-        </div>
-      )}
-
-      <div className="soundboard-footer">
-        <div className="volume-control">
-          <span className="volume-icon">🔊</span>
-          <input
-            type="range"
-            min="0"
-            max="100"
-            value={volume}
-            onChange={(e) => setVolume(Number(e.target.value))}
-            className="volume-slider"
-          />
-          <span className="volume-value">{volume}%</span>
-        </div>
-        <button className="upload-sound-btn">+ Upload Sound</button>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/StageChannel.jsx b/src/frontend/mockup/StageChannel.jsx
deleted file mode 100644
index b066eb4..0000000
--- a/src/frontend/mockup/StageChannel.jsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import React, { useState } from 'react';
-
-export default function StageChannel({ channel, onClose, onLeave }) {
-  const [isLive, setIsLive] = useState(true);
-  const [isSpeaker, setIsSpeaker] = useState(false);
-  const [handRaised, setHandRaised] = useState(false);
-  const [muted, setMuted] = useState(true);
-
-  const stageData = channel || {
-    name: 'Community Townhall',
-    topic: 'Q&A with the AeThex Team - Monthly Update',
-    startedAt: '2 hours ago',
-    listeners: 234,
-  };
-
-  const speakers = [
-    { id: 1, name: 'Anderson', avatar: 'A', color: '#ff0000', speaking: true, role: 'Host' },
-    { id: 2, name: 'Trevor', avatar: 'T', color: '#0066ff', speaking: false, role: 'Speaker' },
-    { id: 3, name: 'Sarah', avatar: 'S', color: '#ffa500', speaking: false, role: 'Speaker' },
-  ];
-
-  const audience = [
-    { id: 4, name: 'Marcus', avatar: 'M', handRaised: true },
-    { id: 5, name: 'DevUser_123', avatar: 'D', handRaised: false },
-    { id: 6, name: 'Player_456', avatar: 'P', handRaised: true },
-    { id: 7, name: 'CoolGamer', avatar: 'C', handRaised: false },
-    { id: 8, name: 'TechFan', avatar: 'T', handRaised: false },
-  ];
-
-  const handleRequestSpeak = () => {
-    setHandRaised(!handRaised);
-  };
-
-  return (
-    <div className="stage-channel">
-      <div className="stage-header">
-        <div className="stage-info">
-          <div className="stage-live-badge">
-            <span className="live-dot" />
-            LIVE
-          </div>
-          <h2>{stageData.name}</h2>
-          <p className="stage-topic">{stageData.topic}</p>
-        </div>
-        <button className="stage-close" onClick={onClose}>✕</button>
-      </div>
-
-      <div className="stage-content">
-        <div className="stage-section">
-          <div className="section-header">
-            <span className="speaker-icon">🎙️</span>
-            <span>Speakers — {speakers.length}</span>
-          </div>
-          <div className="speakers-grid">
-            {speakers.map(speaker => (
-              <div 
-                key={speaker.id} 
-                className={`speaker-card ${speaker.speaking ? 'speaking' : ''}`}
-              >
-                <div 
-                  className="speaker-avatar"
-                  style={{ background: speaker.color }}
-                >
-                  {speaker.avatar}
-                  {speaker.speaking && <div className="speaking-ring" />}
-                </div>
-                <div className="speaker-name">{speaker.name}</div>
-                <div className="speaker-role">{speaker.role}</div>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        <div className="stage-section">
-          <div className="section-header">
-            <span className="audience-icon">👥</span>
-            <span>Audience — {audience.length}</span>
-          </div>
-          <div className="audience-grid">
-            {audience.map(user => (
-              <div key={user.id} className="audience-member">
-                <div className="audience-avatar">{user.avatar}</div>
-                <span className="audience-name">{user.name}</span>
-                {user.handRaised && <span className="hand-raised">✋</span>}
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      <div className="stage-stats">
-        <span>👁️ {stageData.listeners} listening</span>
-        <span>•</span>
-        <span>Started {stageData.startedAt}</span>
-      </div>
-
-      <div className="stage-controls">
-        {isSpeaker ? (
-          <>
-            <button 
-              className={`stage-btn ${muted ? 'muted' : ''}`}
-              onClick={() => setMuted(!muted)}
-            >
-              {muted ? '🔇' : '🎤'}
-              <span>{muted ? 'Unmute' : 'Mute'}</span>
-            </button>
-            <button className="stage-btn" onClick={() => setIsSpeaker(false)}>
-              👥
-              <span>Move to Audience</span>
-            </button>
-          </>
-        ) : (
-          <button 
-            className={`stage-btn request ${handRaised ? 'active' : ''}`}
-            onClick={handleRequestSpeak}
-          >
-            ✋
-            <span>{handRaised ? 'Lower Hand' : 'Request to Speak'}</span>
-          </button>
-        )}
-        
-        <button className="stage-btn leave" onClick={onLeave}>
-          📞
-          <span>Leave Stage</span>
-        </button>
-      </div>
-    </div>
-  );
-}
-
-// Stage channel in sidebar
-export function StageChannelPreview({ channel, onJoin }) {
-  return (
-    <div className="stage-preview">
-      <div className="stage-preview-header">
-        <span className="stage-icon">📢</span>
-        <span className="stage-name">{channel.name}</span>
-        <div className="stage-live-dot" />
-      </div>
-      {channel.topic && (
-        <div className="stage-preview-topic">{channel.topic}</div>
-      )}
-      <div className="stage-preview-info">
-        <span className="speaker-count">🎙️ {channel.speakers} speaking</span>
-        <span className="listener-count">👁️ {channel.listeners}</span>
-      </div>
-      <button className="stage-join-btn" onClick={onJoin}>
-        Join Stage
-      </button>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/StickerPicker.jsx b/src/frontend/mockup/StickerPicker.jsx
deleted file mode 100644
index 56aed39..0000000
--- a/src/frontend/mockup/StickerPicker.jsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import React, { useState } from 'react';
-
-const stickerPacks = [
-  { 
-    id: 'default', 
-    name: 'Wumpus', 
-    icon: '🐙',
-    stickers: [
-      { id: 1, emoji: '👋', name: 'Wave' },
-      { id: 2, emoji: '❤️', name: 'Love' },
-      { id: 3, emoji: '😭', name: 'Cry' },
-      { id: 4, emoji: '🎉', name: 'Party' },
-      { id: 5, emoji: '😎', name: 'Cool' },
-      { id: 6, emoji: '🤔', name: 'Think' },
-    ]
-  },
-  {
-    id: 'aethex',
-    name: 'AeThex',
-    icon: '🔺',
-    stickers: [
-      { id: 7, emoji: '🔥', name: 'Fire' },
-      { id: 8, emoji: '⚡', name: 'Lightning' },
-      { id: 9, emoji: '🚀', name: 'Launch' },
-      { id: 10, emoji: '💎', name: 'Gem' },
-      { id: 11, emoji: '🔮', name: 'Crystal' },
-      { id: 12, emoji: '⭐', name: 'Star' },
-    ]
-  },
-  {
-    id: 'gaming',
-    name: 'Gaming',
-    icon: '🎮',
-    stickers: [
-      { id: 13, emoji: '🏆', name: 'Trophy' },
-      { id: 14, emoji: '💪', name: 'Strong' },
-      { id: 15, emoji: '🎯', name: 'Target' },
-      { id: 16, emoji: '⚔️', name: 'Swords' },
-      { id: 17, emoji: '🛡️', name: 'Shield' },
-      { id: 18, emoji: '👑', name: 'Crown' },
-    ]
-  }
-];
-
-export default function StickerPicker({ onSelect, onClose }) {
-  const [search, setSearch] = useState('');
-  const [activePack, setActivePack] = useState('default');
-  const [recentStickers, setRecentStickers] = useState([1, 7, 13]);
-
-  const currentPack = stickerPacks.find(p => p.id === activePack);
-  
-  const allStickers = stickerPacks.flatMap(p => p.stickers);
-  const filteredStickers = search
-    ? allStickers.filter(s => s.name.toLowerCase().includes(search.toLowerCase()))
-    : currentPack?.stickers || [];
-
-  const handleSelect = (sticker) => {
-    setRecentStickers(prev => [sticker.id, ...prev.filter(id => id !== sticker.id)].slice(0, 6));
-    onSelect?.(sticker);
-  };
-
-  return (
-    <div className="sticker-picker">
-      <div className="sticker-header">
-        <div className="sticker-search">
-          <span className="search-icon">🔍</span>
-          <input
-            type="text"
-            placeholder="Search stickers"
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-          />
-        </div>
-      </div>
-
-      {!search && recentStickers.length > 0 && (
-        <div className="sticker-section">
-          <div className="sticker-section-header">
-            <span>Recently Used</span>
-          </div>
-          <div className="sticker-grid small">
-            {recentStickers.map(id => {
-              const sticker = allStickers.find(s => s.id === id);
-              if (!sticker) return null;
-              return (
-                <div
-                  key={`recent-${id}`}
-                  className="sticker-item small"
-                  onClick={() => handleSelect(sticker)}
-                  title={sticker.name}
-                >
-                  {sticker.emoji}
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      )}
-
-      <div className="sticker-packs-nav">
-        {stickerPacks.map(pack => (
-          <button
-            key={pack.id}
-            className={`pack-btn ${activePack === pack.id ? 'active' : ''}`}
-            onClick={() => setActivePack(pack.id)}
-            title={pack.name}
-          >
-            {pack.icon}
-          </button>
-        ))}
-        <div className="pack-divider" />
-        <button className="pack-btn add" title="Get more stickers">+</button>
-      </div>
-
-      <div className="sticker-section">
-        {!search && (
-          <div className="sticker-section-header">
-            <span>{currentPack?.name}</span>
-          </div>
-        )}
-        <div className="sticker-grid">
-          {filteredStickers.map(sticker => (
-            <div
-              key={sticker.id}
-              className="sticker-item"
-              onClick={() => handleSelect(sticker)}
-              title={sticker.name}
-            >
-              <div className="sticker-preview">{sticker.emoji}</div>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {search && filteredStickers.length === 0 && (
-        <div className="sticker-empty">
-          <span>No stickers found</span>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/StreamOverlay.jsx b/src/frontend/mockup/StreamOverlay.jsx
deleted file mode 100644
index f0883cb..0000000
--- a/src/frontend/mockup/StreamOverlay.jsx
+++ /dev/null
@@ -1,238 +0,0 @@
-import React, { useState } from 'react';
-
-export default function StreamOverlay({ onStart, onClose }) {
-  const [streamType, setStreamType] = useState('screen');
-  const [source, setSource] = useState(null);
-  const [quality, setQuality] = useState('720p');
-  const [fps, setFps] = useState('30');
-
-  const streamSources = {
-    screen: [
-      { id: 'screen-1', name: 'Screen 1', type: 'Screen', preview: '🖥️' },
-      { id: 'screen-2', name: 'Screen 2', type: 'Screen', preview: '🖥️' },
-    ],
-    window: [
-      { id: 'vscode', name: 'Visual Studio Code', type: 'Window', preview: '💻' },
-      { id: 'chrome', name: 'Google Chrome', type: 'Window', preview: '🌐' },
-      { id: 'terminal', name: 'Terminal', type: 'Window', preview: '⌨️' },
-      { id: 'game', name: 'Game.exe', type: 'Game', preview: '🎮' },
-    ],
-  };
-
-  const qualities = [
-    { value: '480p', label: '480p' },
-    { value: '720p', label: '720p' },
-    { value: '1080p', label: '1080p', nitro: true },
-    { value: '1440p', label: '1440p', nitro: true },
-    { value: '4k', label: '4K (Source)', nitro: true },
-  ];
-
-  const framerates = [
-    { value: '15', label: '15 FPS' },
-    { value: '30', label: '30 FPS' },
-    { value: '60', label: '60 FPS', nitro: true },
-  ];
-
-  const handleStart = () => {
-    if (!source) return;
-    onStart?.({
-      type: streamType,
-      source,
-      quality,
-      fps,
-    });
-  };
-
-  return (
-    <div className="modal-overlay" onClick={onClose}>
-      <div className="stream-overlay" onClick={(e) => e.stopPropagation()}>
-        <div className="stream-header">
-          <h2>📺 Go Live</h2>
-          <button className="stream-close" onClick={onClose}>✕</button>
-        </div>
-
-        <div className="stream-content">
-          <div className="stream-tabs">
-            <button 
-              className={`stream-tab ${streamType === 'screen' ? 'active' : ''}`}
-              onClick={() => { setStreamType('screen'); setSource(null); }}
-            >
-              🖥️ Screen
-            </button>
-            <button 
-              className={`stream-tab ${streamType === 'window' ? 'active' : ''}`}
-              onClick={() => { setStreamType('window'); setSource(null); }}
-            >
-              🪟 Window
-            </button>
-          </div>
-
-          <div className="source-grid">
-            {streamSources[streamType]?.map(src => (
-              <button
-                key={src.id}
-                className={`source-card ${source?.id === src.id ? 'selected' : ''}`}
-                onClick={() => setSource(src)}
-              >
-                <div className="source-preview">{src.preview}</div>
-                <div className="source-info">
-                  <span className="source-name">{src.name}</span>
-                  <span className="source-type">{src.type}</span>
-                </div>
-                {source?.id === src.id && (
-                  <span className="source-check">✓</span>
-                )}
-              </button>
-            ))}
-          </div>
-
-          <div className="stream-settings">
-            <h3>Stream Quality</h3>
-            
-            <div className="setting-row">
-              <label>Resolution</label>
-              <div className="quality-options">
-                {qualities.map(q => (
-                  <button
-                    key={q.value}
-                    className={`quality-btn ${quality === q.value ? 'active' : ''} ${q.nitro ? 'nitro' : ''}`}
-                    onClick={() => setQuality(q.value)}
-                    disabled={q.nitro}
-                  >
-                    {q.label}
-                    {q.nitro && <span className="nitro-badge">🚀</span>}
-                  </button>
-                ))}
-              </div>
-            </div>
-
-            <div className="setting-row">
-              <label>Frame Rate</label>
-              <div className="quality-options">
-                {framerates.map(f => (
-                  <button
-                    key={f.value}
-                    className={`quality-btn ${fps === f.value ? 'active' : ''} ${f.nitro ? 'nitro' : ''}`}
-                    onClick={() => setFps(f.value)}
-                    disabled={f.nitro}
-                  >
-                    {f.label}
-                    {f.nitro && <span className="nitro-badge">🚀</span>}
-                  </button>
-                ))}
-              </div>
-            </div>
-
-            <div className="nitro-upsell">
-              <span className="nitro-icon">🚀</span>
-              <div className="upsell-text">
-                <span>Stream in higher quality with Nitro</span>
-                <a href="#">Learn more</a>
-              </div>
-            </div>
-          </div>
-
-          <div className="stream-preview-section">
-            <h3>Preview</h3>
-            <div className="stream-preview-box">
-              {source ? (
-                <div className="preview-content">
-                  <span className="preview-icon">{source.preview}</span>
-                  <span className="preview-label">{source.name}</span>
-                </div>
-              ) : (
-                <div className="preview-placeholder">
-                  Select a source to preview
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-
-        <div className="stream-footer">
-          <div className="stream-info">
-            {source && (
-              <span>Streaming {source.name} at {quality} {fps}fps</span>
-            )}
-          </div>
-          <div className="stream-actions">
-            <button className="cancel-btn" onClick={onClose}>Cancel</button>
-            <button 
-              className="go-live-btn"
-              onClick={handleStart}
-              disabled={!source}
-            >
-              Go Live
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// Stream viewer component (when watching someone's stream)
-export function StreamViewer({ stream, onClose }) {
-  const [isFullscreen, setIsFullscreen] = useState(false);
-  const [volume, setVolume] = useState(100);
-
-  return (
-    <div className={`stream-viewer ${isFullscreen ? 'fullscreen' : ''}`}>
-      <div className="stream-video">
-        <div className="stream-placeholder">
-          <span className="stream-icon">📺</span>
-          <span className="stream-title">{stream?.source?.name || 'Stream'}</span>
-        </div>
-      </div>
-
-      <div className="stream-controls">
-        <div className="stream-info-bar">
-          <div className="streamer-info">
-            <div 
-              className="streamer-avatar"
-              style={stream?.user?.color ? { background: stream.user.color } : undefined}
-            >
-              {stream?.user?.avatar || 'S'}
-            </div>
-            <div className="streamer-details">
-              <span className="streamer-name">{stream?.user?.name || 'Streamer'}</span>
-              <span className="viewer-count">👁️ {stream?.viewers || 0} viewers</span>
-            </div>
-          </div>
-
-          <div className="viewer-controls">
-            <div className="volume-control">
-              <button className="control-btn" onClick={() => setVolume(v => v > 0 ? 0 : 100)}>
-                {volume === 0 ? '🔇' : '🔊'}
-              </button>
-              <input
-                type="range"
-                min="0"
-                max="100"
-                value={volume}
-                onChange={(e) => setVolume(Number(e.target.value))}
-                className="volume-slider"
-              />
-            </div>
-            <button className="control-btn" onClick={() => setIsFullscreen(!isFullscreen)}>
-              {isFullscreen ? '⛶' : '⛶'}
-            </button>
-            <button className="control-btn leave" onClick={onClose}>
-              ✕
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// Stream badge for voice channel
-export function StreamBadge({ stream }) {
-  return (
-    <div className="stream-badge">
-      <span className="badge-icon">📺</span>
-      <span className="badge-label">LIVE</span>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/ThreadPanel.jsx b/src/frontend/mockup/ThreadPanel.jsx
deleted file mode 100644
index 0ccca52..0000000
--- a/src/frontend/mockup/ThreadPanel.jsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import React, { useState } from 'react';
-
-export default function ThreadPanel({ thread, onClose }) {
-  const [replyText, setReplyText] = useState('');
-  
-  const threadData = thread || {
-    name: 'Authentication Discussion',
-    parentMessage: {
-      author: 'Trevor',
-      avatar: 'T',
-      gradient: 'linear-gradient(135deg, #ff0000, #cc0000)',
-      content: 'Just pushed the authentication updates. All services should automatically migrate to the new protocols within 24 hours.',
-      timestamp: '10:34 AM',
-    },
-    replies: [
-      {
-        id: 1,
-        author: 'Marcus',
-        avatar: 'M',
-        gradient: 'linear-gradient(135deg, #0066ff, #003380)',
-        content: 'Great work! How does this affect the API rate limiting?',
-        timestamp: '10:36 AM',
-      },
-      {
-        id: 2,
-        author: 'Trevor',
-        avatar: 'T',
-        gradient: 'linear-gradient(135deg, #ff0000, #cc0000)',
-        content: 'Rate limiting remains the same. The auth tokens now include refresh capabilities though.',
-        timestamp: '10:38 AM',
-      },
-      {
-        id: 3,
-        author: 'Sarah',
-        avatar: 'S',
-        gradient: 'linear-gradient(135deg, #ffa500, #ff8c00)',
-        content: 'Testing this on Labs now. Will report back in a few hours.',
-        timestamp: '10:45 AM',
-      },
-    ],
-    memberCount: 4,
-    messageCount: 3,
-  };
-
-  const handleSendReply = () => {
-    if (!replyText.trim()) return;
-    // Handle sending reply
-    setReplyText('');
-  };
-
-  return (
-    <div className="thread-panel">
-      <div className="thread-header">
-        <div className="thread-title">
-          <span className="thread-icon">🧵</span>
-          <span>{threadData.name}</span>
-        </div>
-        <div className="thread-meta">
-          <span>{threadData.memberCount} members</span>
-          <span>•</span>
-          <span>{threadData.messageCount} messages</span>
-        </div>
-        <button className="thread-close" onClick={onClose}>✕</button>
-      </div>
-
-      <div className="thread-parent">
-        <div className="parent-message">
-          <div className="message-avatar" style={{ background: threadData.parentMessage.gradient }}>
-            {threadData.parentMessage.avatar}
-          </div>
-          <div className="message-content">
-            <div className="message-header">
-              <span className="message-author">{threadData.parentMessage.author}</span>
-              <span className="message-time">{threadData.parentMessage.timestamp}</span>
-            </div>
-            <div className="message-text">{threadData.parentMessage.content}</div>
-          </div>
-        </div>
-        <div className="thread-line"></div>
-      </div>
-
-      <div className="thread-replies">
-        {threadData.replies.map(reply => (
-          <div key={reply.id} className="thread-reply">
-            <div className="message-avatar small" style={{ background: reply.gradient }}>
-              {reply.avatar}
-            </div>
-            <div className="message-content">
-              <div className="message-header">
-                <span className="message-author">{reply.author}</span>
-                <span className="message-time">{reply.timestamp}</span>
-              </div>
-              <div className="message-text">{reply.content}</div>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      <div className="thread-input-container">
-        <input
-          type="text"
-          className="thread-input"
-          placeholder="Reply to thread..."
-          value={replyText}
-          onChange={(e) => setReplyText(e.target.value)}
-          onKeyPress={(e) => e.key === 'Enter' && handleSendReply()}
-        />
-        <button className="thread-send" onClick={handleSendReply}>
-          ➤
-        </button>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/TypingIndicator.jsx b/src/frontend/mockup/TypingIndicator.jsx
deleted file mode 100644
index 1259db3..0000000
--- a/src/frontend/mockup/TypingIndicator.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-
-export default function TypingIndicator({ users }) {
-  if (!users || users.length === 0) return null;
-
-  const getTypingText = () => {
-    if (users.length === 1) {
-      return <><strong>{users[0].name}</strong> is typing</>;
-    } else if (users.length === 2) {
-      return <><strong>{users[0].name}</strong> and <strong>{users[1].name}</strong> are typing</>;
-    } else if (users.length === 3) {
-      return <><strong>{users[0].name}</strong>, <strong>{users[1].name}</strong>, and <strong>{users[2].name}</strong> are typing</>;
-    } else {
-      return <><strong>Several people</strong> are typing</>;
-    }
-  };
-
-  return (
-    <div className="typing-indicator">
-      <div className="typing-dots">
-        <span className="dot"></span>
-        <span className="dot"></span>
-        <span className="dot"></span>
-      </div>
-      <span className="typing-text">{getTypingText()}...</span>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/UserProfileCard.jsx b/src/frontend/mockup/UserProfileCard.jsx
deleted file mode 100644
index 627d035..0000000
--- a/src/frontend/mockup/UserProfileCard.jsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import React from 'react';
-
-export default function UserProfileCard({ user, onClose, onMessage, onCall, onAddFriend }) {
-  const defaultUser = {
-    id: 1,
-    name: 'Anderson',
-    tag: 'Anderson#0001',
-    initial: 'A',
-    gradient: 'linear-gradient(135deg, #ff0000, #0066ff, #ffa500)',
-    banner: 'linear-gradient(135deg, #ff0000 0%, #0066ff 50%, #ffa500 100%)',
-    status: 'online',
-    customStatus: 'Building AeThex',
-    about: 'Founder of AeThex. Building the future of metaverse communication and decentralized identity.',
-    memberSince: 'Jan 2024',
-    roles: [
-      { name: 'Founder', color: '#ff0000' },
-      { name: 'Foundation', color: '#ff0000' },
-    ],
-    activity: {
-      type: 'developing',
-      name: 'AeThex Connect',
-      details: 'Working on messaging system',
-      elapsed: '2h 34m',
-    },
-  };
-
-  // Merge user prop with defaults
-  const userData = { ...defaultUser, ...user };
-  
-  const statusColors = {
-    online: '#3ba55d',
-    idle: '#faa61a',
-    dnd: '#ed4245',
-    offline: '#747f8d',
-    'in-game': '#5865f2',
-    labs: '#ffa500',
-  };
-
-  const handleOverlayClick = (e) => {
-    if (e.target === e.currentTarget) {
-      onClose?.();
-    }
-  };
-
-  return (
-    <div className="modal-overlay" onClick={handleOverlayClick}>
-      <div className="user-profile-card">
-        <button 
-          onClick={onClose}
-          style={{
-            position: 'absolute',
-            top: '8px',
-            right: '8px',
-            background: 'rgba(0,0,0,0.5)',
-            border: 'none',
-            color: '#fff',
-            width: '24px',
-            height: '24px',
-            borderRadius: '50%',
-            cursor: 'pointer',
-            zIndex: 10,
-          }}
-        >
-          ✕
-        </button>
-        
-        <div className="profile-banner" style={{ background: userData.banner || '#2f3136' }}></div>
-        
-        <div className="profile-avatar-section">
-          <div className="profile-avatar-wrapper">
-            <div className="profile-avatar" style={{ background: userData.gradient || '#36393f' }}>
-              {userData.initial || userData.name?.charAt(0) || '?'}
-            </div>
-            <div 
-              className="profile-status-indicator"
-              style={{ background: statusColors[userData.status] || statusColors.offline }}
-            ></div>
-          </div>
-          <div className="profile-badges">
-            {(userData.roles || []).slice(0, 3).map((role, idx) => (
-              <span key={idx} className="profile-badge" style={{ background: role.color }}>
-                {role.name.charAt(0)}
-            </span>
-          ))}
-        </div>
-      </div>
-      
-      <div className="profile-info">
-        <h2 className="profile-name">{userData.name}</h2>
-        <span className="profile-tag">{userData.tag || userData.name}</span>
-        
-        {userData.customStatus && (
-          <div className="profile-custom-status">
-            <span className="status-emoji">💻</span>
-            {userData.customStatus}
-          </div>
-        )}
-      </div>
-      
-      <div className="profile-divider"></div>
-      
-      {userData.activity && (
-        <div className="profile-section">
-          <h3 className="section-title">ACTIVITY</h3>
-          <div className="activity-card">
-            <div className="activity-icon">🔨</div>
-            <div className="activity-info">
-              <div className="activity-name">{userData.activity.name || userData.activity}</div>
-              <div className="activity-details">{userData.activity.details || ''}</div>
-              <div className="activity-elapsed">{userData.activity.elapsed || ''}</div>
-            </div>
-          </div>
-        </div>
-      )}
-      
-      {userData.about && (
-        <div className="profile-section">
-          <h3 className="section-title">ABOUT ME</h3>
-          <p className="about-text">{userData.about}</p>
-        </div>
-      )}
-      
-      <div className="profile-section">
-        <h3 className="section-title">MEMBER SINCE</h3>
-        <p className="member-since">{userData.memberSince || 'Jan 2024'}</p>
-      </div>
-      
-      {userData.roles && userData.roles.length > 0 && (
-        <div className="profile-section">
-          <h3 className="section-title">ROLES — {userData.roles.length}</h3>
-          <div className="roles-list">
-            {userData.roles.map((role, idx) => (
-              <span key={idx} className="role-tag" style={{ borderColor: role.color }}>
-                <span className="role-dot" style={{ background: role.color }}></span>
-                {role.name}
-              </span>
-            ))}
-          </div>
-        </div>
-      )}
-      
-      <div className="profile-section">
-        <h3 className="section-title">NOTE</h3>
-        <textarea 
-          className="note-input" 
-          placeholder="Click to add a note"
-          defaultValue=""
-        />
-      </div>
-      
-      <div className="profile-actions">
-        <button className="profile-btn primary" onClick={() => onMessage?.()}>
-          💬 Message
-        </button>
-        <button className="profile-btn" onClick={() => onCall?.()}>
-          📞 Call
-        </button>
-        <button className="profile-btn" onClick={() => onAddFriend?.()}>
-          👋 Add Friend
-        </button>
-      </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/UserSettingsBar.jsx b/src/frontend/mockup/UserSettingsBar.jsx
deleted file mode 100644
index 3a16610..0000000
--- a/src/frontend/mockup/UserSettingsBar.jsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import React, { useState } from 'react';
-
-export default function UserSettingsBar({ user, onSettingsClick }) {
-  const [isMuted, setIsMuted] = useState(false);
-  const [isDeafened, setIsDeafened] = useState(false);
-  const [showStatusMenu, setShowStatusMenu] = useState(false);
-  const [status, setStatus] = useState('online');
-
-  const currentUser = user || {
-    name: 'Anderson',
-    tag: '#0001',
-    avatar: 'A',
-    gradient: 'linear-gradient(135deg, #ff0000, #0066ff, #ffa500)',
-  };
-
-  const statuses = [
-    { id: 'online', label: 'Online', color: '#3ba55d' },
-    { id: 'idle', label: 'Idle', color: '#faa61a' },
-    { id: 'dnd', label: 'Do Not Disturb', color: '#ed4245' },
-    { id: 'invisible', label: 'Invisible', color: '#747f8d' },
-  ];
-
-  const toggleMute = () => {
-    setIsMuted(!isMuted);
-    if (isDeafened && !isMuted) setIsDeafened(false);
-  };
-
-  const toggleDeafen = () => {
-    setIsDeafened(!isDeafened);
-    if (!isDeafened) setIsMuted(true);
-  };
-
-  return (
-    <div className="user-settings-bar">
-      <div className="user-info-section" onClick={() => setShowStatusMenu(!showStatusMenu)}>
-        <div className="user-avatar-container">
-          <div 
-            className="user-avatar-small"
-            style={{ background: currentUser.gradient }}
-          >
-            {currentUser.avatar}
-          </div>
-          <div 
-            className="status-indicator"
-            style={{ background: statuses.find(s => s.id === status)?.color }}
-          ></div>
-        </div>
-        <div className="user-details">
-          <div className="user-display-name">{currentUser.name}</div>
-          <div className="user-tag">{currentUser.tag}</div>
-        </div>
-        
-        {showStatusMenu && (
-          <div className="status-menu">
-            {statuses.map(s => (
-              <div 
-                key={s.id}
-                className="status-option"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  setStatus(s.id);
-                  setShowStatusMenu(false);
-                }}
-              >
-                <div className="status-dot" style={{ background: s.color }}></div>
-                <span>{s.label}</span>
-              </div>
-            ))}
-            <div className="status-divider"></div>
-            <div className="status-option">
-              <span>📝</span>
-              <span>Set Custom Status</span>
-            </div>
-          </div>
-        )}
-      </div>
-      
-      <div className="user-controls">
-        <button 
-          className={`control-button ${isMuted ? 'active' : ''}`}
-          onClick={toggleMute}
-          title={isMuted ? 'Unmute' : 'Mute'}
-        >
-          {isMuted ? '🔇' : '🎤'}
-          {isMuted && <div className="slash-overlay"></div>}
-        </button>
-        <button 
-          className={`control-button ${isDeafened ? 'active' : ''}`}
-          onClick={toggleDeafen}
-          title={isDeafened ? 'Undeafen' : 'Deafen'}
-        >
-          {isDeafened ? '🔇' : '🎧'}
-          {isDeafened && <div className="slash-overlay"></div>}
-        </button>
-        <button 
-          className="control-button" 
-          title="User Settings"
-          onClick={onSettingsClick}
-        >
-          ⚙️
-        </button>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/UserSettingsModal.jsx b/src/frontend/mockup/UserSettingsModal.jsx
deleted file mode 100644
index 0f7fbaa..0000000
--- a/src/frontend/mockup/UserSettingsModal.jsx
+++ /dev/null
@@ -1,375 +0,0 @@
-import React, { useState } from 'react';
-
-export default function UserSettingsModal({ onClose }) {
-  const [activeTab, setActiveTab] = useState('my-account');
-
-  const settingsSections = [
-    {
-      title: 'USER SETTINGS',
-      items: [
-        { id: 'my-account', label: 'My Account', icon: '👤' },
-        { id: 'profiles', label: 'Profiles', icon: '🎨' },
-        { id: 'privacy', label: 'Privacy & Safety', icon: '🔒' },
-        { id: 'family', label: 'Family Center', icon: '👨‍👩‍👧' },
-        { id: 'authorized-apps', label: 'Authorized Apps', icon: '🔌' },
-        { id: 'devices', label: 'Devices', icon: '📱' },
-        { id: 'connections', label: 'Connections', icon: '🔗' },
-        { id: 'clips', label: 'Clips', icon: '🎬' },
-        { id: 'friend-requests', label: 'Friend Requests', icon: '👋' },
-      ],
-    },
-    {
-      title: 'BILLING SETTINGS',
-      items: [
-        { id: 'nitro', label: 'Nitro', icon: '🚀' },
-        { id: 'server-boost', label: 'Server Boost', icon: '💎' },
-        { id: 'subscriptions', label: 'Subscriptions', icon: '📋' },
-        { id: 'gift-inventory', label: 'Gift Inventory', icon: '🎁' },
-        { id: 'billing', label: 'Billing', icon: '💳' },
-      ],
-    },
-    {
-      title: 'APP SETTINGS',
-      items: [
-        { id: 'appearance', label: 'Appearance', icon: '🎨' },
-        { id: 'accessibility', label: 'Accessibility', icon: '♿' },
-        { id: 'voice-video', label: 'Voice & Video', icon: '🎙️' },
-        { id: 'text-images', label: 'Text & Images', icon: '📝' },
-        { id: 'notifications', label: 'Notifications', icon: '🔔' },
-        { id: 'keybinds', label: 'Keybinds', icon: '⌨️' },
-        { id: 'language', label: 'Language', icon: '🌐' },
-        { id: 'streamer-mode', label: 'Streamer Mode', icon: '📺' },
-        { id: 'advanced', label: 'Advanced', icon: '⚙️' },
-      ],
-    },
-    {
-      title: 'ACTIVITY SETTINGS',
-      items: [
-        { id: 'activity-privacy', label: 'Activity Privacy', icon: '👁️' },
-        { id: 'registered-games', label: 'Registered Games', icon: '🎮' },
-      ],
-    },
-  ];
-
-  const handleOverlayClick = (e) => {
-    if (e.target === e.currentTarget) {
-      onClose?.();
-    }
-  };
-
-  return (
-    <div className="modal-overlay" onClick={handleOverlayClick}>
-      <div className="user-settings-modal">
-        <div className="settings-sidebar">
-          <div className="settings-nav">
-            {settingsSections.map((section) => (
-              <div key={section.title}>
-                <div className="settings-section-title">{section.title}</div>
-                {section.items.map((item) => (
-                  <div
-                    key={item.id}
-                    className={`settings-nav-item ${activeTab === item.id ? 'active' : ''}`}
-                    onClick={() => setActiveTab(item.id)}
-                  >
-                    <span className="nav-icon">{item.icon}</span>
-                    <span>{item.label}</span>
-                  </div>
-                ))}
-                <div className="settings-divider"></div>
-              </div>
-            ))}
-            
-            <div className="settings-nav-item danger">
-              <span className="nav-icon">🚪</span>
-              <span>Log Out</span>
-            </div>
-          </div>
-        </div>
-
-        <div className="settings-content">
-          <div className="settings-header">
-            <h2>{settingsSections.flatMap((s) => s.items).find((i) => i.id === activeTab)?.label}</h2>
-            <button className="settings-close" onClick={onClose}>✕</button>
-          </div>
-
-          {activeTab === 'my-account' && (
-            <div className="settings-overview">
-              <div className="account-card">
-                <div className="account-banner" style={{ background: 'linear-gradient(135deg, #ff0000, #0066ff)' }}></div>
-                <div className="account-info">
-                  <div className="account-avatar" style={{ background: 'linear-gradient(135deg, #ff0000, #0066ff, #ffa500)' }}>A</div>
-                  <div className="account-details">
-                    <h3>Anderson</h3>
-                    <span className="account-tag">Anderson#0001</span>
-                  </div>
-                  <button className="edit-profile-btn">Edit User Profile</button>
-                </div>
-              </div>
-
-              <div className="account-fields">
-                <div className="account-field">
-                  <label>DISPLAY NAME</label>
-                  <div className="field-value">
-                    <span>Anderson</span>
-                    <button className="field-edit">Edit</button>
-                  </div>
-                </div>
-                <div className="account-field">
-                  <label>USERNAME</label>
-                  <div className="field-value">
-                    <span>anderson</span>
-                    <button className="field-edit">Edit</button>
-                  </div>
-                </div>
-                <div className="account-field">
-                  <label>EMAIL</label>
-                  <div className="field-value">
-                    <span>a*****@aethex.dev</span>
-                    <button className="field-edit">Edit</button>
-                  </div>
-                </div>
-                <div className="account-field">
-                  <label>PHONE NUMBER</label>
-                  <div className="field-value">
-                    <span>*******4567</span>
-                    <button className="field-edit">Edit</button>
-                  </div>
-                </div>
-              </div>
-
-              <div className="settings-divider"></div>
-
-              <div className="setting-group">
-                <h4>Password and Authentication</h4>
-                <button className="settings-btn">Change Password</button>
-                <div className="two-factor">
-                  <div className="two-factor-info">
-                    <h5>Two-Factor Authentication</h5>
-                    <p>Protect your AeThex account with an extra layer of security.</p>
-                  </div>
-                  <button className="settings-btn primary">Enable 2FA</button>
-                </div>
-              </div>
-
-              <div className="settings-divider"></div>
-
-              <div className="setting-group danger-zone">
-                <h4>Account Removal</h4>
-                <p>Disabling your account means you can recover it at any time after taking this action.</p>
-                <div className="danger-buttons">
-                  <button className="settings-btn danger-outline">Disable Account</button>
-                  <button className="settings-btn danger">Delete Account</button>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {activeTab === 'appearance' && (
-            <div className="settings-overview">
-              <div className="setting-group">
-                <h4>Theme</h4>
-                <div className="theme-options">
-                  <label className="theme-option">
-                    <input type="radio" name="theme" defaultChecked />
-                    <span className="theme-preview dark">Dark</span>
-                  </label>
-                  <label className="theme-option">
-                    <input type="radio" name="theme" />
-                    <span className="theme-preview light">Light</span>
-                  </label>
-                  <label className="theme-option">
-                    <input type="radio" name="theme" />
-                    <span className="theme-preview sync">Sync with computer</span>
-                  </label>
-                </div>
-              </div>
-
-              <div className="setting-group">
-                <h4>Message Display</h4>
-                <div className="display-options">
-                  <label className="display-option">
-                    <input type="radio" name="display" defaultChecked />
-                    <div className="display-preview cozy">
-                      <span>Cozy</span>
-                      <p>Discord text as it was meant to be.</p>
-                    </div>
-                  </label>
-                  <label className="display-option">
-                    <input type="radio" name="display" />
-                    <div className="display-preview compact">
-                      <span>Compact</span>
-                      <p>Fit more messages on screen at once.</p>
-                    </div>
-                  </label>
-                </div>
-              </div>
-
-              <div className="setting-group">
-                <label>Chat Font Scaling — 16px</label>
-                <input type="range" min="12" max="24" defaultValue="16" className="font-slider" />
-              </div>
-
-              <div className="setting-group">
-                <label>Space Between Message Groups — 16px</label>
-                <input type="range" min="0" max="24" defaultValue="16" className="font-slider" />
-              </div>
-
-              <div className="setting-group">
-                <label>Zoom Level — 100%</label>
-                <input type="range" min="50" max="200" defaultValue="100" className="font-slider" />
-              </div>
-            </div>
-          )}
-
-          {activeTab === 'voice-video' && (
-            <div className="settings-overview">
-              <div className="setting-group">
-                <h4>Voice Settings</h4>
-                <label>INPUT DEVICE</label>
-                <select className="setting-select">
-                  <option>Default — Built-in Microphone</option>
-                  <option>External Microphone</option>
-                </select>
-
-                <label>OUTPUT DEVICE</label>
-                <select className="setting-select">
-                  <option>Default — Built-in Speakers</option>
-                  <option>External Speakers</option>
-                  <option>Headphones</option>
-                </select>
-              </div>
-
-              <div className="setting-group">
-                <label>INPUT VOLUME</label>
-                <input type="range" min="0" max="100" defaultValue="80" className="volume-slider" />
-              </div>
-
-              <div className="setting-group">
-                <label>OUTPUT VOLUME</label>
-                <input type="range" min="0" max="100" defaultValue="100" className="volume-slider" />
-              </div>
-
-              <div className="setting-group">
-                <h4>Input Mode</h4>
-                <div className="input-mode-options">
-                  <label className="input-mode">
-                    <input type="radio" name="inputMode" defaultChecked />
-                    <span>Voice Activity</span>
-                  </label>
-                  <label className="input-mode">
-                    <input type="radio" name="inputMode" />
-                    <span>Push to Talk</span>
-                  </label>
-                </div>
-              </div>
-
-              <div className="setting-group">
-                <label className="toggle-setting">
-                  <span>Echo Cancellation</span>
-                  <input type="checkbox" defaultChecked />
-                </label>
-                <label className="toggle-setting">
-                  <span>Noise Suppression</span>
-                  <input type="checkbox" defaultChecked />
-                </label>
-                <label className="toggle-setting">
-                  <span>Automatic Gain Control</span>
-                  <input type="checkbox" defaultChecked />
-                </label>
-              </div>
-
-              <div className="setting-group">
-                <h4>Video Settings</h4>
-                <label>CAMERA</label>
-                <select className="setting-select">
-                  <option>FaceTime HD Camera</option>
-                  <option>External Webcam</option>
-                </select>
-                <button className="settings-btn">Test Video</button>
-              </div>
-            </div>
-          )}
-
-          {activeTab === 'notifications' && (
-            <div className="settings-overview">
-              <div className="setting-group">
-                <label className="toggle-setting">
-                  <span>Enable Desktop Notifications</span>
-                  <input type="checkbox" defaultChecked />
-                </label>
-                <label className="toggle-setting">
-                  <span>Enable Unread Message Badge</span>
-                  <input type="checkbox" defaultChecked />
-                </label>
-                <label className="toggle-setting">
-                  <span>Enable Taskbar Flashing</span>
-                  <input type="checkbox" defaultChecked />
-                </label>
-              </div>
-
-              <div className="setting-group">
-                <h4>Sounds</h4>
-                <label className="toggle-setting">
-                  <span>Message</span>
-                  <input type="checkbox" defaultChecked />
-                </label>
-                <label className="toggle-setting">
-                  <span>Deafen</span>
-                  <input type="checkbox" defaultChecked />
-                </label>
-                <label className="toggle-setting">
-                  <span>Mute</span>
-                  <input type="checkbox" defaultChecked />
-                </label>
-                <label className="toggle-setting">
-                  <span>User Join</span>
-                  <input type="checkbox" defaultChecked />
-                </label>
-                <label className="toggle-setting">
-                  <span>User Leave</span>
-                  <input type="checkbox" defaultChecked />
-                </label>
-              </div>
-            </div>
-          )}
-
-          {activeTab === 'keybinds' && (
-            <div className="settings-overview">
-              <div className="keybinds-header">
-                <button className="settings-btn primary">Add a Keybind</button>
-              </div>
-              
-              <div className="keybind-list">
-                <div className="keybind-item">
-                  <div className="keybind-action">Push to Talk</div>
-                  <div className="keybind-key">` (backtick)</div>
-                  <button className="keybind-edit">✏️</button>
-                  <button className="keybind-delete">🗑️</button>
-                </div>
-                <div className="keybind-item">
-                  <div className="keybind-action">Toggle Mute</div>
-                  <div className="keybind-key">Ctrl + Shift + M</div>
-                  <button className="keybind-edit">✏️</button>
-                  <button className="keybind-delete">🗑️</button>
-                </div>
-                <div className="keybind-item">
-                  <div className="keybind-action">Toggle Deafen</div>
-                  <div className="keybind-key">Ctrl + Shift + D</div>
-                  <button className="keybind-edit">✏️</button>
-                  <button className="keybind-delete">🗑️</button>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {!['my-account', 'appearance', 'voice-video', 'notifications', 'keybinds'].includes(activeTab) && (
-            <div className="settings-placeholder">
-              <span className="placeholder-icon">🔧</span>
-              <p>{settingsSections.flatMap((s) => s.items).find((i) => i.id === activeTab)?.label} settings coming soon</p>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/VideoCall.jsx b/src/frontend/mockup/VideoCall.jsx
deleted file mode 100644
index a2b749c..0000000
--- a/src/frontend/mockup/VideoCall.jsx
+++ /dev/null
@@ -1,206 +0,0 @@
-import React, { useState } from 'react';
-
-export default function VideoCall({ users, onLeave, onToggleMute, onToggleDeafen, onToggleVideo, onToggleScreenShare }) {
-  const [isMuted, setIsMuted] = useState(false);
-  const [isDeafened, setIsDeafened] = useState(false);
-  const [isVideoOn, setIsVideoOn] = useState(true);
-  const [isScreenSharing, setIsScreenSharing] = useState(false);
-  const [isFullscreen, setIsFullscreen] = useState(false);
-  const [focusedUser, setFocusedUser] = useState(null);
-
-  const participants = users || [
-    { id: 1, name: 'Anderson', avatar: 'A', gradient: 'linear-gradient(135deg, #ff0000, #0066ff, #ffa500)', speaking: true, muted: false, video: true },
-    { id: 2, name: 'Trevor', avatar: 'T', gradient: 'linear-gradient(135deg, #ff0000, #cc0000)', speaking: false, muted: true, video: true },
-    { id: 3, name: 'Sarah', avatar: 'S', gradient: 'linear-gradient(135deg, #ffa500, #ff8c00)', speaking: false, muted: false, video: false, streaming: true },
-    { id: 4, name: 'Marcus', avatar: 'M', gradient: 'linear-gradient(135deg, #0066ff, #003380)', speaking: false, muted: false, video: false },
-  ];
-
-  const handleMute = () => {
-    setIsMuted(!isMuted);
-    onToggleMute?.(!isMuted);
-  };
-
-  const handleDeafen = () => {
-    setIsDeafened(!isDeafened);
-    onToggleDeafen?.(!isDeafened);
-  };
-
-  const handleVideo = () => {
-    setIsVideoOn(!isVideoOn);
-    onToggleVideo?.(!isVideoOn);
-  };
-
-  const handleScreenShare = () => {
-    setIsScreenSharing(!isScreenSharing);
-    onToggleScreenShare?.(!isScreenSharing);
-  };
-
-  const focusedParticipant = focusedUser ? participants.find((p) => p.id === focusedUser) : participants.find((p) => p.streaming) || participants[0];
-  const gridParticipants = participants.filter((p) => p.id !== focusedParticipant?.id);
-
-  return (
-    <div className={`video-call-container ${isFullscreen ? 'fullscreen' : ''}`}>
-      {/* Main/Focused Video Area */}
-      <div className="video-main">
-        <div className="video-focused">
-          {focusedParticipant?.streaming ? (
-            <div className="screen-share-view">
-              <div className="screen-content">
-                <div className="screen-placeholder">
-                  <span className="screen-icon">🖥️</span>
-                  <span>{focusedParticipant.name}'s screen</span>
-                </div>
-              </div>
-              <div className="streamer-pip">
-                <div 
-                  className="pip-avatar"
-                  style={{ background: focusedParticipant.gradient }}
-                >
-                  {focusedParticipant.avatar}
-                </div>
-                <span className="pip-name">{focusedParticipant.name}</span>
-              </div>
-            </div>
-          ) : focusedParticipant?.video ? (
-            <div className="video-feed">
-              <div className="video-placeholder">
-                <div 
-                  className="video-avatar-large"
-                  style={{ background: focusedParticipant.gradient }}
-                >
-                  {focusedParticipant.avatar}
-                </div>
-              </div>
-              <div className="video-name-overlay">{focusedParticipant.name}</div>
-            </div>
-          ) : (
-            <div className="video-audio-only">
-              <div 
-                className={`audio-avatar ${focusedParticipant?.speaking ? 'speaking' : ''}`}
-                style={{ background: focusedParticipant?.gradient }}
-              >
-                {focusedParticipant?.avatar}
-              </div>
-              <div className="audio-name">{focusedParticipant?.name}</div>
-              {focusedParticipant?.muted && <div className="audio-muted">🔇</div>}
-            </div>
-          )}
-        </div>
-
-        {/* Participant Grid */}
-        <div className="video-grid">
-          {gridParticipants.map((participant) => (
-            <div 
-              key={participant.id}
-              className={`video-tile ${participant.speaking ? 'speaking' : ''}`}
-              onClick={() => setFocusedUser(participant.id)}
-            >
-              {participant.video ? (
-                <div className="tile-video">
-                  <div 
-                    className="tile-avatar"
-                    style={{ background: participant.gradient }}
-                  >
-                    {participant.avatar}
-                  </div>
-                </div>
-              ) : (
-                <div className="tile-audio">
-                  <div 
-                    className="tile-avatar"
-                    style={{ background: participant.gradient }}
-                  >
-                    {participant.avatar}
-                  </div>
-                </div>
-              )}
-              <div className="tile-info">
-                <span className="tile-name">{participant.name}</span>
-                <div className="tile-icons">
-                  {participant.muted && <span>🔇</span>}
-                  {participant.streaming && <span>🖥️</span>}
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Controls Bar */}
-      <div className="video-controls">
-        <div className="controls-left">
-          <div className="call-info">
-            <span className="call-channel">🔊 Nexus Lounge</span>
-            <span className="call-duration">1:23:45</span>
-          </div>
-        </div>
-
-        <div className="controls-center">
-          <button 
-            className={`control-btn ${isMuted ? 'active' : ''}`}
-            onClick={handleMute}
-            title={isMuted ? 'Unmute' : 'Mute'}
-          >
-            {isMuted ? '🔇' : '🎙️'}
-          </button>
-          <button 
-            className={`control-btn ${isDeafened ? 'active' : ''}`}
-            onClick={handleDeafen}
-            title={isDeafened ? 'Undeafen' : 'Deafen'}
-          >
-            {isDeafened ? '🔈' : '🔊'}
-          </button>
-          <button 
-            className={`control-btn ${isVideoOn ? 'active' : ''}`}
-            onClick={handleVideo}
-            title={isVideoOn ? 'Turn Off Camera' : 'Turn On Camera'}
-          >
-            {isVideoOn ? '📹' : '📷'}
-          </button>
-          <button 
-            className={`control-btn ${isScreenSharing ? 'active sharing' : ''}`}
-            onClick={handleScreenShare}
-            title={isScreenSharing ? 'Stop Sharing' : 'Share Screen'}
-          >
-            🖥️
-          </button>
-          <button 
-            className="control-btn activities"
-            title="Activities"
-          >
-            🎮
-          </button>
-          <button 
-            className="control-btn leave"
-            onClick={onLeave}
-            title="Leave Call"
-          >
-            📞
-          </button>
-        </div>
-
-        <div className="controls-right">
-          <button 
-            className="control-btn"
-            title="Show Participants"
-          >
-            👥 {participants.length}
-          </button>
-          <button 
-            className="control-btn"
-            title="Chat"
-          >
-            💬
-          </button>
-          <button 
-            className={`control-btn ${isFullscreen ? 'active' : ''}`}
-            onClick={() => setIsFullscreen(!isFullscreen)}
-            title={isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'}
-          >
-            {isFullscreen ? '⛶' : '⛶'}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/VoiceChannel.jsx b/src/frontend/mockup/VoiceChannel.jsx
deleted file mode 100644
index 156b386..0000000
--- a/src/frontend/mockup/VoiceChannel.jsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React, { useState } from 'react';
-
-export default function VoiceChannel({ channel, onJoin, onLeave }) {
-  const [isExpanded, setIsExpanded] = useState(true);
-  const [isConnected, setIsConnected] = useState(false);
-  
-  const voiceChannel = channel || {
-    name: 'Nexus Lounge',
-    users: [
-      { id: 1, name: 'Anderson', avatar: 'A', gradient: 'linear-gradient(135deg, #ff0000, #0066ff, #ffa500)', speaking: true, muted: false, deafened: false },
-      { id: 2, name: 'Sarah', avatar: 'S', gradient: 'linear-gradient(135deg, #ffa500, #ff8c00)', speaking: false, muted: true, deafened: false },
-      { id: 3, name: 'Marcus', avatar: 'M', gradient: 'linear-gradient(135deg, #0066ff, #003380)', speaking: false, muted: false, deafened: false, streaming: true },
-    ],
-    limit: 10,
-    bitrate: 64,
-  };
-
-  const handleConnect = () => {
-    setIsConnected(!isConnected);
-    if (!isConnected && onJoin) onJoin(voiceChannel);
-    if (isConnected && onLeave) onLeave();
-  };
-
-  return (
-    <div className="voice-channel-container">
-      <div className="voice-channel-header" onClick={() => setIsExpanded(!isExpanded)}>
-        <span className="voice-icon">🔊</span>
-        <span className="voice-channel-name">{voiceChannel.name}</span>
-        <span className="voice-user-count">{voiceChannel.users.length}/{voiceChannel.limit}</span>
-        <span className="expand-icon">{isExpanded ? '▼' : '▶'}</span>
-      </div>
-      
-      {isExpanded && (
-        <div className="voice-users-list">
-          {voiceChannel.users.map(user => (
-            <div key={user.id} className={`voice-user ${user.speaking ? 'speaking' : ''}`}>
-              <div className="voice-user-avatar" style={{ background: user.gradient }}>
-                {user.avatar}
-                {user.speaking && <div className="speaking-ring"></div>}
-              </div>
-              <span className="voice-user-name">{user.name}</span>
-              <div className="voice-user-icons">
-                {user.streaming && <span className="stream-icon" title="Streaming">📺</span>}
-                {user.muted && <span className="muted-icon" title="Muted">🔇</span>}
-                {user.deafened && <span className="deafened-icon" title="Deafened">🔈</span>}
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-      
-      {isConnected && (
-        <div className="voice-connected-panel">
-          <div className="voice-status">
-            <span className="connected-text">Voice Connected</span>
-            <span className="voice-ping">23ms</span>
-          </div>
-          <div className="voice-controls">
-            <button className="voice-control-btn" title="Disconnect" onClick={handleConnect}>
-              📞
-            </button>
-            <button className="voice-control-btn" title="Start Video">
-              📹
-            </button>
-            <button className="voice-control-btn" title="Share Screen">
-              🖥️
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/WelcomeScreen.jsx b/src/frontend/mockup/WelcomeScreen.jsx
deleted file mode 100644
index 0883a32..0000000
--- a/src/frontend/mockup/WelcomeScreen.jsx
+++ /dev/null
@@ -1,193 +0,0 @@
-import React, { useState } from 'react';
-
-export default function WelcomeScreen({ server, onComplete, onClose }) {
-  const [step, setStep] = useState(0);
-  const [selectedRoles, setSelectedRoles] = useState([]);
-  const [selectedChannels, setSelectedChannels] = useState([]);
-
-  const serverData = server || {
-    name: 'AeThex Foundation',
-    icon: 'F',
-    gradient: 'linear-gradient(135deg, #ff0000, #990000)',
-    description: 'Official home of AeThex. Security, authentication, and core infrastructure.',
-    memberCount: '128.5K',
-    rules: [
-      { id: 1, title: 'Be Respectful', description: 'Treat everyone with respect. No harassment, bullying, or hate speech.' },
-      { id: 2, title: 'No Spam', description: 'Avoid excessive messages, self-promotion, or unsolicited advertisements.' },
-      { id: 3, title: 'Stay On Topic', description: 'Keep discussions relevant to the channel topic.' },
-      { id: 4, title: 'No NSFW Content', description: 'This is a SFW community. Keep content appropriate.' },
-      { id: 5, title: 'Follow Discord TOS', description: 'Adhere to Discord\'s Terms of Service and Community Guidelines.' },
-    ],
-  };
-
-  const roleOptions = [
-    { id: 'developer', label: '💻 Developer', description: 'I build things with AeThex tools' },
-    { id: 'gamer', label: '🎮 Gamer', description: 'I\'m here for gaming content' },
-    { id: 'security', label: '🔒 Security', description: 'Interested in security topics' },
-    { id: 'creator', label: '🎨 Creator', description: 'I create content' },
-    { id: 'announcements', label: '📢 Announcements Only', description: 'Just here for updates' },
-  ];
-
-  const channelOptions = [
-    { id: 'general', label: '# general', description: 'Main community chat' },
-    { id: 'development', label: '# development', description: 'Dev discussions' },
-    { id: 'gaming', label: '# gaming', description: 'Gaming chat' },
-    { id: 'off-topic', label: '# off-topic', description: 'Random discussions' },
-    { id: 'showcase', label: '# showcase', description: 'Share your projects' },
-  ];
-
-  const steps = [
-    { id: 'welcome', title: 'Welcome' },
-    { id: 'rules', title: 'Rules' },
-    { id: 'roles', title: 'Pick Roles' },
-    { id: 'channels', title: 'Channels' },
-  ];
-
-  const handleComplete = () => {
-    onComplete?.({
-      roles: selectedRoles,
-      channels: selectedChannels,
-    });
-  };
-
-  const toggleRole = (roleId) => {
-    setSelectedRoles(prev => 
-      prev.includes(roleId) 
-        ? prev.filter(id => id !== roleId)
-        : [...prev, roleId]
-    );
-  };
-
-  const toggleChannel = (channelId) => {
-    setSelectedChannels(prev => 
-      prev.includes(channelId) 
-        ? prev.filter(id => id !== channelId)
-        : [...prev, channelId]
-    );
-  };
-
-  return (
-    <div className="welcome-overlay">
-      <div className="welcome-screen">
-        {/* Progress dots */}
-        <div className="welcome-progress">
-          {steps.map((s, idx) => (
-            <div 
-              key={s.id}
-              className={`progress-dot ${idx === step ? 'active' : ''} ${idx < step ? 'completed' : ''}`}
-            />
-          ))}
-        </div>
-
-        {step === 0 && (
-          <div className="welcome-step">
-            <div 
-              className="welcome-server-icon"
-              style={{ background: serverData.gradient }}
-            >
-              {serverData.icon}
-            </div>
-            <h1>Welcome to {serverData.name}!</h1>
-            <p className="welcome-description">{serverData.description}</p>
-            <div className="welcome-stats">
-              <span>👥 {serverData.memberCount} members</span>
-            </div>
-            <button className="welcome-btn primary" onClick={() => setStep(1)}>
-              Continue
-            </button>
-          </div>
-        )}
-
-        {step === 1 && (
-          <div className="welcome-step">
-            <h2>📜 Server Rules</h2>
-            <p className="step-subtitle">Please read and agree to our community rules</p>
-            <div className="rules-list">
-              {serverData.rules.map((rule, idx) => (
-                <div key={rule.id} className="rule-item">
-                  <span className="rule-number">{idx + 1}</span>
-                  <div className="rule-content">
-                    <h4>{rule.title}</h4>
-                    <p>{rule.description}</p>
-                  </div>
-                </div>
-              ))}
-            </div>
-            <div className="welcome-actions">
-              <button className="welcome-btn secondary" onClick={() => setStep(0)}>
-                Back
-              </button>
-              <button className="welcome-btn primary" onClick={() => setStep(2)}>
-                I Agree
-              </button>
-            </div>
-          </div>
-        )}
-
-        {step === 2 && (
-          <div className="welcome-step">
-            <h2>🎭 Pick Your Roles</h2>
-            <p className="step-subtitle">Select roles that match your interests</p>
-            <div className="options-grid">
-              {roleOptions.map(role => (
-                <button
-                  key={role.id}
-                  className={`option-btn ${selectedRoles.includes(role.id) ? 'selected' : ''}`}
-                  onClick={() => toggleRole(role.id)}
-                >
-                  <span className="option-label">{role.label}</span>
-                  <span className="option-description">{role.description}</span>
-                  {selectedRoles.includes(role.id) && (
-                    <span className="option-check">✓</span>
-                  )}
-                </button>
-              ))}
-            </div>
-            <div className="welcome-actions">
-              <button className="welcome-btn secondary" onClick={() => setStep(1)}>
-                Back
-              </button>
-              <button className="welcome-btn primary" onClick={() => setStep(3)}>
-                Continue
-              </button>
-            </div>
-          </div>
-        )}
-
-        {step === 3 && (
-          <div className="welcome-step">
-            <h2>📺 Choose Channels</h2>
-            <p className="step-subtitle">Pick channels you want to see</p>
-            <div className="options-grid">
-              {channelOptions.map(channel => (
-                <button
-                  key={channel.id}
-                  className={`option-btn ${selectedChannels.includes(channel.id) ? 'selected' : ''}`}
-                  onClick={() => toggleChannel(channel.id)}
-                >
-                  <span className="option-label">{channel.label}</span>
-                  <span className="option-description">{channel.description}</span>
-                  {selectedChannels.includes(channel.id) && (
-                    <span className="option-check">✓</span>
-                  )}
-                </button>
-              ))}
-            </div>
-            <div className="welcome-actions">
-              <button className="welcome-btn secondary" onClick={() => setStep(2)}>
-                Back
-              </button>
-              <button className="welcome-btn primary" onClick={handleComplete}>
-                Finish Setup
-              </button>
-            </div>
-          </div>
-        )}
-
-        <button className="skip-btn" onClick={onClose}>
-          Skip for now
-        </button>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/components/HeroVideo.css b/src/frontend/mockup/components/HeroVideo.css
deleted file mode 100644
index 9cad1d2..0000000
--- a/src/frontend/mockup/components/HeroVideo.css
+++ /dev/null
@@ -1,70 +0,0 @@
-/* ============================================
-   AETHEX CONNECT - HERO VIDEO CANVAS
-   ============================================ */
-
-.hero-video-container {
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-  z-index: 0;
-}
-
-.hero-video-canvas {
-  width: 100%;
-  height: 100%;
-  background: #0a0a0a;
-}
-
-.hero-video-overlay {
-  position: absolute;
-  inset: 0;
-  background: 
-    radial-gradient(ellipse at center, transparent 0%, rgba(10, 10, 10, 0.3) 50%, rgba(10, 10, 10, 0.8) 100%),
-    linear-gradient(180deg, transparent 0%, transparent 50%, rgba(10, 10, 10, 0.9) 100%);
-  pointer-events: none;
-}
-
-.hero-video-toggle {
-  position: absolute;
-  bottom: 20px;
-  right: 20px;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  color: #fff;
-  font-size: 14px;
-  cursor: pointer;
-  opacity: 0.5;
-  transition: all 0.3s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 10;
-}
-
-.hero-video-toggle:hover {
-  opacity: 1;
-  background: rgba(255, 255, 255, 0.2);
-  transform: scale(1.1);
-}
-
-/* ============================================
-   SCANLINES OVERLAY (Optional CRT effect)
-   ============================================ */
-
-.hero-video-container::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: repeating-linear-gradient(
-    0deg,
-    transparent,
-    transparent 2px,
-    rgba(0, 0, 0, 0.1) 2px,
-    rgba(0, 0, 0, 0.1) 4px
-  );
-  pointer-events: none;
-  opacity: 0.3;
-}
diff --git a/src/frontend/mockup/components/HeroVideo.jsx b/src/frontend/mockup/components/HeroVideo.jsx
deleted file mode 100644
index d28de98..0000000
--- a/src/frontend/mockup/components/HeroVideo.jsx
+++ /dev/null
@@ -1,251 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import './HeroVideo.css';
-
-export default function HeroVideo() {
-  const canvasRef = useRef(null);
-  const [isPlaying, setIsPlaying] = useState(true);
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-
-    const ctx = canvas.getContext('2d');
-    let animationId;
-    let particles = [];
-    let connections = [];
-    let time = 0;
-
-    const resize = () => {
-      canvas.width = canvas.offsetWidth * window.devicePixelRatio;
-      canvas.height = canvas.offsetHeight * window.devicePixelRatio;
-      ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
-    };
-
-    const colors = {
-      foundation: '#ff0000',
-      corporation: '#0066ff',
-      labs: '#ffa500'
-    };
-
-    class Particle {
-      constructor() {
-        this.reset();
-      }
-
-      reset() {
-        this.x = Math.random() * canvas.offsetWidth;
-        this.y = Math.random() * canvas.offsetHeight;
-        this.vx = (Math.random() - 0.5) * 0.5;
-        this.vy = (Math.random() - 0.5) * 0.5;
-        this.radius = Math.random() * 2 + 1;
-        this.color = Object.values(colors)[Math.floor(Math.random() * 3)];
-        this.alpha = Math.random() * 0.5 + 0.3;
-        this.pulse = Math.random() * Math.PI * 2;
-      }
-
-      update() {
-        this.x += this.vx;
-        this.y += this.vy;
-        this.pulse += 0.02;
-
-        if (this.x < 0 || this.x > canvas.offsetWidth) this.vx *= -1;
-        if (this.y < 0 || this.y > canvas.offsetHeight) this.vy *= -1;
-      }
-
-      draw() {
-        const pulseRadius = this.radius + Math.sin(this.pulse) * 0.5;
-        ctx.beginPath();
-        ctx.arc(this.x, this.y, pulseRadius, 0, Math.PI * 2);
-        ctx.fillStyle = this.color;
-        ctx.globalAlpha = this.alpha;
-        ctx.fill();
-        
-        // Glow effect
-        ctx.beginPath();
-        ctx.arc(this.x, this.y, pulseRadius * 3, 0, Math.PI * 2);
-        const gradient = ctx.createRadialGradient(
-          this.x, this.y, 0,
-          this.x, this.y, pulseRadius * 3
-        );
-        gradient.addColorStop(0, this.color + '40');
-        gradient.addColorStop(1, 'transparent');
-        ctx.fillStyle = gradient;
-        ctx.fill();
-        ctx.globalAlpha = 1;
-      }
-    }
-
-    class Diamond {
-      constructor(x, y, size) {
-        this.x = x;
-        this.y = y;
-        this.size = size;
-        this.rotation = 0;
-        this.pulsePhase = 0;
-      }
-
-      update() {
-        this.rotation += 0.005;
-        this.pulsePhase += 0.03;
-      }
-
-      draw() {
-        const pulse = 1 + Math.sin(this.pulsePhase) * 0.05;
-        const s = this.size * pulse;
-        
-        ctx.save();
-        ctx.translate(this.x, this.y);
-        ctx.rotate(this.rotation);
-
-        // Outer diamond
-        ctx.beginPath();
-        ctx.moveTo(0, -s);
-        ctx.lineTo(s, 0);
-        ctx.lineTo(0, s);
-        ctx.lineTo(-s, 0);
-        ctx.closePath();
-
-        const gradient = ctx.createLinearGradient(-s, -s, s, s);
-        gradient.addColorStop(0, colors.foundation);
-        gradient.addColorStop(0.5, colors.corporation);
-        gradient.addColorStop(1, colors.labs);
-
-        ctx.strokeStyle = gradient;
-        ctx.lineWidth = 2;
-        ctx.stroke();
-
-        // Inner glow
-        ctx.beginPath();
-        ctx.arc(0, 0, s * 0.3, 0, Math.PI * 2);
-        const coreGradient = ctx.createRadialGradient(0, 0, 0, 0, 0, s * 0.3);
-        coreGradient.addColorStop(0, 'rgba(255, 255, 255, 0.8)');
-        coreGradient.addColorStop(0.5, 'rgba(255, 100, 50, 0.3)');
-        coreGradient.addColorStop(1, 'transparent');
-        ctx.fillStyle = coreGradient;
-        ctx.fill();
-
-        ctx.restore();
-      }
-    }
-
-    const init = () => {
-      resize();
-      particles = [];
-      const particleCount = Math.min(80, Math.floor((canvas.offsetWidth * canvas.offsetHeight) / 10000));
-      
-      for (let i = 0; i < particleCount; i++) {
-        particles.push(new Particle());
-      }
-    };
-
-    const drawConnections = () => {
-      const maxDist = 150;
-      
-      for (let i = 0; i < particles.length; i++) {
-        for (let j = i + 1; j < particles.length; j++) {
-          const dx = particles[i].x - particles[j].x;
-          const dy = particles[i].y - particles[j].y;
-          const dist = Math.sqrt(dx * dx + dy * dy);
-
-          if (dist < maxDist) {
-            const alpha = (1 - dist / maxDist) * 0.2;
-            ctx.beginPath();
-            ctx.moveTo(particles[i].x, particles[i].y);
-            ctx.lineTo(particles[j].x, particles[j].y);
-            ctx.strokeStyle = `rgba(255, 255, 255, ${alpha})`;
-            ctx.lineWidth = 0.5;
-            ctx.stroke();
-          }
-        }
-      }
-    };
-
-    const drawGrid = () => {
-      const gridSize = 60;
-      ctx.strokeStyle = 'rgba(255, 255, 255, 0.02)';
-      ctx.lineWidth = 1;
-
-      for (let x = 0; x < canvas.offsetWidth; x += gridSize) {
-        ctx.beginPath();
-        ctx.moveTo(x, 0);
-        ctx.lineTo(x, canvas.offsetHeight);
-        ctx.stroke();
-      }
-
-      for (let y = 0; y < canvas.offsetHeight; y += gridSize) {
-        ctx.beginPath();
-        ctx.moveTo(0, y);
-        ctx.lineTo(canvas.offsetWidth, y);
-        ctx.stroke();
-      }
-    };
-
-    const drawScanline = () => {
-      const y = (time * 50) % (canvas.offsetHeight + 100) - 50;
-      const gradient = ctx.createLinearGradient(0, y - 50, 0, y + 50);
-      gradient.addColorStop(0, 'transparent');
-      gradient.addColorStop(0.5, 'rgba(255, 100, 50, 0.1)');
-      gradient.addColorStop(1, 'transparent');
-      
-      ctx.fillStyle = gradient;
-      ctx.fillRect(0, y - 50, canvas.offsetWidth, 100);
-    };
-
-    const centralDiamond = new Diamond(
-      canvas.offsetWidth / 2,
-      canvas.offsetHeight / 2,
-      80
-    );
-
-    const animate = () => {
-      if (!isPlaying) return;
-      
-      ctx.fillStyle = 'rgba(10, 10, 10, 0.1)';
-      ctx.fillRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
-
-      drawGrid();
-      drawScanline();
-
-      particles.forEach(p => {
-        p.update();
-        p.draw();
-      });
-
-      drawConnections();
-      
-      centralDiamond.x = canvas.offsetWidth / 2;
-      centralDiamond.y = canvas.offsetHeight / 2;
-      centralDiamond.update();
-      centralDiamond.draw();
-
-      time += 0.016;
-      animationId = requestAnimationFrame(animate);
-    };
-
-    init();
-    animate();
-
-    window.addEventListener('resize', () => {
-      init();
-    });
-
-    return () => {
-      cancelAnimationFrame(animationId);
-      window.removeEventListener('resize', init);
-    };
-  }, [isPlaying]);
-
-  return (
-    <div className="hero-video-container">
-      <canvas ref={canvasRef} className="hero-video-canvas" />
-      <div className="hero-video-overlay" />
-      <button 
-        className="hero-video-toggle"
-        onClick={() => setIsPlaying(!isPlaying)}
-        aria-label={isPlaying ? 'Pause animation' : 'Play animation'}
-      >
-        {isPlaying ? '⏸' : '▶'}
-      </button>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/components/IntroAnimation.css b/src/frontend/mockup/components/IntroAnimation.css
deleted file mode 100644
index 8c990f3..0000000
--- a/src/frontend/mockup/components/IntroAnimation.css
+++ /dev/null
@@ -1,326 +0,0 @@
-/* ============================================
-   AETHEX CONNECT - CINEMATIC INTRO ANIMATION
-   ============================================ */
-
-.intro-animation {
-  position: fixed;
-  inset: 0;
-  z-index: 10000;
-  background: #000;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  transition: opacity 1s ease-out;
-}
-
-.intro-animation.fade {
-  opacity: 0;
-  pointer-events: none;
-}
-
-/* ============================================
-   PARTICLE FIELD
-   ============================================ */
-
-.intro-particles {
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-}
-
-.intro-particle {
-  position: absolute;
-  left: var(--x);
-  top: var(--y);
-  width: var(--size);
-  height: var(--size);
-  background: var(--color);
-  border-radius: 50%;
-  opacity: 0;
-  animation: particle-float var(--duration) var(--delay) infinite;
-  box-shadow: 0 0 10px var(--color);
-}
-
-@keyframes particle-float {
-  0% {
-    opacity: 0;
-    transform: translateY(0) scale(0);
-  }
-  10% {
-    opacity: 0.8;
-    transform: scale(1);
-  }
-  90% {
-    opacity: 0.8;
-  }
-  100% {
-    opacity: 0;
-    transform: translateY(-100px) scale(0);
-  }
-}
-
-/* ============================================
-   ANIMATED LOGO
-   ============================================ */
-
-.intro-logo-container {
-  position: relative;
-  margin-bottom: 40px;
-  animation: logo-appear 1s ease-out forwards;
-}
-
-@keyframes logo-appear {
-  0% {
-    opacity: 0;
-    transform: scale(0.5) rotate(-180deg);
-  }
-  60% {
-    transform: scale(1.1) rotate(10deg);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1) rotate(0deg);
-  }
-}
-
-.intro-logo {
-  filter: drop-shadow(0 0 30px rgba(255, 100, 50, 0.5));
-}
-
-/* Diamond outer - draw animation */
-.intro-diamond-outer {
-  stroke-dasharray: 1000;
-  stroke-dashoffset: 1000;
-  animation: draw-diamond 1.5s ease-out forwards;
-}
-
-@keyframes draw-diamond {
-  to {
-    stroke-dashoffset: 0;
-  }
-}
-
-/* Diamond inner - fade in */
-.intro-diamond-inner {
-  opacity: 0;
-  animation: fade-in 0.5s ease-out 1s forwards;
-}
-
-/* Core pulse */
-.intro-core {
-  animation: core-pulse 1.5s ease-in-out infinite;
-}
-
-@keyframes core-pulse {
-  0%, 100% {
-    r: 15;
-    filter: drop-shadow(0 0 20px rgba(255, 100, 50, 0.8));
-  }
-  50% {
-    r: 18;
-    filter: drop-shadow(0 0 40px rgba(255, 100, 50, 1));
-  }
-}
-
-/* Orbiting dots */
-.intro-orbit {
-  transform-origin: 100px 100px;
-}
-
-.intro-orbit-1 {
-  animation: orbit 3s linear infinite;
-}
-
-.intro-orbit-2 {
-  animation: orbit 3s linear infinite;
-  animation-delay: -1s;
-}
-
-.intro-orbit-3 {
-  animation: orbit 3s linear infinite;
-  animation-delay: -2s;
-}
-
-@keyframes orbit {
-  0% {
-    transform: rotate(0deg) translateX(70px) rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg) translateX(70px) rotate(-360deg);
-  }
-}
-
-/* ============================================
-   TEXT REVEAL
-   ============================================ */
-
-.intro-text-container {
-  text-align: center;
-  opacity: 0;
-  transform: translateY(20px);
-}
-
-.intro-animation.text .intro-text-container,
-.intro-animation.fade .intro-text-container {
-  animation: text-reveal 1s ease-out forwards;
-}
-
-@keyframes text-reveal {
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.intro-title {
-  font-size: 4rem;
-  font-weight: 700;
-  color: #fff;
-  margin: 0;
-  letter-spacing: 0.1em;
-  display: flex;
-  justify-content: center;
-  gap: 2px;
-}
-
-.intro-letter {
-  display: inline-block;
-  opacity: 0;
-  transform: translateY(40px) rotateX(-90deg);
-  animation: letter-flip 0.6s ease-out forwards;
-  animation-delay: calc(var(--i) * 0.05s + 1.5s);
-  background: linear-gradient(135deg, #ff0000, #0066ff, #ffa500);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-@keyframes letter-flip {
-  to {
-    opacity: 1;
-    transform: translateY(0) rotateX(0);
-  }
-}
-
-.intro-space {
-  width: 0.3em;
-}
-
-.intro-tagline {
-  font-size: 1.2rem;
-  color: #666;
-  margin-top: 12px;
-  opacity: 0;
-  animation: fade-in 0.8s ease-out 2.5s forwards;
-  letter-spacing: 0.3em;
-  text-transform: uppercase;
-}
-
-@keyframes fade-in {
-  to {
-    opacity: 1;
-  }
-}
-
-/* ============================================
-   SCAN LINE EFFECT
-   ============================================ */
-
-.intro-scanline {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background: linear-gradient(90deg, transparent, #ff0000, #0066ff, #ffa500, transparent);
-  opacity: 0.6;
-  animation: scanline 3s linear infinite;
-  box-shadow: 0 0 20px rgba(255, 100, 50, 0.5);
-}
-
-@keyframes scanline {
-  0% {
-    top: -2px;
-  }
-  100% {
-    top: 100%;
-  }
-}
-
-/* ============================================
-   CORNER ACCENTS
-   ============================================ */
-
-.intro-corner {
-  position: absolute;
-  width: 60px;
-  height: 60px;
-  opacity: 0;
-  animation: corner-appear 0.5s ease-out 0.5s forwards;
-}
-
-.intro-corner-tl {
-  top: 30px;
-  left: 30px;
-  border-top: 2px solid #ff0000;
-  border-left: 2px solid #ff0000;
-}
-
-.intro-corner-tr {
-  top: 30px;
-  right: 30px;
-  border-top: 2px solid #0066ff;
-  border-right: 2px solid #0066ff;
-}
-
-.intro-corner-bl {
-  bottom: 30px;
-  left: 30px;
-  border-bottom: 2px solid #ffa500;
-  border-left: 2px solid #ffa500;
-}
-
-.intro-corner-br {
-  bottom: 30px;
-  right: 30px;
-  border-bottom: 2px solid #fff;
-  border-right: 2px solid #fff;
-  opacity: 0.3;
-}
-
-@keyframes corner-appear {
-  0% {
-    opacity: 0;
-    transform: scale(0.5);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-/* ============================================
-   RESPONSIVE
-   ============================================ */
-
-@media (max-width: 768px) {
-  .intro-title {
-    font-size: 2.5rem;
-  }
-  
-  .intro-tagline {
-    font-size: 0.9rem;
-    letter-spacing: 0.15em;
-  }
-  
-  .intro-logo-container svg {
-    width: 150px;
-    height: 150px;
-  }
-  
-  .intro-corner {
-    width: 40px;
-    height: 40px;
-  }
-}
diff --git a/src/frontend/mockup/components/IntroAnimation.jsx b/src/frontend/mockup/components/IntroAnimation.jsx
deleted file mode 100644
index a5beb11..0000000
--- a/src/frontend/mockup/components/IntroAnimation.jsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import './IntroAnimation.css';
-
-export default function IntroAnimation({ onComplete }) {
-  const [phase, setPhase] = useState('logo'); // logo -> text -> fade
-  const [visible, setVisible] = useState(true);
-
-  useEffect(() => {
-    const timers = [
-      setTimeout(() => setPhase('text'), 1500),
-      setTimeout(() => setPhase('fade'), 3500),
-      setTimeout(() => {
-        setVisible(false);
-        onComplete?.();
-      }, 4500)
-    ];
-
-    return () => timers.forEach(clearTimeout);
-  }, [onComplete]);
-
-  if (!visible) return null;
-
-  return (
-    <div className={`intro-animation ${phase}`}>
-      {/* Particle field background */}
-      <div className="intro-particles">
-        {[...Array(50)].map((_, i) => (
-          <div
-            key={i}
-            className="intro-particle"
-            style={{
-              '--x': `${Math.random() * 100}%`,
-              '--y': `${Math.random() * 100}%`,
-              '--delay': `${Math.random() * 2}s`,
-              '--duration': `${3 + Math.random() * 4}s`,
-              '--size': `${1 + Math.random() * 3}px`,
-              '--color': ['#ff0000', '#0066ff', '#ffa500'][Math.floor(Math.random() * 3)]
-            }}
-          />
-        ))}
-      </div>
-
-      {/* Animated logo */}
-      <div className="intro-logo-container">
-        <svg className="intro-logo" viewBox="0 0 200 200" width="200" height="200">
-          <defs>
-            <linearGradient id="intro-trinity" x1="0%" y1="0%" x2="100%" y2="100%">
-              <stop offset="0%" stopColor="#ff0000"/>
-              <stop offset="50%" stopColor="#0066ff"/>
-              <stop offset="100%" stopColor="#ffa500"/>
-            </linearGradient>
-            <filter id="intro-glow">
-              <feGaussianBlur stdDeviation="3" result="blur"/>
-              <feMerge>
-                <feMergeNode in="blur"/>
-                <feMergeNode in="SourceGraphic"/>
-              </feMerge>
-            </filter>
-          </defs>
-          
-          {/* Outer diamond */}
-          <path 
-            className="intro-diamond-outer"
-            d="M100 10 L190 100 L100 190 L10 100 Z" 
-            fill="none" 
-            stroke="url(#intro-trinity)" 
-            strokeWidth="2"
-            filter="url(#intro-glow)"
-          />
-          
-          {/* Inner diamond */}
-          <path 
-            className="intro-diamond-inner"
-            d="M100 40 L160 100 L100 160 L40 100 Z" 
-            fill="url(#intro-trinity)" 
-            opacity="0.2"
-          />
-          
-          {/* Center pulse */}
-          <circle 
-            className="intro-core"
-            cx="100" 
-            cy="100" 
-            r="15" 
-            fill="url(#intro-trinity)"
-          />
-          
-          {/* Orbiting dots */}
-          <circle className="intro-orbit intro-orbit-1" r="4" fill="#ff0000"/>
-          <circle className="intro-orbit intro-orbit-2" r="4" fill="#0066ff"/>
-          <circle className="intro-orbit intro-orbit-3" r="4" fill="#ffa500"/>
-        </svg>
-      </div>
-
-      {/* Text reveal */}
-      <div className="intro-text-container">
-        <h1 className="intro-title">
-          <span className="intro-letter" style={{ '--i': 0 }}>A</span>
-          <span className="intro-letter" style={{ '--i': 1 }}>e</span>
-          <span className="intro-letter" style={{ '--i': 2 }}>T</span>
-          <span className="intro-letter" style={{ '--i': 3 }}>h</span>
-          <span className="intro-letter" style={{ '--i': 4 }}>e</span>
-          <span className="intro-letter" style={{ '--i': 5 }}>x</span>
-          <span className="intro-space"> </span>
-          <span className="intro-letter" style={{ '--i': 6 }}>C</span>
-          <span className="intro-letter" style={{ '--i': 7 }}>o</span>
-          <span className="intro-letter" style={{ '--i': 8 }}>n</span>
-          <span className="intro-letter" style={{ '--i': 9 }}>n</span>
-          <span className="intro-letter" style={{ '--i': 10 }}>e</span>
-          <span className="intro-letter" style={{ '--i': 11 }}>c</span>
-          <span className="intro-letter" style={{ '--i': 12 }}>t</span>
-        </h1>
-        <p className="intro-tagline">The Trinity of Communication</p>
-      </div>
-
-      {/* Scan line effect */}
-      <div className="intro-scanline" />
-
-      {/* Corner accents */}
-      <div className="intro-corner intro-corner-tl" />
-      <div className="intro-corner intro-corner-tr" />
-      <div className="intro-corner intro-corner-bl" />
-      <div className="intro-corner intro-corner-br" />
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/contexts/AuthContext.jsx b/src/frontend/mockup/contexts/AuthContext.jsx
deleted file mode 100644
index 4a3a5f5..0000000
--- a/src/frontend/mockup/contexts/AuthContext.jsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import React, { createContext, useContext, useState, useEffect } from 'react';
-
-const AuthContext = createContext(null);
-
-export function AuthProvider({ children }) {
-  const [user, setUser] = useState(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    // Check for stored session on mount
-    const stored = localStorage.getItem('aethex_user');
-    if (stored) {
-      try {
-        setUser(JSON.parse(stored));
-      } catch (e) {
-        localStorage.removeItem('aethex_user');
-      }
-    }
-    setLoading(false);
-  }, []);
-
-  const login = (userData) => {
-    const userWithDefaults = {
-      id: Date.now(),
-      email: userData.email,
-      username: userData.username || userData.email.split('@')[0],
-      displayName: userData.displayName || userData.email.split('@')[0],
-      avatar: null,
-      createdAt: new Date().toISOString(),
-      ...userData,
-    };
-    setUser(userWithDefaults);
-    localStorage.setItem('aethex_user', JSON.stringify(userWithDefaults));
-  };
-
-  const register = (userData) => {
-    const newUser = {
-      id: Date.now(),
-      email: userData.email,
-      username: userData.username,
-      displayName: userData.displayName || userData.username,
-      avatar: null,
-      createdAt: new Date().toISOString(),
-      ...userData,
-    };
-    setUser(newUser);
-    localStorage.setItem('aethex_user', JSON.stringify(newUser));
-  };
-
-  const logout = () => {
-    setUser(null);
-    localStorage.removeItem('aethex_user');
-  };
-
-  const updateUser = (updates) => {
-    const updated = { ...user, ...updates };
-    setUser(updated);
-    localStorage.setItem('aethex_user', JSON.stringify(updated));
-  };
-
-  return (
-    <AuthContext.Provider value={{ 
-      user, 
-      loading, 
-      isAuthenticated: !!user,
-      login, 
-      register, 
-      logout,
-      updateUser,
-    }}>
-      {children}
-    </AuthContext.Provider>
-  );
-}
-
-export function useAuth() {
-  const context = useContext(AuthContext);
-  if (!context) {
-    throw new Error('useAuth must be used within an AuthProvider');
-  }
-  return context;
-}
-
-export default AuthContext;
diff --git a/src/frontend/mockup/global.css b/src/frontend/mockup/global.css
deleted file mode 100644
index b514874..0000000
--- a/src/frontend/mockup/global.css
+++ /dev/null
@@ -1,57 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500;700&display=swap');
-
-html, body, #root {
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  font-family: 'Roboto Mono', monospace;
-  background: #0a0a0a;
-  color: #e0e0e0;
-}
-
-body::before {
-  content: '';
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background: repeating-linear-gradient(
-    0deg,
-    rgba(0, 0, 0, 0.15),
-    rgba(0, 0, 0, 0.15) 1px,
-    transparent 1px,
-    transparent 2px
-  );
-  pointer-events: none;
-  z-index: 1000;
-}
-
-.connect-container {
-  height: 100vh;
-  display: flex;
-}
-
-.server-icon, .user-avatar, .member-avatar-small {
-  background: rgba(26,26,26,0.85);
-  backdrop-filter: blur(6px);
-}
-
-.channel-item.active, .channel-item:hover, .member-item:hover {
-  background: rgba(26,26,26,0.85);
-  backdrop-filter: blur(4px);
-}
-
-.message-input, .message-input-container {
-  background: rgba(15,15,15,0.95);
-  backdrop-filter: blur(4px);
-}
-
-::-webkit-scrollbar {
-  width: 8px;
-  background: #111;
-}
-::-webkit-scrollbar-thumb {
-  background: #222;
-  border-radius: 4px;
-}
diff --git a/src/frontend/mockup/index.html b/src/frontend/mockup/index.html
deleted file mode 100644
index 25131a0..0000000
--- a/src/frontend/mockup/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>AeThex Connect Mockup Web</title>
-    <link rel="stylesheet" href="./global.css" />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./index.jsx"></script>
-  </body>
-</html>
diff --git a/src/frontend/mockup/index.jsx b/src/frontend/mockup/index.jsx
deleted file mode 100644
index ee39812..0000000
--- a/src/frontend/mockup/index.jsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React from "react";
-import { createRoot } from "react-dom/client";
-import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
-import { AuthProvider, useAuth } from "./contexts/AuthContext";
-import MainLayout from "./MainLayout";
-import LandingPage from "./pages/LandingPage";
-import LoginPage from "./pages/LoginPage";
-import RegisterPage from "./pages/RegisterPage";
-import AboutPage from "./pages/AboutPage";
-import FeaturesPage from "./pages/FeaturesPage";
-import "./global.css";
-
-// Protected route wrapper
-function ProtectedRoute({ children }) {
-  const { isAuthenticated, loading } = useAuth();
-  
-  if (loading) {
-    return (
-      <div className="loading-screen">
-        <div className="loading-spinner"></div>
-        <span>Loading...</span>
-      </div>
-    );
-  }
-  
-  return isAuthenticated ? children : <Navigate to="/login" replace />;
-}
-
-// Public route - redirect to app if already logged in
-function PublicRoute({ children }) {
-  const { isAuthenticated, loading } = useAuth();
-  
-  if (loading) {
-    return (
-      <div className="loading-screen">
-        <div className="loading-spinner"></div>
-        <span>Loading...</span>
-      </div>
-    );
-  }
-  
-  return !isAuthenticated ? children : <Navigate to="/app" replace />;
-}
-
-function App() {
-  const { login, register, logout } = useAuth();
-
-  return (
-    <Routes>
-      {/* Public pages */}
-      <Route path="/" element={<LandingPage />} />
-      <Route path="/features" element={<FeaturesPage />} />
-      <Route path="/about" element={<AboutPage />} />
-      
-      {/* Auth pages */}
-      <Route path="/login" element={
-        <PublicRoute>
-          <LoginPage onLogin={login} />
-        </PublicRoute>
-      } />
-      <Route path="/register" element={
-        <PublicRoute>
-          <RegisterPage onRegister={register} />
-        </PublicRoute>
-      } />
-      
-      {/* Protected app */}
-      <Route path="/app" element={
-        <ProtectedRoute>
-          <MainLayout onLogout={logout} />
-        </ProtectedRoute>
-      } />
-      
-      {/* Fallback */}
-      <Route path="*" element={<Navigate to="/" replace />} />
-    </Routes>
-  );
-}
-
-const root = document.getElementById("root");
-if (root) {
-  createRoot(root).render(
-    <React.StrictMode>
-      <BrowserRouter>
-        <AuthProvider>
-          <App />
-        </AuthProvider>
-      </BrowserRouter>
-    </React.StrictMode>
-  );
-}
-
diff --git a/src/frontend/mockup/mockup.css b/src/frontend/mockup/mockup.css
deleted file mode 100644
index 34c3e9a..0000000
--- a/src/frontend/mockup/mockup.css
+++ /dev/null
@@ -1,10317 +0,0 @@
-/* AeThex Connect Mockup Styles - Exact Match */
-@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500;700&display=swap');
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: 'Roboto Mono', monospace;
-  background: #0a0a0a;
-  color: #e0e0e0;
-  overflow: hidden;
-  height: 100vh;
-}
-
-/* Scanline effect */
-.connect-container::before {
-  content: '';
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: repeating-linear-gradient(
-    0deg,
-    rgba(0, 0, 0, 0.15),
-    rgba(0, 0, 0, 0.15) 1px,
-    transparent 1px,
-    transparent 2px
-  );
-  pointer-events: none;
-  z-index: 1000;
-}
-
-/* Main Layout */
-.connect-container {
-  display: flex;
-  height: 100vh;
-  position: relative;
-}
-
-/* Server Sidebar */
-.server-list {
-  width: 80px;
-  min-width: 80px;
-  background: #0d0d0d;
-  border-right: 1px solid #1a1a1a;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 12px 0;
-  gap: 12px;
-}
-
-.server-icon {
-  width: 56px;
-  height: 56px;
-  background: #1a1a1a;
-  border-radius: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-  font-size: 1.2em;
-  cursor: pointer;
-  transition: all 0.3s;
-  position: relative;
-  color: #e0e0e0;
-}
-
-.server-icon:hover {
-  border-radius: 12px;
-  transform: translateY(-2px);
-}
-
-.server-icon.active {
-  border-radius: 12px;
-}
-
-.server-icon::before {
-  content: '';
-  position: absolute;
-  left: -12px;
-  width: 4px;
-  height: 0;
-  transition: height 0.3s;
-  border-radius: 0 4px 4px 0;
-}
-
-.server-icon.active::before {
-  height: 40px;
-}
-
-.server-icon.foundation {
-  background: linear-gradient(135deg, #ff0000 0%, #990000 100%);
-}
-
-.server-icon.foundation.active::before {
-  background: #ff0000;
-}
-
-.server-icon.corporation {
-  background: linear-gradient(135deg, #0066ff 0%, #003380 100%);
-}
-
-.server-icon.corporation.active::before {
-  background: #0066ff;
-}
-
-.server-icon.labs {
-  background: linear-gradient(135deg, #ffa500 0%, #ff8c00 100%);
-}
-
-.server-icon.labs.active::before {
-  background: #ffa500;
-}
-
-.server-icon.community {
-  background: #1a1a1a;
-  color: #666;
-}
-
-.server-divider {
-  width: 40px;
-  height: 2px;
-  background: #1a1a1a;
-  margin: 4px 0;
-}
-
-/* Channel Sidebar */
-.channel-sidebar {
-  width: 280px;
-  min-width: 280px;
-  background: #0f0f0f;
-  border-right: 1px solid #1a1a1a;
-  display: flex;
-  flex-direction: column;
-}
-
-.server-header {
-  padding: 16px;
-  border-bottom: 1px solid #1a1a1a;
-  font-weight: 700;
-  font-size: 1.1em;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.server-badge {
-  font-size: 0.7em;
-  padding: 4px 8px;
-  border-radius: 4px;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-}
-
-.server-badge.foundation {
-  background: rgba(255, 0, 0, 0.2);
-  color: #ff0000;
-  border: 1px solid #ff0000;
-}
-
-.server-badge.corporation {
-  background: rgba(0, 102, 255, 0.2);
-  color: #0066ff;
-  border: 1px solid #0066ff;
-}
-
-.server-badge.labs {
-  background: rgba(255, 165, 0, 0.2);
-  color: #ffa500;
-  border: 1px solid #ffa500;
-}
-
-.channel-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 8px 0;
-}
-
-.channel-category {
-  padding: 16px 16px 8px 16px;
-  font-size: 0.75em;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-  color: #666;
-  font-weight: 700;
-}
-
-.channel-item {
-  padding: 8px 16px;
-  margin: 2px 8px;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 0.95em;
-}
-
-.channel-item:hover {
-  background: #1a1a1a;
-}
-
-.channel-item.active {
-  background: #1a1a1a;
-}
-
-.channel-icon {
-  color: #666;
-}
-
-.channel-name {
-  flex: 1;
-}
-
-.channel-badge {
-  font-size: 0.75em;
-  background: #ff0000;
-  color: #fff;
-  padding: 2px 6px;
-  border-radius: 10px;
-}
-
-/* User Presence Panel */
-.user-presence {
-  padding: 12px 16px;
-  border-top: 1px solid #1a1a1a;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  font-size: 0.9em;
-}
-
-.user-avatar {
-  width: 40px;
-  height: 40px;
-  background: linear-gradient(135deg, #ff0000, #0066ff, #ffa500);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-}
-
-.user-info {
-  flex: 1;
-}
-
-.user-name {
-  font-weight: 700;
-  margin-bottom: 2px;
-}
-
-.user-status {
-  font-size: 0.85em;
-  color: #666;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: #00ff00;
-  box-shadow: 0 0 8px #00ff00;
-}
-
-/* Chat Area */
-.chat-area {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  background: #0a0a0a;
-  min-width: 0;
-}
-
-.chat-header {
-  padding: 16px 20px;
-  border-bottom: 1px solid #1a1a1a;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.channel-name-header {
-  flex: 1;
-  font-weight: 700;
-  font-size: 1.1em;
-}
-
-.chat-tools {
-  display: flex;
-  gap: 16px;
-  font-size: 0.9em;
-  color: #666;
-}
-
-.chat-tool {
-  cursor: pointer;
-  transition: color 0.2s;
-}
-
-.chat-tool:hover {
-  color: #0066ff;
-}
-
-.chat-messages {
-  flex: 1;
-  overflow-y: auto;
-  padding: 20px;
-}
-
-.message {
-  display: flex;
-  gap: 16px;
-  margin-bottom: 20px;
-  padding: 12px;
-  border-radius: 4px;
-  transition: background 0.2s;
-}
-
-.message:hover {
-  background: #0f0f0f;
-}
-
-.message-avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background: #1a1a1a;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-  font-size: 0.9em;
-  flex-shrink: 0;
-}
-
-.message-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.message-header {
-  display: flex;
-  align-items: baseline;
-  gap: 12px;
-  margin-bottom: 4px;
-  flex-wrap: wrap;
-}
-
-.message-author {
-  font-weight: 700;
-}
-
-.message-time {
-  font-size: 0.75em;
-  color: #666;
-}
-
-.message-badge {
-  font-size: 0.65em;
-  padding: 2px 6px;
-  border-radius: 3px;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-}
-
-.message-badge.foundation {
-  background: rgba(255, 0, 0, 0.2);
-  color: #ff0000;
-}
-
-.message-badge.corporation {
-  background: rgba(0, 102, 255, 0.2);
-  color: #0066ff;
-}
-
-.message-badge.labs {
-  background: rgba(255, 165, 0, 0.2);
-  color: #ffa500;
-}
-
-.message-text {
-  line-height: 1.6;
-  color: #ccc;
-  word-wrap: break-word;
-}
-
-.message-system {
-  background: #0f0f0f;
-  border-left: 3px solid;
-  padding: 12px;
-  margin-bottom: 16px;
-  font-size: 0.9em;
-}
-
-.message-system.foundation {
-  border-color: #ff0000;
-}
-
-.message-system.corporation {
-  border-color: #0066ff;
-}
-
-.message-system.labs {
-  border-color: #ffa500;
-}
-
-.system-label {
-  font-size: 0.75em;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  margin-bottom: 6px;
-  font-weight: 700;
-}
-
-.system-label.foundation { color: #ff0000; }
-.system-label.corporation { color: #0066ff; }
-.system-label.labs { color: #ffa500; }
-
-/* Message Input */
-.message-input-container {
-  padding: 20px;
-  border-top: 1px solid #1a1a1a;
-}
-
-.message-input {
-  background: #0f0f0f;
-  border: 1px solid #1a1a1a;
-  border-radius: 8px;
-  padding: 12px 16px;
-  width: 100%;
-  color: #e0e0e0;
-  font-family: 'Roboto Mono', monospace;
-  font-size: 0.95em;
-  transition: border-color 0.3s;
-}
-
-.message-input:focus {
-  outline: none;
-  border-color: #0066ff;
-}
-
-.message-input::placeholder {
-  color: #666;
-}
-
-/* Member Sidebar */
-.member-sidebar {
-  width: 280px;
-  min-width: 280px;
-  background: #0f0f0f;
-  border-left: 1px solid #1a1a1a;
-  display: flex;
-  flex-direction: column;
-}
-
-.member-header {
-  padding: 16px;
-  border-bottom: 1px solid #1a1a1a;
-  font-size: 0.85em;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-  color: #666;
-}
-
-.member-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 12px 0;
-}
-
-.member-section {
-  margin-bottom: 16px;
-}
-
-.member-section-title {
-  padding: 8px 16px;
-  font-size: 0.75em;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  color: #666;
-  font-weight: 700;
-}
-
-.member-item {
-  padding: 6px 16px;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  cursor: pointer;
-  transition: background 0.2s;
-}
-
-.member-item:hover {
-  background: #1a1a1a;
-}
-
-.member-avatar-small {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background: #1a1a1a;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.8em;
-  font-weight: 700;
-  position: relative;
-}
-
-.online-indicator {
-  position: absolute;
-  bottom: -2px;
-  right: -2px;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  border: 2px solid #0f0f0f;
-}
-
-.online-indicator.online { background: #00ff00; }
-.online-indicator.in-game { background: #0066ff; }
-.online-indicator.labs { background: #ffa500; }
-
-.member-name {
-  flex: 1;
-  font-size: 0.9em;
-}
-
-.member-activity {
-  font-size: 0.75em;
-  color: #666;
-}
-
-/* ==================== NEW DISCORD-LIKE COMPONENTS ==================== */
-
-/* Server List Enhancements */
-.notification-badge {
-  position: absolute;
-  bottom: -4px;
-  right: -4px;
-  background: #ed4245;
-  color: white;
-  font-size: 0.65em;
-  padding: 2px 5px;
-  border-radius: 10px;
-  min-width: 18px;
-  text-align: center;
-  font-weight: 700;
-  border: 2px solid #0d0d0d;
-}
-
-.update-dot {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 10px;
-  height: 10px;
-  background: #3ba55d;
-  border-radius: 50%;
-  border: 2px solid #0d0d0d;
-}
-
-.server-tooltip {
-  position: absolute;
-  left: 70px;
-  background: #18191c;
-  color: #fff;
-  padding: 8px 12px;
-  border-radius: 4px;
-  font-size: 0.85em;
-  white-space: nowrap;
-  z-index: 1001;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
-}
-
-.server-tooltip::before {
-  content: '';
-  position: absolute;
-  left: -6px;
-  top: 50%;
-  transform: translateY(-50%);
-  border: 6px solid transparent;
-  border-right-color: #18191c;
-}
-
-/* User Settings Bar */
-.user-settings-bar {
-  padding: 8px;
-  background: #0d0d0d;
-  border-top: 1px solid #1a1a1a;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.user-info-section {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  padding: 4px 8px;
-  border-radius: 4px;
-  position: relative;
-}
-
-.user-info-section:hover {
-  background: #1a1a1a;
-}
-
-.user-avatar-container {
-  position: relative;
-}
-
-.user-avatar-small {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-  font-size: 0.8em;
-}
-
-.status-indicator {
-  position: absolute;
-  bottom: -2px;
-  right: -2px;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  border: 2px solid #0d0d0d;
-}
-
-.user-details {
-  display: flex;
-  flex-direction: column;
-}
-
-.user-display-name {
-  font-size: 0.85em;
-  font-weight: 600;
-}
-
-.user-tag {
-  font-size: 0.7em;
-  color: #666;
-}
-
-.status-menu {
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  background: #18191c;
-  border-radius: 4px;
-  padding: 8px 0;
-  min-width: 180px;
-  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
-  z-index: 100;
-}
-
-.status-option {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  cursor: pointer;
-  font-size: 0.85em;
-}
-
-.status-option:hover {
-  background: #1a1a1a;
-}
-
-.status-divider {
-  height: 1px;
-  background: #2f3136;
-  margin: 4px 8px;
-}
-
-.user-controls {
-  display: flex;
-  gap: 4px;
-}
-
-.control-button {
-  width: 32px;
-  height: 32px;
-  border: none;
-  background: transparent;
-  border-radius: 4px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1em;
-  position: relative;
-}
-
-.control-button:hover {
-  background: #1a1a1a;
-}
-
-.control-button.active {
-  color: #ed4245;
-}
-
-.slash-overlay {
-  position: absolute;
-  width: 100%;
-  height: 2px;
-  background: #ed4245;
-  transform: rotate(-45deg);
-}
-
-/* Voice Channel */
-.voice-channel-container {
-  margin: 4px 8px;
-}
-
-.voice-channel-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 0.9em;
-}
-
-.voice-channel-header:hover {
-  background: #1a1a1a;
-}
-
-.voice-channel-name {
-  flex: 1;
-}
-
-.voice-user-count {
-  font-size: 0.8em;
-  color: #666;
-}
-
-.expand-icon {
-  font-size: 0.7em;
-  color: #666;
-}
-
-.voice-users-list {
-  margin-left: 24px;
-}
-
-.voice-user {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-size: 0.85em;
-}
-
-.voice-user:hover {
-  background: #1a1a1a;
-}
-
-.voice-user.speaking {
-  background: rgba(59, 165, 93, 0.1);
-}
-
-.voice-user-avatar {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.7em;
-  font-weight: 700;
-  position: relative;
-}
-
-.speaking-ring {
-  position: absolute;
-  inset: -3px;
-  border: 2px solid #3ba55d;
-  border-radius: 50%;
-  animation: pulse-ring 1s infinite;
-}
-
-@keyframes pulse-ring {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}
-
-.voice-user-name {
-  flex: 1;
-}
-
-.voice-user-icons {
-  display: flex;
-  gap: 4px;
-  font-size: 0.8em;
-}
-
-.voice-connected-panel {
-  background: #1a1a1a;
-  border-radius: 4px;
-  margin: 8px;
-  padding: 12px;
-}
-
-.voice-status {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 8px;
-}
-
-.connected-text {
-  color: #3ba55d;
-  font-size: 0.9em;
-  font-weight: 600;
-}
-
-.voice-ping {
-  font-size: 0.8em;
-  color: #666;
-}
-
-.voice-controls {
-  display: flex;
-  gap: 8px;
-  justify-content: center;
-}
-
-.voice-control-btn {
-  width: 36px;
-  height: 36px;
-  border: none;
-  background: #2f3136;
-  border-radius: 50%;
-  cursor: pointer;
-  font-size: 1em;
-}
-
-.voice-control-btn:hover {
-  background: #40444b;
-}
-
-/* Emoji Picker */
-.emoji-picker {
-  position: absolute;
-  bottom: 100%;
-  right: 0;
-  width: 350px;
-  background: #18191c;
-  border-radius: 8px;
-  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
-  z-index: 100;
-  overflow: hidden;
-}
-
-.emoji-picker-header {
-  padding: 12px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.emoji-search {
-  width: 100%;
-  padding: 8px 12px;
-  background: #0f0f0f;
-  border: none;
-  border-radius: 4px;
-  color: #e0e0e0;
-  font-family: inherit;
-}
-
-.emoji-categories {
-  display: flex;
-  padding: 8px;
-  gap: 4px;
-  border-bottom: 1px solid #2f3136;
-  overflow-x: auto;
-}
-
-.emoji-category-btn {
-  width: 32px;
-  height: 32px;
-  border: none;
-  background: transparent;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 1.1em;
-}
-
-.emoji-category-btn:hover {
-  background: #2f3136;
-}
-
-.emoji-category-btn.active {
-  background: #2f3136;
-}
-
-.emoji-grid {
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);
-  gap: 4px;
-  padding: 12px;
-  max-height: 250px;
-  overflow-y: auto;
-}
-
-.emoji-btn {
-  width: 32px;
-  height: 32px;
-  border: none;
-  background: transparent;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 1.3em;
-}
-
-.emoji-btn:hover {
-  background: #2f3136;
-}
-
-.emoji-picker-footer {
-  padding: 8px 12px;
-  border-top: 1px solid #2f3136;
-  font-size: 0.8em;
-  color: #666;
-}
-
-/* Message Actions */
-.message-actions {
-  position: absolute;
-  top: -20px;
-  right: 16px;
-  display: flex;
-  gap: 8px;
-  background: #18191c;
-  border-radius: 4px;
-  padding: 4px;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
-  opacity: 0;
-  transition: opacity 0.2s;
-}
-
-.message:hover .message-actions {
-  opacity: 1;
-}
-
-.quick-reactions {
-  display: flex;
-  gap: 2px;
-}
-
-.reaction-btn {
-  width: 28px;
-  height: 28px;
-  border: none;
-  background: transparent;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 0.9em;
-}
-
-.reaction-btn:hover {
-  background: #2f3136;
-}
-
-.action-buttons {
-  display: flex;
-  gap: 2px;
-  border-left: 1px solid #2f3136;
-  padding-left: 8px;
-  margin-left: 8px;
-}
-
-.action-btn {
-  width: 28px;
-  height: 28px;
-  border: none;
-  background: transparent;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 0.9em;
-}
-
-.action-btn:hover {
-  background: #2f3136;
-}
-
-.more-menu {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  background: #18191c;
-  border-radius: 4px;
-  padding: 8px 0;
-  min-width: 180px;
-  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
-  z-index: 100;
-}
-
-.menu-item {
-  padding: 8px 12px;
-  cursor: pointer;
-  font-size: 0.85em;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.menu-item:hover {
-  background: #2f3136;
-}
-
-.menu-item.danger {
-  color: #ed4245;
-}
-
-.menu-divider {
-  height: 1px;
-  background: #2f3136;
-  margin: 4px 8px;
-}
-
-/* Typing Indicator */
-.typing-indicator {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 20px;
-  font-size: 0.85em;
-  color: #666;
-}
-
-.typing-dots {
-  display: flex;
-  gap: 3px;
-}
-
-.typing-dots .dot {
-  width: 6px;
-  height: 6px;
-  background: #666;
-  border-radius: 50%;
-  animation: typing-bounce 1.4s infinite ease-in-out;
-}
-
-.typing-dots .dot:nth-child(1) { animation-delay: 0s; }
-.typing-dots .dot:nth-child(2) { animation-delay: 0.2s; }
-.typing-dots .dot:nth-child(3) { animation-delay: 0.4s; }
-
-@keyframes typing-bounce {
-  0%, 60%, 100% { transform: translateY(0); }
-  30% { transform: translateY(-4px); }
-}
-
-/* User Profile Card */
-.user-profile-card {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 340px;
-  background: #18191c;
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
-  z-index: 1000;
-}
-
-.profile-banner {
-  height: 60px;
-}
-
-.profile-avatar-section {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  padding: 0 16px;
-  margin-top: -40px;
-}
-
-.profile-avatar-wrapper {
-  position: relative;
-}
-
-.profile-avatar {
-  width: 80px;
-  height: 80px;
-  border-radius: 50%;
-  border: 6px solid #18191c;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 2em;
-  font-weight: 700;
-}
-
-.profile-status-indicator {
-  position: absolute;
-  bottom: 4px;
-  right: 4px;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  border: 4px solid #18191c;
-}
-
-.profile-badges {
-  display: flex;
-  gap: 4px;
-}
-
-.profile-badge {
-  width: 24px;
-  height: 24px;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.7em;
-  font-weight: 700;
-}
-
-.profile-info {
-  padding: 16px;
-}
-
-.profile-name {
-  font-size: 1.3em;
-  font-weight: 700;
-  margin-bottom: 4px;
-}
-
-.profile-tag {
-  color: #666;
-  font-size: 0.9em;
-}
-
-.profile-custom-status {
-  margin-top: 8px;
-  padding: 8px;
-  background: #0f0f0f;
-  border-radius: 4px;
-  font-size: 0.85em;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.profile-divider {
-  height: 1px;
-  background: #2f3136;
-  margin: 0 16px;
-}
-
-.profile-section {
-  padding: 12px 16px;
-}
-
-.section-title {
-  font-size: 0.7em;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  color: #b9bbbe;
-  font-weight: 700;
-  margin-bottom: 8px;
-}
-
-.activity-card {
-  display: flex;
-  gap: 12px;
-  padding: 8px;
-  background: #0f0f0f;
-  border-radius: 4px;
-}
-
-.activity-icon {
-  font-size: 1.5em;
-}
-
-.activity-info {
-  flex: 1;
-}
-
-.activity-name {
-  font-weight: 600;
-  font-size: 0.9em;
-}
-
-.activity-details,
-.activity-elapsed {
-  font-size: 0.8em;
-  color: #666;
-}
-
-.about-text,
-.member-since {
-  font-size: 0.85em;
-  color: #b9bbbe;
-  line-height: 1.4;
-}
-
-.roles-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.role-tag {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 8px;
-  border: 1px solid;
-  border-radius: 4px;
-  font-size: 0.8em;
-}
-
-.role-dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-}
-
-.note-input {
-  width: 100%;
-  padding: 8px;
-  background: #0f0f0f;
-  border: none;
-  border-radius: 4px;
-  color: #e0e0e0;
-  font-family: inherit;
-  font-size: 0.85em;
-  resize: none;
-}
-
-.profile-actions {
-  display: flex;
-  gap: 8px;
-  padding: 12px 16px;
-  border-top: 1px solid #2f3136;
-}
-
-.profile-btn {
-  flex: 1;
-  padding: 8px;
-  border: none;
-  border-radius: 4px;
-  background: #2f3136;
-  color: #e0e0e0;
-  font-family: inherit;
-  cursor: pointer;
-  font-size: 0.85em;
-}
-
-.profile-btn:hover {
-  background: #40444b;
-}
-
-.profile-btn.primary {
-  background: #5865f2;
-}
-
-.profile-btn.primary:hover {
-  background: #4752c4;
-}
-
-/* Search Panel */
-.search-panel {
-  position: fixed;
-  top: 0;
-  right: 0;
-  width: 420px;
-  height: 100vh;
-  background: #18191c;
-  border-left: 1px solid #2f3136;
-  z-index: 100;
-  display: flex;
-  flex-direction: column;
-}
-
-.search-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 16px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.search-form {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  background: #0f0f0f;
-  padding: 8px 12px;
-  border-radius: 4px;
-}
-
-.search-input {
-  flex: 1;
-  border: none;
-  background: transparent;
-  color: #e0e0e0;
-  font-family: inherit;
-  font-size: 0.9em;
-}
-
-.search-input::placeholder {
-  color: #666;
-}
-
-.clear-btn,
-.close-search {
-  border: none;
-  background: transparent;
-  color: #666;
-  cursor: pointer;
-  font-size: 1em;
-}
-
-.close-search:hover {
-  color: #e0e0e0;
-}
-
-.search-filters {
-  display: flex;
-  gap: 4px;
-  padding: 12px 16px;
-  overflow-x: auto;
-  border-bottom: 1px solid #2f3136;
-}
-
-.filter-btn {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 6px 12px;
-  border: none;
-  background: #2f3136;
-  border-radius: 16px;
-  color: #b9bbbe;
-  font-family: inherit;
-  font-size: 0.8em;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.filter-btn:hover,
-.filter-btn.active {
-  background: #5865f2;
-  color: #fff;
-}
-
-.search-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px;
-}
-
-.search-suggestions h4,
-.search-results h4 {
-  font-size: 0.75em;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  color: #666;
-  margin-bottom: 12px;
-}
-
-.recent-search {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 0.9em;
-}
-
-.recent-search:hover {
-  background: #2f3136;
-}
-
-.search-options {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-bottom: 20px;
-}
-
-.search-options .option {
-  font-size: 0.8em;
-  padding: 4px 8px;
-  background: #2f3136;
-  border-radius: 4px;
-}
-
-.search-options code {
-  color: #5865f2;
-}
-
-.search-loading {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  padding: 40px;
-}
-
-.spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #2f3136;
-  border-top-color: #5865f2;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-.search-result {
-  display: flex;
-  gap: 12px;
-  padding: 12px;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.search-result:hover {
-  background: #2f3136;
-}
-
-.result-avatar {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-  font-size: 0.9em;
-  flex-shrink: 0;
-}
-
-.result-icon {
-  width: 36px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.5em;
-}
-
-.result-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.result-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 4px;
-  font-size: 0.85em;
-}
-
-.result-author {
-  font-weight: 600;
-}
-
-.result-channel,
-.result-time {
-  color: #666;
-}
-
-.result-text {
-  font-size: 0.85em;
-  color: #b9bbbe;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.result-filename {
-  font-weight: 600;
-  font-size: 0.9em;
-}
-
-.result-meta {
-  font-size: 0.8em;
-  color: #666;
-}
-
-/* Thread Panel */
-.thread-panel {
-  position: fixed;
-  top: 0;
-  right: 0;
-  width: 420px;
-  height: 100vh;
-  background: #0f0f0f;
-  border-left: 1px solid #2f3136;
-  z-index: 100;
-  display: flex;
-  flex-direction: column;
-}
-
-.thread-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 16px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.thread-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex: 1;
-  font-weight: 600;
-}
-
-.thread-meta {
-  display: flex;
-  gap: 8px;
-  font-size: 0.8em;
-  color: #666;
-}
-
-.thread-close {
-  border: none;
-  background: transparent;
-  color: #666;
-  cursor: pointer;
-  font-size: 1.2em;
-}
-
-.thread-close:hover {
-  color: #e0e0e0;
-}
-
-.thread-parent {
-  padding: 16px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.parent-message {
-  display: flex;
-  gap: 12px;
-}
-
-.thread-line {
-  width: 2px;
-  height: 20px;
-  background: #2f3136;
-  margin-left: 20px;
-  margin-top: 8px;
-}
-
-.thread-replies {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px;
-}
-
-.thread-reply {
-  display: flex;
-  gap: 12px;
-  margin-bottom: 16px;
-}
-
-.message-avatar.small {
-  width: 32px;
-  height: 32px;
-  font-size: 0.8em;
-}
-
-.thread-input-container {
-  display: flex;
-  gap: 8px;
-  padding: 16px;
-  border-top: 1px solid #2f3136;
-}
-
-.thread-input {
-  flex: 1;
-  padding: 12px;
-  background: #1a1a1a;
-  border: none;
-  border-radius: 4px;
-  color: #e0e0e0;
-  font-family: inherit;
-}
-
-.thread-send {
-  padding: 12px 16px;
-  background: #5865f2;
-  border: none;
-  border-radius: 4px;
-  color: white;
-  cursor: pointer;
-}
-
-.thread-send:hover {
-  background: #4752c4;
-}
-
-/* Server Settings Modal */
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0,0,0,0.85);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.server-settings-modal {
-  width: 90%;
-  max-width: 900px;
-  height: 80vh;
-  background: #18191c;
-  border-radius: 8px;
-  display: flex;
-  overflow: hidden;
-}
-
-.settings-sidebar {
-  width: 240px;
-  background: #0f0f0f;
-  border-right: 1px solid #2f3136;
-  display: flex;
-  flex-direction: column;
-}
-
-.settings-server-info {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 16px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.settings-server-icon {
-  width: 48px;
-  height: 48px;
-  border-radius: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-  font-size: 1.2em;
-}
-
-.settings-server-name {
-  font-weight: 600;
-  font-size: 0.95em;
-}
-
-.settings-nav {
-  flex: 1;
-  overflow-y: auto;
-  padding: 8px;
-}
-
-.settings-nav-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 0.9em;
-  margin-bottom: 2px;
-}
-
-.settings-nav-item:hover {
-  background: #2f3136;
-}
-
-.settings-nav-item.active {
-  background: #2f3136;
-  color: #fff;
-}
-
-.settings-nav-item.danger {
-  color: #ed4245;
-}
-
-.settings-divider {
-  height: 1px;
-  background: #2f3136;
-  margin: 8px 0;
-}
-
-.nav-icon {
-  font-size: 1em;
-}
-
-.settings-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.settings-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 24px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.settings-header h2 {
-  font-size: 1.2em;
-}
-
-.settings-close {
-  border: none;
-  background: transparent;
-  color: #666;
-  cursor: pointer;
-  font-size: 1.5em;
-}
-
-.settings-close:hover {
-  color: #e0e0e0;
-}
-
-.settings-overview {
-  padding: 24px;
-  overflow-y: auto;
-}
-
-.setting-group {
-  margin-bottom: 24px;
-}
-
-.setting-group label {
-  display: block;
-  font-size: 0.75em;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  color: #b9bbbe;
-  font-weight: 700;
-  margin-bottom: 8px;
-}
-
-.setting-input,
-.setting-textarea,
-.setting-select {
-  width: 100%;
-  padding: 12px;
-  background: #0f0f0f;
-  border: 1px solid #2f3136;
-  border-radius: 4px;
-  color: #e0e0e0;
-  font-family: inherit;
-  font-size: 0.95em;
-}
-
-.setting-input:focus,
-.setting-textarea:focus,
-.setting-select:focus {
-  outline: none;
-  border-color: #5865f2;
-}
-
-.icon-upload {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.current-icon {
-  width: 64px;
-  height: 64px;
-  border-radius: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-  font-size: 1.5em;
-}
-
-.upload-btn {
-  padding: 10px 16px;
-  background: #5865f2;
-  border: none;
-  border-radius: 4px;
-  color: white;
-  cursor: pointer;
-  font-family: inherit;
-}
-
-.upload-btn:hover {
-  background: #4752c4;
-}
-
-.boost-info {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 16px;
-  background: linear-gradient(135deg, rgba(255,115,250,0.1), rgba(85,62,223,0.1));
-  border-radius: 8px;
-  border: 1px solid rgba(255,115,250,0.3);
-}
-
-.boost-level {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-weight: 600;
-}
-
-.boost-count {
-  color: #666;
-  font-size: 0.9em;
-}
-
-.settings-roles {
-  padding: 24px;
-  overflow-y: auto;
-}
-
-.roles-header {
-  margin-bottom: 16px;
-}
-
-.create-role-btn {
-  padding: 10px 16px;
-  background: #5865f2;
-  border: none;
-  border-radius: 4px;
-  color: white;
-  cursor: pointer;
-  font-family: inherit;
-}
-
-.create-role-btn:hover {
-  background: #4752c4;
-}
-
-.role-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.role-item:hover {
-  background: #2f3136;
-}
-
-.role-color {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-}
-
-.role-name {
-  flex: 1;
-  font-weight: 500;
-}
-
-.role-members {
-  font-size: 0.85em;
-  color: #666;
-}
-
-.settings-placeholder {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: #666;
-}
-
-.placeholder-icon {
-  font-size: 3em;
-  margin-bottom: 16px;
-}
-
-/* ==================== DMs VIEW ==================== */
-.dms-view {
-  display: flex;
-  flex: 1;
-  height: 100%;
-}
-
-.dms-sidebar {
-  width: 240px;
-  background: #0f0f0f;
-  border-right: 1px solid #2f3136;
-  display: flex;
-  flex-direction: column;
-}
-
-.dms-search {
-  padding: 12px;
-}
-
-.dms-search-input {
-  width: 100%;
-  padding: 8px 12px;
-  background: #0a0a0a;
-  border: none;
-  border-radius: 4px;
-  color: #e0e0e0;
-  font-family: inherit;
-  font-size: 0.85em;
-}
-
-.dms-section {
-  padding: 8px;
-}
-
-.dms-section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px;
-  font-size: 0.75em;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  color: #666;
-}
-
-.add-dm-btn {
-  background: none;
-  border: none;
-  color: #666;
-  cursor: pointer;
-  font-size: 1.2em;
-}
-
-.add-dm-btn:hover {
-  color: #e0e0e0;
-}
-
-.dms-nav-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 12px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 0.9em;
-}
-
-.dms-nav-item:hover {
-  background: #1a1a1a;
-}
-
-.dm-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 8px 12px;
-  border-radius: 4px;
-  cursor: pointer;
-  position: relative;
-}
-
-.dm-item:hover {
-  background: #1a1a1a;
-}
-
-.dm-avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-  font-size: 0.85em;
-  position: relative;
-}
-
-.dm-status {
-  position: absolute;
-  bottom: -2px;
-  right: -2px;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  border: 2px solid #0f0f0f;
-}
-
-.dm-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.dm-name {
-  font-size: 0.9em;
-  font-weight: 500;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.group-count {
-  font-size: 0.75em;
-  color: #666;
-}
-
-.dm-preview {
-  font-size: 0.75em;
-  color: #666;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.dm-unread {
-  background: #ed4245;
-  color: white;
-  font-size: 0.7em;
-  padding: 2px 6px;
-  border-radius: 10px;
-  font-weight: 700;
-}
-
-.dm-close {
-  position: absolute;
-  top: 50%;
-  right: 8px;
-  transform: translateY(-50%);
-  background: none;
-  border: none;
-  color: #666;
-  cursor: pointer;
-  opacity: 0;
-  font-size: 0.8em;
-}
-
-.dm-item:hover .dm-close {
-  opacity: 1;
-}
-
-/* Friends Panel */
-.friends-panel {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  background: #0a0a0a;
-}
-
-.friends-header {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 16px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.friends-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-weight: 600;
-}
-
-.friends-tabs {
-  display: flex;
-  gap: 8px;
-}
-
-.friends-tab {
-  padding: 4px 12px;
-  background: none;
-  border: none;
-  border-radius: 4px;
-  color: #b9bbbe;
-  font-family: inherit;
-  font-size: 0.85em;
-  cursor: pointer;
-}
-
-.friends-tab:hover {
-  background: #2f3136;
-  color: #e0e0e0;
-}
-
-.friends-tab.active {
-  background: #2f3136;
-  color: #e0e0e0;
-}
-
-.friends-tab.action {
-  background: #3ba55d;
-  color: white;
-}
-
-.tab-count {
-  background: #ed4245;
-  color: white;
-  font-size: 0.7em;
-  padding: 1px 5px;
-  border-radius: 8px;
-  margin-left: 4px;
-}
-
-.friends-search {
-  padding: 16px;
-}
-
-.friends-search input {
-  width: 100%;
-  padding: 10px 12px;
-  background: #0f0f0f;
-  border: none;
-  border-radius: 4px;
-  color: #e0e0e0;
-  font-family: inherit;
-}
-
-.friends-count {
-  padding: 0 16px 8px;
-  font-size: 0.75em;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  color: #666;
-}
-
-.friends-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0 8px;
-}
-
-.friend-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px;
-  border-radius: 4px;
-  cursor: pointer;
-  border-top: 1px solid #2f3136;
-}
-
-.friend-item:hover {
-  background: #1a1a1a;
-}
-
-.friend-avatar {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-  position: relative;
-}
-
-.friend-status {
-  position: absolute;
-  bottom: -2px;
-  right: -2px;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  border: 3px solid #0a0a0a;
-}
-
-.friend-info {
-  flex: 1;
-}
-
-.friend-name {
-  font-weight: 500;
-}
-
-.friend-activity,
-.friend-tag {
-  font-size: 0.8em;
-  color: #666;
-}
-
-.friend-actions {
-  display: flex;
-  gap: 8px;
-}
-
-.friend-action {
-  width: 36px;
-  height: 36px;
-  border: none;
-  background: #2f3136;
-  border-radius: 50%;
-  cursor: pointer;
-  font-size: 1em;
-}
-
-.friend-action:hover {
-  background: #40444b;
-}
-
-.friend-action.accept {
-  background: #3ba55d;
-}
-
-.friend-action.decline {
-  background: #ed4245;
-}
-
-/* Add Friend Panel */
-.add-friend-panel {
-  padding: 32px;
-}
-
-.add-friend-panel h2 {
-  margin-bottom: 8px;
-}
-
-.add-friend-panel p {
-  color: #666;
-  margin-bottom: 24px;
-}
-
-.add-friend-input {
-  display: flex;
-  gap: 12px;
-}
-
-.friend-input {
-  flex: 1;
-  padding: 12px 16px;
-  background: #0f0f0f;
-  border: 1px solid #2f3136;
-  border-radius: 4px;
-  color: #e0e0e0;
-  font-family: inherit;
-}
-
-.send-request-btn {
-  padding: 12px 24px;
-  background: #5865f2;
-  border: none;
-  border-radius: 4px;
-  color: white;
-  font-family: inherit;
-  cursor: pointer;
-}
-
-.send-request-btn:hover {
-  background: #4752c4;
-}
-
-/* Activity Panel */
-.activity-panel {
-  width: 340px;
-  background: #0f0f0f;
-  border-left: 1px solid #2f3136;
-  padding: 16px;
-}
-
-.activity-panel h3 {
-  margin-bottom: 16px;
-}
-
-.activity-placeholder {
-  text-align: center;
-  padding: 40px 20px;
-  color: #666;
-}
-
-.activity-hint {
-  font-size: 0.85em;
-  margin-top: 8px;
-}
-
-/* ==================== USER SETTINGS MODAL ==================== */
-.user-settings-modal {
-  width: 90%;
-  max-width: 1000px;
-  height: 85vh;
-  background: #18191c;
-  border-radius: 8px;
-  display: flex;
-  overflow: hidden;
-}
-
-.settings-section-title {
-  font-size: 0.7em;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  color: #666;
-  padding: 8px 12px;
-  font-weight: 700;
-}
-
-.account-card {
-  background: #0f0f0f;
-  border-radius: 8px;
-  overflow: hidden;
-  margin-bottom: 24px;
-}
-
-.account-banner {
-  height: 100px;
-}
-
-.account-info {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 16px;
-  margin-top: -40px;
-}
-
-.account-avatar {
-  width: 80px;
-  height: 80px;
-  border-radius: 50%;
-  border: 6px solid #0f0f0f;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 2em;
-  font-weight: 700;
-}
-
-.account-details {
-  flex: 1;
-}
-
-.account-details h3 {
-  font-size: 1.3em;
-}
-
-.account-tag {
-  color: #666;
-}
-
-.edit-profile-btn {
-  padding: 8px 16px;
-  background: #5865f2;
-  border: none;
-  border-radius: 4px;
-  color: white;
-  font-family: inherit;
-  cursor: pointer;
-}
-
-.account-fields {
-  background: #0f0f0f;
-  border-radius: 8px;
-  padding: 16px;
-  margin-bottom: 24px;
-}
-
-.account-field {
-  padding: 12px 0;
-  border-bottom: 1px solid #2f3136;
-}
-
-.account-field:last-child {
-  border-bottom: none;
-}
-
-.account-field label {
-  display: block;
-  font-size: 0.7em;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  color: #666;
-  margin-bottom: 4px;
-}
-
-.field-value {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.field-edit {
-  background: none;
-  border: none;
-  color: #5865f2;
-  cursor: pointer;
-  font-family: inherit;
-}
-
-.two-factor {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 16px;
-  background: #0f0f0f;
-  border-radius: 8px;
-  margin-top: 12px;
-}
-
-.two-factor-info {
-  flex: 1;
-}
-
-.two-factor-info h5 {
-  margin-bottom: 4px;
-}
-
-.two-factor-info p {
-  font-size: 0.85em;
-  color: #666;
-}
-
-.settings-btn {
-  padding: 8px 16px;
-  background: #2f3136;
-  border: none;
-  border-radius: 4px;
-  color: #e0e0e0;
-  font-family: inherit;
-  cursor: pointer;
-}
-
-.settings-btn:hover {
-  background: #40444b;
-}
-
-.settings-btn.primary {
-  background: #5865f2;
-}
-
-.settings-btn.primary:hover {
-  background: #4752c4;
-}
-
-.danger-zone h4 {
-  color: #ed4245;
-}
-
-.danger-buttons {
-  display: flex;
-  gap: 12px;
-  margin-top: 12px;
-}
-
-.settings-btn.danger-outline {
-  background: transparent;
-  border: 1px solid #ed4245;
-  color: #ed4245;
-}
-
-.settings-btn.danger {
-  background: #ed4245;
-  color: white;
-}
-
-/* Theme options */
-.theme-options {
-  display: flex;
-  gap: 12px;
-}
-
-.theme-option {
-  cursor: pointer;
-}
-
-.theme-preview {
-  display: block;
-  padding: 12px 24px;
-  border-radius: 4px;
-  border: 2px solid transparent;
-}
-
-.theme-preview.dark {
-  background: #0a0a0a;
-  color: #e0e0e0;
-}
-
-.theme-preview.light {
-  background: #ffffff;
-  color: #000;
-}
-
-.theme-option input:checked + .theme-preview {
-  border-color: #5865f2;
-}
-
-.font-slider,
-.volume-slider {
-  width: 100%;
-  margin-top: 8px;
-}
-
-.toggle-setting {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 0;
-  border-bottom: 1px solid #2f3136;
-}
-
-.keybinds-header {
-  margin-bottom: 16px;
-}
-
-.keybind-list {
-  background: #0f0f0f;
-  border-radius: 8px;
-}
-
-.keybind-item {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 12px 16px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.keybind-item:last-child {
-  border-bottom: none;
-}
-
-.keybind-action {
-  flex: 1;
-}
-
-.keybind-key {
-  padding: 4px 12px;
-  background: #2f3136;
-  border-radius: 4px;
-  font-size: 0.85em;
-}
-
-.keybind-edit,
-.keybind-delete {
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-size: 1em;
-}
-
-/* ==================== CONTEXT MENU ==================== */
-.context-menu {
-  background: #18191c;
-  border-radius: 4px;
-  padding: 8px 0;
-  min-width: 188px;
-  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
-}
-
-.context-menu-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 12px;
-  cursor: pointer;
-  font-size: 0.9em;
-}
-
-.context-menu-item:hover {
-  background: #5865f2;
-  color: white;
-}
-
-.context-menu-item.danger:hover {
-  background: #ed4245;
-}
-
-.context-menu-icon {
-  width: 18px;
-  text-align: center;
-}
-
-.context-menu-label {
-  flex: 1;
-}
-
-.context-menu-arrow {
-  font-size: 0.7em;
-  color: #666;
-}
-
-.context-menu-divider {
-  height: 1px;
-  background: #2f3136;
-  margin: 4px 8px;
-}
-
-/* ==================== PINNED MESSAGES ==================== */
-.pinned-panel {
-  position: fixed;
-  top: 50px;
-  right: 50px;
-  width: 420px;
-  max-height: 80vh;
-  background: #18191c;
-  border-radius: 8px;
-  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
-  display: flex;
-  flex-direction: column;
-  z-index: 1000;
-}
-
-.pinned-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 16px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.pinned-icon {
-  font-size: 1.2em;
-}
-
-.pinned-title {
-  font-weight: 600;
-  flex: 1;
-}
-
-.pinned-channel {
-  font-size: 0.85em;
-  color: #666;
-}
-
-.pinned-close {
-  background: none;
-  border: none;
-  color: #666;
-  cursor: pointer;
-  font-size: 1.2em;
-}
-
-.pinned-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 8px;
-}
-
-.pinned-empty {
-  text-align: center;
-  padding: 40px;
-  color: #666;
-}
-
-.empty-icon {
-  font-size: 3em;
-  display: block;
-  margin-bottom: 12px;
-}
-
-.pinned-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.pinned-message {
-  background: #0f0f0f;
-  border-radius: 4px;
-  padding: 12px;
-}
-
-.pinned-message-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-
-.pinned-avatar {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.7em;
-  font-weight: 700;
-}
-
-.pinned-author-info {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.pinned-author {
-  font-weight: 600;
-  font-size: 0.9em;
-}
-
-.pinned-badge {
-  font-size: 0.7em;
-  padding: 2px 6px;
-  border-radius: 3px;
-}
-
-.pinned-badge.founder,
-.pinned-badge.foundation {
-  background: rgba(255, 0, 0, 0.2);
-  color: #ff0000;
-}
-
-.pinned-badge.labs {
-  background: rgba(255, 165, 0, 0.2);
-  color: #ffa500;
-}
-
-.pinned-time {
-  font-size: 0.75em;
-  color: #666;
-}
-
-.pinned-message-text {
-  font-size: 0.9em;
-  line-height: 1.4;
-  margin-bottom: 8px;
-}
-
-.pinned-message-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.pinned-by {
-  font-size: 0.75em;
-  color: #666;
-}
-
-.jump-to-btn {
-  padding: 4px 12px;
-  background: #5865f2;
-  border: none;
-  border-radius: 3px;
-  color: white;
-  font-size: 0.8em;
-  cursor: pointer;
-}
-
-.pinned-footer {
-  padding: 12px 16px;
-  border-top: 1px solid #2f3136;
-}
-
-.protip {
-  font-size: 0.8em;
-  color: #666;
-}
-
-/* ==================== FILE UPLOAD ==================== */
-.file-upload-modal {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 500px;
-  background: #18191c;
-  border-radius: 8px;
-  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
-  z-index: 1000;
-}
-
-.file-upload-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.upload-close {
-  background: none;
-  border: none;
-  color: #666;
-  cursor: pointer;
-  font-size: 1.2em;
-}
-
-.file-drop-zone {
-  margin: 16px;
-  padding: 40px;
-  border: 2px dashed #2f3136;
-  border-radius: 8px;
-  text-align: center;
-  cursor: pointer;
-  transition: border-color 0.2s, background 0.2s;
-}
-
-.file-drop-zone:hover,
-.file-drop-zone.dragging {
-  border-color: #5865f2;
-  background: rgba(88, 101, 242, 0.1);
-}
-
-.drop-zone-content {
-  color: #666;
-}
-
-.drop-icon {
-  font-size: 3em;
-  display: block;
-  margin-bottom: 12px;
-}
-
-.drop-hint {
-  font-size: 0.8em;
-  display: block;
-  margin-top: 8px;
-}
-
-.file-list {
-  max-height: 200px;
-  overflow-y: auto;
-  padding: 0 16px;
-}
-
-.file-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px;
-  background: #0f0f0f;
-  border-radius: 4px;
-  margin-bottom: 8px;
-}
-
-.file-preview {
-  width: 48px;
-  height: 48px;
-  object-fit: cover;
-  border-radius: 4px;
-}
-
-.file-icon {
-  width: 48px;
-  height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 2em;
-  background: #2f3136;
-  border-radius: 4px;
-}
-
-.file-info {
-  flex: 1;
-}
-
-.file-name {
-  font-size: 0.9em;
-  word-break: break-all;
-}
-
-.file-size {
-  font-size: 0.75em;
-  color: #666;
-}
-
-.file-remove {
-  background: none;
-  border: none;
-  color: #ed4245;
-  cursor: pointer;
-  font-size: 1em;
-}
-
-.upload-options {
-  padding: 0 16px;
-}
-
-.spoiler-option {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 0.9em;
-  cursor: pointer;
-}
-
-.upload-comment {
-  padding: 16px;
-}
-
-.upload-comment textarea {
-  width: 100%;
-  padding: 12px;
-  background: #0f0f0f;
-  border: none;
-  border-radius: 4px;
-  color: #e0e0e0;
-  font-family: inherit;
-  resize: none;
-}
-
-.upload-warning {
-  padding: 8px 16px;
-  color: #faa61a;
-  font-size: 0.85em;
-}
-
-.upload-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px;
-  border-top: 1px solid #2f3136;
-}
-
-.upload-summary {
-  font-size: 0.85em;
-  color: #666;
-}
-
-.upload-actions {
-  display: flex;
-  gap: 12px;
-}
-
-.upload-cancel {
-  padding: 8px 16px;
-  background: none;
-  border: none;
-  color: #e0e0e0;
-  cursor: pointer;
-  font-family: inherit;
-}
-
-.upload-submit {
-  padding: 8px 24px;
-  background: #5865f2;
-  border: none;
-  border-radius: 4px;
-  color: white;
-  cursor: pointer;
-  font-family: inherit;
-}
-
-.upload-submit:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* ==================== CREATE CHANNEL MODAL ==================== */
-.create-channel-modal {
-  width: 460px;
-  background: #18191c;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.modal-header {
-  padding: 16px;
-  border-bottom: 1px solid #2f3136;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.modal-header h2 {
-  flex: 1;
-}
-
-.category-name {
-  font-size: 0.85em;
-  color: #666;
-}
-
-.modal-close {
-  background: none;
-  border: none;
-  color: #666;
-  cursor: pointer;
-  font-size: 1.2em;
-}
-
-.modal-content {
-  padding: 16px;
-  max-height: 60vh;
-  overflow-y: auto;
-}
-
-.section-label {
-  display: block;
-  font-size: 0.75em;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  color: #b9bbbe;
-  font-weight: 700;
-  margin-bottom: 8px;
-}
-
-.channel-types {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-bottom: 20px;
-}
-
-.channel-type-option {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px;
-  background: #0f0f0f;
-  border-radius: 4px;
-  cursor: pointer;
-  border: 2px solid transparent;
-}
-
-.channel-type-option:hover {
-  background: #1a1a1a;
-}
-
-.channel-type-option.selected {
-  border-color: #5865f2;
-}
-
-.channel-type-option input {
-  display: none;
-}
-
-.type-icon {
-  font-size: 1.5em;
-  width: 32px;
-  text-align: center;
-}
-
-.type-info {
-  flex: 1;
-}
-
-.type-label {
-  display: block;
-  font-weight: 500;
-}
-
-.type-description {
-  font-size: 0.8em;
-  color: #666;
-}
-
-.channel-name-section {
-  margin-bottom: 20px;
-}
-
-.channel-name-input {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px;
-  background: #0f0f0f;
-  border-radius: 4px;
-}
-
-.channel-prefix {
-  font-size: 1.2em;
-  color: #666;
-}
-
-.channel-name-input input {
-  flex: 1;
-  background: none;
-  border: none;
-  color: #e0e0e0;
-  font-family: inherit;
-  font-size: 1em;
-}
-
-.privacy-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px;
-  background: #0f0f0f;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.privacy-info {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.privacy-icon {
-  font-size: 1.5em;
-}
-
-.privacy-label {
-  display: block;
-  font-weight: 500;
-}
-
-.privacy-description {
-  font-size: 0.8em;
-  color: #666;
-}
-
-.modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  padding: 16px;
-  background: #0f0f0f;
-}
-
-.modal-cancel {
-  padding: 10px 20px;
-  background: none;
-  border: none;
-  color: #e0e0e0;
-  cursor: pointer;
-  font-family: inherit;
-}
-
-.modal-submit {
-  padding: 10px 24px;
-  background: #5865f2;
-  border: none;
-  border-radius: 4px;
-  color: white;
-  cursor: pointer;
-  font-family: inherit;
-}
-
-.modal-submit:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* ==================== INVITE MODAL ==================== */
-.invite-modal {
-  width: 440px;
-  background: #18191c;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.invite-header {
-  padding: 16px;
-  border-bottom: 1px solid #2f3136;
-  position: relative;
-}
-
-.invite-header h2 {
-  font-size: 1.1em;
-}
-
-.invite-channel {
-  font-size: 0.85em;
-  color: #666;
-}
-
-.invite-content {
-  padding: 16px;
-}
-
-.invite-search {
-  margin-bottom: 16px;
-}
-
-.friend-search-input {
-  width: 100%;
-  padding: 10px 12px;
-  background: #0f0f0f;
-  border: none;
-  border-radius: 4px;
-  color: #e0e0e0;
-  font-family: inherit;
-}
-
-.invite-friends-list {
-  max-height: 200px;
-  overflow-y: auto;
-  margin-bottom: 16px;
-}
-
-.invite-friend-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 8px;
-  border-radius: 4px;
-}
-
-.invite-friend-item:hover {
-  background: #2f3136;
-}
-
-.invite-friend-avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-}
-
-.invite-friend-name {
-  flex: 1;
-}
-
-.invite-btn {
-  padding: 6px 16px;
-  background: #3ba55d;
-  border: none;
-  border-radius: 4px;
-  color: white;
-  cursor: pointer;
-  font-family: inherit;
-  font-size: 0.85em;
-}
-
-.invite-link-section {
-  padding-top: 12px;
-  border-top: 1px solid #2f3136;
-}
-
-.invite-link-section label {
-  display: block;
-  font-size: 0.7em;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  color: #666;
-  margin-bottom: 8px;
-}
-
-.invite-link-row {
-  display: flex;
-  gap: 8px;
-}
-
-.invite-link-input {
-  flex: 1;
-  padding: 10px 12px;
-  background: #0f0f0f;
-  border: none;
-  border-radius: 4px;
-  color: #e0e0e0;
-  font-family: inherit;
-}
-
-.copy-link-btn {
-  padding: 10px 20px;
-  background: #5865f2;
-  border: none;
-  border-radius: 4px;
-  color: white;
-  cursor: pointer;
-  font-family: inherit;
-}
-
-.copy-link-btn.copied {
-  background: #3ba55d;
-}
-
-.link-expires {
-  font-size: 0.8em;
-  color: #666;
-  margin-top: 8px;
-}
-
-.edit-link-btn {
-  background: none;
-  border: none;
-  color: #5865f2;
-  cursor: pointer;
-  font-family: inherit;
-}
-
-.invite-advanced {
-  margin-top: 16px;
-  padding-top: 16px;
-  border-top: 1px solid #2f3136;
-}
-
-.advanced-option {
-  margin-bottom: 12px;
-}
-
-.advanced-option label {
-  display: block;
-  font-size: 0.7em;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  color: #666;
-  margin-bottom: 4px;
-}
-
-.advanced-select {
-  width: 100%;
-  padding: 10px 12px;
-  background: #0f0f0f;
-  border: none;
-  border-radius: 4px;
-  color: #e0e0e0;
-  font-family: inherit;
-}
-
-.temporary-toggle {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 12px 0;
-  font-size: 0.9em;
-}
-
-.generate-new-btn {
-  width: 100%;
-  padding: 10px;
-  background: #2f3136;
-  border: none;
-  border-radius: 4px;
-  color: #e0e0e0;
-  cursor: pointer;
-  font-family: inherit;
-}
-
-.invite-footer {
-  padding: 12px 16px;
-  background: #0f0f0f;
-}
-
-.invite-tip {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 0.85em;
-  color: #666;
-}
-
-/* ==================== NOTIFICATIONS PANEL ==================== */
-.notifications-panel {
-  position: fixed;
-  top: 0;
-  right: 0;
-  width: 480px;
-  height: 100vh;
-  background: #18191c;
-  border-left: 1px solid #2f3136;
-  display: flex;
-  flex-direction: column;
-  z-index: 100;
-}
-
-.notifications-header {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 16px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.notifications-header h3 {
-  flex: 1;
-}
-
-.notifications-actions {
-  display: flex;
-  gap: 8px;
-}
-
-.mark-read-btn,
-.clear-btn {
-  padding: 6px 12px;
-  background: #2f3136;
-  border: none;
-  border-radius: 4px;
-  color: #b9bbbe;
-  cursor: pointer;
-  font-family: inherit;
-  font-size: 0.8em;
-}
-
-.notifications-close {
-  background: none;
-  border: none;
-  color: #666;
-  cursor: pointer;
-  font-size: 1.2em;
-}
-
-.notifications-filters {
-  display: flex;
-  gap: 4px;
-  padding: 12px 16px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.notifications-list {
-  flex: 1;
-  overflow-y: auto;
-}
-
-.notifications-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: #666;
-}
-
-.notification-item {
-  display: flex;
-  gap: 12px;
-  padding: 16px;
-  cursor: pointer;
-  border-bottom: 1px solid #2f3136;
-  position: relative;
-}
-
-.notification-item:hover {
-  background: #1a1a1a;
-}
-
-.notification-item.unread {
-  background: rgba(88, 101, 242, 0.1);
-}
-
-.notification-icon-container {
-  position: relative;
-}
-
-.notification-avatar,
-.notification-server-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-}
-
-.notification-type-badge {
-  position: absolute;
-  bottom: -4px;
-  right: -4px;
-  width: 20px;
-  height: 20px;
-  background: #18191c;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.7em;
-}
-
-.notification-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.notification-header-row {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-bottom: 4px;
-  font-size: 0.85em;
-}
-
-.notification-server {
-  font-weight: 600;
-}
-
-.notification-separator {
-  color: #666;
-}
-
-.notification-channel {
-  color: #666;
-}
-
-.notification-author {
-  font-weight: 600;
-}
-
-.notification-message {
-  font-size: 0.9em;
-  color: #b9bbbe;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.notification-time {
-  font-size: 0.75em;
-  color: #666;
-  margin-top: 4px;
-}
-
-.unread-dot {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  width: 8px;
-  height: 8px;
-  background: #5865f2;
-  border-radius: 50%;
-}
-
-/* ==================== MARKDOWN STYLES ==================== */
-.code-block {
-  background: #0f0f0f;
-  border-radius: 4px;
-  padding: 12px;
-  margin: 8px 0;
-  overflow-x: auto;
-  font-family: 'Roboto Mono', monospace;
-  font-size: 0.85em;
-}
-
-.inline-code {
-  background: #0f0f0f;
-  padding: 2px 6px;
-  border-radius: 3px;
-  font-family: 'Roboto Mono', monospace;
-  font-size: 0.9em;
-}
-
-.spoiler {
-  background: #1a1a1a;
-  color: transparent;
-  border-radius: 3px;
-  padding: 0 4px;
-  cursor: pointer;
-  transition: color 0.2s;
-}
-
-.spoiler.revealed,
-.spoiler:hover {
-  color: inherit;
-}
-
-.mention {
-  background: rgba(88, 101, 242, 0.3);
-  color: #5865f2;
-  padding: 0 4px;
-  border-radius: 3px;
-  cursor: pointer;
-}
-
-.mention:hover {
-  background: #5865f2;
-  color: white;
-}
-
-.channel-mention {
-  background: rgba(88, 101, 242, 0.3);
-  color: #5865f2;
-  padding: 0 4px;
-  border-radius: 3px;
-  cursor: pointer;
-}
-
-.role-mention {
-  padding: 0 4px;
-  border-radius: 3px;
-}
-
-.message-link {
-  color: #5865f2;
-  text-decoration: none;
-}
-
-.message-link:hover {
-  text-decoration: underline;
-}
-
-.block-quote {
-  border-left: 4px solid #4f545c;
-  padding-left: 12px;
-  margin: 8px 0;
-  color: #b9bbbe;
-}
-
-/* ==================== REPLY PREVIEW ==================== */
-.reply-preview {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  background: #0f0f0f;
-  border-radius: 4px 4px 0 0;
-}
-
-.reply-line {
-  width: 4px;
-  height: 20px;
-  background: #5865f2;
-  border-radius: 2px;
-}
-
-.reply-content {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 0.85em;
-  min-width: 0;
-}
-
-.replying-to {
-  color: #666;
-}
-
-.reply-author {
-  font-weight: 600;
-}
-
-.reply-text {
-  color: #b9bbbe;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.reply-cancel {
-  background: none;
-  border: none;
-  color: #666;
-  cursor: pointer;
-}
-
-.message-reply-context {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-bottom: 4px;
-  padding-left: 48px;
-  font-size: 0.85em;
-}
-
-.reply-connector {
-  display: flex;
-  align-items: flex-end;
-  height: 16px;
-  width: 32px;
-}
-
-.reply-line-vertical {
-  width: 2px;
-  height: 100%;
-  background: #4f545c;
-  margin-left: 16px;
-}
-
-.reply-line-horizontal {
-  width: 16px;
-  height: 2px;
-  background: #4f545c;
-}
-
-.reply-avatar-mini {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.6em;
-  font-weight: 700;
-}
-
-.reply-author-mini {
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.reply-author-mini:hover {
-  text-decoration: underline;
-}
-
-.reply-text-mini {
-  color: #b9bbbe;
-  cursor: pointer;
-}
-
-.reply-text-mini:hover {
-  color: #e0e0e0;
-}
-
-/* ==================== VIDEO CALL ==================== */
-.video-call-container {
-  position: fixed;
-  inset: 0;
-  background: #0a0a0a;
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-}
-
-.video-call-container.fullscreen {
-  z-index: 10000;
-}
-
-.video-main {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  padding: 16px;
-  gap: 16px;
-  overflow: hidden;
-}
-
-.video-focused {
-  flex: 1;
-  background: #18191c;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  overflow: hidden;
-}
-
-.screen-share-view {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.screen-content {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #0f0f0f;
-}
-
-.screen-placeholder {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  color: #666;
-}
-
-.screen-icon {
-  font-size: 4em;
-}
-
-.streamer-pip {
-  position: absolute;
-  bottom: 16px;
-  right: 16px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  background: rgba(0,0,0,0.7);
-  border-radius: 4px;
-}
-
-.pip-avatar {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.7em;
-  font-weight: 700;
-}
-
-.pip-name {
-  font-size: 0.85em;
-}
-
-.video-feed,
-.video-audio-only {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 16px;
-}
-
-.video-placeholder {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.video-avatar-large {
-  width: 150px;
-  height: 150px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 4em;
-  font-weight: 700;
-}
-
-.video-name-overlay {
-  position: absolute;
-  bottom: 16px;
-  left: 16px;
-  padding: 8px 16px;
-  background: rgba(0,0,0,0.7);
-  border-radius: 4px;
-}
-
-.audio-avatar {
-  width: 120px;
-  height: 120px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 3em;
-  font-weight: 700;
-  transition: box-shadow 0.2s;
-}
-
-.audio-avatar.speaking {
-  box-shadow: 0 0 0 4px #3ba55d;
-}
-
-.audio-name {
-  font-size: 1.2em;
-  font-weight: 600;
-}
-
-.audio-muted {
-  position: absolute;
-  bottom: 16px;
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 4px 8px;
-  background: rgba(0,0,0,0.7);
-  border-radius: 4px;
-}
-
-.video-grid {
-  display: flex;
-  gap: 8px;
-  justify-content: center;
-  flex-wrap: wrap;
-  max-height: 200px;
-}
-
-.video-tile {
-  width: 180px;
-  height: 120px;
-  background: #18191c;
-  border-radius: 8px;
-  overflow: hidden;
-  cursor: pointer;
-  position: relative;
-  transition: transform 0.2s;
-}
-
-.video-tile:hover {
-  transform: scale(1.05);
-}
-
-.video-tile.speaking {
-  box-shadow: 0 0 0 2px #3ba55d;
-}
-
-.tile-video,
-.tile-audio {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.tile-avatar {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-}
-
-.tile-info {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 8px;
-  background: linear-gradient(transparent, rgba(0,0,0,0.7));
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.tile-name {
-  font-size: 0.8em;
-}
-
-.tile-icons {
-  display: flex;
-  gap: 4px;
-  font-size: 0.8em;
-}
-
-.video-controls {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 24px;
-  background: #18191c;
-}
-
-.controls-left,
-.controls-right {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.controls-center {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.call-info {
-  display: flex;
-  flex-direction: column;
-}
-
-.call-channel {
-  font-weight: 600;
-  color: #3ba55d;
-}
-
-.call-duration {
-  font-size: 0.8em;
-  color: #666;
-}
-
-.control-btn {
-  width: 48px;
-  height: 48px;
-  border: none;
-  background: #2f3136;
-  border-radius: 50%;
-  cursor: pointer;
-  font-size: 1.2em;
-  transition: background 0.2s;
-}
-
-.control-btn:hover {
-  background: #40444b;
-}
-
-.control-btn.active {
-  background: #3ba55d;
-}
-
-.control-btn.active.sharing {
-  background: #5865f2;
-}
-
-.control-btn.leave {
-  background: #ed4245;
-}
-
-.control-btn.leave:hover {
-  background: #c53030;
-}
-
-/* ==================== ACTIVITY STATUS ==================== */
-.activity-status {
-  background: #0f0f0f;
-  border-radius: 8px;
-  padding: 12px;
-}
-
-.activity-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 12px;
-  font-size: 0.75em;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  color: #b9bbbe;
-}
-
-.activity-type-icon {
-  font-size: 1.2em;
-}
-
-.activity-content {
-  display: flex;
-  gap: 12px;
-}
-
-.activity-image {
-  position: relative;
-}
-
-.activity-image img {
-  width: 60px;
-  height: 60px;
-  border-radius: 8px;
-}
-
-.activity-image-small {
-  position: absolute;
-  bottom: -4px;
-  right: -4px;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  border: 3px solid #18191c;
-}
-
-.activity-details {
-  flex: 1;
-}
-
-.activity-name {
-  font-weight: 600;
-  margin-bottom: 2px;
-}
-
-.activity-detail,
-.activity-state,
-.activity-time {
-  font-size: 0.85em;
-  color: #b9bbbe;
-}
-
-.activity-buttons {
-  display: flex;
-  gap: 8px;
-  margin-top: 12px;
-}
-
-.activity-btn {
-  flex: 1;
-  padding: 8px;
-  background: #2f3136;
-  border: none;
-  border-radius: 4px;
-  color: #e0e0e0;
-  cursor: pointer;
-  font-family: inherit;
-  font-size: 0.85em;
-}
-
-.activity-btn:hover {
-  background: #40444b;
-}
-
-.activity-status-small {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 0.8em;
-  color: #b9bbbe;
-}
-
-.activity-status-mini {
-  font-size: 0.75em;
-  color: #666;
-}
-
-/* Rich Presence */
-.rich-presence,
-.spotify-activity {
-  background: #0f0f0f;
-  border-radius: 8px;
-  padding: 12px;
-  margin-top: 8px;
-}
-
-.rp-header,
-.spotify-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 12px;
-  font-size: 0.75em;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  color: #b9bbbe;
-}
-
-.spotify-header {
-  color: #1db954;
-}
-
-.rp-content,
-.spotify-content {
-  display: flex;
-  gap: 12px;
-}
-
-.rp-image,
-.spotify-album {
-  width: 60px;
-  height: 60px;
-  border-radius: 8px;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #2f3136;
-}
-
-.rp-image img,
-.spotify-album img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.rp-placeholder,
-.spotify-placeholder {
-  font-size: 2em;
-}
-
-.rp-info,
-.spotify-info {
-  flex: 1;
-}
-
-.rp-name,
-.spotify-song {
-  font-weight: 600;
-  margin-bottom: 2px;
-}
-
-.rp-details,
-.rp-state,
-.rp-elapsed,
-.spotify-artist,
-.spotify-album-name {
-  font-size: 0.85em;
-  color: #b9bbbe;
-}
-
-.spotify-progress {
-  margin-top: 12px;
-}
-
-.progress-bar {
-  height: 4px;
-  background: #4f545c;
-  border-radius: 2px;
-  overflow: hidden;
-}
-
-.progress-fill {
-  height: 100%;
-  background: #1db954;
-  transition: width 1s linear;
-}
-
-.progress-times {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 4px;
-  font-size: 0.75em;
-  color: #666;
-}
-
-/* ==================== SERVER BANNER ==================== */
-.server-banner {
-  background: #0f0f0f;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.banner-image {
-  height: 140px;
-  position: relative;
-}
-
-.banner-overlay {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(transparent 40%, rgba(0,0,0,0.8));
-  display: flex;
-  align-items: flex-end;
-  padding: 16px;
-}
-
-.banner-title {
-  font-size: 1.4em;
-  margin-bottom: 4px;
-}
-
-.banner-description {
-  font-size: 0.85em;
-  color: #b9bbbe;
-}
-
-.server-info-bar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 16px;
-  background: #18191c;
-}
-
-.server-stats {
-  display: flex;
-  gap: 16px;
-}
-
-.stat {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.stat-indicator {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-}
-
-.stat-indicator.online {
-  background: #3ba55d;
-}
-
-.stat-value {
-  font-weight: 600;
-}
-
-.stat-label {
-  color: #666;
-  font-size: 0.85em;
-}
-
-.boost-status {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 12px;
-  background: linear-gradient(135deg, rgba(255,115,250,0.2), rgba(85,62,223,0.2));
-  border-radius: 4px;
-}
-
-.boost-icon {
-  color: #ff73fa;
-}
-
-.boost-level {
-  font-weight: 600;
-  color: #ff73fa;
-}
-
-.boost-count {
-  color: #b9bbbe;
-  font-size: 0.85em;
-}
-
-.boost-perks {
-  padding: 16px;
-  border-top: 1px solid #2f3136;
-}
-
-.perks-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-weight: 600;
-  margin-bottom: 12px;
-}
-
-.perks-list {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 8px;
-}
-
-.perk-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 0.85em;
-}
-
-.perk-check {
-  color: #3ba55d;
-}
-
-.vanity-url {
-  display: flex;
-  justify-content: space-between;
-  padding: 12px 16px;
-  border-top: 1px solid #2f3136;
-}
-
-.vanity-label {
-  color: #666;
-}
-
-.vanity-link {
-  color: #5865f2;
-}
-
-.server-banner-mini {
-  position: relative;
-  height: 60px;
-  overflow: hidden;
-}
-
-.banner-gradient {
-  position: absolute;
-  inset: 0;
-}
-
-.server-name-mini {
-  position: absolute;
-  bottom: 8px;
-  left: 12px;
-  font-weight: 600;
-  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
-}
-
-.boost-progress {
-  padding: 12px;
-  background: #0f0f0f;
-  border-radius: 8px;
-}
-
-.boost-header {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 8px;
-  font-size: 0.85em;
-}
-
-.current-level {
-  font-weight: 600;
-}
-
-.next-level {
-  color: #666;
-}
-
-.boost-bar {
-  height: 8px;
-  background: #2f3136;
-  border-radius: 4px;
-  overflow: hidden;
-  margin-bottom: 8px;
-}
-
-.boost-fill {
-  height: 100%;
-  background: linear-gradient(90deg, #ff73fa, #553edf);
-  transition: width 0.3s;
-}
-
-.boost-progress .boost-count {
-  font-size: 0.8em;
-  color: #666;
-}
-
-.boost-progress.max-level .boost-bar {
-  background: linear-gradient(90deg, #ff73fa, #553edf);
-}
-
-.boost-progress.max-level .boost-label {
-  color: #ff73fa;
-  font-weight: 600;
-}
-
-/* ==================== CATEGORY ADD BUTTON ==================== */
-.channel-category {
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.category-add-btn {
-  width: 18px;
-  height: 18px;
-  border: none;
-  background: transparent;
-  color: #b9bbbe;
-  font-size: 1.2em;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  transition: background 0.2s, color 0.2s;
-  padding: 0;
-  line-height: 1;
-}
-
-.category-add-btn:hover {
-  background: #40444b;
-  color: #fff;
-}
-
-/* ==================== GIF PICKER ==================== */
-.gif-picker {
-  position: absolute;
-  bottom: 60px;
-  right: 80px;
-  width: 420px;
-  height: 450px;
-  background: #18191c;
-  border-radius: 8px;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  z-index: 100;
-}
-
-.gif-picker-header {
-  padding: 12px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.gif-search {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  background: #0a0a0a;
-  border-radius: 4px;
-  padding: 8px 12px;
-}
-
-.gif-search .search-icon {
-  color: #666;
-}
-
-.gif-search input {
-  flex: 1;
-  background: transparent;
-  border: none;
-  color: #e0e0e0;
-  font-size: 0.95em;
-  outline: none;
-}
-
-.gif-search .clear-search {
-  background: none;
-  border: none;
-  color: #666;
-  cursor: pointer;
-  padding: 0;
-}
-
-.gif-categories {
-  display: flex;
-  gap: 4px;
-  padding: 8px 12px;
-  border-bottom: 1px solid #2f3136;
-  overflow-x: auto;
-}
-
-.gif-category-btn {
-  padding: 6px 12px;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  color: #b9bbbe;
-  cursor: pointer;
-  font-size: 1.1em;
-  transition: background 0.2s;
-}
-
-.gif-category-btn:hover {
-  background: #2f3136;
-}
-
-.gif-category-btn.active {
-  background: #5865f2;
-  color: #fff;
-}
-
-.gif-grid {
-  flex: 1;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 6px;
-  padding: 12px;
-  overflow-y: auto;
-}
-
-.gif-item {
-  aspect-ratio: 1;
-  background: #0f0f0f;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-  transition: transform 0.2s;
-}
-
-.gif-item:hover {
-  transform: scale(1.05);
-}
-
-.gif-preview {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 2.5em;
-}
-
-.gif-overlay {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  opacity: 0;
-  transition: opacity 0.2s;
-}
-
-.gif-item:hover .gif-overlay {
-  opacity: 1;
-}
-
-.gif-favorite {
-  background: rgba(0,0,0,0.6);
-  border: none;
-  border-radius: 4px;
-  padding: 4px;
-  cursor: pointer;
-  font-size: 0.9em;
-}
-
-.gif-favorite.active {
-  color: #faa61a;
-}
-
-.gif-empty {
-  grid-column: 1 / -1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  color: #666;
-  font-size: 2em;
-}
-
-.gif-footer {
-  padding: 8px 12px;
-  border-top: 1px solid #2f3136;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 0.75em;
-}
-
-.gif-powered {
-  color: #666;
-}
-
-.gif-tenor {
-  color: #fff;
-  font-weight: 700;
-}
-
-/* ==================== STICKER PICKER ==================== */
-.sticker-picker {
-  position: absolute;
-  bottom: 60px;
-  right: 80px;
-  width: 420px;
-  height: 450px;
-  background: #18191c;
-  border-radius: 8px;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  z-index: 100;
-}
-
-.sticker-picker-header {
-  padding: 12px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.sticker-tabs {
-  display: flex;
-  padding: 0 12px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.sticker-tab {
-  padding: 12px 16px;
-  background: transparent;
-  border: none;
-  color: #b9bbbe;
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
-  transition: all 0.2s;
-}
-
-.sticker-tab:hover {
-  color: #fff;
-}
-
-.sticker-tab.active {
-  color: #fff;
-  border-bottom-color: #5865f2;
-}
-
-.sticker-packs {
-  display: flex;
-  gap: 4px;
-  padding: 8px 12px;
-  border-bottom: 1px solid #2f3136;
-  overflow-x: auto;
-}
-
-.sticker-pack-btn {
-  width: 40px;
-  height: 40px;
-  background: #0f0f0f;
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  font-size: 1.2em;
-  transition: background 0.2s;
-}
-
-.sticker-pack-btn:hover {
-  background: #2f3136;
-}
-
-.sticker-pack-btn.active {
-  background: #5865f2;
-}
-
-.sticker-grid {
-  flex: 1;
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 8px;
-  padding: 12px;
-  overflow-y: auto;
-}
-
-.sticker-item {
-  aspect-ratio: 1;
-  background: #0f0f0f;
-  border-radius: 8px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 2.5em;
-  transition: transform 0.2s, background 0.2s;
-}
-
-.sticker-item:hover {
-  transform: scale(1.1);
-  background: #2f3136;
-}
-
-.sticker-locked {
-  opacity: 0.5;
-  position: relative;
-}
-
-.sticker-locked::after {
-  content: '🔒';
-  position: absolute;
-  bottom: 4px;
-  right: 4px;
-  font-size: 0.4em;
-}
-
-/* ==================== SOUNDBOARD ==================== */
-.soundboard {
-  position: absolute;
-  bottom: 60px;
-  left: 240px;
-  width: 380px;
-  background: #18191c;
-  border-radius: 8px;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
-  overflow: hidden;
-  z-index: 100;
-}
-
-.soundboard-header {
-  padding: 12px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.soundboard-search {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  background: #0a0a0a;
-  border-radius: 4px;
-  padding: 8px 12px;
-}
-
-.soundboard-search input {
-  flex: 1;
-  background: transparent;
-  border: none;
-  color: #e0e0e0;
-  outline: none;
-}
-
-.soundboard-categories {
-  display: flex;
-  gap: 4px;
-  padding: 8px 12px;
-  border-bottom: 1px solid #2f3136;
-  overflow-x: auto;
-}
-
-.soundboard-cat-btn {
-  padding: 6px 12px;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  color: #b9bbbe;
-  cursor: pointer;
-  font-size: 0.85em;
-  white-space: nowrap;
-  transition: background 0.2s;
-}
-
-.soundboard-cat-btn:hover {
-  background: #2f3136;
-}
-
-.soundboard-cat-btn.active {
-  background: #5865f2;
-  color: #fff;
-}
-
-.soundboard-volume {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.soundboard-volume input[type="range"] {
-  flex: 1;
-  accent-color: #5865f2;
-}
-
-.sound-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 8px;
-  padding: 12px;
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.sound-btn {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-  padding: 12px;
-  background: #0f0f0f;
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: transform 0.2s, background 0.2s;
-}
-
-.sound-btn:hover {
-  background: #2f3136;
-  transform: scale(1.05);
-}
-
-.sound-btn.playing {
-  background: #5865f2;
-  animation: pulse 0.5s infinite;
-}
-
-@keyframes pulse {
-  0%, 100% { transform: scale(1); }
-  50% { transform: scale(1.05); }
-}
-
-.sound-emoji {
-  font-size: 1.5em;
-}
-
-.sound-name {
-  font-size: 0.75em;
-  color: #b9bbbe;
-}
-
-.sound-duration {
-  font-size: 0.65em;
-  color: #666;
-}
-
-.sound-favorite {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.2s;
-}
-
-.sound-btn:hover .sound-favorite {
-  opacity: 1;
-}
-
-/* ==================== POLL CREATOR ==================== */
-.poll-creator {
-  background: #18191c;
-  border-radius: 8px;
-  padding: 16px;
-  margin: 8px 0;
-}
-
-.poll-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 16px;
-}
-
-.poll-icon {
-  font-size: 1.5em;
-}
-
-.poll-title {
-  font-weight: 600;
-}
-
-.poll-question-input {
-  width: 100%;
-  padding: 12px;
-  background: #0a0a0a;
-  border: 1px solid #2f3136;
-  border-radius: 4px;
-  color: #e0e0e0;
-  font-size: 1em;
-  margin-bottom: 12px;
-}
-
-.poll-question-input:focus {
-  outline: none;
-  border-color: #5865f2;
-}
-
-.poll-options {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-bottom: 12px;
-}
-
-.poll-option-input {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.poll-option-input input {
-  flex: 1;
-  padding: 10px 12px;
-  background: #0a0a0a;
-  border: 1px solid #2f3136;
-  border-radius: 4px;
-  color: #e0e0e0;
-}
-
-.poll-option-input input:focus {
-  outline: none;
-  border-color: #5865f2;
-}
-
-.poll-option-remove {
-  width: 32px;
-  height: 32px;
-  background: transparent;
-  border: none;
-  color: #666;
-  cursor: pointer;
-  border-radius: 4px;
-}
-
-.poll-option-remove:hover {
-  background: #2f3136;
-  color: #ed4245;
-}
-
-.poll-add-option {
-  padding: 10px;
-  background: transparent;
-  border: 1px dashed #2f3136;
-  border-radius: 4px;
-  color: #b9bbbe;
-  cursor: pointer;
-  width: 100%;
-  margin-bottom: 16px;
-}
-
-.poll-add-option:hover {
-  border-color: #5865f2;
-  color: #5865f2;
-}
-
-.poll-settings {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  margin-bottom: 16px;
-  padding: 12px;
-  background: #0f0f0f;
-  border-radius: 4px;
-}
-
-.poll-setting {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.poll-setting label {
-  color: #b9bbbe;
-  font-size: 0.9em;
-}
-
-.poll-duration select {
-  padding: 6px 10px;
-  background: #2f3136;
-  border: none;
-  border-radius: 4px;
-  color: #e0e0e0;
-}
-
-.poll-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-}
-
-.poll-cancel,
-.poll-create {
-  padding: 10px 20px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-weight: 500;
-}
-
-.poll-cancel {
-  background: transparent;
-  color: #b9bbbe;
-}
-
-.poll-cancel:hover {
-  color: #fff;
-}
-
-.poll-create {
-  background: #5865f2;
-  color: #fff;
-}
-
-.poll-create:hover {
-  background: #4752c4;
-}
-
-/* ==================== QUICK SWITCHER ==================== */
-.quick-switcher-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0,0,0,0.7);
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  padding-top: 100px;
-  z-index: 1000;
-}
-
-.quick-switcher {
-  width: 560px;
-  background: #18191c;
-  border-radius: 8px;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
-  overflow: hidden;
-}
-
-.quick-switcher-input {
-  width: 100%;
-  padding: 20px;
-  background: transparent;
-  border: none;
-  border-bottom: 1px solid #2f3136;
-  color: #e0e0e0;
-  font-size: 1.2em;
-  outline: none;
-}
-
-.quick-switcher-filters {
-  display: flex;
-  gap: 4px;
-  padding: 8px 12px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.filter-btn {
-  padding: 4px 10px;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  color: #b9bbbe;
-  font-size: 0.85em;
-  cursor: pointer;
-}
-
-.filter-btn:hover {
-  background: #2f3136;
-}
-
-.filter-btn.active {
-  background: #5865f2;
-  color: #fff;
-}
-
-.quick-switcher-results {
-  max-height: 400px;
-  overflow-y: auto;
-}
-
-.qs-section-label {
-  padding: 8px 16px;
-  font-size: 0.75em;
-  font-weight: 700;
-  text-transform: uppercase;
-  color: #666;
-}
-
-.qs-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 16px;
-  cursor: pointer;
-  transition: background 0.2s;
-}
-
-.qs-item:hover,
-.qs-item.selected {
-  background: #2f3136;
-}
-
-.qs-item-icon {
-  width: 36px;
-  height: 36px;
-  background: #0f0f0f;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-}
-
-.qs-item-icon.channel {
-  border-radius: 4px;
-  background: transparent;
-  font-size: 1.2em;
-}
-
-.qs-item-info {
-  flex: 1;
-}
-
-.qs-item-name {
-  font-weight: 500;
-}
-
-.qs-item-detail {
-  font-size: 0.8em;
-  color: #666;
-}
-
-.qs-item-hint {
-  font-size: 0.75em;
-  color: #666;
-}
-
-.quick-switcher-footer {
-  padding: 8px 16px;
-  border-top: 1px solid #2f3136;
-  display: flex;
-  gap: 16px;
-  font-size: 0.75em;
-  color: #666;
-}
-
-.qs-hint {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.qs-key {
-  padding: 2px 6px;
-  background: #0f0f0f;
-  border-radius: 3px;
-  font-family: monospace;
-}
-
-/* ==================== NITRO PANEL ==================== */
-.nitro-panel {
-  background: linear-gradient(135deg, #5865f2 0%, #eb459e 100%);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.nitro-header {
-  padding: 32px;
-  text-align: center;
-}
-
-.nitro-logo {
-  font-size: 3em;
-  margin-bottom: 16px;
-}
-
-.nitro-title {
-  font-size: 1.8em;
-  font-weight: 700;
-  margin-bottom: 8px;
-}
-
-.nitro-subtitle {
-  color: rgba(255,255,255,0.8);
-}
-
-.nitro-plans {
-  display: flex;
-  gap: 16px;
-  padding: 0 32px 32px;
-}
-
-.nitro-plan {
-  flex: 1;
-  background: rgba(0,0,0,0.3);
-  border-radius: 8px;
-  padding: 24px;
-  text-align: center;
-}
-
-.nitro-plan.featured {
-  background: rgba(255,255,255,0.1);
-  border: 2px solid rgba(255,255,255,0.3);
-}
-
-.plan-name {
-  font-size: 1.2em;
-  font-weight: 700;
-  margin-bottom: 8px;
-}
-
-.plan-price {
-  font-size: 2em;
-  font-weight: 700;
-  margin-bottom: 4px;
-}
-
-.plan-period {
-  font-size: 0.85em;
-  color: rgba(255,255,255,0.7);
-  margin-bottom: 16px;
-}
-
-.plan-features {
-  text-align: left;
-  margin-bottom: 24px;
-}
-
-.plan-feature {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-  font-size: 0.9em;
-}
-
-.plan-feature .check {
-  color: #3ba55d;
-}
-
-.plan-btn {
-  width: 100%;
-  padding: 12px;
-  background: #fff;
-  border: none;
-  border-radius: 4px;
-  color: #5865f2;
-  font-weight: 600;
-  cursor: pointer;
-  transition: transform 0.2s;
-}
-
-.plan-btn:hover {
-  transform: scale(1.02);
-}
-
-.nitro-perks {
-  background: #18191c;
-  padding: 32px;
-}
-
-.perks-title {
-  font-size: 1.2em;
-  font-weight: 600;
-  margin-bottom: 16px;
-}
-
-.perk-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 16px;
-}
-
-.perk-item {
-  display: flex;
-  gap: 12px;
-  padding: 12px;
-  background: #0f0f0f;
-  border-radius: 8px;
-}
-
-.perk-icon {
-  font-size: 1.5em;
-}
-
-.perk-text h4 {
-  margin-bottom: 4px;
-}
-
-.perk-text p {
-  font-size: 0.85em;
-  color: #b9bbbe;
-}
-
-/* ==================== SERVER DISCOVERY ==================== */
-.server-discovery {
-  flex: 1;
-  background: #18191c;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.discovery-header {
-  padding: 24px;
-  background: linear-gradient(135deg, #5865f2, #eb459e);
-}
-
-.discovery-title {
-  font-size: 1.8em;
-  font-weight: 700;
-  margin-bottom: 8px;
-}
-
-.discovery-subtitle {
-  color: rgba(255,255,255,0.8);
-  margin-bottom: 16px;
-}
-
-.discovery-search {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  background: rgba(0,0,0,0.3);
-  border-radius: 8px;
-  padding: 12px 16px;
-}
-
-.discovery-search input {
-  flex: 1;
-  background: transparent;
-  border: none;
-  color: #fff;
-  font-size: 1em;
-  outline: none;
-}
-
-.discovery-categories {
-  display: flex;
-  gap: 8px;
-  padding: 16px 24px;
-  border-bottom: 1px solid #2f3136;
-  overflow-x: auto;
-}
-
-.discovery-cat-btn {
-  padding: 8px 16px;
-  background: #2f3136;
-  border: none;
-  border-radius: 20px;
-  color: #b9bbbe;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: all 0.2s;
-}
-
-.discovery-cat-btn:hover {
-  background: #40444b;
-}
-
-.discovery-cat-btn.active {
-  background: #5865f2;
-  color: #fff;
-}
-
-.discovery-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 24px;
-}
-
-.discovery-section {
-  margin-bottom: 32px;
-}
-
-.discovery-section-title {
-  font-size: 1.2em;
-  font-weight: 600;
-  margin-bottom: 16px;
-}
-
-.discovery-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 16px;
-}
-
-.discovery-server-card {
-  background: #0f0f0f;
-  border-radius: 8px;
-  overflow: hidden;
-  cursor: pointer;
-  transition: transform 0.2s;
-}
-
-.discovery-server-card:hover {
-  transform: translateY(-4px);
-}
-
-.server-card-banner {
-  height: 100px;
-  background: linear-gradient(135deg, #5865f2, #eb459e);
-  position: relative;
-}
-
-.server-card-icon {
-  position: absolute;
-  bottom: -24px;
-  left: 16px;
-  width: 48px;
-  height: 48px;
-  background: #18191c;
-  border-radius: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.5em;
-  border: 4px solid #0f0f0f;
-}
-
-.server-card-body {
-  padding: 32px 16px 16px;
-}
-
-.server-card-name {
-  font-weight: 600;
-  margin-bottom: 8px;
-}
-
-.server-card-description {
-  font-size: 0.85em;
-  color: #b9bbbe;
-  margin-bottom: 12px;
-  line-height: 1.4;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.server-card-meta {
-  display: flex;
-  gap: 16px;
-  font-size: 0.8em;
-  color: #666;
-}
-
-.server-card-members {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.server-card-members .online-dot {
-  width: 8px;
-  height: 8px;
-  background: #3ba55d;
-  border-radius: 50%;
-}
-
-/* ==================== STAGE CHANNEL ==================== */
-.stage-channel {
-  flex: 1;
-  background: #0a0a0a;
-  display: flex;
-  flex-direction: column;
-}
-
-.stage-header {
-  padding: 16px;
-  background: #18191c;
-  border-bottom: 1px solid #2f3136;
-}
-
-.stage-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 1.2em;
-  font-weight: 600;
-  margin-bottom: 4px;
-}
-
-.stage-topic {
-  color: #b9bbbe;
-  font-size: 0.9em;
-}
-
-.stage-main {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  padding: 24px;
-}
-
-.stage-speakers {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 24px;
-  justify-content: center;
-  margin-bottom: 32px;
-}
-
-.speaker-card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-}
-
-.speaker-avatar {
-  width: 80px;
-  height: 80px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 2em;
-  font-weight: 700;
-  position: relative;
-}
-
-.speaker-avatar.speaking {
-  box-shadow: 0 0 0 4px #3ba55d;
-}
-
-.speaker-muted-icon {
-  position: absolute;
-  bottom: -4px;
-  right: -4px;
-  background: #ed4245;
-  border-radius: 50%;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.6em;
-}
-
-.speaker-name {
-  font-weight: 500;
-}
-
-.speaker-role {
-  font-size: 0.8em;
-  color: #faa61a;
-}
-
-.stage-audience {
-  background: #18191c;
-  border-radius: 8px;
-  padding: 16px;
-}
-
-.audience-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-}
-
-.audience-title {
-  font-weight: 600;
-}
-
-.audience-count {
-  color: #666;
-  font-size: 0.85em;
-}
-
-.audience-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.audience-member {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.9em;
-  font-weight: 600;
-}
-
-.stage-controls {
-  display: flex;
-  justify-content: center;
-  gap: 12px;
-  padding: 16px;
-  background: #18191c;
-}
-
-.stage-control-btn {
-  padding: 12px 24px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-weight: 500;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  transition: background 0.2s;
-}
-
-.stage-control-btn.primary {
-  background: #5865f2;
-  color: #fff;
-}
-
-.stage-control-btn.primary:hover {
-  background: #4752c4;
-}
-
-.stage-control-btn.danger {
-  background: #ed4245;
-  color: #fff;
-}
-
-.stage-control-btn.danger:hover {
-  background: #c53030;
-}
-
-.stage-control-btn.secondary {
-  background: #2f3136;
-  color: #b9bbbe;
-}
-
-.stage-control-btn.secondary:hover {
-  background: #40444b;
-}
-
-/* ==================== FORUM CHANNEL ==================== */
-.forum-channel {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  background: #18191c;
-}
-
-.forum-header {
-  padding: 16px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.forum-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 1.2em;
-  font-weight: 600;
-  margin-bottom: 8px;
-}
-
-.forum-description {
-  color: #b9bbbe;
-  font-size: 0.9em;
-  margin-bottom: 16px;
-}
-
-.forum-toolbar {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-}
-
-.forum-search {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  background: #0a0a0a;
-  border-radius: 4px;
-  padding: 8px 12px;
-}
-
-.forum-search input {
-  flex: 1;
-  background: transparent;
-  border: none;
-  color: #e0e0e0;
-  outline: none;
-}
-
-.forum-sort {
-  padding: 8px 12px;
-  background: #2f3136;
-  border: none;
-  border-radius: 4px;
-  color: #b9bbbe;
-  cursor: pointer;
-}
-
-.forum-new-post {
-  padding: 8px 16px;
-  background: #5865f2;
-  border: none;
-  border-radius: 4px;
-  color: #fff;
-  cursor: pointer;
-  font-weight: 500;
-}
-
-.forum-new-post:hover {
-  background: #4752c4;
-}
-
-.forum-tags {
-  display: flex;
-  gap: 8px;
-  padding: 12px 16px;
-  border-bottom: 1px solid #2f3136;
-  overflow-x: auto;
-}
-
-.forum-tag {
-  padding: 4px 12px;
-  background: #2f3136;
-  border-radius: 16px;
-  font-size: 0.85em;
-  color: #b9bbbe;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.forum-tag:hover {
-  background: #40444b;
-}
-
-.forum-tag.active {
-  background: #5865f2;
-  color: #fff;
-}
-
-.forum-posts {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.forum-post {
-  background: #0f0f0f;
-  border-radius: 8px;
-  padding: 16px;
-  cursor: pointer;
-  transition: background 0.2s;
-}
-
-.forum-post:hover {
-  background: #1a1a1a;
-}
-
-.forum-post-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 8px;
-}
-
-.forum-post-avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.85em;
-  font-weight: 600;
-}
-
-.forum-post-author {
-  font-weight: 500;
-}
-
-.forum-post-time {
-  color: #666;
-  font-size: 0.8em;
-}
-
-.forum-post-title {
-  font-weight: 600;
-  margin-bottom: 8px;
-}
-
-.forum-post-preview {
-  color: #b9bbbe;
-  font-size: 0.9em;
-  line-height: 1.4;
-  margin-bottom: 12px;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.forum-post-footer {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.forum-post-tags {
-  display: flex;
-  gap: 6px;
-  flex: 1;
-}
-
-.forum-post-tag {
-  padding: 2px 8px;
-  background: #2f3136;
-  border-radius: 4px;
-  font-size: 0.75em;
-  color: #b9bbbe;
-}
-
-.forum-post-stats {
-  display: flex;
-  gap: 12px;
-  font-size: 0.8em;
-  color: #666;
-}
-
-.forum-post-stat {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-/* ==================== EVENTS PANEL ==================== */
-.events-panel {
-  background: #18191c;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.events-header {
-  padding: 16px;
-  border-bottom: 1px solid #2f3136;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.events-title {
-  font-weight: 600;
-}
-
-.events-create-btn {
-  padding: 6px 12px;
-  background: #5865f2;
-  border: none;
-  border-radius: 4px;
-  color: #fff;
-  cursor: pointer;
-  font-size: 0.85em;
-}
-
-.events-tabs {
-  display: flex;
-  border-bottom: 1px solid #2f3136;
-}
-
-.events-tab {
-  flex: 1;
-  padding: 12px;
-  background: transparent;
-  border: none;
-  color: #b9bbbe;
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
-}
-
-.events-tab:hover {
-  color: #fff;
-}
-
-.events-tab.active {
-  color: #fff;
-  border-bottom-color: #5865f2;
-}
-
-.events-list {
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  max-height: 400px;
-  overflow-y: auto;
-}
-
-.event-card {
-  background: #0f0f0f;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.event-card-image {
-  height: 80px;
-  background: linear-gradient(135deg, #5865f2, #eb459e);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 2em;
-}
-
-.event-card-body {
-  padding: 12px;
-}
-
-.event-card-date {
-  font-size: 0.75em;
-  color: #5865f2;
-  font-weight: 600;
-  margin-bottom: 4px;
-}
-
-.event-card-title {
-  font-weight: 600;
-  margin-bottom: 4px;
-}
-
-.event-card-location {
-  font-size: 0.85em;
-  color: #b9bbbe;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-bottom: 8px;
-}
-
-.event-card-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.event-interested {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 0.85em;
-  color: #666;
-}
-
-.event-join-btn {
-  padding: 6px 12px;
-  background: #3ba55d;
-  border: none;
-  border-radius: 4px;
-  color: #fff;
-  cursor: pointer;
-  font-size: 0.85em;
-}
-
-.event-join-btn:hover {
-  background: #2d8049;
-}
-
-.events-empty {
-  padding: 32px;
-  text-align: center;
-  color: #666;
-}
-
-.events-empty-icon {
-  font-size: 3em;
-  margin-bottom: 12px;
-}
-
-/* ==================== AUDIT LOG ==================== */
-.audit-log {
-  width: 700px;
-  max-height: 600px;
-  background: #18191c;
-  border-radius: 8px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.audit-log-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.audit-log-header h2 {
-  margin: 0;
-  font-size: 1.25em;
-}
-
-.audit-log-close {
-  width: 32px;
-  height: 32px;
-  background: transparent;
-  border: none;
-  color: #b9bbbe;
-  cursor: pointer;
-  border-radius: 4px;
-  font-size: 1.2em;
-}
-
-.audit-log-close:hover {
-  background: #2f3136;
-  color: #fff;
-}
-
-.audit-log-filters {
-  display: flex;
-  gap: 12px;
-  padding: 12px 20px;
-  border-bottom: 1px solid #2f3136;
-  background: #0f0f0f;
-}
-
-.audit-filter-group {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.audit-filter-group label {
-  font-size: 0.7em;
-  text-transform: uppercase;
-  font-weight: 600;
-  color: #666;
-}
-
-.audit-filter-group input,
-.audit-filter-group select {
-  padding: 8px 12px;
-  background: #2f3136;
-  border: none;
-  border-radius: 4px;
-  color: #e0e0e0;
-  font-size: 0.9em;
-}
-
-.audit-filter-group input:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #5865f2;
-}
-
-.audit-log-entries {
-  flex: 1;
-  overflow-y: auto;
-  padding: 8px 0;
-}
-
-.audit-entry {
-  padding: 12px 20px;
-  border-bottom: 1px solid #0f0f0f;
-  cursor: pointer;
-  transition: background 0.2s;
-}
-
-.audit-entry:hover {
-  background: #1f2023;
-}
-
-.audit-entry.expanded {
-  background: #1f2023;
-}
-
-.audit-entry-main {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.audit-action-icon {
-  width: 36px;
-  height: 36px;
-  background: #2f3136;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.1em;
-}
-
-.audit-entry-content {
-  flex: 1;
-}
-
-.audit-entry-summary {
-  color: #e0e0e0;
-  font-size: 0.95em;
-}
-
-.audit-entry-summary strong {
-  color: #fff;
-}
-
-.audit-entry-time {
-  font-size: 0.8em;
-  color: #666;
-  margin-top: 2px;
-}
-
-.audit-expand-icon {
-  color: #666;
-  font-size: 0.8em;
-  transition: transform 0.2s;
-}
-
-.audit-entry.expanded .audit-expand-icon {
-  transform: rotate(90deg);
-}
-
-.audit-entry-details {
-  margin-top: 12px;
-  padding: 12px;
-  background: #0a0a0a;
-  border-radius: 4px;
-  font-size: 0.85em;
-}
-
-.audit-detail-row {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 6px;
-}
-
-.audit-detail-row:last-child {
-  margin-bottom: 0;
-}
-
-.audit-detail-label {
-  color: #666;
-  min-width: 80px;
-}
-
-.audit-detail-value {
-  color: #b9bbbe;
-}
-
-.audit-log-empty {
-  padding: 40px;
-  text-align: center;
-  color: #666;
-}
-
-/* ==================== EMOJI UPLOAD ==================== */
-.emoji-upload {
-  width: 640px;
-  background: #18191c;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.emoji-upload-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.emoji-upload-header h2 {
-  margin: 0;
-  font-size: 1.25em;
-}
-
-.emoji-upload-close {
-  width: 32px;
-  height: 32px;
-  background: transparent;
-  border: none;
-  color: #b9bbbe;
-  cursor: pointer;
-  border-radius: 4px;
-  font-size: 1.2em;
-}
-
-.emoji-upload-close:hover {
-  background: #2f3136;
-  color: #fff;
-}
-
-.emoji-upload-tabs {
-  display: flex;
-  border-bottom: 1px solid #2f3136;
-}
-
-.emoji-tab {
-  flex: 1;
-  padding: 12px;
-  background: transparent;
-  border: none;
-  color: #b9bbbe;
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
-}
-
-.emoji-tab:hover {
-  color: #fff;
-}
-
-.emoji-tab.active {
-  color: #fff;
-  border-bottom-color: #5865f2;
-}
-
-.emoji-upload-content {
-  padding: 20px;
-}
-
-.emoji-slots-info {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 16px;
-  background: #0f0f0f;
-  border-radius: 4px;
-  margin-bottom: 16px;
-}
-
-.slots-bar {
-  flex: 1;
-  height: 8px;
-  background: #2f3136;
-  border-radius: 4px;
-  margin: 0 16px;
-  overflow: hidden;
-}
-
-.slots-fill {
-  height: 100%;
-  background: #5865f2;
-  border-radius: 4px;
-  transition: width 0.3s;
-}
-
-.upload-dropzone {
-  border: 2px dashed #2f3136;
-  border-radius: 8px;
-  padding: 40px 20px;
-  text-align: center;
-  margin-bottom: 16px;
-  transition: all 0.2s;
-  cursor: pointer;
-}
-
-.upload-dropzone:hover,
-.upload-dropzone.dragover {
-  border-color: #5865f2;
-  background: rgba(88, 101, 242, 0.1);
-}
-
-.dropzone-icon {
-  font-size: 3em;
-  margin-bottom: 12px;
-}
-
-.dropzone-text {
-  color: #b9bbbe;
-  margin-bottom: 4px;
-}
-
-.dropzone-hint {
-  font-size: 0.8em;
-  color: #666;
-}
-
-.upload-preview {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 16px;
-  background: #0f0f0f;
-  border-radius: 8px;
-  margin-bottom: 16px;
-}
-
-.preview-image {
-  width: 64px;
-  height: 64px;
-  background: #2f3136;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 2em;
-}
-
-.preview-info {
-  flex: 1;
-}
-
-.preview-name-input {
-  width: 100%;
-  padding: 8px 12px;
-  background: #2f3136;
-  border: none;
-  border-radius: 4px;
-  color: #e0e0e0;
-  margin-bottom: 4px;
-}
-
-.preview-name-input:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #5865f2;
-}
-
-.preview-file-info {
-  font-size: 0.8em;
-  color: #666;
-}
-
-.preview-remove {
-  width: 32px;
-  height: 32px;
-  background: transparent;
-  border: none;
-  color: #666;
-  cursor: pointer;
-  border-radius: 4px;
-}
-
-.preview-remove:hover {
-  background: #2f3136;
-  color: #ed4245;
-}
-
-.upload-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-}
-
-.upload-cancel,
-.upload-submit {
-  padding: 10px 20px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-weight: 500;
-}
-
-.upload-cancel {
-  background: transparent;
-  color: #b9bbbe;
-}
-
-.upload-cancel:hover {
-  color: #fff;
-}
-
-.upload-submit {
-  background: #5865f2;
-  color: #fff;
-}
-
-.upload-submit:hover {
-  background: #4752c4;
-}
-
-.upload-submit:disabled {
-  background: #4752c4;
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.existing-emojis {
-  margin-top: 20px;
-}
-
-.existing-emojis h4 {
-  margin: 0 0 12px 0;
-  font-size: 0.9em;
-  color: #b9bbbe;
-}
-
-.emoji-grid {
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);
-  gap: 8px;
-}
-
-.emoji-grid-item {
-  aspect-ratio: 1;
-  background: #2f3136;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.5em;
-  cursor: pointer;
-  transition: all 0.2s;
-  position: relative;
-}
-
-.emoji-grid-item:hover {
-  background: #3f4248;
-  transform: scale(1.1);
-}
-
-.emoji-edit-overlay {
-  position: absolute;
-  inset: 0;
-  background: rgba(0,0,0,0.7);
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0;
-  transition: opacity 0.2s;
-}
-
-.emoji-grid-item:hover .emoji-edit-overlay {
-  opacity: 1;
-}
-
-/* ==================== SERVER INSIGHTS ==================== */
-.server-insights {
-  width: 800px;
-  max-height: 700px;
-  background: #18191c;
-  border-radius: 8px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.insights-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.insights-header h2 {
-  margin: 0;
-  font-size: 1.25em;
-}
-
-.insights-close {
-  width: 32px;
-  height: 32px;
-  background: transparent;
-  border: none;
-  color: #b9bbbe;
-  cursor: pointer;
-  border-radius: 4px;
-  font-size: 1.2em;
-}
-
-.insights-close:hover {
-  background: #2f3136;
-  color: #fff;
-}
-
-.insights-tabs {
-  display: flex;
-  border-bottom: 1px solid #2f3136;
-}
-
-.insights-tab {
-  flex: 1;
-  padding: 12px;
-  background: transparent;
-  border: none;
-  color: #b9bbbe;
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
-}
-
-.insights-tab:hover {
-  color: #fff;
-}
-
-.insights-tab.active {
-  color: #fff;
-  border-bottom-color: #5865f2;
-}
-
-.insights-time-range {
-  padding: 12px 20px;
-  background: #0f0f0f;
-  border-bottom: 1px solid #2f3136;
-  display: flex;
-  gap: 8px;
-}
-
-.time-range-btn {
-  padding: 6px 12px;
-  background: transparent;
-  border: 1px solid #2f3136;
-  border-radius: 4px;
-  color: #b9bbbe;
-  cursor: pointer;
-  font-size: 0.85em;
-}
-
-.time-range-btn:hover {
-  background: #2f3136;
-}
-
-.time-range-btn.active {
-  background: #5865f2;
-  border-color: #5865f2;
-  color: #fff;
-}
-
-.insights-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 20px;
-}
-
-.insights-stats-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 16px;
-  margin-bottom: 24px;
-}
-
-.insights-stat-card {
-  background: #0f0f0f;
-  border-radius: 8px;
-  padding: 16px;
-}
-
-.stat-label {
-  font-size: 0.75em;
-  text-transform: uppercase;
-  color: #666;
-  margin-bottom: 8px;
-}
-
-.stat-value {
-  font-size: 1.5em;
-  font-weight: 600;
-  color: #fff;
-  margin-bottom: 4px;
-}
-
-.stat-change {
-  font-size: 0.85em;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.stat-change.positive {
-  color: #3ba55d;
-}
-
-.stat-change.negative {
-  color: #ed4245;
-}
-
-.insights-chart {
-  background: #0f0f0f;
-  border-radius: 8px;
-  padding: 20px;
-  margin-bottom: 20px;
-}
-
-.chart-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-}
-
-.chart-header h3 {
-  margin: 0;
-  font-size: 1em;
-}
-
-.chart-legend {
-  display: flex;
-  gap: 16px;
-  font-size: 0.85em;
-}
-
-.legend-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.legend-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-}
-
-.chart-placeholder {
-  height: 200px;
-  background: linear-gradient(to right, #1f2023 0%, #2f3136 50%, #1f2023 100%);
-  border-radius: 4px;
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-around;
-  padding: 20px;
-}
-
-.chart-bar {
-  width: 30px;
-  background: #5865f2;
-  border-radius: 4px 4px 0 0;
-  opacity: 0.7;
-}
-
-.top-channels,
-.top-members {
-  margin-top: 20px;
-}
-
-.top-channels h3,
-.top-members h3 {
-  margin: 0 0 12px 0;
-  font-size: 1em;
-}
-
-.top-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px;
-  background: #0f0f0f;
-  border-radius: 4px;
-  margin-bottom: 8px;
-}
-
-.top-item-rank {
-  width: 24px;
-  height: 24px;
-  background: #2f3136;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.8em;
-  font-weight: 600;
-}
-
-.top-item-name {
-  flex: 1;
-}
-
-.top-item-value {
-  color: #b9bbbe;
-  font-size: 0.9em;
-}
-
-/* ==================== APP DIRECTORY ==================== */
-.app-directory {
-  width: 900px;
-  max-height: 700px;
-  background: #18191c;
-  border-radius: 8px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.app-directory-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.app-directory-header h2 {
-  margin: 0;
-  font-size: 1.25em;
-}
-
-.app-directory-close {
-  width: 32px;
-  height: 32px;
-  background: transparent;
-  border: none;
-  color: #b9bbbe;
-  cursor: pointer;
-  border-radius: 4px;
-  font-size: 1.2em;
-}
-
-.app-directory-close:hover {
-  background: #2f3136;
-  color: #fff;
-}
-
-.app-directory-search {
-  padding: 12px 20px;
-  background: #0f0f0f;
-  border-bottom: 1px solid #2f3136;
-}
-
-.app-search-input {
-  width: 100%;
-  padding: 10px 16px;
-  background: #2f3136;
-  border: none;
-  border-radius: 4px;
-  color: #e0e0e0;
-}
-
-.app-search-input:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #5865f2;
-}
-
-.app-directory-body {
-  display: flex;
-  flex: 1;
-  overflow: hidden;
-}
-
-.app-categories {
-  width: 180px;
-  background: #0f0f0f;
-  border-right: 1px solid #2f3136;
-  overflow-y: auto;
-}
-
-.app-category {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 12px 16px;
-  cursor: pointer;
-  color: #b9bbbe;
-  transition: all 0.2s;
-}
-
-.app-category:hover {
-  background: #1f2023;
-  color: #fff;
-}
-
-.app-category.active {
-  background: #2f3136;
-  color: #fff;
-}
-
-.category-icon {
-  font-size: 1.2em;
-}
-
-.app-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px;
-}
-
-.app-list-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 12px;
-}
-
-.app-card {
-  background: #0f0f0f;
-  border-radius: 8px;
-  padding: 16px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.app-card:hover {
-  background: #1f2023;
-  transform: translateY(-2px);
-}
-
-.app-card-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 12px;
-}
-
-.app-icon {
-  width: 48px;
-  height: 48px;
-  background: linear-gradient(135deg, #5865f2, #eb459e);
-  border-radius: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.5em;
-}
-
-.app-name {
-  font-weight: 600;
-  margin-bottom: 2px;
-}
-
-.app-developer {
-  font-size: 0.8em;
-  color: #666;
-}
-
-.app-description {
-  font-size: 0.9em;
-  color: #b9bbbe;
-  margin-bottom: 12px;
-  line-height: 1.4;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.app-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.app-tag {
-  padding: 4px 8px;
-  background: #2f3136;
-  border-radius: 4px;
-  font-size: 0.75em;
-  color: #b9bbbe;
-}
-
-.app-detail-view {
-  flex: 1;
-  overflow-y: auto;
-  padding: 20px;
-}
-
-.app-detail-header {
-  display: flex;
-  gap: 20px;
-  margin-bottom: 24px;
-}
-
-.app-detail-icon {
-  width: 80px;
-  height: 80px;
-  background: linear-gradient(135deg, #5865f2, #eb459e);
-  border-radius: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 2.5em;
-}
-
-.app-detail-info {
-  flex: 1;
-}
-
-.app-detail-info h3 {
-  margin: 0 0 4px 0;
-  font-size: 1.5em;
-}
-
-.app-detail-developer {
-  color: #666;
-  margin-bottom: 12px;
-}
-
-.app-detail-actions {
-  display: flex;
-  gap: 8px;
-}
-
-.add-app-btn {
-  padding: 10px 20px;
-  background: #5865f2;
-  border: none;
-  border-radius: 4px;
-  color: #fff;
-  cursor: pointer;
-  font-weight: 500;
-}
-
-.add-app-btn:hover {
-  background: #4752c4;
-}
-
-.app-back-btn {
-  padding: 10px 20px;
-  background: #2f3136;
-  border: none;
-  border-radius: 4px;
-  color: #fff;
-  cursor: pointer;
-}
-
-.app-back-btn:hover {
-  background: #3f4248;
-}
-
-.app-detail-description {
-  margin-bottom: 24px;
-  line-height: 1.6;
-  color: #b9bbbe;
-}
-
-.app-detail-features {
-  background: #0f0f0f;
-  border-radius: 8px;
-  padding: 16px;
-}
-
-.app-detail-features h4 {
-  margin: 0 0 12px 0;
-  font-size: 1em;
-}
-
-.feature-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.feature-list li {
-  padding: 8px 0;
-  color: #b9bbbe;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.feature-list li::before {
-  content: "✓";
-  color: #3ba55d;
-}
-
-/* ==================== SLOW MODE SETTINGS ==================== */
-.slowmode-modal {
-  width: 480px;
-  background: #18191c;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.slowmode-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.slowmode-header h2 {
-  margin: 0;
-  font-size: 1.25em;
-}
-
-.slowmode-close {
-  width: 32px;
-  height: 32px;
-  background: transparent;
-  border: none;
-  color: #b9bbbe;
-  cursor: pointer;
-  border-radius: 4px;
-  font-size: 1.2em;
-}
-
-.slowmode-close:hover {
-  background: #2f3136;
-  color: #fff;
-}
-
-.slowmode-content {
-  padding: 20px;
-}
-
-.slowmode-channel {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 16px;
-  background: #0f0f0f;
-  border-radius: 4px;
-  margin-bottom: 20px;
-}
-
-.slowmode-channel .channel-icon {
-  color: #666;
-  font-weight: 600;
-}
-
-.slowmode-channel .channel-name {
-  font-weight: 500;
-}
-
-.slowmode-section {
-  margin-bottom: 20px;
-}
-
-.slowmode-section h3 {
-  margin: 0 0 8px 0;
-  font-size: 1em;
-}
-
-.slowmode-description {
-  color: #b9bbbe;
-  font-size: 0.9em;
-  margin-bottom: 16px;
-}
-
-.slowmode-presets {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-bottom: 16px;
-}
-
-.preset-btn {
-  padding: 8px 14px;
-  background: #2f3136;
-  border: none;
-  border-radius: 4px;
-  color: #b9bbbe;
-  cursor: pointer;
-  font-size: 0.9em;
-  transition: all 0.2s;
-}
-
-.preset-btn:hover {
-  background: #3f4248;
-  color: #fff;
-}
-
-.preset-btn.active {
-  background: #5865f2;
-  color: #fff;
-}
-
-.custom-input {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 16px;
-}
-
-.custom-input input {
-  flex: 1;
-  padding: 10px 14px;
-  background: #0a0a0a;
-  border: 1px solid #2f3136;
-  border-radius: 4px;
-  color: #e0e0e0;
-}
-
-.custom-input input:focus {
-  outline: none;
-  border-color: #5865f2;
-}
-
-.apply-custom {
-  padding: 10px 16px;
-  background: #5865f2;
-  border: none;
-  border-radius: 4px;
-  color: #fff;
-  cursor: pointer;
-}
-
-.apply-custom:hover {
-  background: #4752c4;
-}
-
-.slowmode-slider {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.slowmode-slider input[type="range"] {
-  flex: 1;
-  height: 6px;
-  background: #2f3136;
-  border-radius: 3px;
-  appearance: none;
-  cursor: pointer;
-}
-
-.slowmode-slider input[type="range"]::-webkit-slider-thumb {
-  appearance: none;
-  width: 16px;
-  height: 16px;
-  background: #5865f2;
-  border-radius: 50%;
-  cursor: pointer;
-}
-
-.slowmode-slider input[type="range"]::-moz-range-thumb {
-  width: 16px;
-  height: 16px;
-  background: #5865f2;
-  border: none;
-  border-radius: 50%;
-  cursor: pointer;
-}
-
-.slider-value {
-  min-width: 80px;
-  color: #b9bbbe;
-  font-size: 0.9em;
-  text-align: right;
-}
-
-.section-header-toggle {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-  padding: 8px 0;
-}
-
-.section-header-toggle:hover h3 {
-  color: #fff;
-}
-
-.toggle-icon {
-  color: #666;
-  font-size: 0.8em;
-}
-
-.exempt-roles {
-  padding: 12px 0;
-}
-
-.exempt-description {
-  color: #666;
-  font-size: 0.85em;
-  margin-bottom: 12px;
-}
-
-.exempt-role {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 0;
-  cursor: pointer;
-}
-
-.exempt-role input[type="checkbox"] {
-  width: 18px;
-  height: 18px;
-  accent-color: #5865f2;
-}
-
-.exempt-role .role-name {
-  font-weight: 500;
-}
-
-.slowmode-info {
-  display: flex;
-  gap: 10px;
-  padding: 12px;
-  background: #0f0f0f;
-  border-radius: 4px;
-  font-size: 0.85em;
-  color: #b9bbbe;
-  line-height: 1.4;
-}
-
-.info-icon {
-  flex-shrink: 0;
-}
-
-.slowmode-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 16px 20px;
-  background: #0f0f0f;
-  border-top: 1px solid #2f3136;
-}
-
-.slowmode-footer .cancel-btn,
-.slowmode-footer .save-btn {
-  padding: 10px 20px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-weight: 500;
-}
-
-.slowmode-footer .cancel-btn {
-  background: transparent;
-  color: #b9bbbe;
-}
-
-.slowmode-footer .cancel-btn:hover {
-  color: #fff;
-}
-
-.slowmode-footer .save-btn {
-  background: #5865f2;
-  color: #fff;
-}
-
-.slowmode-footer .save-btn:hover {
-  background: #4752c4;
-}
-
-/* ==================== CHANNEL SETTINGS ==================== */
-.channel-settings-modal {
-  display: flex;
-  width: 900px;
-  height: 600px;
-  background: #18191c;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.settings-channel-info {
-  padding: 16px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.channel-hash {
-  color: #666;
-  font-size: 1.2em;
-  font-weight: 600;
-}
-
-.settings-channel-name {
-  font-weight: 600;
-}
-
-.channel-overview .setting-group {
-  margin-bottom: 24px;
-}
-
-.channel-name-input {
-  display: flex;
-  align-items: center;
-  background: #0a0a0a;
-  border: 1px solid #2f3136;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.channel-name-input .input-prefix {
-  padding: 10px 12px;
-  background: #2f3136;
-  color: #666;
-  font-weight: 600;
-}
-
-.channel-name-input input {
-  flex: 1;
-  padding: 10px 12px;
-  background: transparent;
-  border: none;
-  color: #e0e0e0;
-  outline: none;
-}
-
-.setting-textarea {
-  width: 100%;
-  padding: 12px;
-  background: #0a0a0a;
-  border: 1px solid #2f3136;
-  border-radius: 4px;
-  color: #e0e0e0;
-  resize: vertical;
-  font-family: inherit;
-}
-
-.setting-textarea:focus {
-  outline: none;
-  border-color: #5865f2;
-}
-
-.char-count {
-  display: block;
-  text-align: right;
-  font-size: 0.8em;
-  color: #666;
-  margin-top: 4px;
-}
-
-.slowmode-select select {
-  padding: 10px 14px;
-  background: #2f3136;
-  border: none;
-  border-radius: 4px;
-  color: #e0e0e0;
-}
-
-.setting-hint {
-  font-size: 0.85em;
-  color: #666;
-  margin-top: 4px;
-}
-
-.toggle-group {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.toggle-info label {
-  display: block;
-  margin-bottom: 4px;
-}
-
-.toggle-switch {
-  position: relative;
-  display: inline-block;
-  width: 44px;
-  height: 24px;
-}
-
-.toggle-switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.toggle-slider {
-  position: absolute;
-  cursor: pointer;
-  inset: 0;
-  background: #72767d;
-  border-radius: 24px;
-  transition: 0.3s;
-}
-
-.toggle-slider::before {
-  position: absolute;
-  content: "";
-  height: 18px;
-  width: 18px;
-  left: 3px;
-  bottom: 3px;
-  background: #fff;
-  border-radius: 50%;
-  transition: 0.3s;
-}
-
-.toggle-switch input:checked + .toggle-slider {
-  background: #3ba55d;
-}
-
-.toggle-switch input:checked + .toggle-slider::before {
-  transform: translateX(20px);
-}
-
-.setting-select {
-  padding: 10px 14px;
-  background: #2f3136;
-  border: none;
-  border-radius: 4px;
-  color: #e0e0e0;
-  width: 100%;
-}
-
-.channel-permissions .permissions-info {
-  padding: 12px;
-  background: #0f0f0f;
-  border-radius: 4px;
-  margin-bottom: 20px;
-  color: #b9bbbe;
-}
-
-.permissions-section {
-  margin-bottom: 24px;
-}
-
-.permissions-section .section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-}
-
-.permissions-section h3 {
-  margin: 0;
-  font-size: 1em;
-}
-
-.add-override-btn {
-  padding: 8px 14px;
-  background: #5865f2;
-  border: none;
-  border-radius: 4px;
-  color: #fff;
-  cursor: pointer;
-  font-size: 0.9em;
-}
-
-.add-override-btn:hover {
-  background: #4752c4;
-}
-
-.overrides-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.override-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px 12px;
-  background: #0f0f0f;
-  border-radius: 4px;
-}
-
-.override-info {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.role-indicator,
-.member-indicator {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.8em;
-}
-
-.role-indicator {
-  color: #fff;
-}
-
-.member-indicator {
-  background: #2f3136;
-}
-
-.override-name {
-  font-weight: 500;
-}
-
-.override-type {
-  font-size: 0.75em;
-  color: #666;
-  text-transform: uppercase;
-}
-
-.override-actions {
-  display: flex;
-  gap: 8px;
-}
-
-.edit-override,
-.remove-override {
-  padding: 6px 12px;
-  background: #2f3136;
-  border: none;
-  border-radius: 4px;
-  color: #b9bbbe;
-  cursor: pointer;
-}
-
-.edit-override:hover {
-  background: #3f4248;
-  color: #fff;
-}
-
-.remove-override:hover {
-  background: #ed4245;
-  color: #fff;
-}
-
-.advanced-perms-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 20px;
-}
-
-.perm-category h4 {
-  margin: 0 0 12px 0;
-  font-size: 0.85em;
-  color: #b9bbbe;
-}
-
-.perm-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 12px;
-  background: #0f0f0f;
-  border-radius: 4px;
-  margin-bottom: 6px;
-}
-
-.perm-toggles {
-  display: flex;
-  gap: 4px;
-}
-
-.perm-btn {
-  width: 28px;
-  height: 28px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 0.9em;
-  background: #2f3136;
-  color: #666;
-}
-
-.perm-btn.allow:hover,
-.perm-btn.allow.active {
-  background: #3ba55d;
-  color: #fff;
-}
-
-.perm-btn.neutral:hover,
-.perm-btn.neutral.active {
-  background: #72767d;
-  color: #fff;
-}
-
-.perm-btn.deny:hover,
-.perm-btn.deny.active {
-  background: #ed4245;
-  color: #fff;
-}
-
-.channel-invites,
-.channel-integrations {
-  padding: 20px 0;
-}
-
-.no-invites {
-  text-align: center;
-  color: #666;
-  padding: 40px;
-}
-
-.create-invite-btn,
-.create-webhook-btn {
-  margin-top: 16px;
-  padding: 10px 20px;
-  background: #5865f2;
-  border: none;
-  border-radius: 4px;
-  color: #fff;
-  cursor: pointer;
-}
-
-.integration-section h3 {
-  margin: 0 0 8px 0;
-}
-
-.integration-desc {
-  color: #b9bbbe;
-  font-size: 0.9em;
-}
-
-.settings-save-bar {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 20px;
-  background: #18191c;
-  border-top: 1px solid #2f3136;
-}
-
-.settings-save-bar span {
-  color: #b9bbbe;
-}
-
-.save-actions {
-  display: flex;
-  gap: 8px;
-}
-
-.reset-btn {
-  padding: 8px 16px;
-  background: transparent;
-  border: none;
-  color: #b9bbbe;
-  cursor: pointer;
-}
-
-.reset-btn:hover {
-  text-decoration: underline;
-}
-
-/* ==================== CATEGORY EDITOR ==================== */
-.category-editor {
-  width: 480px;
-  background: #18191c;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.category-editor-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.category-editor-header h2 {
-  margin: 0;
-  font-size: 1.25em;
-}
-
-.category-close {
-  width: 32px;
-  height: 32px;
-  background: transparent;
-  border: none;
-  color: #b9bbbe;
-  cursor: pointer;
-  border-radius: 4px;
-  font-size: 1.2em;
-}
-
-.category-close:hover {
-  background: #2f3136;
-  color: #fff;
-}
-
-.category-editor-content {
-  padding: 20px;
-}
-
-.category-name-input {
-  width: 100%;
-  padding: 12px 14px;
-  background: #0a0a0a;
-  border: 1px solid #2f3136;
-  border-radius: 4px;
-  color: #e0e0e0;
-  font-size: 1em;
-  text-transform: uppercase;
-}
-
-.category-name-input:focus {
-  outline: none;
-  border-color: #5865f2;
-}
-
-.role-selector {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-top: 8px;
-}
-
-.role-checkbox {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 12px;
-  background: #0f0f0f;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background 0.2s;
-}
-
-.role-checkbox:hover {
-  background: #1f2023;
-}
-
-.role-checkbox.checked {
-  background: rgba(88, 101, 242, 0.2);
-}
-
-.role-checkbox input {
-  width: 18px;
-  height: 18px;
-  accent-color: #5865f2;
-}
-
-.role-color {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-}
-
-.category-channels {
-  margin-top: 20px;
-}
-
-.channel-list-preview {
-  margin-top: 8px;
-  background: #0f0f0f;
-  border-radius: 4px;
-  padding: 8px;
-}
-
-.channel-preview-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 8px;
-  color: #b9bbbe;
-  font-size: 0.9em;
-}
-
-.channel-preview-item .channel-icon {
-  color: #666;
-}
-
-.category-editor-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  background: #0f0f0f;
-  border-top: 1px solid #2f3136;
-}
-
-.delete-category-btn {
-  padding: 10px 16px;
-  background: transparent;
-  border: none;
-  color: #ed4245;
-  cursor: pointer;
-}
-
-.delete-category-btn:hover {
-  text-decoration: underline;
-}
-
-.footer-actions {
-  display: flex;
-  gap: 8px;
-}
-
-/* ==================== CHANNEL PERMISSIONS MODAL ==================== */
-.channel-permissions-modal {
-  width: 700px;
-  max-height: 80vh;
-  background: #18191c;
-  border-radius: 8px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.permissions-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  padding: 16px 20px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.permissions-title h2 {
-  margin: 0 0 4px 0;
-  font-size: 1.25em;
-}
-
-.permissions-context {
-  font-size: 0.9em;
-  color: #b9bbbe;
-}
-
-.channel-ref {
-  color: #666;
-  margin-left: 8px;
-}
-
-.permissions-close {
-  width: 32px;
-  height: 32px;
-  background: transparent;
-  border: none;
-  color: #b9bbbe;
-  cursor: pointer;
-  border-radius: 4px;
-  font-size: 1.2em;
-}
-
-.permissions-close:hover {
-  background: #2f3136;
-  color: #fff;
-}
-
-.permissions-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 20px;
-  background: #0f0f0f;
-  border-bottom: 1px solid #2f3136;
-}
-
-.permissions-search {
-  flex: 1;
-  max-width: 300px;
-  padding: 8px 12px;
-  background: #2f3136;
-  border: none;
-  border-radius: 4px;
-  color: #e0e0e0;
-}
-
-.permissions-search:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #5865f2;
-}
-
-.bulk-actions {
-  display: flex;
-  gap: 8px;
-}
-
-.bulk-actions button {
-  padding: 6px 12px;
-  background: #2f3136;
-  border: none;
-  border-radius: 4px;
-  color: #b9bbbe;
-  cursor: pointer;
-  font-size: 0.85em;
-}
-
-.bulk-actions button:hover {
-  background: #3f4248;
-  color: #fff;
-}
-
-.permissions-legend {
-  display: flex;
-  gap: 20px;
-  padding: 12px 20px;
-  background: #0f0f0f;
-  border-bottom: 1px solid #2f3136;
-}
-
-.legend-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 0.85em;
-  color: #b9bbbe;
-}
-
-.legend-icon {
-  width: 20px;
-  height: 20px;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.8em;
-}
-
-.legend-icon.allow {
-  background: #3ba55d;
-  color: #fff;
-}
-
-.legend-icon.neutral {
-  background: #72767d;
-  color: #fff;
-}
-
-.legend-icon.deny {
-  background: #ed4245;
-  color: #fff;
-}
-
-.permissions-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px 20px;
-}
-
-.permission-category {
-  margin-bottom: 24px;
-}
-
-.permission-category h3 {
-  margin: 0 0 12px 0;
-  font-size: 0.9em;
-  color: #b9bbbe;
-  text-transform: uppercase;
-}
-
-.permission-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px;
-  background: #0f0f0f;
-  border-radius: 4px;
-  margin-bottom: 6px;
-}
-
-.permission-info {
-  flex: 1;
-}
-
-.permission-label {
-  display: block;
-  font-weight: 500;
-  margin-bottom: 2px;
-}
-
-.permission-desc {
-  font-size: 0.8em;
-  color: #666;
-}
-
-.permission-toggles {
-  display: flex;
-  gap: 4px;
-}
-
-.permissions-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 16px 20px;
-  background: #0f0f0f;
-  border-top: 1px solid #2f3136;
-}
-
-/* ==================== MEMBER LIST PANEL ==================== */
-.member-list-panel {
-  width: 400px;
-  height: 100%;
-  background: #18191c;
-  border-left: 1px solid #2f3136;
-  display: flex;
-  flex-direction: column;
-}
-
-.member-list-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.member-list-header h2 {
-  margin: 0;
-  font-size: 1.1em;
-}
-
-.member-list-close {
-  width: 28px;
-  height: 28px;
-  background: transparent;
-  border: none;
-  color: #b9bbbe;
-  cursor: pointer;
-  border-radius: 4px;
-}
-
-.member-list-close:hover {
-  background: #2f3136;
-  color: #fff;
-}
-
-.member-list-filters {
-  display: flex;
-  gap: 8px;
-  padding: 12px 16px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.member-search {
-  flex: 1;
-  padding: 8px 12px;
-  background: #0a0a0a;
-  border: 1px solid #2f3136;
-  border-radius: 4px;
-  color: #e0e0e0;
-}
-
-.member-search:focus {
-  outline: none;
-  border-color: #5865f2;
-}
-
-.role-filter {
-  padding: 8px 12px;
-  background: #2f3136;
-  border: none;
-  border-radius: 4px;
-  color: #e0e0e0;
-}
-
-.member-list-content {
-  flex: 1;
-  overflow-y: auto;
-}
-
-.no-members {
-  padding: 40px;
-  text-align: center;
-  color: #666;
-}
-
-.member-list-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 16px;
-  cursor: pointer;
-  transition: background 0.2s;
-  position: relative;
-}
-
-.member-list-item:hover {
-  background: #1f2023;
-}
-
-.member-list-item.selected {
-  background: #2f3136;
-}
-
-.member-avatar-wrapper {
-  position: relative;
-}
-
-.member-avatar {
-  width: 40px;
-  height: 40px;
-  background: linear-gradient(135deg, #5865f2, #eb459e);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-}
-
-.member-status-dot {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  border: 3px solid #18191c;
-}
-
-.member-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.member-name-row {
-  display: flex;
-  align-items: baseline;
-  gap: 4px;
-}
-
-.member-name {
-  font-weight: 500;
-}
-
-.member-tag {
-  font-size: 0.8em;
-  color: #666;
-}
-
-.member-roles {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  margin-top: 4px;
-}
-
-.member-role-badge {
-  padding: 2px 6px;
-  border: 1px solid;
-  border-radius: 4px;
-  font-size: 0.7em;
-}
-
-.member-actions {
-  display: flex;
-  gap: 4px;
-  opacity: 0;
-  transition: opacity 0.2s;
-}
-
-.member-list-item:hover .member-actions {
-  opacity: 1;
-}
-
-.member-action-btn {
-  width: 28px;
-  height: 28px;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  border-radius: 4px;
-}
-
-.member-action-btn:hover {
-  background: #3f4248;
-}
-
-.role-assignment-menu {
-  position: absolute;
-  top: 100%;
-  right: 16px;
-  background: #18191c;
-  border: 1px solid #2f3136;
-  border-radius: 4px;
-  padding: 8px 0;
-  z-index: 10;
-  min-width: 180px;
-}
-
-.role-menu-header {
-  padding: 8px 12px;
-  font-size: 0.8em;
-  font-weight: 600;
-  color: #666;
-  text-transform: uppercase;
-}
-
-.role-menu-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  cursor: pointer;
-}
-
-.role-menu-item:hover {
-  background: #2f3136;
-}
-
-.role-menu-item input {
-  width: 16px;
-  height: 16px;
-  accent-color: #5865f2;
-}
-
-.role-dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-}
-
-.member-list-footer {
-  display: flex;
-  gap: 8px;
-  padding: 12px 16px;
-  border-top: 1px solid #2f3136;
-}
-
-.prune-members-btn {
-  flex: 1;
-  padding: 8px;
-  background: transparent;
-  border: 1px solid #2f3136;
-  border-radius: 4px;
-  color: #b9bbbe;
-  cursor: pointer;
-}
-
-.prune-members-btn:hover {
-  background: #2f3136;
-  color: #fff;
-}
-
-.invite-members-btn {
-  flex: 1;
-  padding: 8px;
-  background: #5865f2;
-  border: none;
-  border-radius: 4px;
-  color: #fff;
-  cursor: pointer;
-}
-
-.invite-members-btn:hover {
-  background: #4752c4;
-}
-
-/* ==================== BAN LIST ==================== */
-.ban-list-modal {
-  width: 600px;
-  max-height: 600px;
-  background: #18191c;
-  border-radius: 8px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.ban-list-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.ban-list-header h2 {
-  margin: 0;
-  font-size: 1.25em;
-}
-
-.ban-list-close {
-  width: 32px;
-  height: 32px;
-  background: transparent;
-  border: none;
-  color: #b9bbbe;
-  cursor: pointer;
-  border-radius: 4px;
-  font-size: 1.2em;
-}
-
-.ban-list-close:hover {
-  background: #2f3136;
-  color: #fff;
-}
-
-.ban-list-search {
-  padding: 12px 20px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.ban-list-search input {
-  width: 100%;
-  padding: 10px 14px;
-  background: #0a0a0a;
-  border: 1px solid #2f3136;
-  border-radius: 4px;
-  color: #e0e0e0;
-}
-
-.ban-list-search input:focus {
-  outline: none;
-  border-color: #5865f2;
-}
-
-.ban-list-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 12px 20px;
-}
-
-.ban-count {
-  font-size: 0.85em;
-  color: #666;
-  margin-bottom: 12px;
-}
-
-.no-bans {
-  text-align: center;
-  padding: 40px;
-}
-
-.no-bans-icon {
-  font-size: 3em;
-  display: block;
-  margin-bottom: 12px;
-}
-
-.no-bans p {
-  margin: 0 0 4px 0;
-  color: #b9bbbe;
-}
-
-.no-bans-hint {
-  font-size: 0.85em;
-  color: #666;
-}
-
-.ban-item {
-  display: flex;
-  flex-direction: column;
-  padding: 12px;
-  background: #0f0f0f;
-  border-radius: 4px;
-  margin-bottom: 8px;
-  cursor: pointer;
-  transition: background 0.2s;
-}
-
-.ban-item:hover {
-  background: #1f2023;
-}
-
-.ban-item.selected {
-  background: #2f3136;
-}
-
-.ban-user-info {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 8px;
-}
-
-.ban-avatar {
-  width: 36px;
-  height: 36px;
-  background: #ed4245;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-}
-
-.ban-user-details {
-  flex: 1;
-}
-
-.ban-username {
-  font-weight: 500;
-}
-
-.ban-tag {
-  color: #666;
-  font-size: 0.9em;
-}
-
-.ban-reason {
-  font-size: 0.85em;
-  color: #b9bbbe;
-  margin-top: 2px;
-}
-
-.ban-meta {
-  display: flex;
-  justify-content: space-between;
-  font-size: 0.8em;
-  color: #666;
-}
-
-.ban-actions {
-  margin-top: 12px;
-  padding-top: 12px;
-  border-top: 1px solid #2f3136;
-}
-
-.revoke-ban-btn {
-  width: 100%;
-  padding: 10px;
-  background: #ed4245;
-  border: none;
-  border-radius: 4px;
-  color: #fff;
-  cursor: pointer;
-}
-
-.revoke-ban-btn:hover {
-  background: #c73e40;
-}
-
-.revoke-confirm-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0,0,0,0.7);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1001;
-}
-
-.revoke-confirm-modal {
-  background: #18191c;
-  border-radius: 8px;
-  padding: 20px;
-  width: 400px;
-}
-
-.revoke-confirm-modal h3 {
-  margin: 0 0 12px 0;
-}
-
-.revoke-warning {
-  color: #faa61a;
-  font-size: 0.9em;
-  margin-top: 12px;
-}
-
-.revoke-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  margin-top: 20px;
-}
-
-.confirm-revoke-btn {
-  padding: 10px 20px;
-  background: #ed4245;
-  border: none;
-  border-radius: 4px;
-  color: #fff;
-  cursor: pointer;
-}
-
-.confirm-revoke-btn:hover {
-  background: #c73e40;
-}
-
-/* ==================== INVITE MANAGER ==================== */
-.invite-manager-modal {
-  width: 800px;
-  max-height: 600px;
-  background: #18191c;
-  border-radius: 8px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.invite-manager-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.invite-manager-header h2 {
-  margin: 0;
-  font-size: 1.25em;
-}
-
-.invite-manager-close {
-  width: 32px;
-  height: 32px;
-  background: transparent;
-  border: none;
-  color: #b9bbbe;
-  cursor: pointer;
-  border-radius: 4px;
-  font-size: 1.2em;
-}
-
-.invite-manager-close:hover {
-  background: #2f3136;
-  color: #fff;
-}
-
-.invite-manager-actions {
-  padding: 12px 20px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.invite-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0 20px;
-}
-
-.no-invites {
-  text-align: center;
-  padding: 40px;
-  color: #666;
-}
-
-.invite-list-header {
-  display: grid;
-  grid-template-columns: 150px 120px 80px 80px 100px 50px;
-  gap: 12px;
-  padding: 12px 0;
-  font-size: 0.75em;
-  text-transform: uppercase;
-  color: #666;
-  font-weight: 600;
-  border-bottom: 1px solid #2f3136;
-}
-
-.invite-item {
-  display: grid;
-  grid-template-columns: 150px 120px 80px 80px 100px 50px;
-  gap: 12px;
-  align-items: center;
-  padding: 12px 0;
-  border-bottom: 1px solid #0f0f0f;
-}
-
-.invite-code {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.invite-code code {
-  background: #0f0f0f;
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-family: 'Roboto Mono', monospace;
-}
-
-.copy-btn {
-  width: 24px;
-  height: 24px;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  border-radius: 4px;
-}
-
-.copy-btn:hover {
-  background: #2f3136;
-}
-
-.copy-btn.copied {
-  color: #3ba55d;
-}
-
-.invite-channel {
-  color: #b9bbbe;
-}
-
-.invite-uses {
-  color: #b9bbbe;
-}
-
-.invite-expires {
-  color: #b9bbbe;
-}
-
-.invite-creator {
-  color: #666;
-}
-
-.delete-invite-btn {
-  width: 28px;
-  height: 28px;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  border-radius: 4px;
-  color: #666;
-}
-
-.delete-invite-btn:hover {
-  background: #ed4245;
-  color: #fff;
-}
-
-.invite-manager-footer {
-  padding: 12px 20px;
-  border-top: 1px solid #2f3136;
-}
-
-.invite-hint {
-  font-size: 0.85em;
-  color: #666;
-}
-
-.create-invite-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0,0,0,0.7);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1001;
-}
-
-.create-invite-modal {
-  background: #18191c;
-  border-radius: 8px;
-  padding: 20px;
-  width: 400px;
-}
-
-.create-invite-modal h3 {
-  margin: 0 0 20px 0;
-}
-
-.create-field {
-  margin-bottom: 16px;
-}
-
-.create-field label {
-  display: block;
-  margin-bottom: 6px;
-  font-size: 0.85em;
-  color: #b9bbbe;
-}
-
-.create-field select {
-  width: 100%;
-  padding: 10px 12px;
-  background: #2f3136;
-  border: none;
-  border-radius: 4px;
-  color: #e0e0e0;
-}
-
-.create-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  margin-top: 20px;
-}
-
-.generate-btn {
-  padding: 10px 20px;
-  background: #5865f2;
-  border: none;
-  border-radius: 4px;
-  color: #fff;
-  cursor: pointer;
-}
-
-.generate-btn:hover {
-  background: #4752c4;
-}
-
-/* ==================== NOTIFICATION SETTINGS ==================== */
-.notification-settings-modal {
-  width: 480px;
-  background: #18191c;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.notif-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.notif-header h2 {
-  margin: 0;
-  font-size: 1.25em;
-}
-
-.notif-close {
-  width: 32px;
-  height: 32px;
-  background: transparent;
-  border: none;
-  color: #b9bbbe;
-  cursor: pointer;
-  border-radius: 4px;
-  font-size: 1.2em;
-}
-
-.notif-close:hover {
-  background: #2f3136;
-  color: #fff;
-}
-
-.notif-target {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 16px 20px;
-  background: #0f0f0f;
-  border-bottom: 1px solid #2f3136;
-}
-
-.target-icon {
-  font-size: 1.2em;
-  color: #666;
-}
-
-.target-name {
-  font-weight: 600;
-}
-
-.notif-content {
-  padding: 20px;
-  max-height: 400px;
-  overflow-y: auto;
-}
-
-.notif-section {
-  margin-bottom: 24px;
-}
-
-.notif-section h3 {
-  margin: 0 0 12px 0;
-  font-size: 1em;
-}
-
-.notif-options {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.notif-option {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 12px;
-  background: #0f0f0f;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background 0.2s;
-}
-
-.notif-option:hover {
-  background: #1f2023;
-}
-
-.notif-option.selected {
-  background: rgba(88, 101, 242, 0.2);
-  border: 1px solid #5865f2;
-}
-
-.notif-option input {
-  margin-top: 2px;
-  accent-color: #5865f2;
-}
-
-.option-content {
-  flex: 1;
-}
-
-.option-label {
-  display: block;
-  font-weight: 500;
-  margin-bottom: 2px;
-}
-
-.option-desc {
-  font-size: 0.85em;
-  color: #666;
-}
-
-.mute-select {
-  width: 100%;
-  padding: 10px 14px;
-  background: #2f3136;
-  border: none;
-  border-radius: 4px;
-  color: #e0e0e0;
-}
-
-.suppress-options {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.suppress-option {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  cursor: pointer;
-}
-
-.suppress-option input {
-  width: 18px;
-  height: 18px;
-  accent-color: #5865f2;
-}
-
-.toggle-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.toggle-row h3 {
-  margin: 0;
-}
-
-.toggle-row p {
-  margin: 4px 0 0 0;
-  font-size: 0.85em;
-  color: #666;
-}
-
-.channel-overrides {
-  padding-top: 20px;
-  border-top: 1px solid #2f3136;
-}
-
-.override-hint {
-  font-size: 0.85em;
-  color: #666;
-  margin-bottom: 12px;
-}
-
-.override-list {
-  background: #0f0f0f;
-  border-radius: 4px;
-  margin-bottom: 12px;
-}
-
-.override-item {
-  display: flex;
-  justify-content: space-between;
-  padding: 10px 12px;
-  border-bottom: 1px solid #18191c;
-}
-
-.override-item:last-child {
-  border-bottom: none;
-}
-
-.override-value {
-  color: #666;
-}
-
-.notif-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 16px 20px;
-  background: #0f0f0f;
-  border-top: 1px solid #2f3136;
-}
-
-/* ==================== SERVER TEMPLATE ==================== */
-.server-template-modal {
-  width: 700px;
-  max-height: 80vh;
-  background: #18191c;
-  border-radius: 8px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.template-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  border-bottom: 1px solid #2f3136;
-}
-
-.template-header h2 {
-  margin: 0;
-  font-size: 1.25em;
-}
-
-.template-close {
-  width: 32px;
-  height: 32px;
-  background: transparent;
-  border: none;
-  color: #b9bbbe;
-  cursor: pointer;
-  border-radius: 4px;
-  font-size: 1.2em;
-}
-
-.template-close:hover {
-  background: #2f3136;
-  color: #fff;
-}
-
-.template-tabs {
-  display: flex;
-  border-bottom: 1px solid #2f3136;
-}
-
-.template-tab {
-  flex: 1;
-  padding: 12px;
-  background: transparent;
-  border: none;
-  color: #b9bbbe;
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
-}
-
-.template-tab:hover {
-  color: #fff;
-}
-
-.template-tab.active {
-  color: #fff;
-  border-bottom-color: #5865f2;
-}
-
-.template-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 20px;
-}
-
-.template-intro {
-  color: #b9bbbe;
-  margin-bottom: 20px;
-}
-
-.template-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 12px;
-}
-
-.template-card {
-  background: #0f0f0f;
-  border-radius: 8px;
-  padding: 16px;
-  cursor: pointer;
-  transition: all 0.2s;
-  border: 2px solid transparent;
-}
-
-.template-card:hover {
-  background: #1f2023;
-}
-
-.template-card.selected {
-  border-color: #5865f2;
-  background: rgba(88, 101, 242, 0.1);
-}
-
-.template-card .template-icon {
-  font-size: 2em;
-  margin-bottom: 12px;
-}
-
-.template-card .template-info h3 {
-  margin: 0 0 4px 0;
-  font-size: 1.1em;
-}
-
-.template-card .template-info p {
-  margin: 0;
-  font-size: 0.85em;
-  color: #666;
-}
-
-.template-preview {
-  display: flex;
-  gap: 16px;
-  margin-top: 12px;
-  padding-top: 12px;
-  border-top: 1px solid #2f3136;
-}
-
-.preview-section {
-  display: flex;
-  gap: 6px;
-  font-size: 0.85em;
-}
-
-.preview-label {
-  color: #666;
-}
-
-.preview-count {
-  font-weight: 600;
-}
-
-.template-detail {
-  margin-top: 20px;
-  padding: 16px;
-  background: #0f0f0f;
-  border-radius: 8px;
-}
-
-.template-detail h3 {
-  margin: 0 0 16px 0;
-}
-
-.detail-section {
-  margin-bottom: 16px;
-}
-
-.detail-section:last-child {
-  margin-bottom: 0;
-}
-
-.detail-section h4 {
-  margin: 0 0 8px 0;
-  font-size: 0.85em;
-  color: #b9bbbe;
-}
-
-.detail-items {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.detail-item {
-  padding: 4px 10px;
-  background: #2f3136;
-  border-radius: 4px;
-  font-size: 0.85em;
-}
-
-.detail-item.role {
-  color: #5865f2;
-}
-
-.my-templates .no-templates {
-  text-align: center;
-  padding: 40px;
-}
-
-.no-templates-icon {
-  font-size: 3em;
-  display: block;
-  margin-bottom: 12px;
-}
-
-.no-templates p {
-  margin: 0 0 4px 0;
-  color: #b9bbbe;
-}
-
-.no-templates span {
-  font-size: 0.85em;
-  color: #666;
-}
-
-.template-list-item {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 16px;
-  background: #0f0f0f;
-  border-radius: 8px;
-  margin-bottom: 12px;
-  cursor: pointer;
-  border: 2px solid transparent;
-}
-
-.template-list-item:hover {
-  background: #1f2023;
-}
-
-.template-list-item.selected {
-  border-color: #5865f2;
-}
-
-.template-list-item .template-icon {
-  font-size: 2em;
-}
-
-.template-list-item .template-info {
-  flex: 1;
-}
-
-.template-list-item .template-info h3 {
-  margin: 0 0 4px 0;
-}
-
-.template-list-item .template-info p {
-  margin: 0 0 4px 0;
-  font-size: 0.85em;
-  color: #666;
-}
-
-.template-date {
-  font-size: 0.8em;
-  color: #666;
-}
-
-.template-action-btn {
-  width: 32px;
-  height: 32px;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  border-radius: 4px;
-}
-
-.template-action-btn:hover {
-  background: #2f3136;
-}
-
-.create-template .create-intro {
-  color: #b9bbbe;
-  margin-bottom: 20px;
-}
-
-.create-form .form-group {
-  margin-bottom: 20px;
-}
-
-.create-form .form-group label {
-  display: block;
-  margin-bottom: 8px;
-  font-weight: 500;
-}
-
-.create-form input[type="text"],
-.create-form textarea {
-  width: 100%;
-  padding: 12px;
-  background: #0a0a0a;
-  border: 1px solid #2f3136;
-  border-radius: 4px;
-  color: #e0e0e0;
-  font-family: inherit;
-}
-
-.create-form input:focus,
-.create-form textarea:focus {
-  outline: none;
-  border-color: #5865f2;
-}
-
-.include-options {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.include-option {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  cursor: pointer;
-}
-
-.include-option input {
-  width: 18px;
-  height: 18px;
-  accent-color: #5865f2;
-}
-
-.template-warning {
-  display: flex;
-  gap: 10px;
-  padding: 12px;
-  background: rgba(250, 166, 26, 0.1);
-  border: 1px solid #faa61a;
-  border-radius: 4px;
-  color: #faa61a;
-  font-size: 0.9em;
-}
-
-.template-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 16px 20px;
-  background: #0f0f0f;
-  border-top: 1px solid #2f3136;
-}
-
-.apply-btn {
-  padding: 10px 20px;
-  background: #5865f2;
-  border: none;
-  border-radius: 4px;
-  color: #fff;
-  cursor: pointer;
-  font-weight: 500;
-}
-
-.apply-btn:hover {
-  background: #4752c4;
-}
-
-.apply-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* ==================== LANDING PAGE ==================== */
-.landing-page {
-  min-height: 100vh;
-  background: #0a0a0a;
-  color: #e0e0e0;
-}
-
-.landing-nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px 60px;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  background: rgba(10, 10, 10, 0.9);
-  backdrop-filter: blur(10px);
-  z-index: 100;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-}
-
-.nav-brand {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  font-size: 1.25em;
-  font-weight: 700;
-  color: #fff;
-  text-decoration: none;
-}
-
-.brand-icon {
-  font-size: 1.5em;
-  color: #ff0000;
-}
-
-.nav-links {
-  display: flex;
-  gap: 32px;
-}
-
-.nav-links a {
-  color: #b9bbbe;
-  text-decoration: none;
-  font-weight: 500;
-  transition: color 0.2s;
-}
-
-.nav-links a:hover,
-.nav-links a.active {
-  color: #fff;
-}
-
-.nav-auth {
-  display: flex;
-  gap: 12px;
-}
-
-.nav-login {
-  padding: 10px 20px;
-  color: #b9bbbe;
-  text-decoration: none;
-  font-weight: 500;
-  transition: color 0.2s;
-}
-
-.nav-login:hover {
-  color: #fff;
-}
-
-.nav-register {
-  padding: 10px 24px;
-  background: #5865f2;
-  color: #fff;
-  text-decoration: none;
-  border-radius: 4px;
-  font-weight: 500;
-  transition: background 0.2s;
-}
-
-.nav-register:hover {
-  background: #4752c4;
-}
-
-.hero {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 100vh;
-  padding: 120px 60px 60px;
-  gap: 60px;
-  overflow: hidden;
-}
-
-.hero-content {
-  position: relative;
-  z-index: 10;
-  flex: 1;
-  max-width: 600px;
-}
-
-.hero-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 100px;
-  font-size: 0.85em;
-  color: #b9bbbe;
-  margin-bottom: 24px;
-}
-
-.badge-dot {
-  width: 8px;
-  height: 8px;
-  background: #3ba55d;
-  border-radius: 50%;
-  animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}
-
-.hero-title {
-  font-size: 4em;
-  font-weight: 800;
-  line-height: 1.1;
-  margin: 0 0 24px;
-  color: #fff;
-}
-
-.gradient-text {
-  background: linear-gradient(135deg, #ff0000, #0066ff, #ffa500);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.hero-subtitle {
-  font-size: 1.25em;
-  color: #b9bbbe;
-  line-height: 1.6;
-  margin-bottom: 32px;
-}
-
-.hero-actions {
-  display: flex;
-  gap: 16px;
-  margin-bottom: 48px;
-}
-
-.cta-primary {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 16px 32px;
-  background: linear-gradient(135deg, #ff0000, #cc0000);
-  color: #fff;
-  text-decoration: none;
-  border-radius: 4px;
-  font-weight: 600;
-  font-size: 1.1em;
-  transition: all 0.2s;
-}
-
-.cta-primary:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 10px 30px rgba(255, 0, 0, 0.3);
-}
-
-.cta-arrow {
-  transition: transform 0.2s;
-}
-
-.cta-primary:hover .cta-arrow {
-  transform: translateX(4px);
-}
-
-.cta-secondary {
-  display: inline-flex;
-  align-items: center;
-  padding: 16px 32px;
-  background: transparent;
-  border: 1px solid #333;
-  color: #b9bbbe;
-  text-decoration: none;
-  border-radius: 4px;
-  font-weight: 500;
-  transition: all 0.2s;
-}
-
-.cta-secondary:hover {
-  background: rgba(255, 255, 255, 0.05);
-  border-color: #555;
-  color: #fff;
-}
-
-.hero-stats {
-  display: flex;
-  align-items: center;
-  gap: 32px;
-}
-
-.stat {
-  text-align: center;
-}
-
-.stat-value {
-  display: block;
-  font-size: 1.5em;
-  font-weight: 700;
-  color: #fff;
-}
-
-.stat-label {
-  font-size: 0.85em;
-  color: #666;
-}
-
-.stat-divider {
-  width: 1px;
-  height: 40px;
-  background: #333;
-}
-
-.hero-visual {
-  position: relative;
-  z-index: 10;
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.app-preview {
-  width: 500px;
-  height: 350px;
-  background: #18191c;
-  border-radius: 12px;
-  overflow: hidden;
-  border: 1px solid #2f3136;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
-}
-
-.preview-header {
-  padding: 12px 16px;
-  background: #0f0f0f;
-  border-bottom: 1px solid #2f3136;
-}
-
-.preview-dots {
-  display: flex;
-  gap: 8px;
-}
-
-.preview-dots span {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background: #333;
-}
-
-.preview-dots span:first-child { background: #ff5f56; }
-.preview-dots span:nth-child(2) { background: #ffbd2e; }
-.preview-dots span:last-child { background: #27c93f; }
-
-.preview-content {
-  display: flex;
-  height: calc(100% - 40px);
-}
-
-.preview-sidebar {
-  width: 72px;
-  background: #0f0f0f;
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.preview-server {
-  width: 48px;
-  height: 48px;
-  background: #2f3136;
-  border-radius: 50%;
-  transition: border-radius 0.2s;
-}
-
-.preview-server.active {
-  background: linear-gradient(135deg, #ff0000, #cc0000);
-  border-radius: 16px;
-}
-
-.preview-channels {
-  width: 200px;
-  background: #18191c;
-  padding: 16px;
-}
-
-.preview-channel {
-  height: 28px;
-  background: #2f3136;
-  border-radius: 4px;
-  margin-bottom: 8px;
-  opacity: 0.5;
-}
-
-.preview-channel.active {
-  background: rgba(255, 255, 255, 0.1);
-  opacity: 1;
-}
-
-.preview-chat {
-  flex: 1;
-  padding: 16px;
-}
-
-.preview-message {
-  height: 60px;
-  background: #0f0f0f;
-  border-radius: 4px;
-  margin-bottom: 12px;
-}
-
-.preview-message.short {
-  width: 70%;
-}
-
-.features-section {
-  padding: 100px 60px;
-  background: #0f0f0f;
-}
-
-.section-title {
-  font-size: 2.5em;
-  text-align: center;
-  margin-bottom: 16px;
-  color: #fff;
-}
-
-.section-subtitle {
-  text-align: center;
-  color: #666;
-  font-size: 1.1em;
-  margin-bottom: 60px;
-}
-
-.features-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 32px;
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.feature-card {
-  padding: 32px;
-  background: #18191c;
-  border-radius: 12px;
-  border: 1px solid #2f3136;
-  transition: all 0.3s;
-}
-
-.feature-card:hover {
-  transform: translateY(-4px);
-  border-color: #5865f2;
-}
-
-.feature-icon {
-  font-size: 2.5em;
-  margin-bottom: 16px;
-  display: block;
-}
-
-.feature-card h3 {
-  margin: 0 0 8px;
-  font-size: 1.25em;
-  color: #fff;
-}
-
-.feature-card p {
-  margin: 0;
-  color: #b9bbbe;
-  line-height: 1.5;
-}
-
-/* ==================== AUTH PAGES ==================== */
-.auth-page {
-  min-height: 100vh;
-  display: flex;
-  background: #0a0a0a;
-}
-
-.auth-container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 40px;
-}
-
-.auth-header {
-  margin-bottom: 40px;
-}
-
-.auth-brand {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  color: #fff;
-  text-decoration: none;
-  font-size: 1.25em;
-  font-weight: 700;
-}
-
-.auth-brand .brand-icon {
-  font-size: 1.5em;
-  color: #ff0000;
-}
-
-.auth-card {
-  width: 100%;
-  max-width: 440px;
-  padding: 40px;
-  background: #18191c;
-  border-radius: 8px;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
-}
-
-.auth-card h1 {
-  margin: 0 0 8px;
-  font-size: 1.75em;
-  color: #fff;
-  text-align: center;
-}
-
-.auth-subtitle {
-  text-align: center;
-  color: #b9bbbe;
-  margin-bottom: 24px;
-}
-
-.auth-error {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px;
-  background: rgba(237, 66, 69, 0.1);
-  border: 1px solid #ed4245;
-  border-radius: 4px;
-  color: #ed4245;
-  margin-bottom: 16px;
-}
-
-.auth-form {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.form-group label {
-  font-size: 0.75em;
-  font-weight: 700;
-  text-transform: uppercase;
-  color: #b9bbbe;
-}
-
-.form-group .required {
-  color: #ed4245;
-}
-
-.form-group input {
-  padding: 12px 14px;
-  background: #0a0a0a;
-  border: 1px solid #2f3136;
-  border-radius: 4px;
-  color: #e0e0e0;
-  font-size: 1em;
-  transition: border-color 0.2s;
-}
-
-.form-group input:focus {
-  outline: none;
-  border-color: #5865f2;
-}
-
-.form-group input:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.forgot-link {
-  font-size: 0.85em;
-  color: #00aff4;
-  text-decoration: none;
-  margin-top: 4px;
-}
-
-.forgot-link:hover {
-  text-decoration: underline;
-}
-
-.auth-submit {
-  padding: 14px;
-  background: #5865f2;
-  border: none;
-  border-radius: 4px;
-  color: #fff;
-  font-size: 1em;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background 0.2s;
-  margin-top: 8px;
-}
-
-.auth-submit:hover {
-  background: #4752c4;
-}
-
-.auth-submit:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.terms-checkbox {
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  font-size: 0.9em;
-  color: #b9bbbe;
-  cursor: pointer;
-}
-
-.terms-checkbox input {
-  width: 18px;
-  height: 18px;
-  accent-color: #5865f2;
-  margin-top: 2px;
-}
-
-.terms-checkbox a {
-  color: #00aff4;
-  text-decoration: none;
-}
-
-.terms-checkbox a:hover {
-  text-decoration: underline;
-}
-
-.auth-switch {
-  text-align: center;
-  margin-top: 16px;
-  color: #b9bbbe;
-  font-size: 0.9em;
-}
-
-.auth-switch a {
-  color: #00aff4;
-  text-decoration: none;
-}
-
-.auth-switch a:hover {
-  text-decoration: underline;
-}
-
-.auth-footer {
-  margin-top: 24px;
-}
-
-.auth-footer a {
-  color: #666;
-  text-decoration: none;
-  font-size: 0.9em;
-}
-
-.auth-footer a:hover {
-  color: #b9bbbe;
-}
-
-.auth-visual {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: linear-gradient(135deg, #0a0a0a, #18191c);
-  position: relative;
-  overflow: hidden;
-}
-
-.visual-content {
-  text-align: center;
-  z-index: 1;
-}
-
-.trinity-logo {
-  width: 200px;
-  height: 200px;
-  position: relative;
-  margin: 0 auto 32px;
-}
-
-.trinity-ring {
-  position: absolute;
-  border-radius: 50%;
-  border: 3px solid;
-  animation: spin 20s linear infinite;
-}
-
-.trinity-ring.foundation {
-  width: 100%;
-  height: 100%;
-  border-color: #ff0000;
-}
-
-.trinity-ring.corporation {
-  width: 75%;
-  height: 75%;
-  top: 12.5%;
-  left: 12.5%;
-  border-color: #0066ff;
-  animation-direction: reverse;
-  animation-duration: 15s;
-}
-
-.trinity-ring.labs {
-  width: 50%;
-  height: 50%;
-  top: 25%;
-  left: 25%;
-  border-color: #ffa500;
-  animation-duration: 10s;
-}
-
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-.visual-content h2 {
-  font-size: 2em;
-  margin: 0 0 8px;
-  color: #fff;
-}
-
-.visual-content p {
-  color: #666;
-}
-
-.register-card {
-  max-width: 480px;
-}
-
-/* ==================== INFO PAGES (About, Features) ==================== */
-.info-page {
-  min-height: 100vh;
-  background: #0a0a0a;
-  color: #e0e0e0;
-}
-
-.info-nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px 60px;
-  background: rgba(10, 10, 10, 0.95);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-  position: sticky;
-  top: 0;
-  z-index: 100;
-}
-
-.info-content {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 80px 60px;
-}
-
-.about-hero,
-.features-hero {
-  text-align: center;
-  margin-bottom: 80px;
-}
-
-.about-hero h1,
-.features-hero h1 {
-  font-size: 3em;
-  margin: 0 0 16px;
-  color: #fff;
-}
-
-.hero-desc {
-  font-size: 1.25em;
-  color: #b9bbbe;
-  max-width: 600px;
-  margin: 0 auto;
-}
-
-.about-section {
-  margin-bottom: 80px;
-}
-
-.about-section h2 {
-  font-size: 2em;
-  margin: 0 0 24px;
-  color: #fff;
-}
-
-.section-intro {
-  color: #b9bbbe;
-  margin-bottom: 32px;
-}
-
-.mission-content {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 40px;
-}
-
-.mission-text p {
-  margin: 0 0 16px;
-  line-height: 1.7;
-  color: #b9bbbe;
-}
-
-.mission-text strong {
-  color: #fff;
-}
-
-.mission-values {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.value-card {
-  padding: 24px;
-  background: #18191c;
-  border-radius: 8px;
-  border: 1px solid #2f3136;
-}
-
-.value-icon {
-  font-size: 2em;
-  margin-bottom: 12px;
-  display: block;
-}
-
-.value-card h3 {
-  margin: 0 0 8px;
-  color: #fff;
-}
-
-.value-card p {
-  margin: 0;
-  color: #666;
-  font-size: 0.9em;
-}
-
-.trinity-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 24px;
-}
-
-.trinity-card {
-  padding: 32px;
-  background: #18191c;
-  border-radius: 12px;
-  border: 2px solid #2f3136;
-  text-align: center;
-  transition: all 0.3s;
-}
-
-.trinity-card.foundation {
-  border-color: #ff0000;
-}
-
-.trinity-card.corporation {
-  border-color: #0066ff;
-}
-
-.trinity-card.labs {
-  border-color: #ffa500;
-}
-
-.trinity-card:hover {
-  transform: translateY(-4px);
-}
-
-.trinity-icon {
-  font-size: 3em;
-  margin-bottom: 16px;
-}
-
-.trinity-card h3 {
-  margin: 0 0 8px;
-  color: #fff;
-  font-size: 1.5em;
-}
-
-.trinity-card p {
-  margin: 0;
-  color: #b9bbbe;
-}
-
-.timeline {
-  position: relative;
-  padding-left: 40px;
-}
-
-.timeline::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 2px;
-  background: linear-gradient(to bottom, #ff0000, #0066ff, #ffa500);
-}
-
-.timeline-item {
-  position: relative;
-  padding-bottom: 40px;
-}
-
-.timeline-item::before {
-  content: '';
-  position: absolute;
-  left: -44px;
-  top: 4px;
-  width: 12px;
-  height: 12px;
-  background: #5865f2;
-  border-radius: 50%;
-  border: 3px solid #0a0a0a;
-}
-
-.timeline-year {
-  font-size: 0.85em;
-  font-weight: 600;
-  color: #5865f2;
-  margin-bottom: 8px;
-}
-
-.timeline-content h3 {
-  margin: 0 0 8px;
-  color: #fff;
-}
-
-.timeline-content p {
-  margin: 0;
-  color: #b9bbbe;
-}
-
-.team-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 24px;
-}
-
-.team-card {
-  padding: 32px;
-  background: #18191c;
-  border-radius: 8px;
-  text-align: center;
-}
-
-.team-avatar {
-  width: 80px;
-  height: 80px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 2em;
-  font-weight: 700;
-  margin: 0 auto 16px;
-  color: #fff;
-}
-
-.team-card h3 {
-  margin: 0 0 4px;
-  color: #fff;
-}
-
-.team-card p {
-  margin: 0;
-  color: #666;
-  font-size: 0.9em;
-}
-
-.about-cta,
-.features-cta {
-  text-align: center;
-  padding: 60px;
-  background: #18191c;
-  border-radius: 12px;
-  margin-top: 60px;
-}
-
-.about-cta h2,
-.features-cta h2 {
-  margin: 0 0 12px;
-  font-size: 2em;
-  color: #fff;
-}
-
-.about-cta p,
-.features-cta p {
-  margin: 0 0 32px;
-  color: #b9bbbe;
-}
-
-.cta-actions {
-  display: flex;
-  gap: 16px;
-  justify-content: center;
-}
-
-.feature-category {
-  margin-bottom: 60px;
-}
-
-.feature-category h2 {
-  font-size: 1.75em;
-  margin: 0 0 24px;
-  color: #fff;
-}
-
-.comparison-section {
-  margin-top: 80px;
-}
-
-.comparison-section h2 {
-  font-size: 2em;
-  text-align: center;
-  margin: 0 0 40px;
-  color: #fff;
-}
-
-.comparison-table-container {
-  overflow-x: auto;
-}
-
-.comparison-table {
-  width: 100%;
-  border-collapse: collapse;
-  background: #18191c;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.comparison-table th,
-.comparison-table td {
-  padding: 16px 24px;
-  text-align: center;
-  border-bottom: 1px solid #2f3136;
-}
-
-.comparison-table th {
-  background: #0f0f0f;
-  font-weight: 600;
-  color: #b9bbbe;
-}
-
-.comparison-table th.highlight {
-  color: #5865f2;
-}
-
-.comparison-table td {
-  color: #666;
-}
-
-.comparison-table td.highlight {
-  color: #3ba55d;
-  font-weight: 600;
-}
-
-.comparison-table td:first-child {
-  text-align: left;
-  font-weight: 500;
-  color: #e0e0e0;
-}
-
-.info-footer {
-  border-top: 1px solid #2f3136;
-  padding: 40px 60px;
-}
-
-.footer-content {
-  max-width: 1200px;
-  margin: 0 auto;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.footer-brand {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-weight: 600;
-  color: #fff;
-}
-
-.footer-brand .brand-icon {
-  color: #ff0000;
-}
-
-.footer-links {
-  display: flex;
-  gap: 24px;
-}
-
-.footer-links a {
-  color: #b9bbbe;
-  text-decoration: none;
-  font-size: 0.9em;
-}
-
-.footer-links a:hover {
-  color: #fff;
-}
-
-.footer-copy {
-  color: #666;
-  font-size: 0.85em;
-}
-
-/* Loading screen */
-.loading-screen {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background: #0a0a0a;
-  color: #b9bbbe;
-  gap: 16px;
-}
-
-.loading-spinner {
-  width: 40px;
-  height: 40px;
-  border: 3px solid #2f3136;
-  border-top-color: #5865f2;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-/* Responsive */
-@media (max-width: 1024px) {
-  .hero {
-    flex-direction: column;
-    text-align: center;
-    padding-top: 140px;
-  }
-
-  .hero-title {
-    font-size: 3em;
-  }
-
-  .hero-actions {
-    justify-content: center;
-  }
-
-  .hero-stats {
-    justify-content: center;
-  }
-
-  .hero-visual {
-    display: none;
-  }
-
-  .features-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .mission-content {
-    grid-template-columns: 1fr;
-  }
-
-  .trinity-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .auth-visual {
-    display: none;
-  }
-}
-
-@media (max-width: 768px) {
-  .landing-nav,
-  .info-nav {
-    padding: 16px 20px;
-  }
-
-  .nav-links {
-    display: none;
-  }
-
-  .hero {
-    padding: 100px 20px 40px;
-  }
-
-  .hero-title {
-    font-size: 2em;
-  }
-
-  .hero-subtitle {
-    font-size: 1em;
-  }
-
-  .hero-actions {
-    flex-direction: column;
-  }
-
-  .features-section,
-  .info-content {
-    padding: 40px 20px;
-  }
-
-  .features-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .auth-container {
-    padding: 20px;
-  }
-
-  .auth-card {
-    padding: 24px;
-  }
-
-  .footer-content {
-    flex-direction: column;
-    gap: 20px;
-    text-align: center;
-  }
-}
diff --git a/src/frontend/mockup/pages/AboutPage.jsx b/src/frontend/mockup/pages/AboutPage.jsx
deleted file mode 100644
index 885e0e9..0000000
--- a/src/frontend/mockup/pages/AboutPage.jsx
+++ /dev/null
@@ -1,163 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-
-export default function AboutPage() {
-  const team = [
-    { name: 'Trevor', role: 'Founder & Lead Developer', avatar: 'T', color: '#ff0000' },
-    { name: 'Open Source', role: 'Community Contributors', avatar: '👥', color: '#5865f2' },
-  ];
-
-  const timeline = [
-    { year: '2024', event: 'AeThex Foundation established', desc: 'Core infrastructure and passport system development begins' },
-    { year: '2025', event: 'AeThex Connect launched', desc: 'Open source Discord alternative enters alpha' },
-    { year: '2026', event: 'Public beta release', desc: 'Full feature parity achieved, community growth accelerates' },
-  ];
-
-  return (
-    <div className="info-page">
-      <nav className="info-nav">
-        <Link to="/" className="nav-brand">
-          <span className="brand-icon">◈</span>
-          <span className="brand-text">AeThex Connect</span>
-        </Link>
-        <div className="nav-links">
-          <Link to="/features">Features</Link>
-          <Link to="/about" className="active">About</Link>
-          <a href="https://github.com/AeThex-Corporation" target="_blank" rel="noopener noreferrer">GitHub</a>
-        </div>
-        <div className="nav-auth">
-          <Link to="/login" className="nav-login">Login</Link>
-          <Link to="/register" className="nav-register">Get Started</Link>
-        </div>
-      </nav>
-
-      <main className="info-content">
-        <section className="about-hero">
-          <h1>About <span className="gradient-text">AeThex</span></h1>
-          <p className="hero-desc">
-            Building the future of decentralized communication, one line of code at a time.
-          </p>
-        </section>
-
-        <section className="about-section">
-          <h2>Our Mission</h2>
-          <div className="mission-content">
-            <div className="mission-text">
-              <p>
-                AeThex was founded on a simple belief: <strong>your data belongs to you</strong>. 
-                In a world where major platforms profit from your conversations, we chose a different path.
-              </p>
-              <p>
-                AeThex Connect is our answer to the centralized communication monopoly. 
-                It's not just an alternative to Discord—it's a statement that privacy, security, 
-                and user ownership can coexist with a world-class communication experience.
-              </p>
-              <p>
-                As an open-source project, every line of our code is public. 
-                We believe transparency isn't just nice to have—it's essential for trust.
-              </p>
-            </div>
-            <div className="mission-values">
-              <div className="value-card">
-                <span className="value-icon">🔒</span>
-                <h3>Privacy First</h3>
-                <p>End-to-end encryption by default. We can't read your messages even if we wanted to.</p>
-              </div>
-              <div className="value-card">
-                <span className="value-icon">🌐</span>
-                <h3>Open Source</h3>
-                <p>100% of our code is public. Audit it, fork it, contribute to it.</p>
-              </div>
-              <div className="value-card">
-                <span className="value-icon">⚡</span>
-                <h3>User Owned</h3>
-                <p>Your identity, your data, your control. Forever.</p>
-              </div>
-            </div>
-          </div>
-        </section>
-
-        <section className="about-section trinity-section">
-          <h2>The Trinity</h2>
-          <p className="section-intro">AeThex operates as three interconnected divisions</p>
-          <div className="trinity-grid">
-            <div className="trinity-card foundation">
-              <div className="trinity-icon">🏛️</div>
-              <h3>Foundation</h3>
-              <p>The core. Authentication, security infrastructure, and the Passport identity system.</p>
-            </div>
-            <div className="trinity-card corporation">
-              <div className="trinity-icon">🏢</div>
-              <h3>Corporation</h3>
-              <p>Enterprise solutions, business integrations, and commercial support services.</p>
-            </div>
-            <div className="trinity-card labs">
-              <div className="trinity-icon">🔬</div>
-              <h3>Labs</h3>
-              <p>Experimental features, R&D, and cutting-edge technology development.</p>
-            </div>
-          </div>
-        </section>
-
-        <section className="about-section">
-          <h2>Our Journey</h2>
-          <div className="timeline">
-            {timeline.map((item, i) => (
-              <div key={i} className="timeline-item">
-                <div className="timeline-year">{item.year}</div>
-                <div className="timeline-content">
-                  <h3>{item.event}</h3>
-                  <p>{item.desc}</p>
-                </div>
-              </div>
-            ))}
-          </div>
-        </section>
-
-        <section className="about-section">
-          <h2>The Team</h2>
-          <div className="team-grid">
-            {team.map((member, i) => (
-              <div key={i} className="team-card">
-                <div className="team-avatar" style={{ background: member.color }}>
-                  {member.avatar}
-                </div>
-                <h3>{member.name}</h3>
-                <p>{member.role}</p>
-              </div>
-            ))}
-          </div>
-        </section>
-
-        <section className="about-cta">
-          <h2>Ready to join the revolution?</h2>
-          <p>Be part of the community shaping the future of communication.</p>
-          <div className="cta-actions">
-            <Link to="/register" className="cta-primary">Create Account</Link>
-            <a href="https://github.com/AeThex-Corporation/AeThex-Connect" className="cta-secondary" target="_blank" rel="noopener noreferrer">
-              View on GitHub
-            </a>
-          </div>
-        </section>
-      </main>
-
-      <footer className="info-footer">
-        <div className="footer-content">
-          <div className="footer-brand">
-            <span className="brand-icon">◈</span>
-            <span>AeThex Connect</span>
-          </div>
-          <div className="footer-links">
-            <Link to="/features">Features</Link>
-            <Link to="/about">About</Link>
-            <Link to="/privacy">Privacy</Link>
-            <Link to="/terms">Terms</Link>
-          </div>
-          <div className="footer-copy">
-            © 2026 AeThex Corporation. Open source under MIT License.
-          </div>
-        </div>
-      </footer>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/pages/FeaturesPage.jsx b/src/frontend/mockup/pages/FeaturesPage.jsx
deleted file mode 100644
index 64fcf3f..0000000
--- a/src/frontend/mockup/pages/FeaturesPage.jsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-
-export default function FeaturesPage() {
-  const featureCategories = [
-    {
-      title: 'Communication',
-      features: [
-        { icon: '💬', name: 'Real-time Messaging', desc: 'Instant message delivery with typing indicators, reactions, and rich embeds' },
-        { icon: '🎙️', name: 'Voice Channels', desc: 'Crystal-clear voice chat with noise suppression and echo cancellation' },
-        { icon: '📹', name: 'Video Calls', desc: 'HD video calls with screen sharing and virtual backgrounds' },
-        { icon: '🧵', name: 'Threads', desc: 'Organized conversations that keep your channels clean' },
-        { icon: '📌', name: 'Pinned Messages', desc: 'Save important messages for easy access' },
-        { icon: '🔍', name: 'Powerful Search', desc: 'Find any message, file, or conversation instantly' },
-      ]
-    },
-    {
-      title: 'Community',
-      features: [
-        { icon: '🏠', name: 'Servers', desc: 'Create communities with unlimited channels and categories' },
-        { icon: '🎭', name: 'Roles & Permissions', desc: 'Granular control over who can do what' },
-        { icon: '📢', name: 'Announcements', desc: 'Broadcast to your community with announcement channels' },
-        { icon: '📅', name: 'Events', desc: 'Schedule and manage community events' },
-        { icon: '🎪', name: 'Stage Channels', desc: 'Host live audio events for large audiences' },
-        { icon: '💬', name: 'Forum Channels', desc: 'Organized discussion boards for your community' },
-      ]
-    },
-    {
-      title: 'Security & Privacy',
-      features: [
-        { icon: '🔐', name: 'End-to-End Encryption', desc: 'Your messages are encrypted and only you can read them' },
-        { icon: '🛡️', name: 'AeThex Passport', desc: 'Secure, decentralized identity that you own' },
-        { icon: '🔒', name: 'Two-Factor Auth', desc: 'Extra security for your account' },
-        { icon: '👻', name: 'Ephemeral Messages', desc: 'Self-destructing messages for sensitive conversations' },
-        { icon: '🚫', name: 'No Data Selling', desc: 'Your data is never sold to third parties. Ever.' },
-        { icon: '📋', name: 'Audit Logs', desc: 'Full transparency on server actions' },
-      ]
-    },
-    {
-      title: 'Customization',
-      features: [
-        { icon: '🎨', name: 'Themes', desc: 'Dark, light, and custom themes to match your style' },
-        { icon: '😀', name: 'Custom Emoji', desc: 'Upload your own emoji and stickers' },
-        { icon: '🎵', name: 'Soundboard', desc: 'Play sound effects in voice channels' },
-        { icon: '🤖', name: 'Bots & Integrations', desc: 'Extend functionality with custom bots' },
-        { icon: '⚙️', name: 'Webhooks', desc: 'Connect external services to your channels' },
-        { icon: '📊', name: 'Server Insights', desc: 'Analytics to understand your community' },
-      ]
-    },
-  ];
-
-  const comparisons = [
-    { feature: 'Open Source', aethex: true, discord: false, slack: false },
-    { feature: 'E2E Encryption', aethex: true, discord: false, slack: false },
-    { feature: 'Self-Hostable', aethex: true, discord: false, slack: false },
-    { feature: 'No Data Collection', aethex: true, discord: false, slack: false },
-    { feature: 'Voice/Video', aethex: true, discord: true, slack: true },
-    { feature: 'Unlimited History', aethex: true, discord: true, slack: false },
-    { feature: 'Custom Bots', aethex: true, discord: true, slack: true },
-    { feature: 'Free to Use', aethex: true, discord: true, slack: false },
-  ];
-
-  return (
-    <div className="info-page">
-      <nav className="info-nav">
-        <Link to="/" className="nav-brand">
-          <span className="brand-icon">◈</span>
-          <span className="brand-text">AeThex Connect</span>
-        </Link>
-        <div className="nav-links">
-          <Link to="/features" className="active">Features</Link>
-          <Link to="/about">About</Link>
-          <a href="https://github.com/AeThex-Corporation" target="_blank" rel="noopener noreferrer">GitHub</a>
-        </div>
-        <div className="nav-auth">
-          <Link to="/login" className="nav-login">Login</Link>
-          <Link to="/register" className="nav-register">Get Started</Link>
-        </div>
-      </nav>
-
-      <main className="info-content">
-        <section className="features-hero">
-          <h1>Everything you need,<br /><span className="gradient-text">nothing you don't</span></h1>
-          <p className="hero-desc">
-            All the features you love from Discord, with the privacy and ownership you deserve.
-          </p>
-        </section>
-
-        {featureCategories.map((category, idx) => (
-          <section key={idx} className="feature-category">
-            <h2>{category.title}</h2>
-            <div className="features-grid">
-              {category.features.map((feature, i) => (
-                <div key={i} className="feature-card">
-                  <span className="feature-icon">{feature.icon}</span>
-                  <h3>{feature.name}</h3>
-                  <p>{feature.desc}</p>
-                </div>
-              ))}
-            </div>
-          </section>
-        ))}
-
-        <section className="comparison-section">
-          <h2>How We Compare</h2>
-          <div className="comparison-table-container">
-            <table className="comparison-table">
-              <thead>
-                <tr>
-                  <th>Feature</th>
-                  <th className="highlight">AeThex Connect</th>
-                  <th>Discord</th>
-                  <th>Slack</th>
-                </tr>
-              </thead>
-              <tbody>
-                {comparisons.map((row, i) => (
-                  <tr key={i}>
-                    <td>{row.feature}</td>
-                    <td className="highlight">{row.aethex ? '✓' : '✕'}</td>
-                    <td>{row.discord ? '✓' : '✕'}</td>
-                    <td>{row.slack ? '✓' : '✕'}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </section>
-
-        <section className="features-cta">
-          <h2>Ready to experience the difference?</h2>
-          <p>Join thousands of users who've made the switch.</p>
-          <div className="cta-actions">
-            <Link to="/register" className="cta-primary">Get Started Free</Link>
-            <Link to="/login" className="cta-secondary">Already have an account?</Link>
-          </div>
-        </section>
-      </main>
-
-      <footer className="info-footer">
-        <div className="footer-content">
-          <div className="footer-brand">
-            <span className="brand-icon">◈</span>
-            <span>AeThex Connect</span>
-          </div>
-          <div className="footer-links">
-            <Link to="/features">Features</Link>
-            <Link to="/about">About</Link>
-            <Link to="/privacy">Privacy</Link>
-            <Link to="/terms">Terms</Link>
-          </div>
-          <div className="footer-copy">
-            © 2026 AeThex Corporation. Open source under MIT License.
-          </div>
-        </div>
-      </footer>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/pages/LandingPage.jsx b/src/frontend/mockup/pages/LandingPage.jsx
deleted file mode 100644
index 4387627..0000000
--- a/src/frontend/mockup/pages/LandingPage.jsx
+++ /dev/null
@@ -1,204 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import HeroVideo from '../components/HeroVideo';
-
-export default function LandingPage() {
-  return (
-    <div className="landing-page">
-      {/* Navigation */}
-      <nav className="landing-nav">
-        <div className="nav-brand">
-          <span className="brand-icon">◈</span>
-          <span className="brand-text">AeThex Connect</span>
-        </div>
-        <div className="nav-links">
-          <Link to="/features">Features</Link>
-          <Link to="/about">About</Link>
-          <a href="https://github.com/AeThex-Corporation" target="_blank" rel="noopener noreferrer">GitHub</a>
-        </div>
-        <div className="nav-auth">
-          <Link to="/login" className="nav-login">Login</Link>
-          <Link to="/register" className="nav-register">Get Started</Link>
-        </div>
-      </nav>
-
-      {/* Hero Section */}
-      <section className="hero">
-        <HeroVideo />
-        <div className="hero-content">
-          <div className="hero-badge">
-            <span className="badge-dot"></span>
-            Open Source • Privacy-First • Decentralized
-          </div>
-          <h1 className="hero-title">
-            Connect Without
-            <br />
-            <span className="gradient-text">Compromise</span>
-          </h1>
-          <p className="hero-subtitle">
-            The next-generation communication platform built for gamers, developers, 
-            and communities who value privacy, security, and true ownership of their data.
-          </p>
-          <div className="hero-actions">
-            <Link to="/register" className="cta-primary">
-              <span>Launch Connect</span>
-              <span className="cta-arrow">→</span>
-            </Link>
-            <a href="#features" className="cta-secondary">
-              Explore Features
-            </a>
-          </div>
-          <div className="hero-stats">
-            <div className="stat">
-              <span className="stat-value">100%</span>
-              <span className="stat-label">Open Source</span>
-            </div>
-            <div className="stat-divider"></div>
-            <div className="stat">
-              <span className="stat-value">E2E</span>
-              <span className="stat-label">Encrypted</span>
-            </div>
-            <div className="stat-divider"></div>
-            <div className="stat">
-              <span className="stat-value">0</span>
-              <span className="stat-label">Data Sold</span>
-            </div>
-          </div>
-        </div>
-        <div className="hero-visual">
-          <div className="app-preview">
-            <div className="preview-header">
-              <div className="preview-dots">
-                <span></span><span></span><span></span>
-              </div>
-            </div>
-            <div className="preview-content">
-              <div className="preview-sidebar">
-                <div className="preview-server active"></div>
-                <div className="preview-server"></div>
-                <div className="preview-server"></div>
-              </div>
-              <div className="preview-channels">
-                <div className="preview-channel"></div>
-                <div className="preview-channel active"></div>
-                <div className="preview-channel"></div>
-              </div>
-              <div className="preview-chat">
-                <div className="preview-message"></div>
-                <div className="preview-message short"></div>
-                <div className="preview-message"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Features Section */}
-      <section id="features" className="features-section">
-        <h2 className="section-title">Why AeThex Connect?</h2>
-        <p className="section-subtitle">
-          Built from the ground up with the features that matter most
-        </p>
-        <div className="features-grid">
-          <div className="feature-card">
-            <div className="feature-icon foundation">🔐</div>
-            <h3>End-to-End Encryption</h3>
-            <p>Every message, call, and file is encrypted. Only you and your recipients can read them.</p>
-          </div>
-          <div className="feature-card">
-            <div className="feature-icon corporation">🎮</div>
-            <h3>GameForge Integration</h3>
-            <p>Rich presence, game invites, and overlay support for your favorite games.</p>
-          </div>
-          <div className="feature-card">
-            <div className="feature-icon labs">📞</div>
-            <h3>Crystal Clear Calls</h3>
-            <p>HD voice and video calls with screen sharing, powered by WebRTC.</p>
-          </div>
-          <div className="feature-card">
-            <div className="feature-icon">🌐</div>
-            <h3>Cross-Platform</h3>
-            <p>Web, Desktop, iOS, and Android. Your conversations sync everywhere.</p>
-          </div>
-          <div className="feature-card">
-            <div className="feature-icon">🔓</div>
-            <h3>Open Source</h3>
-            <p>Fully auditable code. No hidden backdoors. Community-driven development.</p>
-          </div>
-          <div className="feature-card">
-            <div className="feature-icon">⚡</div>
-            <h3>Blazing Fast</h3>
-            <p>Optimized for performance. No bloat, no lag, just pure speed.</p>
-          </div>
-        </div>
-      </section>
-
-      {/* Trinity Section */}
-      <section className="trinity-section">
-        <h2 className="section-title">The AeThex Trinity</h2>
-        <p className="section-subtitle">Three divisions, one ecosystem</p>
-        <div className="trinity-cards">
-          <div className="trinity-card foundation">
-            <div className="trinity-icon">◈</div>
-            <h3>Foundation</h3>
-            <p>Core security, authentication, and identity. The bedrock of trust.</p>
-          </div>
-          <div className="trinity-card corporation">
-            <div className="trinity-icon">◈</div>
-            <h3>Corporation</h3>
-            <p>Enterprise solutions and professional services. Built for scale.</p>
-          </div>
-          <div className="trinity-card labs">
-            <div className="trinity-icon">◈</div>
-            <h3>Labs</h3>
-            <p>Research and experimental features. Tomorrow's technology today.</p>
-          </div>
-        </div>
-      </section>
-
-      {/* CTA Section */}
-      <section className="cta-section">
-        <div className="cta-content">
-          <h2>Ready to Connect?</h2>
-          <p>Join the community that values your privacy as much as you do.</p>
-          <Link to="/register" className="cta-primary large">
-            Create Your Account
-          </Link>
-        </div>
-      </section>
-
-      {/* Footer */}
-      <footer className="landing-footer">
-        <div className="footer-content">
-          <div className="footer-brand">
-            <span className="brand-icon">◈</span>
-            <span>AeThex Connect</span>
-          </div>
-          <div className="footer-links">
-            <div className="footer-column">
-              <h4>Product</h4>
-              <Link to="/features">Features</Link>
-              <Link to="/about">About</Link>
-              <a href="#">Download</a>
-            </div>
-            <div className="footer-column">
-              <h4>Resources</h4>
-              <a href="#">Documentation</a>
-              <a href="#">API</a>
-              <a href="https://github.com/AeThex-Corporation" target="_blank">GitHub</a>
-            </div>
-            <div className="footer-column">
-              <h4>Legal</h4>
-              <a href="#">Privacy Policy</a>
-              <a href="#">Terms of Service</a>
-              <a href="#">Security</a>
-            </div>
-          </div>
-        </div>
-        <div className="footer-bottom">
-          <p>© 2026 AeThex Corporation. Open source under MIT License.</p>
-        </div>
-      </footer>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/pages/LoginPage.jsx b/src/frontend/mockup/pages/LoginPage.jsx
deleted file mode 100644
index 223428a..0000000
--- a/src/frontend/mockup/pages/LoginPage.jsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import React, { useState } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
-
-export default function LoginPage({ onLogin }) {
-  const navigate = useNavigate();
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [error, setError] = useState('');
-  const [loading, setLoading] = useState(false);
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setError('');
-    setLoading(true);
-
-    try {
-      // Mock login - replace with Supabase auth
-      if (email && password) {
-        // Simulate API call
-        await new Promise(resolve => setTimeout(resolve, 1000));
-        
-        // For demo, accept any valid-looking email
-        if (email.includes('@') && password.length >= 6) {
-          onLogin?.({ email });
-          navigate('/app');
-        } else {
-          setError('Invalid email or password');
-        }
-      }
-    } catch (err) {
-      setError('An error occurred. Please try again.');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="auth-page">
-      <div className="auth-container">
-        <div className="auth-header">
-          <Link to="/" className="auth-brand">
-            <span className="brand-icon">◈</span>
-            <span>AeThex Connect</span>
-          </Link>
-        </div>
-
-        <div className="auth-card">
-          <h1>Welcome back!</h1>
-          <p className="auth-subtitle">We're so excited to see you again!</p>
-
-          {error && (
-            <div className="auth-error">
-              <span>⚠️</span>
-              {error}
-            </div>
-          )}
-
-          <form onSubmit={handleSubmit} className="auth-form">
-            <div className="form-group">
-              <label htmlFor="email">EMAIL OR USERNAME <span className="required">*</span></label>
-              <input
-                id="email"
-                type="text"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                required
-                autoComplete="email"
-                disabled={loading}
-              />
-            </div>
-
-            <div className="form-group">
-              <label htmlFor="password">PASSWORD <span className="required">*</span></label>
-              <input
-                id="password"
-                type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                required
-                autoComplete="current-password"
-                disabled={loading}
-              />
-              <Link to="/forgot-password" className="forgot-link">Forgot your password?</Link>
-            </div>
-
-            <button type="submit" className="auth-submit" disabled={loading}>
-              {loading ? 'Logging in...' : 'Log In'}
-            </button>
-          </form>
-
-          <p className="auth-switch">
-            Need an account? <Link to="/register">Register</Link>
-          </p>
-        </div>
-
-        <div className="auth-footer">
-          <Link to="/">← Back to home</Link>
-        </div>
-      </div>
-
-      <div className="auth-background">
-        <div className="bg-gradient"></div>
-        <div className="bg-pattern"></div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/mockup/pages/RegisterPage.jsx b/src/frontend/mockup/pages/RegisterPage.jsx
deleted file mode 100644
index 8826442..0000000
--- a/src/frontend/mockup/pages/RegisterPage.jsx
+++ /dev/null
@@ -1,183 +0,0 @@
-import React, { useState } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
-
-export default function RegisterPage({ onRegister }) {
-  const navigate = useNavigate();
-  const [formData, setFormData] = useState({
-    email: '',
-    username: '',
-    displayName: '',
-    password: '',
-    confirmPassword: '',
-  });
-  const [error, setError] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [agreedToTerms, setAgreedToTerms] = useState(false);
-
-  const handleChange = (e) => {
-    setFormData(prev => ({ ...prev, [e.target.name]: e.target.value }));
-  };
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setError('');
-
-    if (formData.password !== formData.confirmPassword) {
-      setError('Passwords do not match');
-      return;
-    }
-
-    if (formData.password.length < 8) {
-      setError('Password must be at least 8 characters');
-      return;
-    }
-
-    if (!agreedToTerms) {
-      setError('You must agree to the Terms of Service');
-      return;
-    }
-
-    setLoading(true);
-
-    try {
-      await new Promise(resolve => setTimeout(resolve, 1000));
-      onRegister?.({ email: formData.email, username: formData.username });
-      navigate('/app');
-    } catch (err) {
-      setError('Registration failed. Please try again.');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="auth-page">
-      <div className="auth-container">
-        <div className="auth-header">
-          <Link to="/" className="auth-brand">
-            <span className="brand-icon">◈</span>
-            <span>AeThex Connect</span>
-          </Link>
-        </div>
-
-        <div className="auth-card register-card">
-          <h1>Create an account</h1>
-          <p className="auth-subtitle">Join the future of communication</p>
-
-          {error && (
-            <div className="auth-error">
-              <span>⚠️</span>
-              {error}
-            </div>
-          )}
-
-          <form onSubmit={handleSubmit} className="auth-form">
-            <div className="form-group">
-              <label htmlFor="email">EMAIL <span className="required">*</span></label>
-              <input
-                id="email"
-                name="email"
-                type="email"
-                value={formData.email}
-                onChange={handleChange}
-                required
-                disabled={loading}
-              />
-            </div>
-
-            <div className="form-group">
-              <label htmlFor="displayName">DISPLAY NAME <span className="required">*</span></label>
-              <input
-                id="displayName"
-                name="displayName"
-                type="text"
-                value={formData.displayName}
-                onChange={handleChange}
-                required
-                disabled={loading}
-              />
-            </div>
-
-            <div className="form-group">
-              <label htmlFor="username">USERNAME <span className="required">*</span></label>
-              <input
-                id="username"
-                name="username"
-                type="text"
-                value={formData.username}
-                onChange={handleChange}
-                required
-                disabled={loading}
-                placeholder="lowercase, no spaces"
-              />
-            </div>
-
-            <div className="form-group">
-              <label htmlFor="password">PASSWORD <span className="required">*</span></label>
-              <input
-                id="password"
-                name="password"
-                type="password"
-                value={formData.password}
-                onChange={handleChange}
-                required
-                disabled={loading}
-                minLength={8}
-              />
-            </div>
-
-            <div className="form-group">
-              <label htmlFor="confirmPassword">CONFIRM PASSWORD <span className="required">*</span></label>
-              <input
-                id="confirmPassword"
-                name="confirmPassword"
-                type="password"
-                value={formData.confirmPassword}
-                onChange={handleChange}
-                required
-                disabled={loading}
-              />
-            </div>
-
-            <label className="terms-checkbox">
-              <input
-                type="checkbox"
-                checked={agreedToTerms}
-                onChange={(e) => setAgreedToTerms(e.target.checked)}
-                disabled={loading}
-              />
-              <span>
-                I agree to the <Link to="/terms">Terms of Service</Link> and{' '}
-                <Link to="/privacy">Privacy Policy</Link>
-              </span>
-            </label>
-
-            <button type="submit" className="auth-submit" disabled={loading}>
-              {loading ? 'Creating account...' : 'Continue'}
-            </button>
-          </form>
-
-          <p className="auth-switch">
-            Already have an account? <Link to="/login">Log In</Link>
-          </p>
-        </div>
-
-        <div className="auth-footer">
-          <Link to="/">← Back to home</Link>
-        </div>
-      </div>
-
-      <div className="auth-visual">
-        <div className="visual-content">
-          <div className="trinity-logo">
-            <div className="trinity-ring foundation"></div>
-            <div className="trinity-ring corporation"></div>
-            <div className="trinity-ring labs"></div>
-          </div>
-          <h2>The Trinity Awaits</h2>
-          <p>Foundation • Corporation • Labs</p>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
deleted file mode 100644
index 1cc5bc6..0000000
--- a/src/frontend/package-lock.json
+++ /dev/null
@@ -1,2937 +0,0 @@
-{
-  "name": "aethex-passport-frontend",
-  "version": "1.0.0",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "aethex-passport-frontend",
-      "version": "1.0.0",
-      "dependencies": {
-        "@stripe/react-stripe-js": "^5.4.1",
-        "@stripe/stripe-js": "^8.6.1",
-        "@supabase/supabase-js": "^2.94.1",
-        "@tailwindcss/postcss": "^4.1.18",
-        "axios": "^1.13.2",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "react-router-dom": "^6.30.3",
-        "socket.io-client": "^4.8.3"
-      },
-      "devDependencies": {
-        "@types/react": "^18.2.43",
-        "@types/react-dom": "^18.2.17",
-        "@vitejs/plugin-react": "^4.2.1",
-        "autoprefixer": "^10.4.24",
-        "postcss": "^8.5.6",
-        "tailwindcss": "^4.1.18",
-        "vite": "^5.0.8"
-      }
-    },
-    "node_modules/@alloc/quick-lru": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
-      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@babel/code-frame": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
-      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.27.1",
-        "js-tokens": "^4.0.0",
-        "picocolors": "^1.1.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/compat-data": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.5.tgz",
-      "integrity": "sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/core": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
-      "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.27.1",
-        "@babel/generator": "^7.28.5",
-        "@babel/helper-compilation-targets": "^7.27.2",
-        "@babel/helper-module-transforms": "^7.28.3",
-        "@babel/helpers": "^7.28.4",
-        "@babel/parser": "^7.28.5",
-        "@babel/template": "^7.27.2",
-        "@babel/traverse": "^7.28.5",
-        "@babel/types": "^7.28.5",
-        "@jridgewell/remapping": "^2.3.5",
-        "convert-source-map": "^2.0.0",
-        "debug": "^4.1.0",
-        "gensync": "^1.0.0-beta.2",
-        "json5": "^2.2.3",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/babel"
-      }
-    },
-    "node_modules/@babel/generator": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.5.tgz",
-      "integrity": "sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^7.28.5",
-        "@babel/types": "^7.28.5",
-        "@jridgewell/gen-mapping": "^0.3.12",
-        "@jridgewell/trace-mapping": "^0.3.28",
-        "jsesc": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.27.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz",
-      "integrity": "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/compat-data": "^7.27.2",
-        "@babel/helper-validator-option": "^7.27.1",
-        "browserslist": "^4.24.0",
-        "lru-cache": "^5.1.1",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-globals": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
-      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-module-imports": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
-      "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/traverse": "^7.27.1",
-        "@babel/types": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-module-transforms": {
-      "version": "7.28.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.3.tgz",
-      "integrity": "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-module-imports": "^7.27.1",
-        "@babel/helper-validator-identifier": "^7.27.1",
-        "@babel/traverse": "^7.28.3"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz",
-      "integrity": "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-string-parser": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
-      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
-      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-validator-option": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
-      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helpers": {
-      "version": "7.28.4",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.4.tgz",
-      "integrity": "sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/template": "^7.27.2",
-        "@babel/types": "^7.28.4"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/parser": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz",
-      "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.28.5"
-      },
-      "bin": {
-        "parser": "bin/babel-parser.js"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-react-jsx-self": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.27.1.tgz",
-      "integrity": "sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-react-jsx-source": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.27.1.tgz",
-      "integrity": "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/template": {
-      "version": "7.27.2",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
-      "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.27.1",
-        "@babel/parser": "^7.27.2",
-        "@babel/types": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/traverse": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.5.tgz",
-      "integrity": "sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.27.1",
-        "@babel/generator": "^7.28.5",
-        "@babel/helper-globals": "^7.28.0",
-        "@babel/parser": "^7.28.5",
-        "@babel/template": "^7.27.2",
-        "@babel/types": "^7.28.5",
-        "debug": "^4.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/types": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz",
-      "integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-string-parser": "^7.27.1",
-        "@babel/helper-validator-identifier": "^7.28.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
-      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "aix"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/android-arm": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
-      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/android-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
-      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/android-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
-      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
-      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/darwin-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
-      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
-      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
-      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-arm": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
-      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
-      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-ia32": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
-      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-loong64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
-      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
-      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
-      "cpu": [
-        "mips64el"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
-      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
-      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-s390x": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
-      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
-      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
-      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
-      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/sunos-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
-      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "sunos"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/win32-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
-      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/win32-ia32": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
-      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/win32-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
-      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.13",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
-      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.0",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      }
-    },
-    "node_modules/@jridgewell/remapping": {
-      "version": "2.3.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
-      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      }
-    },
-    "node_modules/@jridgewell/resolve-uri": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
-      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.5.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
-      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
-      "license": "MIT"
-    },
-    "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.31",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
-      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/resolve-uri": "^3.1.0",
-        "@jridgewell/sourcemap-codec": "^1.4.14"
-      }
-    },
-    "node_modules/@remix-run/router": {
-      "version": "1.23.2",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.2.tgz",
-      "integrity": "sha512-Ic6m2U/rMjTkhERIa/0ZtXJP17QUi2CbWE7cqx4J58M8aA3QTfW+2UlQ4psvTX9IO1RfNVhK3pcpdjej7L+t2w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/@rolldown/pluginutils": {
-      "version": "1.0.0-beta.27",
-      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
-      "integrity": "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.55.1.tgz",
-      "integrity": "sha512-9R0DM/ykwfGIlNu6+2U09ga0WXeZ9MRC2Ter8jnz8415VbuIykVuc6bhdrbORFZANDmTDvq26mJrEVTl8TdnDg==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ]
-    },
-    "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.55.1.tgz",
-      "integrity": "sha512-eFZCb1YUqhTysgW3sj/55du5cG57S7UTNtdMjCW7LwVcj3dTTcowCsC8p7uBdzKsZYa8J7IDE8lhMI+HX1vQvg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ]
-    },
-    "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.55.1.tgz",
-      "integrity": "sha512-p3grE2PHcQm2e8PSGZdzIhCKbMCw/xi9XvMPErPhwO17vxtvCN5FEA2mSLgmKlCjHGMQTP6phuQTYWUnKewwGg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.55.1.tgz",
-      "integrity": "sha512-rDUjG25C9qoTm+e02Esi+aqTKSBYwVTaoS1wxcN47/Luqef57Vgp96xNANwt5npq9GDxsH7kXxNkJVEsWEOEaQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.55.1.tgz",
-      "integrity": "sha512-+JiU7Jbp5cdxekIgdte0jfcu5oqw4GCKr6i3PJTlXTCU5H5Fvtkpbs4XJHRmWNXF+hKmn4v7ogI5OQPaupJgOg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ]
-    },
-    "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.55.1.tgz",
-      "integrity": "sha512-V5xC1tOVWtLLmr3YUk2f6EJK4qksksOYiz/TCsFHu/R+woubcLWdC9nZQmwjOAbmExBIVKsm1/wKmEy4z4u4Bw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.55.1.tgz",
-      "integrity": "sha512-Rn3n+FUk2J5VWx+ywrG/HGPTD9jXNbicRtTM11e/uorplArnXZYsVifnPPqNNP5BsO3roI4n8332ukpY/zN7rQ==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.55.1.tgz",
-      "integrity": "sha512-grPNWydeKtc1aEdrJDWk4opD7nFtQbMmV7769hiAaYyUKCT1faPRm2av8CX1YJsZ4TLAZcg9gTR1KvEzoLjXkg==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.55.1.tgz",
-      "integrity": "sha512-a59mwd1k6x8tXKcUxSyISiquLwB5pX+fJW9TkWU46lCqD/GRDe9uDN31jrMmVP3feI3mhAdvcCClhV8V5MhJFQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.55.1.tgz",
-      "integrity": "sha512-puS1MEgWX5GsHSoiAsF0TYrpomdvkaXm0CofIMG5uVkP6IBV+ZO9xhC5YEN49nsgYo1DuuMquF9+7EDBVYu4uA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-loong64-gnu": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.55.1.tgz",
-      "integrity": "sha512-r3Wv40in+lTsULSb6nnoudVbARdOwb2u5fpeoOAZjFLznp6tDU8kd+GTHmJoqZ9lt6/Sys33KdIHUaQihFcu7g==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-loong64-musl": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.55.1.tgz",
-      "integrity": "sha512-MR8c0+UxAlB22Fq4R+aQSPBayvYa3+9DrwG/i1TKQXFYEaoW3B5b/rkSRIypcZDdWjWnpcvxbNaAJDcSbJU3Lw==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.55.1.tgz",
-      "integrity": "sha512-3KhoECe1BRlSYpMTeVrD4sh2Pw2xgt4jzNSZIIPLFEsnQn9gAnZagW9+VqDqAHgm1Xc77LzJOo2LdigS5qZ+gw==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-ppc64-musl": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.55.1.tgz",
-      "integrity": "sha512-ziR1OuZx0vdYZZ30vueNZTg73alF59DicYrPViG0NEgDVN8/Jl87zkAPu4u6VjZST2llgEUjaiNl9JM6HH1Vdw==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.55.1.tgz",
-      "integrity": "sha512-uW0Y12ih2XJRERZ4jAfKamTyIHVMPQnTZcQjme2HMVDAHY4amf5u414OqNYC+x+LzRdRcnIG1YodLrrtA8xsxw==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.55.1.tgz",
-      "integrity": "sha512-u9yZ0jUkOED1BFrqu3BwMQoixvGHGZ+JhJNkNKY/hyoEgOwlqKb62qu+7UjbPSHYjiVy8kKJHvXKv5coH4wDeg==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.55.1.tgz",
-      "integrity": "sha512-/0PenBCmqM4ZUd0190j7J0UsQ/1nsi735iPRakO8iPciE7BQ495Y6msPzaOmvx0/pn+eJVVlZrNrSh4WSYLxNg==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.55.1.tgz",
-      "integrity": "sha512-a8G4wiQxQG2BAvo+gU6XrReRRqj+pLS2NGXKm8io19goR+K8lw269eTrPkSdDTALwMmJp4th2Uh0D8J9bEV1vg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.55.1.tgz",
-      "integrity": "sha512-bD+zjpFrMpP/hqkfEcnjXWHMw5BIghGisOKPj+2NaNDuVT+8Ds4mPf3XcPHuat1tz89WRL+1wbcxKY3WSbiT7w==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-openbsd-x64": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.55.1.tgz",
-      "integrity": "sha512-eLXw0dOiqE4QmvikfQ6yjgkg/xDM+MdU9YJuP4ySTibXU0oAvnEWXt7UDJmD4UkYialMfOGFPJnIHSe/kdzPxg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ]
-    },
-    "node_modules/@rollup/rollup-openharmony-arm64": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.55.1.tgz",
-      "integrity": "sha512-xzm44KgEP11te3S2HCSyYf5zIzWmx3n8HDCc7EE59+lTcswEWNpvMLfd9uJvVX8LCg9QWG67Xt75AuHn4vgsXw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openharmony"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.55.1.tgz",
-      "integrity": "sha512-yR6Bl3tMC/gBok5cz/Qi0xYnVbIxGx5Fcf/ca0eB6/6JwOY+SRUcJfI0OpeTpPls7f194as62thCt/2BjxYN8g==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.55.1.tgz",
-      "integrity": "sha512-3fZBidchE0eY0oFZBnekYCfg+5wAB0mbpCBuofh5mZuzIU/4jIVkbESmd2dOsFNS78b53CYv3OAtwqkZZmU5nA==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-x64-gnu": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.55.1.tgz",
-      "integrity": "sha512-xGGY5pXj69IxKb4yv/POoocPy/qmEGhimy/FoTpTSVju3FYXUQQMFCaZZXJVidsmGxRioZAwpThl/4zX41gRKg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.55.1.tgz",
-      "integrity": "sha512-SPEpaL6DX4rmcXtnhdrQYgzQ5W2uW3SCJch88lB2zImhJRhIIK44fkUrgIV/Q8yUNfw5oyZ5vkeQsZLhCb06lw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@socket.io/component-emitter": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
-      "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
-      "license": "MIT"
-    },
-    "node_modules/@stripe/react-stripe-js": {
-      "version": "5.4.1",
-      "resolved": "https://registry.npmjs.org/@stripe/react-stripe-js/-/react-stripe-js-5.4.1.tgz",
-      "integrity": "sha512-ipeYcAHa4EPmjwfv0lFE+YDVkOQ0TMKkFWamW+BqmnSkEln/hO8rmxGPPWcd9WjqABx6Ro8Xg4pAS7evCcR9cw==",
-      "license": "MIT",
-      "dependencies": {
-        "prop-types": "^15.7.2"
-      },
-      "peerDependencies": {
-        "@stripe/stripe-js": ">=8.0.0 <9.0.0",
-        "react": ">=16.8.0 <20.0.0",
-        "react-dom": ">=16.8.0 <20.0.0"
-      }
-    },
-    "node_modules/@stripe/stripe-js": {
-      "version": "8.6.1",
-      "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-8.6.1.tgz",
-      "integrity": "sha512-UJ05U2062XDgydbUcETH1AoRQLNhigQ2KmDn1BG8sC3xfzu6JKg95Qt6YozdzFpxl1Npii/02m2LEWFt1RYjVA==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=12.16"
-      }
-    },
-    "node_modules/@supabase/auth-js": {
-      "version": "2.94.1",
-      "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.94.1.tgz",
-      "integrity": "sha512-Wt/SdmAtNNiqrcBbPlzWojLcE1bQ9OYb8PTaYF6QccFX5JeXZI0sZ01MLNE+E83UK6cK0lw4YznX0D2g08UQng==",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "2.8.1"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@supabase/functions-js": {
-      "version": "2.94.1",
-      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.94.1.tgz",
-      "integrity": "sha512-A7Bx0gnclDNZ4m8+mnO2IEEzMxtUSg7cpPEBF6Ek1LpjIQkC7vvoidiV/RuntnKX43IiVcWV1f2FsAppMagEmQ==",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "2.8.1"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@supabase/postgrest-js": {
-      "version": "2.94.1",
-      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-2.94.1.tgz",
-      "integrity": "sha512-N6MTghjHnMZddT48rAj8dIFgedCU97cc1ahQM74Tc+DF4UH7y2+iEfdYV3unJsylpaiWlu92Fy8Lj14Jbrmxog==",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "2.8.1"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@supabase/realtime-js": {
-      "version": "2.94.1",
-      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.94.1.tgz",
-      "integrity": "sha512-Wq8olpCAGmN4y2DH2kUdlcakdzNHRCde72BFS8zK5ub46bBeSUoE9DqrfeNFWKaF2gCE/cmK8aTUTorZD9jdtQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/phoenix": "^1.6.6",
-        "@types/ws": "^8.18.1",
-        "tslib": "2.8.1",
-        "ws": "^8.18.2"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@supabase/storage-js": {
-      "version": "2.94.1",
-      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.94.1.tgz",
-      "integrity": "sha512-/Mi18LGyrugPwtfqETfAqEGcBQotY/7IMsTGYgEFdqr8cQq280BVQWjN2wI9KibWtshPp0Ryvil5Uzd5YfM7kA==",
-      "license": "MIT",
-      "dependencies": {
-        "iceberg-js": "^0.8.1",
-        "tslib": "2.8.1"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@supabase/supabase-js": {
-      "version": "2.94.1",
-      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.94.1.tgz",
-      "integrity": "sha512-87vOY8n3WHB3m+a/KeySj07djOQVuRA5qgX5E7db1eDkaZ1of5M+3t/tv6eYYy4BfqxuHMZuCe5uVrO/oyvoow==",
-      "license": "MIT",
-      "dependencies": {
-        "@supabase/auth-js": "2.94.1",
-        "@supabase/functions-js": "2.94.1",
-        "@supabase/postgrest-js": "2.94.1",
-        "@supabase/realtime-js": "2.94.1",
-        "@supabase/storage-js": "2.94.1"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@tailwindcss/node": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.18.tgz",
-      "integrity": "sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/remapping": "^2.3.4",
-        "enhanced-resolve": "^5.18.3",
-        "jiti": "^2.6.1",
-        "lightningcss": "1.30.2",
-        "magic-string": "^0.30.21",
-        "source-map-js": "^1.2.1",
-        "tailwindcss": "4.1.18"
-      }
-    },
-    "node_modules/@tailwindcss/oxide": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.18.tgz",
-      "integrity": "sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 10"
-      },
-      "optionalDependencies": {
-        "@tailwindcss/oxide-android-arm64": "4.1.18",
-        "@tailwindcss/oxide-darwin-arm64": "4.1.18",
-        "@tailwindcss/oxide-darwin-x64": "4.1.18",
-        "@tailwindcss/oxide-freebsd-x64": "4.1.18",
-        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.18",
-        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.18",
-        "@tailwindcss/oxide-linux-arm64-musl": "4.1.18",
-        "@tailwindcss/oxide-linux-x64-gnu": "4.1.18",
-        "@tailwindcss/oxide-linux-x64-musl": "4.1.18",
-        "@tailwindcss/oxide-wasm32-wasi": "4.1.18",
-        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.18",
-        "@tailwindcss/oxide-win32-x64-msvc": "4.1.18"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-android-arm64": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.18.tgz",
-      "integrity": "sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-darwin-arm64": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.18.tgz",
-      "integrity": "sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-darwin-x64": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.18.tgz",
-      "integrity": "sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-freebsd-x64": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.18.tgz",
-      "integrity": "sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.18.tgz",
-      "integrity": "sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA==",
-      "cpu": [
-        "arm"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.18.tgz",
-      "integrity": "sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.18.tgz",
-      "integrity": "sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.18.tgz",
-      "integrity": "sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.18.tgz",
-      "integrity": "sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.18.tgz",
-      "integrity": "sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==",
-      "bundleDependencies": [
-        "@napi-rs/wasm-runtime",
-        "@emnapi/core",
-        "@emnapi/runtime",
-        "@tybys/wasm-util",
-        "@emnapi/wasi-threads",
-        "tslib"
-      ],
-      "cpu": [
-        "wasm32"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "@emnapi/core": "^1.7.1",
-        "@emnapi/runtime": "^1.7.1",
-        "@emnapi/wasi-threads": "^1.1.0",
-        "@napi-rs/wasm-runtime": "^1.1.0",
-        "@tybys/wasm-util": "^0.10.1",
-        "tslib": "^2.4.0"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.18.tgz",
-      "integrity": "sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.18.tgz",
-      "integrity": "sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/postcss": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.18.tgz",
-      "integrity": "sha512-Ce0GFnzAOuPyfV5SxjXGn0CubwGcuDB0zcdaPuCSzAa/2vII24JTkH+I6jcbXLb1ctjZMZZI6OjDaLPJQL1S0g==",
-      "license": "MIT",
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "@tailwindcss/node": "4.1.18",
-        "@tailwindcss/oxide": "4.1.18",
-        "postcss": "^8.4.41",
-        "tailwindcss": "4.1.18"
-      }
-    },
-    "node_modules/@types/babel__core": {
-      "version": "7.20.5",
-      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
-      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^7.20.7",
-        "@babel/types": "^7.20.7",
-        "@types/babel__generator": "*",
-        "@types/babel__template": "*",
-        "@types/babel__traverse": "*"
-      }
-    },
-    "node_modules/@types/babel__generator": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
-      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.0.0"
-      }
-    },
-    "node_modules/@types/babel__template": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
-      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^7.1.0",
-        "@babel/types": "^7.0.0"
-      }
-    },
-    "node_modules/@types/babel__traverse": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
-      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.28.2"
-      }
-    },
-    "node_modules/@types/estree": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
-      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@types/node": {
-      "version": "25.2.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.2.0.tgz",
-      "integrity": "sha512-DZ8VwRFUNzuqJ5khrvwMXHmvPe+zGayJhr2CDNiKB1WBE1ST8Djl00D0IC4vvNmHMdj6DlbYRIaFE7WHjlDl5w==",
-      "license": "MIT",
-      "dependencies": {
-        "undici-types": "~7.16.0"
-      }
-    },
-    "node_modules/@types/phoenix": {
-      "version": "1.6.7",
-      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.7.tgz",
-      "integrity": "sha512-oN9ive//QSBkf19rfDv45M7eZPi0eEXylht2OLEXicu5b4KoQ1OzXIw+xDSGWxSxe1JmepRR/ZH283vsu518/Q==",
-      "license": "MIT"
-    },
-    "node_modules/@types/prop-types": {
-      "version": "15.7.15",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
-      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@types/react": {
-      "version": "18.3.27",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz",
-      "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@types/prop-types": "*",
-        "csstype": "^3.2.2"
-      }
-    },
-    "node_modules/@types/react-dom": {
-      "version": "18.3.7",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
-      "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
-      "dev": true,
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "^18.0.0"
-      }
-    },
-    "node_modules/@types/ws": {
-      "version": "8.18.1",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
-      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
-    "node_modules/@vitejs/plugin-react": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
-      "integrity": "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/core": "^7.28.0",
-        "@babel/plugin-transform-react-jsx-self": "^7.27.1",
-        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
-        "@rolldown/pluginutils": "1.0.0-beta.27",
-        "@types/babel__core": "^7.20.5",
-        "react-refresh": "^0.17.0"
-      },
-      "engines": {
-        "node": "^14.18.0 || >=16.0.0"
-      },
-      "peerDependencies": {
-        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
-      }
-    },
-    "node_modules/asynckit": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "license": "MIT"
-    },
-    "node_modules/autoprefixer": {
-      "version": "10.4.24",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.24.tgz",
-      "integrity": "sha512-uHZg7N9ULTVbutaIsDRoUkoS8/h3bdsmVJYZ5l3wv8Cp/6UIIoRDm90hZ+BwxUj/hGBEzLxdHNSKuFpn8WOyZw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "browserslist": "^4.28.1",
-        "caniuse-lite": "^1.0.30001766",
-        "fraction.js": "^5.3.4",
-        "picocolors": "^1.1.1",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "bin": {
-        "autoprefixer": "bin/autoprefixer"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
-    "node_modules/axios": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
-      "integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
-      "license": "MIT",
-      "dependencies": {
-        "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.4",
-        "proxy-from-env": "^1.1.0"
-      }
-    },
-    "node_modules/baseline-browser-mapping": {
-      "version": "2.9.14",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.14.tgz",
-      "integrity": "sha512-B0xUquLkiGLgHhpPBqvl7GWegWBUNuujQ6kXd/r1U38ElPT6Ok8KZ8e+FpUGEc2ZoRQUzq/aUnaKFc/svWUGSg==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "bin": {
-        "baseline-browser-mapping": "dist/cli.js"
-      }
-    },
-    "node_modules/browserslist": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
-      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "baseline-browser-mapping": "^2.9.0",
-        "caniuse-lite": "^1.0.30001759",
-        "electron-to-chromium": "^1.5.263",
-        "node-releases": "^2.0.27",
-        "update-browserslist-db": "^1.2.0"
-      },
-      "bin": {
-        "browserslist": "cli.js"
-      },
-      "engines": {
-        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
-      }
-    },
-    "node_modules/call-bind-apply-helpers": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
-      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/caniuse-lite": {
-      "version": "1.0.30001768",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001768.tgz",
-      "integrity": "sha512-qY3aDRZC5nWPgHUgIB84WL+nySuo19wk0VJpp/XI9T34lrvkyhRvNVOFJOp2kxClQhiFBu+TaUSudf6oa3vkSA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "CC-BY-4.0"
-    },
-    "node_modules/combined-stream": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
-      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "license": "MIT",
-      "dependencies": {
-        "delayed-stream": "~1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/convert-source-map": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
-      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/csstype": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
-      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/debug": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
-      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/delayed-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/detect-libc": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
-      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/dunder-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
-      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.1",
-        "es-errors": "^1.3.0",
-        "gopd": "^1.2.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/electron-to-chromium": {
-      "version": "1.5.267",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.267.tgz",
-      "integrity": "sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/engine.io-client": {
-      "version": "6.6.4",
-      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.4.tgz",
-      "integrity": "sha512-+kjUJnZGwzewFDw951CDWcwj35vMNf2fcj7xQWOctq1F2i1jkDdVvdFG9kM/BEChymCH36KgjnW0NsL58JYRxw==",
-      "license": "MIT",
-      "dependencies": {
-        "@socket.io/component-emitter": "~3.1.0",
-        "debug": "~4.4.1",
-        "engine.io-parser": "~5.2.1",
-        "ws": "~8.18.3",
-        "xmlhttprequest-ssl": "~2.1.1"
-      }
-    },
-    "node_modules/engine.io-parser": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
-      "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
-    "node_modules/enhanced-resolve": {
-      "version": "5.19.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.19.0.tgz",
-      "integrity": "sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==",
-      "license": "MIT",
-      "dependencies": {
-        "graceful-fs": "^4.2.4",
-        "tapable": "^2.3.0"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
-    "node_modules/es-define-property": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
-      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-errors": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
-      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-object-atoms": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
-      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-set-tostringtag": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
-      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.6",
-        "has-tostringtag": "^1.0.2",
-        "hasown": "^2.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/esbuild": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
-      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "bin": {
-        "esbuild": "bin/esbuild"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.21.5",
-        "@esbuild/android-arm": "0.21.5",
-        "@esbuild/android-arm64": "0.21.5",
-        "@esbuild/android-x64": "0.21.5",
-        "@esbuild/darwin-arm64": "0.21.5",
-        "@esbuild/darwin-x64": "0.21.5",
-        "@esbuild/freebsd-arm64": "0.21.5",
-        "@esbuild/freebsd-x64": "0.21.5",
-        "@esbuild/linux-arm": "0.21.5",
-        "@esbuild/linux-arm64": "0.21.5",
-        "@esbuild/linux-ia32": "0.21.5",
-        "@esbuild/linux-loong64": "0.21.5",
-        "@esbuild/linux-mips64el": "0.21.5",
-        "@esbuild/linux-ppc64": "0.21.5",
-        "@esbuild/linux-riscv64": "0.21.5",
-        "@esbuild/linux-s390x": "0.21.5",
-        "@esbuild/linux-x64": "0.21.5",
-        "@esbuild/netbsd-x64": "0.21.5",
-        "@esbuild/openbsd-x64": "0.21.5",
-        "@esbuild/sunos-x64": "0.21.5",
-        "@esbuild/win32-arm64": "0.21.5",
-        "@esbuild/win32-ia32": "0.21.5",
-        "@esbuild/win32-x64": "0.21.5"
-      }
-    },
-    "node_modules/escalade": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
-      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/follow-redirects": {
-      "version": "1.15.11",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
-      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://github.com/sponsors/RubenVerborgh"
-        }
-      ],
-      "license": "MIT",
-      "engines": {
-        "node": ">=4.0"
-      },
-      "peerDependenciesMeta": {
-        "debug": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/form-data": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
-      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
-      "license": "MIT",
-      "dependencies": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.8",
-        "es-set-tostringtag": "^2.1.0",
-        "hasown": "^2.0.2",
-        "mime-types": "^2.1.12"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/fraction.js": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
-      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/rawify"
-      }
-    },
-    "node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
-    "node_modules/function-bind": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
-      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/gensync": {
-      "version": "1.0.0-beta.2",
-      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
-      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/get-intrinsic": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
-      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.2",
-        "es-define-property": "^1.0.1",
-        "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.1.1",
-        "function-bind": "^1.1.2",
-        "get-proto": "^1.0.1",
-        "gopd": "^1.2.0",
-        "has-symbols": "^1.1.0",
-        "hasown": "^2.0.2",
-        "math-intrinsics": "^1.1.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/get-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
-      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
-      "license": "MIT",
-      "dependencies": {
-        "dunder-proto": "^1.0.1",
-        "es-object-atoms": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/gopd": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
-      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/graceful-fs": {
-      "version": "4.2.11",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "license": "ISC"
-    },
-    "node_modules/has-symbols": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
-      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-tostringtag": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
-      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
-      "license": "MIT",
-      "dependencies": {
-        "has-symbols": "^1.0.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/hasown": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
-      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "license": "MIT",
-      "dependencies": {
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/iceberg-js": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/iceberg-js/-/iceberg-js-0.8.1.tgz",
-      "integrity": "sha512-1dhVQZXhcHje7798IVM+xoo/1ZdVfzOMIc8/rgVSijRK38EDqOJoGula9N/8ZI5RD8QTxNQtK/Gozpr+qUqRRA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/jiti": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
-      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
-      "license": "MIT",
-      "bin": {
-        "jiti": "lib/jiti-cli.mjs"
-      }
-    },
-    "node_modules/js-tokens": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "license": "MIT"
-    },
-    "node_modules/jsesc": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
-      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "jsesc": "bin/jsesc"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/json5": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "json5": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/lightningcss": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
-      "integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==",
-      "license": "MPL-2.0",
-      "dependencies": {
-        "detect-libc": "^2.0.3"
-      },
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      },
-      "optionalDependencies": {
-        "lightningcss-android-arm64": "1.30.2",
-        "lightningcss-darwin-arm64": "1.30.2",
-        "lightningcss-darwin-x64": "1.30.2",
-        "lightningcss-freebsd-x64": "1.30.2",
-        "lightningcss-linux-arm-gnueabihf": "1.30.2",
-        "lightningcss-linux-arm64-gnu": "1.30.2",
-        "lightningcss-linux-arm64-musl": "1.30.2",
-        "lightningcss-linux-x64-gnu": "1.30.2",
-        "lightningcss-linux-x64-musl": "1.30.2",
-        "lightningcss-win32-arm64-msvc": "1.30.2",
-        "lightningcss-win32-x64-msvc": "1.30.2"
-      }
-    },
-    "node_modules/lightningcss-android-arm64": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz",
-      "integrity": "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-darwin-arm64": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz",
-      "integrity": "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-darwin-x64": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz",
-      "integrity": "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-freebsd-x64": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz",
-      "integrity": "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-arm-gnueabihf": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz",
-      "integrity": "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==",
-      "cpu": [
-        "arm"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-arm64-gnu": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz",
-      "integrity": "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-arm64-musl": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz",
-      "integrity": "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-x64-gnu": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz",
-      "integrity": "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-x64-musl": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz",
-      "integrity": "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-win32-arm64-msvc": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz",
-      "integrity": "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-win32-x64-msvc": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz",
-      "integrity": "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/loose-envify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "license": "MIT",
-      "dependencies": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      },
-      "bin": {
-        "loose-envify": "cli.js"
-      }
-    },
-    "node_modules/lru-cache": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "yallist": "^3.0.2"
-      }
-    },
-    "node_modules/magic-string": {
-      "version": "0.30.21",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
-      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.5"
-      }
-    },
-    "node_modules/math-intrinsics": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
-      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/mime-db": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mime-types": {
-      "version": "2.1.35",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
-      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "license": "MIT",
-      "dependencies": {
-        "mime-db": "1.52.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "license": "MIT"
-    },
-    "node_modules/nanoid": {
-      "version": "3.3.11",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
-      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "bin": {
-        "nanoid": "bin/nanoid.cjs"
-      },
-      "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
-      }
-    },
-    "node_modules/node-releases": {
-      "version": "2.0.27",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
-      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/picocolors": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "license": "ISC"
-    },
-    "node_modules/postcss": {
-      "version": "8.5.6",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
-      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "nanoid": "^3.3.11",
-        "picocolors": "^1.1.1",
-        "source-map-js": "^1.2.1"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      }
-    },
-    "node_modules/postcss-value-parser": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/prop-types": {
-      "version": "15.8.1",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
-      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.4.0",
-        "object-assign": "^4.1.1",
-        "react-is": "^16.13.1"
-      }
-    },
-    "node_modules/proxy-from-env": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-      "license": "MIT"
-    },
-    "node_modules/react": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
-      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/react-dom": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
-      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.2"
-      },
-      "peerDependencies": {
-        "react": "^18.3.1"
-      }
-    },
-    "node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "license": "MIT"
-    },
-    "node_modules/react-refresh": {
-      "version": "0.17.0",
-      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
-      "integrity": "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/react-router": {
-      "version": "6.30.3",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.3.tgz",
-      "integrity": "sha512-XRnlbKMTmktBkjCLE8/XcZFlnHvr2Ltdr1eJX4idL55/9BbORzyZEaIkBFDhFGCEWBBItsVrDxwx3gnisMitdw==",
-      "license": "MIT",
-      "dependencies": {
-        "@remix-run/router": "1.23.2"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8"
-      }
-    },
-    "node_modules/react-router-dom": {
-      "version": "6.30.3",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.3.tgz",
-      "integrity": "sha512-pxPcv1AczD4vso7G4Z3TKcvlxK7g7TNt3/FNGMhfqyntocvYKj+GCatfigGDjbLozC4baguJ0ReCigoDJXb0ag==",
-      "license": "MIT",
-      "dependencies": {
-        "@remix-run/router": "1.23.2",
-        "react-router": "6.30.3"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8",
-        "react-dom": ">=16.8"
-      }
-    },
-    "node_modules/rollup": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.55.1.tgz",
-      "integrity": "sha512-wDv/Ht1BNHB4upNbK74s9usvl7hObDnvVzknxqY/E/O3X6rW1U1rV1aENEfJ54eFZDTNo7zv1f5N4edCluH7+A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "1.0.8"
-      },
-      "bin": {
-        "rollup": "dist/bin/rollup"
-      },
-      "engines": {
-        "node": ">=18.0.0",
-        "npm": ">=8.0.0"
-      },
-      "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.55.1",
-        "@rollup/rollup-android-arm64": "4.55.1",
-        "@rollup/rollup-darwin-arm64": "4.55.1",
-        "@rollup/rollup-darwin-x64": "4.55.1",
-        "@rollup/rollup-freebsd-arm64": "4.55.1",
-        "@rollup/rollup-freebsd-x64": "4.55.1",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.55.1",
-        "@rollup/rollup-linux-arm-musleabihf": "4.55.1",
-        "@rollup/rollup-linux-arm64-gnu": "4.55.1",
-        "@rollup/rollup-linux-arm64-musl": "4.55.1",
-        "@rollup/rollup-linux-loong64-gnu": "4.55.1",
-        "@rollup/rollup-linux-loong64-musl": "4.55.1",
-        "@rollup/rollup-linux-ppc64-gnu": "4.55.1",
-        "@rollup/rollup-linux-ppc64-musl": "4.55.1",
-        "@rollup/rollup-linux-riscv64-gnu": "4.55.1",
-        "@rollup/rollup-linux-riscv64-musl": "4.55.1",
-        "@rollup/rollup-linux-s390x-gnu": "4.55.1",
-        "@rollup/rollup-linux-x64-gnu": "4.55.1",
-        "@rollup/rollup-linux-x64-musl": "4.55.1",
-        "@rollup/rollup-openbsd-x64": "4.55.1",
-        "@rollup/rollup-openharmony-arm64": "4.55.1",
-        "@rollup/rollup-win32-arm64-msvc": "4.55.1",
-        "@rollup/rollup-win32-ia32-msvc": "4.55.1",
-        "@rollup/rollup-win32-x64-gnu": "4.55.1",
-        "@rollup/rollup-win32-x64-msvc": "4.55.1",
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/scheduler": {
-      "version": "0.23.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
-      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      }
-    },
-    "node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/socket.io-client": {
-      "version": "4.8.3",
-      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.3.tgz",
-      "integrity": "sha512-uP0bpjWrjQmUt5DTHq9RuoCBdFJF10cdX9X+a368j/Ft0wmaVgxlrjvK3kjvgCODOMMOz9lcaRzxmso0bTWZ/g==",
-      "license": "MIT",
-      "dependencies": {
-        "@socket.io/component-emitter": "~3.1.0",
-        "debug": "~4.4.1",
-        "engine.io-client": "~6.6.1",
-        "socket.io-parser": "~4.2.4"
-      },
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
-    "node_modules/socket.io-parser": {
-      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.5.tgz",
-      "integrity": "sha512-bPMmpy/5WWKHea5Y/jYAP6k74A+hvmRCQaJuJB6I/ML5JZq/KfNieUVo/3Mh7SAqn7TyFdIo6wqYHInG1MU1bQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@socket.io/component-emitter": "~3.1.0",
-        "debug": "~4.4.1"
-      },
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
-    "node_modules/source-map-js": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
-      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/tailwindcss": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
-      "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
-      "license": "MIT"
-    },
-    "node_modules/tapable": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
-      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      }
-    },
-    "node_modules/tslib": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD"
-    },
-    "node_modules/undici-types": {
-      "version": "7.16.0",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
-      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
-      "license": "MIT"
-    },
-    "node_modules/update-browserslist-db": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
-      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "escalade": "^3.2.0",
-        "picocolors": "^1.1.1"
-      },
-      "bin": {
-        "update-browserslist-db": "cli.js"
-      },
-      "peerDependencies": {
-        "browserslist": ">= 4.21.0"
-      }
-    },
-    "node_modules/vite": {
-      "version": "5.4.21",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
-      "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "esbuild": "^0.21.3",
-        "postcss": "^8.4.43",
-        "rollup": "^4.20.0"
-      },
-      "bin": {
-        "vite": "bin/vite.js"
-      },
-      "engines": {
-        "node": "^18.0.0 || >=20.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/vitejs/vite?sponsor=1"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.3"
-      },
-      "peerDependencies": {
-        "@types/node": "^18.0.0 || >=20.0.0",
-        "less": "*",
-        "lightningcss": "^1.21.0",
-        "sass": "*",
-        "sass-embedded": "*",
-        "stylus": "*",
-        "sugarss": "*",
-        "terser": "^5.4.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/node": {
-          "optional": true
-        },
-        "less": {
-          "optional": true
-        },
-        "lightningcss": {
-          "optional": true
-        },
-        "sass": {
-          "optional": true
-        },
-        "sass-embedded": {
-          "optional": true
-        },
-        "stylus": {
-          "optional": true
-        },
-        "sugarss": {
-          "optional": true
-        },
-        "terser": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/ws": {
-      "version": "8.18.3",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
-      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": ">=5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/xmlhttprequest-ssl": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz",
-      "integrity": "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==",
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/yallist": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-      "dev": true,
-      "license": "ISC"
-    }
-  }
-}
diff --git a/src/frontend/package.json b/src/frontend/package.json
deleted file mode 100644
index c4ba0dd..0000000
--- a/src/frontend/package.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "name": "aethex-passport-frontend",
-  "private": true,
-  "version": "1.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@stripe/react-stripe-js": "^5.4.1",
-    "@stripe/stripe-js": "^8.6.1",
-    "@supabase/supabase-js": "^2.94.1",
-    "@tailwindcss/postcss": "^4.1.18",
-    "axios": "^1.13.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.30.3",
-    "socket.io-client": "^4.8.3"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.43",
-    "@types/react-dom": "^18.2.17",
-    "@vitejs/plugin-react": "^4.2.1",
-    "autoprefixer": "^10.4.24",
-    "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.18",
-    "vite": "^5.0.8"
-  }
-}
diff --git a/src/frontend/postcss.config.js b/src/frontend/postcss.config.js
deleted file mode 100644
index 1c87846..0000000
--- a/src/frontend/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    '@tailwindcss/postcss': {},
-    autoprefixer: {},
-  },
-}
diff --git a/src/frontend/public/.well-known/security.txt b/src/frontend/public/.well-known/security.txt
deleted file mode 100644
index 607e52d..0000000
--- a/src/frontend/public/.well-known/security.txt
+++ /dev/null
@@ -1,16 +0,0 @@
-# AeThex Connect Security Policy
-# https://aethex.online/.well-known/security.txt
-
-Contact: mailto:security@aethex.online
-Contact: https://github.com/AeThex-Corporation/AeThex-Connect/security/advisories
-Expires: 2027-02-05T00:00:00.000Z
-Encryption: https://aethex.online/.well-known/pgp-key.txt
-Preferred-Languages: en
-Canonical: https://aethex.online/.well-known/security.txt
-Policy: https://aethex.online/security-policy
-
-# We take security seriously. If you discover a vulnerability,
-# please report it responsibly. We offer a bug bounty program
-# for qualifying security issues.
-
-# Acknowledgments: https://aethex.online/security/hall-of-fame
diff --git a/src/frontend/public/apple-touch-icon.png b/src/frontend/public/apple-touch-icon.png
deleted file mode 100644
index 4595280..0000000
Binary files a/src/frontend/public/apple-touch-icon.png and /dev/null differ
diff --git a/src/frontend/public/brand-kit.png b/src/frontend/public/brand-kit.png
deleted file mode 100644
index 85512e7..0000000
Binary files a/src/frontend/public/brand-kit.png and /dev/null differ
diff --git a/src/frontend/public/brand-kit.svg b/src/frontend/public/brand-kit.svg
deleted file mode 100644
index e22eef2..0000000
--- a/src/frontend/public/brand-kit.svg
+++ /dev/null
@@ -1,175 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1600">
-  <defs>
-    <!-- Core Gradients -->
-    <linearGradient id="trinity-full" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#ff0000"/>
-      <stop offset="50%" style="stop-color:#0066ff"/>
-      <stop offset="100%" style="stop-color:#ffa500"/>
-    </linearGradient>
-    
-    <linearGradient id="foundation" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#ff0000"/>
-      <stop offset="100%" style="stop-color:#cc0000"/>
-    </linearGradient>
-    
-    <linearGradient id="corporation" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#0066ff"/>
-      <stop offset="100%" style="stop-color:#0044cc"/>
-    </linearGradient>
-    
-    <linearGradient id="labs" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#ffa500"/>
-      <stop offset="100%" style="stop-color:#cc8400"/>
-    </linearGradient>
-  </defs>
-  
-  <!-- Background -->
-  <rect width="1200" height="1600" fill="#0a0a0a"/>
-  
-  <!-- Header -->
-  <text x="600" y="80" font-family="system-ui, sans-serif" font-size="36" font-weight="700" fill="white" text-anchor="middle">
-    AeThex Connect Brand Kit
-  </text>
-  <line x1="100" y1="110" x2="1100" y2="110" stroke="url(#trinity-full)" stroke-width="2"/>
-  
-  <!-- Section 1: Primary Logos -->
-  <text x="100" y="180" font-family="system-ui, sans-serif" font-size="24" font-weight="600" fill="#888">PRIMARY LOGOS</text>
-  
-  <!-- Full Color Logo -->
-  <g transform="translate(200, 250)">
-    <rect x="-80" y="-80" width="160" height="160" fill="#0a0a0a" stroke="#333" rx="8"/>
-    <path d="M0 -50 L50 0 L0 50 L-50 0 Z" fill="none" stroke="url(#trinity-full)" stroke-width="3"/>
-    <path d="M0 -30 L30 0 L0 30 L-30 0 Z" fill="url(#trinity-full)" opacity="0.2"/>
-    <circle cx="0" cy="0" r="8" fill="url(#trinity-full)"/>
-    <text x="0" y="110" font-family="system-ui, sans-serif" font-size="12" fill="#666" text-anchor="middle">Full Color</text>
-  </g>
-  
-  <!-- White Logo -->
-  <g transform="translate(450, 250)">
-    <rect x="-80" y="-80" width="160" height="160" fill="#0a0a0a" stroke="#333" rx="8"/>
-    <path d="M0 -50 L50 0 L0 50 L-50 0 Z" fill="none" stroke="white" stroke-width="3"/>
-    <path d="M0 -30 L30 0 L0 30 L-30 0 Z" fill="white" opacity="0.2"/>
-    <circle cx="0" cy="0" r="8" fill="white"/>
-    <text x="0" y="110" font-family="system-ui, sans-serif" font-size="12" fill="#666" text-anchor="middle">White (Dark BG)</text>
-  </g>
-  
-  <!-- Black Logo -->
-  <g transform="translate(700, 250)">
-    <rect x="-80" y="-80" width="160" height="160" fill="white" stroke="#333" rx="8"/>
-    <path d="M0 -50 L50 0 L0 50 L-50 0 Z" fill="none" stroke="#0a0a0a" stroke-width="3"/>
-    <path d="M0 -30 L30 0 L0 30 L-30 0 Z" fill="#0a0a0a" opacity="0.2"/>
-    <circle cx="0" cy="0" r="8" fill="#0a0a0a"/>
-    <text x="0" y="110" font-family="system-ui, sans-serif" font-size="12" fill="#666" text-anchor="middle">Black (Light BG)</text>
-  </g>
-  
-  <!-- Minimal Icon -->
-  <g transform="translate(950, 250)">
-    <rect x="-80" y="-80" width="160" height="160" fill="#0a0a0a" stroke="#333" rx="8"/>
-    <path d="M0 -40 L40 0 L0 40 L-40 0 Z" fill="url(#trinity-full)"/>
-    <text x="0" y="110" font-family="system-ui, sans-serif" font-size="12" fill="#666" text-anchor="middle">Minimal Icon</text>
-  </g>
-  
-  <!-- Section 2: Trinity Variations -->
-  <text x="100" y="450" font-family="system-ui, sans-serif" font-size="24" font-weight="600" fill="#888">TRINITY DIVISIONS</text>
-  
-  <!-- Foundation -->
-  <g transform="translate(250, 550)">
-    <rect x="-100" y="-70" width="200" height="140" fill="#0a0a0a" stroke="#ff0000" stroke-width="2" rx="8"/>
-    <path d="M0 -35 L35 0 L0 35 L-35 0 Z" fill="none" stroke="#ff0000" stroke-width="2"/>
-    <circle cx="0" cy="0" r="6" fill="#ff0000"/>
-    <text x="0" y="55" font-family="system-ui, sans-serif" font-size="14" font-weight="600" fill="#ff0000" text-anchor="middle">Foundation</text>
-    <text x="0" y="90" font-family="system-ui, sans-serif" font-size="10" fill="#666" text-anchor="middle">#ff0000 | RGB(255,0,0)</text>
-  </g>
-  
-  <!-- Corporation -->
-  <g transform="translate(550, 550)">
-    <rect x="-100" y="-70" width="200" height="140" fill="#0a0a0a" stroke="#0066ff" stroke-width="2" rx="8"/>
-    <path d="M0 -35 L35 0 L0 35 L-35 0 Z" fill="none" stroke="#0066ff" stroke-width="2"/>
-    <circle cx="0" cy="0" r="6" fill="#0066ff"/>
-    <text x="0" y="55" font-family="system-ui, sans-serif" font-size="14" font-weight="600" fill="#0066ff" text-anchor="middle">Corporation</text>
-    <text x="0" y="90" font-family="system-ui, sans-serif" font-size="10" fill="#666" text-anchor="middle">#0066ff | RGB(0,102,255)</text>
-  </g>
-  
-  <!-- Labs -->
-  <g transform="translate(850, 550)">
-    <rect x="-100" y="-70" width="200" height="140" fill="#0a0a0a" stroke="#ffa500" stroke-width="2" rx="8"/>
-    <path d="M0 -35 L35 0 L0 35 L-35 0 Z" fill="none" stroke="#ffa500" stroke-width="2"/>
-    <circle cx="0" cy="0" r="6" fill="#ffa500"/>
-    <text x="0" y="55" font-family="system-ui, sans-serif" font-size="14" font-weight="600" fill="#ffa500" text-anchor="middle">Labs</text>
-    <text x="0" y="90" font-family="system-ui, sans-serif" font-size="10" fill="#666" text-anchor="middle">#ffa500 | RGB(255,165,0)</text>
-  </g>
-  
-  <!-- Section 3: Color Palette -->
-  <text x="100" y="750" font-family="system-ui, sans-serif" font-size="24" font-weight="600" fill="#888">COLOR PALETTE</text>
-  
-  <!-- Primary Colors -->
-  <g transform="translate(100, 800)">
-    <rect width="150" height="100" fill="#ff0000" rx="8"/>
-    <text x="75" y="130" font-family="monospace" font-size="12" fill="#888" text-anchor="middle">#ff0000</text>
-    <text x="75" y="145" font-family="system-ui, sans-serif" font-size="10" fill="#666" text-anchor="middle">Foundation Red</text>
-  </g>
-  
-  <g transform="translate(280, 800)">
-    <rect width="150" height="100" fill="#0066ff" rx="8"/>
-    <text x="75" y="130" font-family="monospace" font-size="12" fill="#888" text-anchor="middle">#0066ff</text>
-    <text x="75" y="145" font-family="system-ui, sans-serif" font-size="10" fill="#666" text-anchor="middle">Corporation Blue</text>
-  </g>
-  
-  <g transform="translate(460, 800)">
-    <rect width="150" height="100" fill="#ffa500" rx="8"/>
-    <text x="75" y="130" font-family="monospace" font-size="12" fill="#888" text-anchor="middle">#ffa500</text>
-    <text x="75" y="145" font-family="system-ui, sans-serif" font-size="10" fill="#666" text-anchor="middle">Labs Orange</text>
-  </g>
-  
-  <!-- Neutral Colors -->
-  <g transform="translate(640, 800)">
-    <rect width="150" height="100" fill="#0a0a0a" stroke="#333" rx="8"/>
-    <text x="75" y="130" font-family="monospace" font-size="12" fill="#888" text-anchor="middle">#0a0a0a</text>
-    <text x="75" y="145" font-family="system-ui, sans-serif" font-size="10" fill="#666" text-anchor="middle">Background</text>
-  </g>
-  
-  <g transform="translate(820, 800)">
-    <rect width="150" height="100" fill="#1a1a1a" stroke="#333" rx="8"/>
-    <text x="75" y="130" font-family="monospace" font-size="12" fill="#888" text-anchor="middle">#1a1a1a</text>
-    <text x="75" y="145" font-family="system-ui, sans-serif" font-size="10" fill="#666" text-anchor="middle">Surface</text>
-  </g>
-  
-  <g transform="translate(1000, 800)">
-    <rect width="150" height="100" fill="#2a2a2a" stroke="#333" rx="8"/>
-    <text x="75" y="130" font-family="monospace" font-size="12" fill="#888" text-anchor="middle">#2a2a2a</text>
-    <text x="75" y="145" font-family="system-ui, sans-serif" font-size="10" fill="#666" text-anchor="middle">Elevated</text>
-  </g>
-  
-  <!-- Section 4: Wordmark -->
-  <text x="100" y="1020" font-family="system-ui, sans-serif" font-size="24" font-weight="600" fill="#888">WORDMARKS</text>
-  
-  <!-- Full Wordmark -->
-  <g transform="translate(600, 1100)">
-    <rect x="-400" y="-50" width="800" height="100" fill="#0a0a0a" stroke="#333" rx="8"/>
-    <path d="M-350 0 L-320 -30 L-290 0 L-320 30 Z" fill="url(#trinity-full)"/>
-    <text x="-260" y="12" font-family="system-ui, sans-serif" font-size="36" font-weight="700" fill="white">AeThex Connect</text>
-  </g>
-  
-  <!-- Tagline -->
-  <g transform="translate(600, 1200)">
-    <text x="0" y="0" font-family="system-ui, sans-serif" font-size="18" fill="#666" text-anchor="middle" letter-spacing="0.3em">THE TRINITY OF COMMUNICATION</text>
-  </g>
-  
-  <!-- Section 5: Usage Guidelines -->
-  <text x="100" y="1300" font-family="system-ui, sans-serif" font-size="24" font-weight="600" fill="#888">USAGE GUIDELINES</text>
-  
-  <g transform="translate(100, 1340)">
-    <text font-family="system-ui, sans-serif" font-size="14" fill="#aaa">
-      <tspan x="0" dy="0">• Minimum logo size: 32px</tspan>
-      <tspan x="0" dy="25">• Always maintain clear space equal to the diamond height</tspan>
-      <tspan x="0" dy="25">• Do not rotate, stretch, or distort the logo</tspan>
-      <tspan x="0" dy="25">• Do not change the trinity colors</tspan>
-      <tspan x="0" dy="25">• Use white logo on dark backgrounds, black on light</tspan>
-    </text>
-  </g>
-  
-  <!-- Footer -->
-  <text x="600" y="1560" font-family="system-ui, sans-serif" font-size="12" fill="#444" text-anchor="middle">
-    © 2026 AeThex Corporation. All rights reserved.
-  </text>
-</svg>
diff --git a/src/frontend/public/discord-banner.png b/src/frontend/public/discord-banner.png
deleted file mode 100644
index 9d9e56f..0000000
Binary files a/src/frontend/public/discord-banner.png and /dev/null differ
diff --git a/src/frontend/public/discord-banner.svg b/src/frontend/public/discord-banner.svg
deleted file mode 100644
index 41d58de..0000000
--- a/src/frontend/public/discord-banner.svg
+++ /dev/null
@@ -1,56 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 540" width="960" height="540">
-  <defs>
-    <linearGradient id="trinity" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#ff0000"/>
-      <stop offset="50%" style="stop-color:#0066ff"/>
-      <stop offset="100%" style="stop-color:#ffa500"/>
-    </linearGradient>
-    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#050505"/>
-      <stop offset="100%" style="stop-color:#0a0a0a"/>
-    </linearGradient>
-    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
-      <feGaussianBlur stdDeviation="6" result="blur"/>
-      <feMerge>
-        <feMergeNode in="blur"/>
-        <feMergeNode in="SourceGraphic"/>
-      </feMerge>
-    </filter>
-    <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
-      <path d="M 40 0 L 0 0 0 40" fill="none" stroke="white" stroke-width="0.5" opacity="0.03"/>
-    </pattern>
-    <radialGradient id="vignette" cx="50%" cy="50%" r="70%">
-      <stop offset="0%" style="stop-color:#0a0a0a;stop-opacity:0"/>
-      <stop offset="100%" style="stop-color:#000000;stop-opacity:0.6"/>
-    </radialGradient>
-  </defs>
-  <rect width="960" height="540" fill="url(#bg)"/>
-  <rect width="960" height="540" fill="url(#grid)"/>
-  <ellipse cx="150" cy="150" rx="250" ry="180" fill="#ff0000" opacity="0.04" filter="url(#glow)"/>
-  <ellipse cx="850" cy="400" rx="280" ry="200" fill="#0066ff" opacity="0.04" filter="url(#glow)"/>
-  <ellipse cx="480" cy="270" rx="150" ry="120" fill="#ffa500" opacity="0.03" filter="url(#glow)"/>
-  <g transform="translate(480, 220)" filter="url(#glow)">
-    <path d="M0 -80 L80 0 L0 80 L-80 0 Z" fill="none" stroke="url(#trinity)" stroke-width="3"/>
-    <path d="M0 -48 L48 0 L0 48 L-48 0 Z" fill="url(#trinity)" opacity="0.15"/>
-    <circle cx="0" cy="0" r="12" fill="url(#trinity)"/>
-  </g>
-  <text x="480" y="360" font-family="system-ui, sans-serif" font-size="48" font-weight="700" fill="white" text-anchor="middle">AeThex Connect</text>
-  <text x="480" y="400" font-family="system-ui, sans-serif" font-size="18" fill="#666" text-anchor="middle">The Trinity of Communication</text>
-  <g transform="translate(480, 460)">
-    <rect x="-150" width="80" height="28" rx="14" fill="#ff0000" opacity="0.8"/>
-    <text x="-110" y="19" font-family="system-ui, sans-serif" font-size="11" font-weight="600" fill="white" text-anchor="middle">Foundation</text>
-    <rect x="-45" width="90" height="28" rx="14" fill="#0066ff" opacity="0.8"/>
-    <text x="0" y="19" font-family="system-ui, sans-serif" font-size="11" font-weight="600" fill="white" text-anchor="middle">Corporation</text>
-    <rect x="70" width="80" height="28" rx="14" fill="#ffa500" opacity="0.8"/>
-    <text x="110" y="19" font-family="system-ui, sans-serif" font-size="11" font-weight="600" fill="white" text-anchor="middle">Labs</text>
-  </g>
-  <g opacity="0.4">
-    <path d="M0 40 L0 0 L40 0" fill="none" stroke="#ff0000" stroke-width="2"/>
-    <path d="M920 0 L960 0 L960 40" fill="none" stroke="#0066ff" stroke-width="2"/>
-    <path d="M0 500 L0 540 L40 540" fill="none" stroke="#ffa500" stroke-width="2"/>
-    <path d="M920 540 L960 540 L960 500" fill="none" stroke="white" stroke-width="2"/>
-  </g>
-  <rect x="0" y="0" width="960" height="2" fill="url(#trinity)"/>
-  <rect x="0" y="538" width="960" height="2" fill="url(#trinity)"/>
-  <rect width="960" height="540" fill="url(#vignette)"/>
-</svg>
diff --git a/src/frontend/public/favicon-16x16.png b/src/frontend/public/favicon-16x16.png
deleted file mode 100644
index ee3a6e7..0000000
Binary files a/src/frontend/public/favicon-16x16.png and /dev/null differ
diff --git a/src/frontend/public/favicon-192x192.png b/src/frontend/public/favicon-192x192.png
deleted file mode 100644
index 57b0ee7..0000000
Binary files a/src/frontend/public/favicon-192x192.png and /dev/null differ
diff --git a/src/frontend/public/favicon-32x32.png b/src/frontend/public/favicon-32x32.png
deleted file mode 100644
index c4485f4..0000000
Binary files a/src/frontend/public/favicon-32x32.png and /dev/null differ
diff --git a/src/frontend/public/favicon-512x512.png b/src/frontend/public/favicon-512x512.png
deleted file mode 100644
index d3b2032..0000000
Binary files a/src/frontend/public/favicon-512x512.png and /dev/null differ
diff --git a/src/frontend/public/favicon.svg b/src/frontend/public/favicon.svg
deleted file mode 100644
index ce4b263..0000000
--- a/src/frontend/public/favicon.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-  <defs>
-    <linearGradient id="trinity" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#ff0000"/>
-      <stop offset="50%" style="stop-color:#0066ff"/>
-      <stop offset="100%" style="stop-color:#ffa500"/>
-    </linearGradient>
-  </defs>
-  <!-- Background circle -->
-  <circle cx="50" cy="50" r="48" fill="#0a0a0a" stroke="url(#trinity)" stroke-width="2"/>
-  <!-- AeThex Trinity Diamond -->
-  <path d="M50 15 L80 50 L50 85 L20 50 Z" fill="none" stroke="url(#trinity)" stroke-width="3"/>
-  <!-- Inner diamond -->
-  <path d="M50 28 L68 50 L50 72 L32 50 Z" fill="url(#trinity)" opacity="0.3"/>
-  <!-- Center dot -->
-  <circle cx="50" cy="50" r="6" fill="url(#trinity)"/>
-</svg>
diff --git a/src/frontend/public/hero-bg.svg b/src/frontend/public/hero-bg.svg
deleted file mode 100644
index 1b7537d..0000000
--- a/src/frontend/public/hero-bg.svg
+++ /dev/null
@@ -1,138 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice">
-  <defs>
-    <!-- Animated gradient for background -->
-    <linearGradient id="bg-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#0a0a0a"/>
-      <stop offset="50%" style="stop-color:#0f0f0f"/>
-      <stop offset="100%" style="stop-color:#0a0a0a"/>
-    </linearGradient>
-    
-    <linearGradient id="foundation-grad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#ff0000"/>
-      <stop offset="100%" style="stop-color:#cc0000"/>
-    </linearGradient>
-    
-    <linearGradient id="corporation-grad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#0066ff"/>
-      <stop offset="100%" style="stop-color:#0044cc"/>
-    </linearGradient>
-    
-    <linearGradient id="labs-grad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#ffa500"/>
-      <stop offset="100%" style="stop-color:#cc8400"/>
-    </linearGradient>
-    
-    <filter id="blur-glow" x="-50%" y="-50%" width="200%" height="200%">
-      <feGaussianBlur stdDeviation="20" result="blur"/>
-      <feMerge>
-        <feMergeNode in="blur"/>
-        <feMergeNode in="SourceGraphic"/>
-      </feMerge>
-    </filter>
-    
-    <!-- Grid pattern -->
-    <pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse">
-      <path d="M 100 0 L 0 0 0 100" fill="none" stroke="white" stroke-width="0.5" opacity="0.05"/>
-    </pattern>
-    
-    <!-- Hexagon pattern -->
-    <pattern id="hex-pattern" width="60" height="52" patternUnits="userSpaceOnUse">
-      <polygon points="30,0 60,15 60,37 30,52 0,37 0,15" fill="none" stroke="white" stroke-width="0.3" opacity="0.03"/>
-    </pattern>
-  </defs>
-  
-  <!-- Background -->
-  <rect width="1920" height="1080" fill="url(#bg-gradient)"/>
-  
-  <!-- Grid overlay -->
-  <rect width="1920" height="1080" fill="url(#grid)"/>
-  <rect width="1920" height="1080" fill="url(#hex-pattern)">
-    <animate attributeName="opacity" values="0.5;1;0.5" dur="8s" repeatCount="indefinite"/>
-  </rect>
-  
-  <!-- Animated nebula blobs -->
-  <ellipse cx="300" cy="200" rx="400" ry="300" fill="url(#foundation-grad)" opacity="0.05" filter="url(#blur-glow)">
-    <animate attributeName="cx" values="300;500;300" dur="20s" repeatCount="indefinite"/>
-    <animate attributeName="cy" values="200;400;200" dur="25s" repeatCount="indefinite"/>
-    <animate attributeName="opacity" values="0.03;0.08;0.03" dur="8s" repeatCount="indefinite"/>
-  </ellipse>
-  
-  <ellipse cx="1600" cy="800" rx="500" ry="350" fill="url(#corporation-grad)" opacity="0.05" filter="url(#blur-glow)">
-    <animate attributeName="cx" values="1600;1400;1600" dur="22s" repeatCount="indefinite"/>
-    <animate attributeName="cy" values="800;600;800" dur="18s" repeatCount="indefinite"/>
-    <animate attributeName="opacity" values="0.03;0.08;0.03" dur="10s" repeatCount="indefinite"/>
-  </ellipse>
-  
-  <ellipse cx="960" cy="540" rx="300" ry="250" fill="url(#labs-grad)" opacity="0.04" filter="url(#blur-glow)">
-    <animate attributeName="rx" values="300;400;300" dur="15s" repeatCount="indefinite"/>
-    <animate attributeName="opacity" values="0.02;0.06;0.02" dur="6s" repeatCount="indefinite"/>
-  </ellipse>
-  
-  <!-- Floating particles -->
-  <g>
-    <!-- Foundation particles -->
-    <circle cx="100" cy="100" r="2" fill="#ff0000" opacity="0.6">
-      <animate attributeName="cy" values="100;1000;100" dur="30s" repeatCount="indefinite"/>
-      <animate attributeName="opacity" values="0;0.8;0" dur="30s" repeatCount="indefinite"/>
-    </circle>
-    <circle cx="400" cy="300" r="1.5" fill="#ff0000" opacity="0.5">
-      <animate attributeName="cy" values="300;1100;300" dur="25s" repeatCount="indefinite"/>
-      <animate attributeName="opacity" values="0;0.6;0" dur="25s" repeatCount="indefinite"/>
-    </circle>
-    <circle cx="250" cy="500" r="1" fill="#ff0000" opacity="0.4">
-      <animate attributeName="cy" values="500;1300;500" dur="35s" repeatCount="indefinite"/>
-    </circle>
-    
-    <!-- Corporation particles -->
-    <circle cx="1500" cy="200" r="2" fill="#0066ff" opacity="0.6">
-      <animate attributeName="cy" values="200;1100;200" dur="28s" repeatCount="indefinite"/>
-      <animate attributeName="opacity" values="0;0.8;0" dur="28s" repeatCount="indefinite"/>
-    </circle>
-    <circle cx="1700" cy="400" r="1.5" fill="#0066ff" opacity="0.5">
-      <animate attributeName="cy" values="400;1200;400" dur="32s" repeatCount="indefinite"/>
-    </circle>
-    <circle cx="1300" cy="600" r="1" fill="#0066ff" opacity="0.4">
-      <animate attributeName="cy" values="600;1400;600" dur="26s" repeatCount="indefinite"/>
-    </circle>
-    
-    <!-- Labs particles -->
-    <circle cx="900" cy="150" r="2" fill="#ffa500" opacity="0.6">
-      <animate attributeName="cy" values="150;1050;150" dur="24s" repeatCount="indefinite"/>
-      <animate attributeName="opacity" values="0;0.8;0" dur="24s" repeatCount="indefinite"/>
-    </circle>
-    <circle cx="1000" cy="350" r="1.5" fill="#ffa500" opacity="0.5">
-      <animate attributeName="cy" values="350;1150;350" dur="29s" repeatCount="indefinite"/>
-    </circle>
-    <circle cx="800" cy="550" r="1" fill="#ffa500" opacity="0.4">
-      <animate attributeName="cy" values="550;1350;550" dur="33s" repeatCount="indefinite"/>
-    </circle>
-  </g>
-  
-  <!-- Scanning lines -->
-  <rect x="0" y="0" width="1920" height="1" fill="white" opacity="0.03">
-    <animate attributeName="y" values="0;1080;0" dur="8s" repeatCount="indefinite"/>
-  </rect>
-  <rect x="0" y="0" width="1920" height="1" fill="white" opacity="0.02">
-    <animate attributeName="y" values="1080;0;1080" dur="12s" repeatCount="indefinite"/>
-  </rect>
-  
-  <!-- Horizontal accent lines -->
-  <line x1="0" y1="540" x2="1920" y2="540" stroke="white" stroke-width="0.5" opacity="0.02">
-    <animate attributeName="opacity" values="0.01;0.04;0.01" dur="5s" repeatCount="indefinite"/>
-  </line>
-  
-  <!-- Corner accents -->
-  <g opacity="0.1">
-    <path d="M0 100 L0 0 L100 0" fill="none" stroke="url(#foundation-grad)" stroke-width="2"/>
-    <path d="M1820 0 L1920 0 L1920 100" fill="none" stroke="url(#corporation-grad)" stroke-width="2"/>
-    <path d="M0 980 L0 1080 L100 1080" fill="none" stroke="url(#labs-grad)" stroke-width="2"/>
-    <path d="M1820 1080 L1920 1080 L1920 980" fill="none" stroke="white" stroke-width="2"/>
-  </g>
-  
-  <!-- Vignette effect -->
-  <radialGradient id="vignette" cx="50%" cy="50%" r="70%">
-    <stop offset="0%" style="stop-color:#0a0a0a;stop-opacity:0"/>
-    <stop offset="100%" style="stop-color:#000000;stop-opacity:0.8"/>
-  </radialGradient>
-  <rect width="1920" height="1080" fill="url(#vignette)"/>
-</svg>
diff --git a/src/frontend/public/logo-400.png b/src/frontend/public/logo-400.png
deleted file mode 100644
index 9619e34..0000000
Binary files a/src/frontend/public/logo-400.png and /dev/null differ
diff --git a/src/frontend/public/logo-animated.svg b/src/frontend/public/logo-animated.svg
deleted file mode 100644
index 7c143ea..0000000
--- a/src/frontend/public/logo-animated.svg
+++ /dev/null
@@ -1,117 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400">
-  <defs>
-    <!-- Trinity Gradient -->
-    <linearGradient id="trinity" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#ff0000">
-        <animate attributeName="stop-color" values="#ff0000;#0066ff;#ffa500;#ff0000" dur="4s" repeatCount="indefinite"/>
-      </stop>
-      <stop offset="50%" style="stop-color:#0066ff">
-        <animate attributeName="stop-color" values="#0066ff;#ffa500;#ff0000;#0066ff" dur="4s" repeatCount="indefinite"/>
-      </stop>
-      <stop offset="100%" style="stop-color:#ffa500">
-        <animate attributeName="stop-color" values="#ffa500;#ff0000;#0066ff;#ffa500" dur="4s" repeatCount="indefinite"/>
-      </stop>
-    </linearGradient>
-    
-    <!-- Glow Filter -->
-    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
-      <feGaussianBlur stdDeviation="4" result="coloredBlur"/>
-      <feMerge>
-        <feMergeNode in="coloredBlur"/>
-        <feMergeNode in="SourceGraphic"/>
-      </feMerge>
-    </filter>
-    
-    <!-- Pulse Glow -->
-    <filter id="pulse-glow" x="-100%" y="-100%" width="300%" height="300%">
-      <feGaussianBlur stdDeviation="8" result="blur">
-        <animate attributeName="stdDeviation" values="4;12;4" dur="2s" repeatCount="indefinite"/>
-      </feGaussianBlur>
-      <feMerge>
-        <feMergeNode in="blur"/>
-        <feMergeNode in="SourceGraphic"/>
-      </feMerge>
-    </filter>
-  </defs>
-  
-  <!-- Background -->
-  <rect width="400" height="400" fill="#0a0a0a"/>
-  
-  <!-- Rotating outer ring -->
-  <g transform="translate(200, 200)">
-    <circle r="150" fill="none" stroke="url(#trinity)" stroke-width="1" opacity="0.3">
-      <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="20s" repeatCount="indefinite"/>
-    </circle>
-    <circle r="140" fill="none" stroke="url(#trinity)" stroke-width="0.5" opacity="0.2">
-      <animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="15s" repeatCount="indefinite"/>
-    </circle>
-  </g>
-  
-  <!-- Orbiting particles -->
-  <g transform="translate(200, 200)">
-    <!-- Foundation particle -->
-    <circle r="4" fill="#ff0000" filter="url(#glow)">
-      <animateMotion dur="6s" repeatCount="indefinite">
-        <mpath href="#orbit1"/>
-      </animateMotion>
-    </circle>
-    <!-- Corporation particle -->
-    <circle r="4" fill="#0066ff" filter="url(#glow)">
-      <animateMotion dur="6s" repeatCount="indefinite" begin="2s">
-        <mpath href="#orbit1"/>
-      </animateMotion>
-    </circle>
-    <!-- Labs particle -->
-    <circle r="4" fill="#ffa500" filter="url(#glow)">
-      <animateMotion dur="6s" repeatCount="indefinite" begin="4s">
-        <mpath href="#orbit1"/>
-      </animateMotion>
-    </circle>
-    
-    <!-- Orbit path (invisible) -->
-    <path id="orbit1" d="M 0,-120 A 120,120 0 1,1 0,120 A 120,120 0 1,1 0,-120" fill="none"/>
-  </g>
-  
-  <!-- Main Diamond - Outer -->
-  <g transform="translate(200, 200)" filter="url(#glow)">
-    <path d="M0 -100 L100 0 L0 100 L-100 0 Z" fill="none" stroke="url(#trinity)" stroke-width="3">
-      <animate attributeName="stroke-dasharray" values="0 800;400 400;800 0;400 400;0 800" dur="4s" repeatCount="indefinite"/>
-    </path>
-  </g>
-  
-  <!-- Main Diamond - Inner -->
-  <g transform="translate(200, 200)">
-    <path d="M0 -60 L60 0 L0 60 L-60 0 Z" fill="url(#trinity)" opacity="0.15">
-      <animate attributeName="opacity" values="0.1;0.25;0.1" dur="2s" repeatCount="indefinite"/>
-    </path>
-    <path d="M0 -60 L60 0 L0 60 L-60 0 Z" fill="none" stroke="url(#trinity)" stroke-width="2"/>
-  </g>
-  
-  <!-- Center Core -->
-  <g transform="translate(200, 200)" filter="url(#pulse-glow)">
-    <circle r="20" fill="url(#trinity)">
-      <animate attributeName="r" values="18;22;18" dur="1.5s" repeatCount="indefinite"/>
-    </circle>
-  </g>
-  
-  <!-- Trinity connection lines -->
-  <g transform="translate(200, 200)" opacity="0.5">
-    <!-- Top to bottom-left -->
-    <line x1="0" y1="-100" x2="-60" y2="60" stroke="#ff0000" stroke-width="1">
-      <animate attributeName="opacity" values="0;1;0" dur="3s" repeatCount="indefinite"/>
-    </line>
-    <!-- Top to bottom-right -->
-    <line x1="0" y1="-100" x2="60" y2="60" stroke="#0066ff" stroke-width="1">
-      <animate attributeName="opacity" values="0;1;0" dur="3s" repeatCount="indefinite" begin="1s"/>
-    </line>
-    <!-- Bottom-left to bottom-right -->
-    <line x1="-60" y1="60" x2="60" y2="60" stroke="#ffa500" stroke-width="1">
-      <animate attributeName="opacity" values="0;1;0" dur="3s" repeatCount="indefinite" begin="2s"/>
-    </line>
-  </g>
-  
-  <!-- Scan line effect -->
-  <rect x="0" y="0" width="400" height="2" fill="url(#trinity)" opacity="0.3">
-    <animate attributeName="y" values="0;400;0" dur="4s" repeatCount="indefinite"/>
-  </rect>
-</svg>
diff --git a/src/frontend/public/og-image.png b/src/frontend/public/og-image.png
deleted file mode 100644
index 384dbae..0000000
Binary files a/src/frontend/public/og-image.png and /dev/null differ
diff --git a/src/frontend/public/og-image.svg b/src/frontend/public/og-image.svg
deleted file mode 100644
index a776a0e..0000000
--- a/src/frontend/public/og-image.svg
+++ /dev/null
@@ -1,94 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" width="1200" height="630">
-  <defs>
-    <linearGradient id="bg-grad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#0a0a0a"/>
-      <stop offset="50%" style="stop-color:#0f0f0f"/>
-      <stop offset="100%" style="stop-color:#0a0a0a"/>
-    </linearGradient>
-    <linearGradient id="trinity-grad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#ff0000"/>
-      <stop offset="50%" style="stop-color:#0066ff"/>
-      <stop offset="100%" style="stop-color:#ffa500"/>
-    </linearGradient>
-    <linearGradient id="foundation" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" style="stop-color:#ff0000"/>
-      <stop offset="100%" style="stop-color:#cc0000"/>
-    </linearGradient>
-    <linearGradient id="corporation" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" style="stop-color:#0066ff"/>
-      <stop offset="100%" style="stop-color:#0044cc"/>
-    </linearGradient>
-    <linearGradient id="labs" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" style="stop-color:#ffa500"/>
-      <stop offset="100%" style="stop-color:#cc8400"/>
-    </linearGradient>
-    <filter id="glow">
-      <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
-      <feMerge>
-        <feMergeNode in="coloredBlur"/>
-        <feMergeNode in="SourceGraphic"/>
-      </feMerge>
-    </filter>
-  </defs>
-  
-  <!-- Background -->
-  <rect width="1200" height="630" fill="url(#bg-grad)"/>
-  
-  <!-- Grid pattern background -->
-  <g opacity="0.03">
-    <pattern id="grid" width="60" height="60" patternUnits="userSpaceOnUse">
-      <path d="M 60 0 L 0 0 0 60" fill="none" stroke="white" stroke-width="1"/>
-    </pattern>
-    <rect width="1200" height="630" fill="url(#grid)"/>
-  </g>
-  
-  <!-- Decorative circles -->
-  <circle cx="100" cy="100" r="200" fill="url(#foundation)" opacity="0.05"/>
-  <circle cx="1100" cy="530" r="250" fill="url(#corporation)" opacity="0.05"/>
-  <circle cx="600" cy="315" r="150" fill="url(#labs)" opacity="0.03"/>
-  
-  <!-- Trinity Diamond Logo -->
-  <g transform="translate(150, 200)" filter="url(#glow)">
-    <path d="M100 0 L200 100 L100 200 L0 100 Z" fill="none" stroke="url(#trinity-grad)" stroke-width="4"/>
-    <path d="M100 30 L170 100 L100 170 L30 100 Z" fill="url(#trinity-grad)" opacity="0.2"/>
-    <circle cx="100" cy="100" r="15" fill="url(#trinity-grad)"/>
-  </g>
-  
-  <!-- Main Text -->
-  <text x="420" y="260" font-family="system-ui, -apple-system, sans-serif" font-size="72" font-weight="700" fill="white">
-    AeThex Connect
-  </text>
-  
-  <!-- Tagline -->
-  <text x="420" y="330" font-family="system-ui, -apple-system, sans-serif" font-size="28" fill="#888888">
-    Secure, Open-Source Communication
-  </text>
-  
-  <!-- Trinity Pills -->
-  <g transform="translate(420, 370)">
-    <rect x="0" y="0" width="120" height="36" rx="18" fill="url(#foundation)" opacity="0.8"/>
-    <text x="60" y="24" font-family="system-ui, sans-serif" font-size="14" font-weight="600" fill="white" text-anchor="middle">Foundation</text>
-    
-    <rect x="140" y="0" width="130" height="36" rx="18" fill="url(#corporation)" opacity="0.8"/>
-    <text x="205" y="24" font-family="system-ui, sans-serif" font-size="14" font-weight="600" fill="white" text-anchor="middle">Corporation</text>
-    
-    <rect x="290" y="0" width="80" height="36" rx="18" fill="url(#labs)" opacity="0.8"/>
-    <text x="330" y="24" font-family="system-ui, sans-serif" font-size="14" font-weight="600" fill="white" text-anchor="middle">Labs</text>
-  </g>
-  
-  <!-- Features -->
-  <g transform="translate(420, 450)" font-family="system-ui, sans-serif" font-size="18" fill="#666666">
-    <text x="0" y="0">🔐 End-to-End Encrypted</text>
-    <text x="280" y="0">📞 Voice &amp; Video</text>
-    <text x="480" y="0">🌐 Cross-Platform</text>
-  </g>
-  
-  <!-- URL -->
-  <text x="420" y="530" font-family="system-ui, sans-serif" font-size="24" fill="url(#trinity-grad)">
-    aethex.online
-  </text>
-  
-  <!-- Border accent -->
-  <rect x="0" y="0" width="1200" height="4" fill="url(#trinity-grad)"/>
-  <rect x="0" y="626" width="1200" height="4" fill="url(#trinity-grad)"/>
-</svg>
diff --git a/src/frontend/public/robots.txt b/src/frontend/public/robots.txt
deleted file mode 100644
index 6d07f23..0000000
--- a/src/frontend/public/robots.txt
+++ /dev/null
@@ -1,23 +0,0 @@
-# AeThex Connect - robots.txt
-# https://aethex.online
-
-User-agent: *
-Allow: /
-Disallow: /api/
-Disallow: /app/
-
-# Sitemaps
-Sitemap: https://aethex.online/sitemap.xml
-
-# Crawl-delay for politeness
-Crawl-delay: 1
-
-# Block specific bots if needed
-User-agent: GPTBot
-Disallow: /
-
-User-agent: ChatGPT-User
-Disallow: /
-
-User-agent: CCBot
-Disallow: /
diff --git a/src/frontend/public/site.webmanifest b/src/frontend/public/site.webmanifest
deleted file mode 100644
index 56ccac4..0000000
--- a/src/frontend/public/site.webmanifest
+++ /dev/null
@@ -1,66 +0,0 @@
-{
-  "name": "AeThex Connect",
-  "short_name": "AeThex",
-  "description": "Privacy-first communication platform with end-to-end encryption",
-  "start_url": "/",
-  "display": "standalone",
-  "background_color": "#0a0a0a",
-  "theme_color": "#0a0a0a",
-  "orientation": "portrait-primary",
-  "icons": [
-    {
-      "src": "/favicon.svg",
-      "sizes": "any",
-      "type": "image/svg+xml",
-      "purpose": "any maskable"
-    },
-    {
-      "src": "/favicon-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "/favicon-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ],
-  "categories": ["communication", "social", "utilities"],
-  "screenshots": [
-    {
-      "src": "/screenshots/desktop.png",
-      "sizes": "1920x1080",
-      "type": "image/png",
-      "form_factor": "wide"
-    },
-    {
-      "src": "/screenshots/mobile.png",
-      "sizes": "750x1334",
-      "type": "image/png",
-      "form_factor": "narrow"
-    }
-  ],
-  "related_applications": [
-    {
-      "platform": "play",
-      "url": "https://play.google.com/store/apps/details?id=online.aethex.connect"
-    },
-    {
-      "platform": "itunes",
-      "url": "https://apps.apple.com/app/aethex-connect/id123456789"
-    }
-  ],
-  "prefer_related_applications": false,
-  "shortcuts": [
-    {
-      "name": "New Message",
-      "url": "/app?action=new-message",
-      "icons": [{ "src": "/icons/message.png", "sizes": "96x96" }]
-    },
-    {
-      "name": "Join Call",
-      "url": "/app?action=join-call",
-      "icons": [{ "src": "/icons/call.png", "sizes": "96x96" }]
-    }
-  ]
-}
diff --git a/src/frontend/public/sitemap.xml b/src/frontend/public/sitemap.xml
deleted file mode 100644
index 1759fa9..0000000
--- a/src/frontend/public/sitemap.xml
+++ /dev/null
@@ -1,47 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
-        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-        xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
-        http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
-  
-  <!-- Homepage -->
-  <url>
-    <loc>https://aethex.online/</loc>
-    <lastmod>2026-02-05</lastmod>
-    <changefreq>weekly</changefreq>
-    <priority>1.0</priority>
-  </url>
-  
-  <!-- Features Page -->
-  <url>
-    <loc>https://aethex.online/features</loc>
-    <lastmod>2026-02-05</lastmod>
-    <changefreq>monthly</changefreq>
-    <priority>0.9</priority>
-  </url>
-  
-  <!-- About Page -->
-  <url>
-    <loc>https://aethex.online/about</loc>
-    <lastmod>2026-02-05</lastmod>
-    <changefreq>monthly</changefreq>
-    <priority>0.8</priority>
-  </url>
-  
-  <!-- Login Page -->
-  <url>
-    <loc>https://aethex.online/login</loc>
-    <lastmod>2026-02-05</lastmod>
-    <changefreq>yearly</changefreq>
-    <priority>0.6</priority>
-  </url>
-  
-  <!-- Register Page -->
-  <url>
-    <loc>https://aethex.online/register</loc>
-    <lastmod>2026-02-05</lastmod>
-    <changefreq>yearly</changefreq>
-    <priority>0.7</priority>
-  </url>
-  
-</urlset>
diff --git a/src/frontend/public/twitter-banner.png b/src/frontend/public/twitter-banner.png
deleted file mode 100644
index 5e77f0f..0000000
Binary files a/src/frontend/public/twitter-banner.png and /dev/null differ
diff --git a/src/frontend/public/twitter-banner.svg b/src/frontend/public/twitter-banner.svg
deleted file mode 100644
index c0cdd8d..0000000
--- a/src/frontend/public/twitter-banner.svg
+++ /dev/null
@@ -1,68 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1500 500" width="1500" height="500">
-  <defs>
-    <linearGradient id="trinity" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#ff0000"/>
-      <stop offset="50%" style="stop-color:#0066ff"/>
-      <stop offset="100%" style="stop-color:#ffa500"/>
-    </linearGradient>
-    <linearGradient id="bg-grad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#0a0a0a"/>
-      <stop offset="100%" style="stop-color:#0f0f0f"/>
-    </linearGradient>
-    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
-      <feGaussianBlur stdDeviation="8" result="blur"/>
-      <feMerge>
-        <feMergeNode in="blur"/>
-        <feMergeNode in="SourceGraphic"/>
-      </feMerge>
-    </filter>
-    <pattern id="grid" width="50" height="50" patternUnits="userSpaceOnUse">
-      <path d="M 50 0 L 0 0 0 50" fill="none" stroke="white" stroke-width="0.5" opacity="0.03"/>
-    </pattern>
-  </defs>
-  
-  <!-- Background -->
-  <rect width="1500" height="500" fill="url(#bg-grad)"/>
-  <rect width="1500" height="500" fill="url(#grid)"/>
-  
-  <!-- Decorative elements -->
-  <circle cx="100" cy="100" r="200" fill="#ff0000" opacity="0.03"/>
-  <circle cx="1400" cy="400" r="250" fill="#0066ff" opacity="0.03"/>
-  <circle cx="750" cy="250" r="150" fill="#ffa500" opacity="0.02"/>
-  
-  <!-- Logo -->
-  <g transform="translate(250, 250)" filter="url(#glow)">
-    <path d="M0 -80 L80 0 L0 80 L-80 0 Z" fill="none" stroke="url(#trinity)" stroke-width="4"/>
-    <path d="M0 -50 L50 0 L0 50 L-50 0 Z" fill="url(#trinity)" opacity="0.2"/>
-    <circle cx="0" cy="0" r="15" fill="url(#trinity)"/>
-  </g>
-  
-  <!-- Text -->
-  <text x="420" y="230" font-family="system-ui, -apple-system, sans-serif" font-size="72" font-weight="700" fill="white">
-    AeThex Connect
-  </text>
-  <text x="420" y="290" font-family="system-ui, sans-serif" font-size="24" fill="#666">
-    Secure, Open-Source Communication Platform
-  </text>
-  
-  <!-- Trinity pills -->
-  <g transform="translate(420, 330)">
-    <rect width="100" height="32" rx="16" fill="#ff0000" opacity="0.8"/>
-    <text x="50" y="21" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="white" text-anchor="middle">Foundation</text>
-    
-    <rect x="120" width="110" height="32" rx="16" fill="#0066ff" opacity="0.8"/>
-    <text x="175" y="21" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="white" text-anchor="middle">Corporation</text>
-    
-    <rect x="250" width="70" height="32" rx="16" fill="#ffa500" opacity="0.8"/>
-    <text x="285" y="21" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="white" text-anchor="middle">Labs</text>
-  </g>
-  
-  <!-- URL -->
-  <text x="420" y="430" font-family="system-ui, sans-serif" font-size="20" fill="url(#trinity)">
-    aethex.online
-  </text>
-  
-  <!-- Border accents -->
-  <rect x="0" y="0" width="1500" height="3" fill="url(#trinity)"/>
-  <rect x="0" y="497" width="1500" height="3" fill="url(#trinity)"/>
-</svg>
diff --git a/src/frontend/public/youtube-banner.png b/src/frontend/public/youtube-banner.png
deleted file mode 100644
index f7e711a..0000000
Binary files a/src/frontend/public/youtube-banner.png and /dev/null differ
diff --git a/src/frontend/public/youtube-banner.svg b/src/frontend/public/youtube-banner.svg
deleted file mode 100644
index 29c8834..0000000
--- a/src/frontend/public/youtube-banner.svg
+++ /dev/null
@@ -1,89 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2560 1440" width="2560" height="1440">
-  <defs>
-    <linearGradient id="trinity" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#ff0000"/>
-      <stop offset="50%" style="stop-color:#0066ff"/>
-      <stop offset="100%" style="stop-color:#ffa500"/>
-    </linearGradient>
-    <linearGradient id="bg-grad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#050505"/>
-      <stop offset="50%" style="stop-color:#0a0a0a"/>
-      <stop offset="100%" style="stop-color:#050505"/>
-    </linearGradient>
-    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
-      <feGaussianBlur stdDeviation="15" result="blur"/>
-      <feMerge>
-        <feMergeNode in="blur"/>
-        <feMergeNode in="SourceGraphic"/>
-      </feMerge>
-    </filter>
-    <pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse">
-      <path d="M 80 0 L 0 0 0 80" fill="none" stroke="white" stroke-width="0.5" opacity="0.02"/>
-    </pattern>
-    <pattern id="hex" width="60" height="52" patternUnits="userSpaceOnUse">
-      <polygon points="30,0 60,15 60,37 30,52 0,37 0,15" fill="none" stroke="white" stroke-width="0.3" opacity="0.02"/>
-    </pattern>
-    <radialGradient id="vignette" cx="50%" cy="50%" r="70%">
-      <stop offset="0%" style="stop-color:#0a0a0a;stop-opacity:0"/>
-      <stop offset="100%" style="stop-color:#000000;stop-opacity:0.7"/>
-    </radialGradient>
-  </defs>
-  
-  <!-- Background -->
-  <rect width="2560" height="1440" fill="url(#bg-grad)"/>
-  <rect width="2560" height="1440" fill="url(#grid)"/>
-  <rect width="2560" height="1440" fill="url(#hex)"/>
-  
-  <!-- Nebula blobs -->
-  <ellipse cx="400" cy="400" rx="600" ry="450" fill="#ff0000" opacity="0.04" filter="url(#glow)"/>
-  <ellipse cx="2200" cy="1000" rx="700" ry="500" fill="#0066ff" opacity="0.04" filter="url(#glow)"/>
-  <ellipse cx="1280" cy="720" rx="400" ry="350" fill="#ffa500" opacity="0.03" filter="url(#glow)"/>
-  
-  <!-- Center content - safe zone 1546x423 centered -->
-  <g transform="translate(1280, 720)">
-    <!-- Main Diamond Logo -->
-    <g filter="url(#glow)">
-      <path d="M0 -150 L150 0 L0 150 L-150 0 Z" fill="none" stroke="url(#trinity)" stroke-width="5"/>
-      <path d="M0 -90 L90 0 L0 90 L-90 0 Z" fill="url(#trinity)" opacity="0.15"/>
-      <circle cx="0" cy="0" r="25" fill="url(#trinity)"/>
-    </g>
-  </g>
-  
-  <!-- Text in safe zone -->
-  <text x="1280" y="550" font-family="system-ui, -apple-system, sans-serif" font-size="42" font-weight="600" fill="#666" text-anchor="middle" letter-spacing="0.2em">
-    WELCOME TO
-  </text>
-  <text x="1280" y="920" font-family="system-ui, -apple-system, sans-serif" font-size="96" font-weight="700" fill="white" text-anchor="middle">
-    AeThex Connect
-  </text>
-  <text x="1280" y="1000" font-family="system-ui, sans-serif" font-size="32" fill="#888" text-anchor="middle">
-    Secure, Open-Source Communication
-  </text>
-  
-  <!-- Trinity badges -->
-  <g transform="translate(1280, 1080)">
-    <rect x="-250" width="140" height="40" rx="20" fill="#ff0000" opacity="0.8"/>
-    <text x="-180" y="27" font-family="system-ui, sans-serif" font-size="16" font-weight="600" fill="white" text-anchor="middle">Foundation</text>
-    
-    <rect x="-70" width="140" height="40" rx="20" fill="#0066ff" opacity="0.8"/>
-    <text x="0" y="27" font-family="system-ui, sans-serif" font-size="16" font-weight="600" fill="white" text-anchor="middle">Corporation</text>
-    
-    <rect x="110" width="140" height="40" rx="20" fill="#ffa500" opacity="0.8"/>
-    <text x="180" y="27" font-family="system-ui, sans-serif" font-size="16" font-weight="600" fill="white" text-anchor="middle">Labs</text>
-  </g>
-  
-  <!-- Corner accents -->
-  <g opacity="0.3">
-    <path d="M0 100 L0 0 L100 0" fill="none" stroke="#ff0000" stroke-width="3"/>
-    <path d="M2460 0 L2560 0 L2560 100" fill="none" stroke="#0066ff" stroke-width="3"/>
-    <path d="M0 1340 L0 1440 L100 1440" fill="none" stroke="#ffa500" stroke-width="3"/>
-    <path d="M2460 1440 L2560 1440 L2560 1340" fill="none" stroke="white" stroke-width="3"/>
-  </g>
-  
-  <!-- Top and bottom gradient bars -->
-  <rect x="0" y="0" width="2560" height="4" fill="url(#trinity)"/>
-  <rect x="0" y="1436" width="2560" height="4" fill="url(#trinity)"/>
-  
-  <!-- Vignette -->
-  <rect width="2560" height="1440" fill="url(#vignette)"/>
-</svg>
diff --git a/src/frontend/services/messaging.js b/src/frontend/services/messaging.js
deleted file mode 100644
index 82ade60..0000000
--- a/src/frontend/services/messaging.js
+++ /dev/null
@@ -1,159 +0,0 @@
-import { createClient } from '@supabase/supabase-js';
-import { io } from 'socket.io-client';
-
-// Supabase client
-const supabaseUrl = import.meta.env.VITE_SUPABASE_URL || 'http://127.0.0.1:3000';
-const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY || 'sb_publishable_ACJWlzQHlZjBrEguHvfOxg_3BJgxAaH';
-
-export const supabase = createClient(supabaseUrl, supabaseKey);
-
-// Socket.IO client
-const socketUrl = import.meta.env.VITE_SOCKET_URL || 'http://localhost:3000';
-export const socket = io(socketUrl, {
-  autoConnect: false,
-  transports: ['websocket', 'polling'],
-});
-
-// Connect socket when user is authenticated
-export const connectSocket = (userId) => {
-  if (!socket.connected) {
-    socket.auth = { userId };
-    socket.connect();
-  }
-};
-
-export const disconnectSocket = () => {
-  if (socket.connected) {
-    socket.disconnect();
-  }
-};
-
-// Messaging API
-export const messagingService = {
-  // Get all conversations for a user
-  async getConversations(userId) {
-    const { data, error } = await supabase
-      .from('conversation_participants')
-      .select(`
-        conversation_id,
-        conversations (
-          id,
-          type,
-          title,
-          description,
-          avatar_url,
-          created_at,
-          updated_at
-        )
-      `)
-      .eq('user_id', userId)
-      .order('conversations(updated_at)', { ascending: false });
-
-    if (error) throw error;
-    return data?.map(p => p.conversations) || [];
-  },
-
-  // Get messages for a conversation
-  async getMessages(conversationId, limit = 50) {
-    const { data, error } = await supabase
-      .from('messages')
-      .select('*')
-      .eq('conversation_id', conversationId)
-      .order('created_at', { ascending: false })
-      .limit(limit);
-
-    if (error) throw error;
-    return (data || []).reverse();
-  },
-
-  // Send a message
-  async sendMessage(conversationId, senderId, content) {
-    const { data, error } = await supabase
-      .from('messages')
-      .insert({
-        conversation_id: conversationId,
-        sender_id: senderId,
-        content_encrypted: content, // TODO: Add actual encryption
-        content_type: 'text',
-      })
-      .select()
-      .single();
-
-    if (error) throw error;
-
-    // Emit via socket for real-time
-    socket.emit('message:send', {
-      conversationId,
-      message: data,
-    });
-
-    return data;
-  },
-
-  // Create a new conversation
-  async createConversation(type, title, participantIds) {
-    const { data: conversation, error: convError } = await supabase
-      .from('conversations')
-      .insert({ type, title })
-      .select()
-      .single();
-
-    if (convError) throw convError;
-
-    // Add participants
-    const participants = participantIds.map(userId => ({
-      conversation_id: conversation.id,
-      user_id: userId,
-      role: 'member',
-    }));
-
-    const { error: partError } = await supabase
-      .from('conversation_participants')
-      .insert(participants);
-
-    if (partError) throw partError;
-
-    return conversation;
-  },
-
-  // Subscribe to new messages in a conversation
-  subscribeToMessages(conversationId, callback) {
-    const channel = supabase
-      .channel(`messages:${conversationId}`)
-      .on(
-        'postgres_changes',
-        {
-          event: 'INSERT',
-          schema: 'public',
-          table: 'messages',
-          filter: `conversation_id=eq.${conversationId}`,
-        },
-        (payload) => {
-          callback(payload.new);
-        }
-      )
-      .subscribe();
-
-    return () => {
-      supabase.removeChannel(channel);
-    };
-  },
-};
-
-// Socket event handlers
-socket.on('connect', () => {
-  console.log('Socket connected:', socket.id);
-});
-
-socket.on('disconnect', () => {
-  console.log('Socket disconnected');
-});
-
-socket.on('message:new', (message) => {
-  console.log('New message received:', message);
-  // This will be handled by the React context
-});
-
-socket.on('error', (error) => {
-  console.error('Socket error:', error);
-});
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
deleted file mode 100644
index 547da35..0000000
--- a/src/frontend/tailwind.config.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    "./index.html",
-    "./**/*.{js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {
-      colors: {
-        'discord-dark': '#0a0a0a',
-        'discord-darker': '#050505',
-        'discord-sidebar': '#0d0d0d',
-        'discord-channel': '#111111',
-        'discord-hover': '#1a1a1a',
-        'foundation': '#fbbf24',
-        'corporation': '#06b6d4',
-        'labs': '#a855f7',
-      }
-    },
-  },
-  plugins: [],
-}
diff --git a/src/frontend/utils/crypto.js b/src/frontend/utils/crypto.js
deleted file mode 100644
index eec1990..0000000
--- a/src/frontend/utils/crypto.js
+++ /dev/null
@@ -1,329 +0,0 @@
-/**
- * End-to-End Encryption Utilities
- * Client-side encryption using Web Crypto API
- * - RSA-OAEP for key exchange
- * - AES-256-GCM for message content
- */
-
-/**
- * Generate RSA key pair for user
- * @returns {Promise<{publicKey: string, privateKey: string}>}
- */
-export async function generateKeyPair() {
-  const keyPair = await window.crypto.subtle.generateKey(
-    {
-      name: 'RSA-OAEP',
-      modulusLength: 2048,
-      publicExponent: new Uint8Array([1, 0, 1]),
-      hash: 'SHA-256'
-    },
-    true, // extractable
-    ['encrypt', 'decrypt']
-  );
-
-  // Export keys
-  const publicKey = await window.crypto.subtle.exportKey('spki', keyPair.publicKey);
-  const privateKey = await window.crypto.subtle.exportKey('pkcs8', keyPair.privateKey);
-
-  return {
-    publicKey: arrayBufferToBase64(publicKey),
-    privateKey: arrayBufferToBase64(privateKey)
-  };
-}
-
-/**
- * Store private key encrypted with user's password
- * @param {string} privateKey - Base64 encoded private key
- * @param {string} password - User's password
- */
-export async function storePrivateKey(privateKey, password) {
-  // Derive encryption key from password
-  const passwordKey = await deriveKeyFromPassword(password);
-  
-  // Encrypt private key
-  const iv = window.crypto.getRandomValues(new Uint8Array(12));
-  const encrypted = await window.crypto.subtle.encrypt(
-    {
-      name: 'AES-GCM',
-      iv: iv
-    },
-    passwordKey,
-    base64ToArrayBuffer(privateKey)
-  );
-
-  // Store in localStorage
-  localStorage.setItem('encryptedPrivateKey', arrayBufferToBase64(encrypted));
-  localStorage.setItem('privateKeyIV', arrayBufferToBase64(iv));
-}
-
-/**
- * Retrieve and decrypt private key
- * @param {string} password - User's password
- * @returns {Promise<CryptoKey>} Decrypted private key
- */
-export async function getPrivateKey(password) {
-  const encryptedKey = localStorage.getItem('encryptedPrivateKey');
-  const iv = localStorage.getItem('privateKeyIV');
-
-  if (!encryptedKey || !iv) {
-    throw new Error('No stored private key found');
-  }
-
-  // Derive decryption key from password
-  const passwordKey = await deriveKeyFromPassword(password);
-
-  // Decrypt private key
-  const decrypted = await window.crypto.subtle.decrypt(
-    {
-      name: 'AES-GCM',
-      iv: base64ToArrayBuffer(iv)
-    },
-    passwordKey,
-    base64ToArrayBuffer(encryptedKey)
-  );
-
-  // Import as CryptoKey
-  return await window.crypto.subtle.importKey(
-    'pkcs8',
-    decrypted,
-    {
-      name: 'RSA-OAEP',
-      hash: 'SHA-256'
-    },
-    true,
-    ['decrypt']
-  );
-}
-
-/**
- * Derive encryption key from password using PBKDF2
- * @param {string} password - User's password
- * @returns {Promise<CryptoKey>} Derived key
- */
-async function deriveKeyFromPassword(password) {
-  const encoder = new TextEncoder();
-  const passwordBuffer = encoder.encode(password);
-
-  // Import password as key material
-  const passwordKey = await window.crypto.subtle.importKey(
-    'raw',
-    passwordBuffer,
-    'PBKDF2',
-    false,
-    ['deriveKey']
-  );
-
-  // Get or generate salt
-  let salt = localStorage.getItem('keySalt');
-  if (!salt) {
-    const saltBuffer = window.crypto.getRandomValues(new Uint8Array(16));
-    salt = arrayBufferToBase64(saltBuffer);
-    localStorage.setItem('keySalt', salt);
-  }
-
-  // Derive AES key
-  return await window.crypto.subtle.deriveKey(
-    {
-      name: 'PBKDF2',
-      salt: base64ToArrayBuffer(salt),
-      iterations: 100000,
-      hash: 'SHA-256'
-    },
-    passwordKey,
-    {
-      name: 'AES-GCM',
-      length: 256
-    },
-    false,
-    ['encrypt', 'decrypt']
-  );
-}
-
-/**
- * Encrypt message content
- * @param {string} message - Plain text message
- * @param {string[]} recipientPublicKeys - Array of recipient public keys (base64)
- * @returns {Promise<Object>} Encrypted message bundle
- */
-export async function encryptMessage(message, recipientPublicKeys) {
-  // Generate random AES key for this message
-  const messageKey = await window.crypto.subtle.generateKey(
-    {
-      name: 'AES-GCM',
-      length: 256
-    },
-    true,
-    ['encrypt', 'decrypt']
-  );
-
-  // Encrypt message with AES key
-  const iv = window.crypto.getRandomValues(new Uint8Array(12));
-  const encoder = new TextEncoder();
-  const messageBuffer = encoder.encode(message);
-
-  const encryptedMessage = await window.crypto.subtle.encrypt(
-    {
-      name: 'AES-GCM',
-      iv: iv
-    },
-    messageKey,
-    messageBuffer
-  );
-
-  // Export AES key
-  const exportedMessageKey = await window.crypto.subtle.exportKey('raw', messageKey);
-
-  // Encrypt AES key for each recipient with their RSA public key
-  const encryptedKeys = {};
-  const failedRecipients = [];
-
-  for (const recipientKeyB64 of recipientPublicKeys) {
-    try {
-      // Import recipient's public key
-      const recipientKey = await window.crypto.subtle.importKey(
-        'spki',
-        base64ToArrayBuffer(recipientKeyB64),
-        {
-          name: 'RSA-OAEP',
-          hash: 'SHA-256'
-        },
-        true,
-        ['encrypt']
-      );
-
-      // Encrypt message key with recipient's public key
-      const encryptedKey = await window.crypto.subtle.encrypt(
-        {
-          name: 'RSA-OAEP'
-        },
-        recipientKey,
-        exportedMessageKey
-      );
-
-      encryptedKeys[recipientKeyB64] = arrayBufferToBase64(encryptedKey);
-    } catch (error) {
-      failedRecipients.push({
-        publicKey: recipientKeyB64.substring(0, 20) + '...', // Truncate for error message
-        error: error.message
-      });
-    }
-  }
-
-  // Throw error if any encryptions failed to prevent partial message delivery
-  if (failedRecipients.length > 0) {
-    throw new Error(
-      `Failed to encrypt message for ${failedRecipients.length} recipient(s): ${
-        failedRecipients.map(r => r.error).join(', ')
-      }`
-    );
-  }
-
-  return {
-    ciphertext: arrayBufferToBase64(encryptedMessage),
-    iv: arrayBufferToBase64(iv),
-    encryptedKeys: encryptedKeys // Map of publicKey -> encrypted AES key
-  };
-}
-
-/**
- * Decrypt message content
- * @param {Object} encryptedBundle - Encrypted message bundle
- * @param {string} userPassword - User's password (to decrypt private key)
- * @param {string} userPublicKey - User's public key (to find correct encrypted key)
- * @returns {Promise<string>} Decrypted message
- */
-export async function decryptMessage(encryptedBundle, userPassword, userPublicKey) {
-  // Get user's private key
-  const privateKey = await getPrivateKey(userPassword);
-
-  // Find the encrypted key for this user
-  const encryptedKeyB64 = encryptedBundle.encryptedKeys[userPublicKey];
-
-  if (!encryptedKeyB64) {
-    throw new Error('No encrypted key found for this user');
-  }
-
-  // Decrypt the AES key with user's private key
-  const decryptedKeyBuffer = await window.crypto.subtle.decrypt(
-    {
-      name: 'RSA-OAEP'
-    },
-    privateKey,
-    base64ToArrayBuffer(encryptedKeyB64)
-  );
-
-  // Import AES key
-  const messageKey = await window.crypto.subtle.importKey(
-    'raw',
-    decryptedKeyBuffer,
-    {
-      name: 'AES-GCM',
-      length: 256
-    },
-    false,
-    ['decrypt']
-  );
-
-  // Decrypt message
-  const decryptedBuffer = await window.crypto.subtle.decrypt(
-    {
-      name: 'AES-GCM',
-      iv: base64ToArrayBuffer(encryptedBundle.iv)
-    },
-    messageKey,
-    base64ToArrayBuffer(encryptedBundle.ciphertext)
-  );
-
-  // Convert to text
-  const decoder = new TextDecoder();
-  return decoder.decode(decryptedBuffer);
-}
-
-/**
- * Convert ArrayBuffer to Base64 string
- * @param {ArrayBuffer} buffer
- * @returns {string}
- */
-function arrayBufferToBase64(buffer) {
-  const bytes = new Uint8Array(buffer);
-  let binary = '';
-  for (let i = 0; i < bytes.byteLength; i++) {
-    binary += String.fromCharCode(bytes[i]);
-  }
-  return window.btoa(binary);
-}
-
-/**
- * Convert Base64 string to ArrayBuffer
- * @param {string} base64
- * @returns {ArrayBuffer}
- */
-function base64ToArrayBuffer(base64) {
-  const binary = window.atob(base64);
-  const bytes = new Uint8Array(binary.length);
-  for (let i = 0; i < binary.length; i++) {
-    bytes[i] = binary.charCodeAt(i);
-  }
-  return bytes.buffer;
-}
-
-/**
- * Check if encryption keys exist
- * @returns {boolean}
- */
-export function hasEncryptionKeys() {
-  return !!(
-    localStorage.getItem('encryptedPrivateKey') &&
-    localStorage.getItem('privateKeyIV') &&
-    localStorage.getItem('keySalt')
-  );
-}
-
-/**
- * Clear all stored encryption keys
- */
-export function clearEncryptionKeys() {
-  localStorage.removeItem('encryptedPrivateKey');
-  localStorage.removeItem('privateKeyIV');
-  localStorage.removeItem('keySalt');
-}
diff --git a/src/frontend/utils/socket.js b/src/frontend/utils/socket.js
deleted file mode 100644
index 188de1e..0000000
--- a/src/frontend/utils/socket.js
+++ /dev/null
@@ -1,39 +0,0 @@
-// socket.js
-// Example Socket.io client for AeThex Connect (Supabase JWT auth)
-
-import { io } from 'socket.io-client';
-import { createClient } from '@supabase/supabase-js';
-
-// Initialize Supabase client
-const supabase = createClient(
-  import.meta.env.PUBLIC_SUPABASE_URL,
-  import.meta.env.PUBLIC_SUPABASE_ANON_KEY
-);
-
-export async function connectSocket() {
-  // Get current session (JWT)
-  const { data: { session } } = await supabase.auth.getSession();
-  if (!session) throw new Error('Not authenticated');
-
-  // Connect to signaling server
-  const socket = io(import.meta.env.PUBLIC_SIGNALING_SERVER_URL, {
-    auth: { token: session.access_token }
-  });
-
-  // Example: handle connection
-  socket.on('connect', () => {
-    console.log('Connected to signaling server');
-  });
-
-  // Example: join a voice room
-  function joinVoice(roomId) {
-    socket.emit('voice:join', roomId);
-  }
-
-  // Example: send/receive offers, answers, ICE
-  socket.on('voice:offer', (data) => { /* handle offer */ });
-  socket.on('voice:answer', (data) => { /* handle answer */ });
-  socket.on('voice:ice-candidate', (data) => { /* handle candidate */ });
-
-  return { socket, joinVoice };
-}
diff --git a/src/frontend/utils/webrtc.js b/src/frontend/utils/webrtc.js
deleted file mode 100644
index 769d6b7..0000000
--- a/src/frontend/utils/webrtc.js
+++ /dev/null
@@ -1,532 +0,0 @@
-/**
- * WebRTC Manager
- * Handles all WebRTC peer connection logic for voice and video calls
- */
-
-class WebRTCManager {
-  constructor(socket) {
-    this.socket = socket;
-    this.peerConnections = new Map(); // Map of userId -> RTCPeerConnection
-    this.localStream = null;
-    this.screenStream = null;
-    this.remoteStreams = new Map(); // Map of userId -> MediaStream
-    this.currentCallId = null;
-    this.isInitiator = false;
-    
-    // WebRTC configuration with STUN/TURN servers
-    this.configuration = {
-      iceServers: [
-        { urls: 'stun:stun.l.google.com:19302' },
-        { urls: 'stun:stun1.l.google.com:19302' }
-      ]
-    };
-    
-    // Media constraints
-    this.audioConstraints = {
-      echoCancellation: true,
-      noiseSuppression: true,
-      autoGainControl: true
-    };
-    
-    this.videoConstraints = {
-      width: { ideal: 1280 },
-      height: { ideal: 720 },
-      frameRate: { ideal: 30 }
-    };
-    
-    // Event handlers
-    this.onRemoteStream = null;
-    this.onRemoteStreamRemoved = null;
-    this.onConnectionStateChange = null;
-    this.onIceConnectionStateChange = null;
-    
-    this.setupSocketListeners();
-  }
-  
-  /**
-   * Setup Socket.io listeners for WebRTC signaling
-   */
-  setupSocketListeners() {
-    this.socket.on('call:offer', async (data) => {
-      await this.handleOffer(data);
-    });
-    
-    this.socket.on('call:answer', async (data) => {
-      await this.handleAnswer(data);
-    });
-    
-    this.socket.on('call:ice-candidate', async (data) => {
-      await this.handleIceCandidate(data);
-    });
-    
-    this.socket.on('call:ended', () => {
-      this.cleanup();
-    });
-    
-    this.socket.on('call:participant-joined', async (data) => {
-      console.log('Participant joined:', data);
-      // For group calls, establish connection with new participant
-      if (this.isInitiator) {
-        await this.initiateCallToUser(data.userId);
-      }
-    });
-    
-    this.socket.on('call:participant-left', (data) => {
-      console.log('Participant left:', data);
-      this.removePeerConnection(data.userId);
-    });
-    
-    this.socket.on('call:media-state-changed', (data) => {
-      console.log('Media state changed:', data);
-      // Update UI to reflect remote user's media state
-      if (this.onMediaStateChanged) {
-        this.onMediaStateChanged(data);
-      }
-    });
-  }
-  
-  /**
-   * Set TURN server credentials
-   */
-  async setTurnCredentials(turnCredentials) {
-    if (turnCredentials && turnCredentials.urls) {
-      const turnServer = {
-        urls: turnCredentials.urls,
-        username: turnCredentials.username,
-        credential: turnCredentials.credential
-      };
-      
-      this.configuration.iceServers.push(turnServer);
-      console.log('TURN server configured');
-    }
-  }
-  
-  /**
-   * Initialize local media stream (audio and/or video)
-   */
-  async initializeLocalStream(audioEnabled = true, videoEnabled = true) {
-    try {
-      const constraints = {
-        audio: audioEnabled ? this.audioConstraints : false,
-        video: videoEnabled ? this.videoConstraints : false
-      };
-      
-      this.localStream = await navigator.mediaDevices.getUserMedia(constraints);
-      console.log('Local stream initialized:', {
-        audio: audioEnabled,
-        video: videoEnabled,
-        tracks: this.localStream.getTracks().length
-      });
-      
-      return this.localStream;
-    } catch (error) {
-      console.error('Error accessing media devices:', error);
-      throw new Error(`Failed to access camera/microphone: ${error.message}`);
-    }
-  }
-  
-  /**
-   * Create a peer connection for a user
-   */
-  createPeerConnection(userId) {
-    if (this.peerConnections.has(userId)) {
-      return this.peerConnections.get(userId);
-    }
-    
-    const peerConnection = new RTCPeerConnection(this.configuration);
-    
-    // Add local stream tracks to peer connection
-    if (this.localStream) {
-      this.localStream.getTracks().forEach(track => {
-        peerConnection.addTrack(track, this.localStream);
-      });
-    }
-    
-    // Handle incoming remote stream
-    peerConnection.ontrack = (event) => {
-      console.log('Received remote track from', userId, event.track.kind);
-      
-      const [remoteStream] = event.streams;
-      this.remoteStreams.set(userId, remoteStream);
-      
-      if (this.onRemoteStream) {
-        this.onRemoteStream(userId, remoteStream);
-      }
-    };
-    
-    // Handle ICE candidates
-    peerConnection.onicecandidate = (event) => {
-      if (event.candidate) {
-        console.log('Sending ICE candidate to', userId);
-        this.socket.emit('call:ice-candidate', {
-          callId: this.currentCallId,
-          targetUserId: userId,
-          candidate: event.candidate
-        });
-      }
-    };
-    
-    // Handle connection state changes
-    peerConnection.onconnectionstatechange = () => {
-      console.log(`Connection state with ${userId}:`, peerConnection.connectionState);
-      
-      if (this.onConnectionStateChange) {
-        this.onConnectionStateChange(userId, peerConnection.connectionState);
-      }
-      
-      // Cleanup if connection fails or closes
-      if (peerConnection.connectionState === 'failed' || 
-          peerConnection.connectionState === 'closed') {
-        this.removePeerConnection(userId);
-      }
-    };
-    
-    // Handle ICE connection state changes
-    peerConnection.oniceconnectionstatechange = () => {
-      console.log(`ICE connection state with ${userId}:`, peerConnection.iceConnectionState);
-      
-      if (this.onIceConnectionStateChange) {
-        this.onIceConnectionStateChange(userId, peerConnection.iceConnectionState);
-      }
-    };
-    
-    this.peerConnections.set(userId, peerConnection);
-    return peerConnection;
-  }
-  
-  /**
-   * Initiate a call to a user (create offer)
-   */
-  async initiateCallToUser(userId) {
-    try {
-      const peerConnection = this.createPeerConnection(userId);
-      
-      // Create offer
-      const offer = await peerConnection.createOffer({
-        offerToReceiveAudio: true,
-        offerToReceiveVideo: true
-      });
-      
-      await peerConnection.setLocalDescription(offer);
-      
-      // Send offer through signaling server
-      this.socket.emit('call:offer', {
-        callId: this.currentCallId,
-        targetUserId: userId,
-        offer: offer
-      });
-      
-      console.log('Call offer sent to', userId);
-    } catch (error) {
-      console.error('Error initiating call:', error);
-      throw error;
-    }
-  }
-  
-  /**
-   * Handle incoming call offer
-   */
-  async handleOffer(data) {
-    const { callId, fromUserId, offer } = data;
-    
-    try {
-      console.log('Received call offer from', fromUserId);
-      
-      this.currentCallId = callId;
-      const peerConnection = this.createPeerConnection(fromUserId);
-      
-      await peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
-      
-      // Create answer
-      const answer = await peerConnection.createAnswer();
-      await peerConnection.setLocalDescription(answer);
-      
-      // Send answer back
-      this.socket.emit('call:answer', {
-        callId: callId,
-        targetUserId: fromUserId,
-        answer: answer
-      });
-      
-      console.log('Call answer sent to', fromUserId);
-    } catch (error) {
-      console.error('Error handling offer:', error);
-      throw error;
-    }
-  }
-  
-  /**
-   * Handle incoming call answer
-   */
-  async handleAnswer(data) {
-    const { fromUserId, answer } = data;
-    
-    try {
-      console.log('Received call answer from', fromUserId);
-      
-      const peerConnection = this.peerConnections.get(fromUserId);
-      if (!peerConnection) {
-        throw new Error(`No peer connection found for user ${fromUserId}`);
-      }
-      
-      await peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
-      console.log('Remote description set for', fromUserId);
-    } catch (error) {
-      console.error('Error handling answer:', error);
-      throw error;
-    }
-  }
-  
-  /**
-   * Handle incoming ICE candidate
-   */
-  async handleIceCandidate(data) {
-    const { fromUserId, candidate } = data;
-    
-    try {
-      const peerConnection = this.peerConnections.get(fromUserId);
-      if (!peerConnection) {
-        console.warn(`No peer connection found for user ${fromUserId}`);
-        return;
-      }
-      
-      await peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
-      console.log('ICE candidate added for', fromUserId);
-    } catch (error) {
-      console.error('Error adding ICE candidate:', error);
-    }
-  }
-  
-  /**
-   * Remove peer connection for a user
-   */
-  removePeerConnection(userId) {
-    const peerConnection = this.peerConnections.get(userId);
-    if (peerConnection) {
-      peerConnection.close();
-      this.peerConnections.delete(userId);
-    }
-    
-    const remoteStream = this.remoteStreams.get(userId);
-    if (remoteStream) {
-      remoteStream.getTracks().forEach(track => track.stop());
-      this.remoteStreams.delete(userId);
-      
-      if (this.onRemoteStreamRemoved) {
-        this.onRemoteStreamRemoved(userId);
-      }
-    }
-    
-    console.log('Peer connection removed for', userId);
-  }
-  
-  /**
-   * Toggle audio track enabled/disabled
-   */
-  toggleAudio(enabled) {
-    if (this.localStream) {
-      const audioTrack = this.localStream.getAudioTracks()[0];
-      if (audioTrack) {
-        audioTrack.enabled = enabled;
-        console.log('Audio', enabled ? 'enabled' : 'disabled');
-        return true;
-      }
-    }
-    return false;
-  }
-  
-  /**
-   * Toggle video track enabled/disabled
-   */
-  toggleVideo(enabled) {
-    if (this.localStream) {
-      const videoTrack = this.localStream.getVideoTracks()[0];
-      if (videoTrack) {
-        videoTrack.enabled = enabled;
-        console.log('Video', enabled ? 'enabled' : 'disabled');
-        return true;
-      }
-    }
-    return false;
-  }
-  
-  /**
-   * Start screen sharing
-   */
-  async startScreenShare() {
-    try {
-      this.screenStream = await navigator.mediaDevices.getDisplayMedia({
-        video: {
-          cursor: 'always'
-        },
-        audio: false
-      });
-      
-      const screenTrack = this.screenStream.getVideoTracks()[0];
-      
-      // Replace video track in all peer connections
-      this.peerConnections.forEach((peerConnection) => {
-        const sender = peerConnection.getSenders().find(s => s.track?.kind === 'video');
-        if (sender) {
-          sender.replaceTrack(screenTrack);
-        }
-      });
-      
-      // Handle screen share stop
-      screenTrack.onended = () => {
-        this.stopScreenShare();
-      };
-      
-      console.log('Screen sharing started');
-      return this.screenStream;
-    } catch (error) {
-      console.error('Error starting screen share:', error);
-      throw error;
-    }
-  }
-  
-  /**
-   * Stop screen sharing and restore camera
-   */
-  stopScreenShare() {
-    if (this.screenStream) {
-      this.screenStream.getTracks().forEach(track => track.stop());
-      this.screenStream = null;
-      
-      // Restore camera track
-      if (this.localStream) {
-        const videoTrack = this.localStream.getVideoTracks()[0];
-        if (videoTrack) {
-          this.peerConnections.forEach((peerConnection) => {
-            const sender = peerConnection.getSenders().find(s => s.track?.kind === 'video');
-            if (sender) {
-              sender.replaceTrack(videoTrack);
-            }
-          });
-        }
-      }
-      
-      console.log('Screen sharing stopped');
-    }
-  }
-  
-  /**
-   * Get connection statistics
-   */
-  async getConnectionStats(userId) {
-    const peerConnection = this.peerConnections.get(userId);
-    if (!peerConnection) {
-      return null;
-    }
-    
-    const stats = await peerConnection.getStats();
-    const result = {
-      audio: {},
-      video: {},
-      connection: {}
-    };
-    
-    stats.forEach(report => {
-      if (report.type === 'inbound-rtp') {
-        if (report.kind === 'audio') {
-          result.audio.bytesReceived = report.bytesReceived;
-          result.audio.packetsLost = report.packetsLost;
-          result.audio.jitter = report.jitter;
-        } else if (report.kind === 'video') {
-          result.video.bytesReceived = report.bytesReceived;
-          result.video.packetsLost = report.packetsLost;
-          result.video.framesDecoded = report.framesDecoded;
-          result.video.frameWidth = report.frameWidth;
-          result.video.frameHeight = report.frameHeight;
-        }
-      } else if (report.type === 'candidate-pair' && report.state === 'succeeded') {
-        result.connection.roundTripTime = report.currentRoundTripTime;
-        result.connection.availableOutgoingBitrate = report.availableOutgoingBitrate;
-      }
-    });
-    
-    return result;
-  }
-  
-  /**
-   * Cleanup all connections and streams
-   */
-  cleanup() {
-    console.log('Cleaning up WebRTC resources');
-    
-    // Stop screen share if active
-    this.stopScreenShare();
-    
-    // Close all peer connections
-    this.peerConnections.forEach((peerConnection, userId) => {
-      this.removePeerConnection(userId);
-    });
-    
-    // Stop local stream
-    if (this.localStream) {
-      this.localStream.getTracks().forEach(track => track.stop());
-      this.localStream = null;
-    }
-    
-    // Clear remote streams
-    this.remoteStreams.forEach((stream) => {
-      stream.getTracks().forEach(track => track.stop());
-    });
-    this.remoteStreams.clear();
-    
-    this.currentCallId = null;
-    this.isInitiator = false;
-  }
-  
-  /**
-   * Get local stream
-   */
-  getLocalStream() {
-    return this.localStream;
-  }
-  
-  /**
-   * Get remote stream for a user
-   */
-  getRemoteStream(userId) {
-    return this.remoteStreams.get(userId);
-  }
-  
-  /**
-   * Get all remote streams
-   */
-  getAllRemoteStreams() {
-    return Array.from(this.remoteStreams.entries());
-  }
-  
-  /**
-   * Check if audio is enabled
-   */
-  isAudioEnabled() {
-    if (this.localStream) {
-      const audioTrack = this.localStream.getAudioTracks()[0];
-      return audioTrack ? audioTrack.enabled : false;
-    }
-    return false;
-  }
-  
-  /**
-   * Check if video is enabled
-   */
-  isVideoEnabled() {
-    if (this.localStream) {
-      const videoTrack = this.localStream.getVideoTracks()[0];
-      return videoTrack ? videoTrack.enabled : false;
-    }
-    return false;
-  }
-  
-  /**
-   * Check if screen sharing is active
-   */
-  isScreenSharing() {
-    return this.screenStream !== null;
-  }
-}
-
-export default WebRTCManager;
diff --git a/src/frontend/vite.config.js b/src/frontend/vite.config.js
deleted file mode 100644
index f974b48..0000000
--- a/src/frontend/vite.config.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()],
-  server: {
-    port: 3000,
-    proxy: {
-      '/api': {
-        target: 'http://localhost:3000',
-        changeOrigin: true
-      }
-    }
-  }
-});
diff --git a/supabase/migrations/20260206000000_users_and_servers.sql b/supabase/migrations/20260206000000_users_and_servers.sql
new file mode 100644
index 0000000..1c09e58
--- /dev/null
+++ b/supabase/migrations/20260206000000_users_and_servers.sql
@@ -0,0 +1,164 @@
+-- Users Table Migration
+-- Core user authentication and profile data
+
+-- Create users table
+CREATE TABLE IF NOT EXISTS users (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  email VARCHAR(255) NOT NULL UNIQUE,
+  password_hash VARCHAR(255) NOT NULL,
+  username VARCHAR(50) UNIQUE,
+  display_name VARCHAR(100),
+  avatar_url TEXT,
+  verified_domain VARCHAR(255),
+  is_premium BOOLEAN DEFAULT false,
+  premium_tier VARCHAR(20) CHECK (premium_tier IN ('free', 'premium', 'enterprise')) DEFAULT 'free',
+  premium_expires_at TIMESTAMP,
+  status VARCHAR(20) CHECK (status IN ('online', 'away', 'dnd', 'offline')) DEFAULT 'offline',
+  custom_status VARCHAR(128),
+  last_login TIMESTAMP,
+  email_verified BOOLEAN DEFAULT false,
+  email_verified_at TIMESTAMP,
+  created_at TIMESTAMP DEFAULT NOW(),
+  updated_at TIMESTAMP DEFAULT NOW()
+);
+
+-- Indexes for performance
+CREATE INDEX IF NOT EXISTS idx_users_email ON users(email);
+CREATE INDEX IF NOT EXISTS idx_users_username ON users(username);
+CREATE INDEX IF NOT EXISTS idx_users_verified_domain ON users(verified_domain) WHERE verified_domain IS NOT NULL;
+CREATE INDEX IF NOT EXISTS idx_users_status ON users(status);
+
+-- Function to update updated_at timestamp
+CREATE OR REPLACE FUNCTION update_updated_at_column()
+RETURNS TRIGGER AS $$
+BEGIN
+    NEW.updated_at = NOW();
+    RETURN NEW;
+END;
+$$ language 'plpgsql';
+
+-- Trigger to auto-update updated_at
+DROP TRIGGER IF EXISTS update_users_updated_at ON users;
+CREATE TRIGGER update_users_updated_at
+    BEFORE UPDATE ON users
+    FOR EACH ROW
+    EXECUTE FUNCTION update_updated_at_column();
+
+-- Friends/Relationships table
+CREATE TABLE IF NOT EXISTS user_relationships (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  target_user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  relationship_type VARCHAR(20) CHECK (relationship_type IN ('friend', 'pending', 'blocked')) NOT NULL,
+  created_at TIMESTAMP DEFAULT NOW(),
+  updated_at TIMESTAMP DEFAULT NOW(),
+  CONSTRAINT unique_relationship UNIQUE(user_id, target_user_id)
+);
+
+CREATE INDEX IF NOT EXISTS idx_user_relationships_user_id ON user_relationships(user_id);
+CREATE INDEX IF NOT EXISTS idx_user_relationships_target_user_id ON user_relationships(target_user_id);
+
+-- Servers/Guilds table
+CREATE TABLE IF NOT EXISTS servers (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  name VARCHAR(100) NOT NULL,
+  description TEXT,
+  icon_url TEXT,
+  banner_url TEXT,
+  owner_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  invite_code VARCHAR(20) UNIQUE,
+  is_public BOOLEAN DEFAULT false,
+  member_count INTEGER DEFAULT 1,
+  created_at TIMESTAMP DEFAULT NOW(),
+  updated_at TIMESTAMP DEFAULT NOW()
+);
+
+CREATE INDEX IF NOT EXISTS idx_servers_owner_id ON servers(owner_id);
+CREATE INDEX IF NOT EXISTS idx_servers_invite_code ON servers(invite_code);
+
+-- Server Members table
+CREATE TABLE IF NOT EXISTS server_members (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  server_id UUID NOT NULL REFERENCES servers(id) ON DELETE CASCADE,
+  user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  nickname VARCHAR(100),
+  role VARCHAR(20) CHECK (role IN ('owner', 'admin', 'moderator', 'member')) DEFAULT 'member',
+  joined_at TIMESTAMP DEFAULT NOW(),
+  CONSTRAINT unique_server_member UNIQUE(server_id, user_id)
+);
+
+CREATE INDEX IF NOT EXISTS idx_server_members_server_id ON server_members(server_id);
+CREATE INDEX IF NOT EXISTS idx_server_members_user_id ON server_members(user_id);
+
+-- Channels table
+CREATE TABLE IF NOT EXISTS channels (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  server_id UUID REFERENCES servers(id) ON DELETE CASCADE,
+  name VARCHAR(100) NOT NULL,
+  description TEXT,
+  channel_type VARCHAR(20) CHECK (channel_type IN ('text', 'voice', 'announcement', 'stage')) DEFAULT 'text',
+  position INTEGER DEFAULT 0,
+  is_private BOOLEAN DEFAULT false,
+  slowmode_seconds INTEGER DEFAULT 0,
+  created_at TIMESTAMP DEFAULT NOW(),
+  updated_at TIMESTAMP DEFAULT NOW()
+);
+
+CREATE INDEX IF NOT EXISTS idx_channels_server_id ON channels(server_id);
+
+-- Messages table
+CREATE TABLE IF NOT EXISTS messages (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  channel_id UUID REFERENCES channels(id) ON DELETE CASCADE,
+  conversation_id UUID,
+  user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  content TEXT NOT NULL,
+  message_type VARCHAR(20) CHECK (message_type IN ('text', 'image', 'file', 'system')) DEFAULT 'text',
+  attachments JSONB DEFAULT '[]',
+  is_edited BOOLEAN DEFAULT false,
+  is_pinned BOOLEAN DEFAULT false,
+  reply_to_id UUID REFERENCES messages(id) ON DELETE SET NULL,
+  created_at TIMESTAMP DEFAULT NOW(),
+  updated_at TIMESTAMP DEFAULT NOW()
+);
+
+CREATE INDEX IF NOT EXISTS idx_messages_channel_id ON messages(channel_id);
+CREATE INDEX IF NOT EXISTS idx_messages_conversation_id ON messages(conversation_id);
+CREATE INDEX IF NOT EXISTS idx_messages_user_id ON messages(user_id);
+CREATE INDEX IF NOT EXISTS idx_messages_created_at ON messages(created_at DESC);
+
+-- Message Reactions table
+CREATE TABLE IF NOT EXISTS message_reactions (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  message_id UUID NOT NULL REFERENCES messages(id) ON DELETE CASCADE,
+  user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  emoji VARCHAR(50) NOT NULL,
+  created_at TIMESTAMP DEFAULT NOW(),
+  CONSTRAINT unique_reaction UNIQUE(message_id, user_id, emoji)
+);
+
+CREATE INDEX IF NOT EXISTS idx_message_reactions_message_id ON message_reactions(message_id);
+
+-- Voice Channel Sessions table
+CREATE TABLE IF NOT EXISTS voice_sessions (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  channel_id UUID NOT NULL REFERENCES channels(id) ON DELETE CASCADE,
+  user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  joined_at TIMESTAMP DEFAULT NOW(),
+  left_at TIMESTAMP,
+  is_muted BOOLEAN DEFAULT false,
+  is_deafened BOOLEAN DEFAULT false,
+  is_streaming BOOLEAN DEFAULT false,
+  is_video_on BOOLEAN DEFAULT false
+);
+
+CREATE INDEX IF NOT EXISTS idx_voice_sessions_channel_id ON voice_sessions(channel_id);
+CREATE INDEX IF NOT EXISTS idx_voice_sessions_user_id ON voice_sessions(user_id);
+CREATE INDEX IF NOT EXISTS idx_voice_sessions_active ON voice_sessions(channel_id) WHERE left_at IS NULL;
+
+-- Comments
+COMMENT ON TABLE users IS 'Core user accounts for AeThex Connect';
+COMMENT ON TABLE servers IS 'Discord-style servers/guilds';
+COMMENT ON TABLE channels IS 'Text and voice channels within servers';
+COMMENT ON TABLE messages IS 'Chat messages in channels or DMs';
+COMMENT ON TABLE voice_sessions IS 'Active voice channel participants';