diff --git a/src/frontend/App.jsx b/src/frontend/App.jsx
index 91e2f0f..cec6cf5 100644
--- a/src/frontend/App.jsx
+++ b/src/frontend/App.jsx
@@ -1,33 +1,105 @@
 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';
 
 /**
- * Main application component
- * AeThex Connect - Discord-style communication platform
+ * Protected route - requires authentication
  */
-function AppContent() {
-  const { user, loading } = useAuth();
-
+function ProtectedRoute({ children }) {
+  const { isAuthenticated, loading } = useAuth();
+  
   if (loading) {
     return (
-      <div className="flex items-center justify-center h-screen bg-zinc-900">
-        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-purple-500"></div>
+      <div className="loading-screen">
+        <div className="loading-spinner"></div>
+        <span>Loading...</span>
       </div>
     );
   }
+  
+  return isAuthenticated ? children : <Navigate to="/login" replace />;
+}
 
-  return <MainLayout />;
+/**
+ * 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 (
-    <AuthProvider>
-      <MessagingProvider>
-        <AppContent />
-      </MessagingProvider>
-    </AuthProvider>
+    <BrowserRouter>
+      <AuthProvider>
+        <AppRoutes />
+      </AuthProvider>
+    </BrowserRouter>
   );
 }
diff --git a/src/frontend/contexts/AuthContext.jsx b/src/frontend/contexts/AuthContext.jsx
index e4ab73c..dfafc2f 100644
--- a/src/frontend/contexts/AuthContext.jsx
+++ b/src/frontend/contexts/AuthContext.jsx
@@ -49,6 +49,21 @@ export function AuthProvider({ children }) {
     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);
@@ -62,6 +77,7 @@ export function AuthProvider({ children }) {
     user,
     loading,
     login,
+    register,
     logout,
     updateUser,
     isAuthenticated: !!user