diff --git a/deletefile.py b/deletefile.py
new file mode 100644
index 0000000..711621f
--- /dev/null
+++ b/deletefile.py
@@ -0,0 +1,212 @@
+# deletefile.py — FastAPI route for file deletion
+
+import os
+import shutil
+from typing import Optional, Dict, Any
+from pathlib import Path
+from fastapi import APIRouter, HTTPException, Request, Depends, status, Header
+from sqlalchemy import select, delete, and_
+from sqlalchemy.orm import Session
+
+from database import get_db
+from models import UploadLog, UserQuota, User, DBSession
+
+router = APIRouter()
+# Use absolute path for security
+DATA_ROOT = Path(os.path.abspath("./data"))
+
+def get_current_user(
+    authorization: str = Header(None, description="Bearer token for authentication"),
+    db: Session = Depends(get_db)
+) -> User:
+    """
+    Get current user from authorization token with enhanced security.
+    
+    Args:
+        authorization: The Authorization header containing the Bearer token
+        db: Database session dependency
+        
+    Returns:
+        User: The authenticated user
+        
+    Raises:
+        HTTPException: If authentication fails or user not found
+    """
+    if not authorization or not authorization.startswith("Bearer "):
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="Authentication required"
+        )
+    
+    token = authorization.split(" ")[1]
+    try:
+        with Session(db) as session:
+            # Check if session is valid
+            session_stmt = select(DBSession).where(
+                and_(
+                    DBSession.token == token,
+                    DBSession.is_active == True,
+                    DBSession.expires_at > datetime.utcnow()
+                )
+            )
+            db_session = session.exec(session_stmt).first()
+            if not db_session:
+                print(f"[DELETE_FILE] Invalid or expired session token")
+                raise HTTPException(
+                    status_code=status.HTTP_401_UNAUTHORIZED,
+                    detail="Invalid or expired session"
+                )
+            
+            # Get the user
+            user = session.get(User, db_session.user_id)
+            if not user:
+                print(f"[DELETE_FILE] User not found for session token")
+                raise HTTPException(
+                    status_code=status.HTTP_404_NOT_FOUND,
+                    detail="User not found"
+                )
+            
+            return user
+    except Exception as e:
+        print(f"[DELETE_FILE] Error during user authentication: {str(e)}")
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            detail="Error during authentication"
+        )
+
+@router.delete("/delete/{filename}")
+async def delete_file(
+    request: Request,
+    filename: str,
+    db: Session = Depends(get_db),
+    current_user: User = Depends(get_current_user)
+) -> Dict[str, Any]:
+    """
+    Delete a file for the authenticated user with enhanced security and error handling.
+    
+    Args:
+        request: The HTTP request object
+        filename: The name of the file to delete
+        db: Database session
+        current_user: The authenticated user
+        
+    Returns:
+        Dict: Status and message of the operation
+        
+    Raises:
+        HTTPException: If file not found, permission denied, or other errors
+    """
+    print(f"[DELETE_FILE] Processing delete request for file '{filename}' from user {current_user.username}")
+    
+    try:
+        # Security: Validate filename to prevent directory traversal
+        if not filename or any(c in filename for c in ['..', '/', '\\']):
+            print(f"[DELETE_FILE] Security alert: Invalid filename '{filename}'")
+            raise HTTPException(
+                status_code=status.HTTP_400_BAD_REQUEST,
+                detail="Invalid filename"
+            )
+        
+        # Construct full path with security checks
+        user_dir = DATA_ROOT / current_user.username
+        file_path = (user_dir / filename).resolve()
+        
+        # Security: Ensure the file is within the user's directory
+        if not file_path.is_relative_to(user_dir.resolve()):
+            print(f"[DELETE_FILE] Security alert: Attempted path traversal: {file_path}")
+            raise HTTPException(
+                status_code=status.HTTP_403_FORBIDDEN,
+                detail="Access denied"
+            )
+        
+        # Verify file exists and is a file
+        if not file_path.exists() or not file_path.is_file():
+            print(f"[DELETE_FILE] File not found: {file_path}")
+            raise HTTPException(
+                status_code=status.HTTP_404_NOT_FOUND,
+                detail="File not found"
+            )
+        
+        # Get file size before deletion for quota update
+        file_size = file_path.stat().st_size
+        print(f"[DELETE_FILE] Deleting file: {file_path} (size: {file_size} bytes)")
+        
+        # Start database transaction
+        with Session(db) as session:
+            try:
+                # Delete the file
+                try:
+                    os.unlink(file_path)
+                    print(f"[DELETE_FILE] Successfully deleted file: {file_path}")
+                except OSError as e:
+                    print(f"[DELETE_FILE] Error deleting file: {str(e)}")
+                    raise HTTPException(
+                        status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+                        detail="Failed to delete file"
+                    )
+                
+                # Clean up any associated raw files
+                raw_pattern = f"raw.*{filename}"
+                raw_files = list(file_path.parent.glob(raw_pattern))
+                for raw_file in raw_files:
+                    try:
+                        os.unlink(raw_file)
+                        print(f"[DELETE_FILE] Deleted raw file: {raw_file}")
+                    except OSError as e:
+                        print(f"[DELETE_FILE] Warning: Could not delete raw file {raw_file}: {str(e)}")
+                
+                # Delete the upload log entry
+                result = session.execute(
+                    delete(UploadLog).where(
+                        and_(
+                            UploadLog.uid == current_user.username,
+                            UploadLog.processed_filename == filename
+                        )
+                    )
+                )
+                
+                if result.rowcount == 0:
+                    print(f"[DELETE_FILE] Warning: No upload log entry found for {filename}")
+                else:
+                    print(f"[DELETE_FILE] Deleted upload log entry for {filename}")
+                
+                # Update user quota
+                quota = session.exec(
+                    select(UserQuota)
+                    .where(UserQuota.uid == current_user.username)
+                    .with_for_update()
+                ).first()
+                
+                if quota:
+                    new_quota = max(0, quota.storage_bytes - file_size)
+                    print(f"[DELETE_FILE] Updating quota: {quota.storage_bytes} -> {new_quota}")
+                    quota.storage_bytes = new_quota
+                    session.add(quota)
+                
+                session.commit()
+                print(f"[DELETE_FILE] Successfully updated database")
+                
+                return {
+                    "status": "success",
+                    "message": "File deleted successfully",
+                    "bytes_freed": file_size
+                }
+                
+            except Exception as e:
+                session.rollback()
+                print(f"[DELETE_FILE] Database error: {str(e)}")
+                raise HTTPException(
+                    status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+                    detail="Database error during file deletion"
+                )
+    
+    except HTTPException as he:
+        print(f"[DELETE_FILE] HTTP Error {he.status_code}: {he.detail}")
+        raise
+        
+    except Exception as e:
+        print(f"[DELETE_FILE] Unexpected error: {str(e)}")
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            detail="An unexpected error occurred"
+        )
diff --git a/main.py b/main.py
index b9b09f0..9dfa99b 100644
--- a/main.py
+++ b/main.py
@@ -36,7 +36,19 @@ from fastapi.requests import Request as FastAPIRequest
 from fastapi.exception_handlers import RequestValidationError
 from fastapi.exceptions import HTTPException as FastAPIHTTPException
 
-app = FastAPI(debug=debug_mode)
+app = FastAPI(debug=debug_mode, docs_url=None, redoc_url=None, openapi_url=None)
+
+# Override default HTML error handlers to return JSON
+from fastapi.exceptions import RequestValidationError, HTTPException as FastAPIHTTPException
+from fastapi.responses import JSONResponse
+from starlette.exceptions import HTTPException as StarletteHTTPException
+
+@app.exception_handler(StarletteHTTPException)
+async def http_exception_handler(request, exc):
+    return JSONResponse(
+        status_code=exc.status_code,
+        content={"detail": exc.detail}
+    )
 
 # --- CORS Middleware for SSE and API access ---
 from fastapi.middleware.cors import CORSMiddleware
@@ -292,11 +304,16 @@ def get_me(uid: str, request: Request, db: Session = Depends(get_db)):
         user = get_user_by_uid(uid)
         if not user:
             print(f"[ERROR] User with UID {uid} not found")
-            raise HTTPException(status_code=403, detail="User not found")
-            
-        if user.ip != request.client.host:
-            print(f"[ERROR] IP mismatch for UID {uid}: {request.client.host} != {user.ip}")
-            raise HTTPException(status_code=403, detail="IP address mismatch")
+            raise HTTPException(status_code=404, detail="User not found")
+        
+        # Only enforce IP check in production
+        if not debug_mode:
+            if user.ip != request.client.host:
+                print(f"[WARNING] IP mismatch for UID {uid}: {request.client.host} != {user.ip}")
+                # In production, we might want to be more strict
+                # But for now, we'll just log a warning in development
+                if not debug_mode:
+                    raise HTTPException(status_code=403, detail="IP address mismatch")
 
         # Get all upload logs for this user
         upload_logs = db.exec(
@@ -331,6 +348,13 @@ def get_me(uid: str, request: Request, db: Session = Depends(get_db)):
         print(f"[DEBUG] Returning {len(files)} files and quota info")
         return response_data
         
-    except Exception as e:
-        print(f"[ERROR] Error in /me/{uid} endpoint: {str(e)}", exc_info=True)
+    except HTTPException:
+        # Re-raise HTTP exceptions as they are
         raise
+    except Exception as e:
+        # Log the full traceback for debugging
+        import traceback
+        error_trace = traceback.format_exc()
+        print(f"[ERROR] Error in /me/{uid} endpoint: {str(e)}\n{error_trace}")
+        # Return a 500 error with a generic message
+        raise HTTPException(status_code=500, detail="Internal server error")
diff --git a/public_streams.txt b/public_streams.txt
index 46633cf..59b6010 100644
--- a/public_streams.txt
+++ b/public_streams.txt
@@ -1,3 +1,4 @@
-{"uid":"devuser","size":22455090,"mtime":1747563720}
-{"uid":"oib9","size":2019706,"mtime":1751124547}
+{"uid":"devuser","size":65551721,"mtime":1752752391}
+{"uid":"oib9","size":12735117,"mtime":1752843762}
+{"uid":"oibchello","size":1549246,"mtime":1752840918}
 {"uid":"orangeicebear","size":1734396,"mtime":1748767975}
diff --git a/static/app.js b/static/app.js
index 194b80a..e7d0980 100644
--- a/static/app.js
+++ b/static/app.js
@@ -2,6 +2,7 @@
 
 import { playBeep } from "./sound.js";
 import { showToast } from "./toast.js";
+import { injectNavigation } from "./inject-nav.js";
 
 // Global audio state
 let globalAudio = null;
@@ -30,29 +31,42 @@ function handleMagicLoginRedirect() {
   const params = new URLSearchParams(window.location.search);
   if (params.get('login') === 'success' && params.get('confirmed_uid')) {
     const username = params.get('confirmed_uid');
+    console.log('Magic link login detected for user:', username);
+    
+    // Update authentication state
     localStorage.setItem('uid', username);
     localStorage.setItem('confirmed_uid', username);
     localStorage.setItem('uid_time', Date.now().toString());
     document.cookie = `uid=${encodeURIComponent(username)}; path=/`;
     
-    // Update UI state immediately without reload
-    const guestDashboard = document.getElementById('guest-dashboard');
-    const userDashboard = document.getElementById('user-dashboard');
-    const registerPage = document.getElementById('register-page');
+    // Update UI state
+    document.body.classList.add('authenticated');
+    document.body.classList.remove('guest');
     
-    if (guestDashboard) guestDashboard.style.display = 'none';
-    if (userDashboard) userDashboard.style.display = 'block';
-    if (registerPage) registerPage.style.display = 'none';
+    // Update local storage and cookies
+    localStorage.setItem('isAuthenticated', 'true');
+    document.cookie = `isAuthenticated=true; path=/`;
     
     // Update URL and history without reloading
     window.history.replaceState({}, document.title, window.location.pathname);
     
+    // Update navigation
+    if (typeof injectNavigation === 'function') {
+      console.log('Updating navigation after magic link login');
+      injectNavigation(true);
+    } else {
+      console.warn('injectNavigation function not available after magic link login');
+    }
+    
     // Navigate to user's profile page
     if (window.showOnly) {
+      console.log('Navigating to me-page');
       window.showOnly('me-page');
     } else if (window.location.hash !== '#me') {
       window.location.hash = '#me';
     }
+    
+    // Auth state will be updated by the polling mechanism
   }
 }
 
@@ -298,55 +312,116 @@ function showProfilePlayerFromUrl() {
 }
 
 function initNavigation() {
-  const navLinks = document.querySelectorAll('nav a');
+  // Get all navigation links
+  const navLinks = document.querySelectorAll('nav a, .dashboard-nav a');
+  
+  // Handle navigation link clicks
+  const handleNavClick = (e) => {
+    const link = e.target.closest('a');
+    if (!link) return;
+    
+    // Check both href and data-target attributes
+    const target = link.getAttribute('data-target');
+    const href = link.getAttribute('href');
+    
+    // Let the browser handle external links
+    if (href && (href.startsWith('http') || href.startsWith('mailto:'))) {
+      return;
+    }
+    
+    // If no data-target and no hash in href, let browser handle it
+    if (!target && (!href || !href.startsWith('#'))) {
+      return;
+    }
+    
+    // Prefer data-target over href
+    let sectionId = target || (href ? href.substring(1) : '');
+    
+    // Special case for the 'me' route which maps to 'me-page'
+    if (sectionId === 'me') {
+      sectionId = 'me-page';
+    }
+    
+    // Skip if no valid section ID
+    if (!sectionId) {
+      console.warn('No valid section ID in navigation link:', link);
+      return;
+    }
+    
+    // Let the router handle the navigation
+    e.preventDefault();
+    e.stopPropagation();
+    
+    // Update body class to reflect the current section
+    document.body.className = ''; // Clear existing classes
+    document.body.classList.add(`page-${sectionId.replace('-page', '')}`);
+    
+    // Update URL hash - the router will handle the rest
+    window.location.hash = sectionId;
+    
+    // Close mobile menu if open
+    const burger = document.getElementById('burger-toggle');
+    if (burger && burger.checked) burger.checked = false;
+  };
+  
+  // Add click event listeners to all navigation links
   navLinks.forEach(link => {
-    link.addEventListener('click', (e) => {
-      const href = link.getAttribute('href');
-      
-      // Skip if href is empty or doesn't start with '#'
-      if (!href || !href.startsWith('#')) {
-        return; // Let the browser handle the link normally
-      }
-      
-      const sectionId = href.substring(1); // Remove the '#'
-      
-      // Skip if sectionId is empty after removing '#'
-      if (!sectionId) {
-        console.warn('Empty section ID in navigation link:', link);
-        return;
-      }
-      
-      const section = document.getElementById(sectionId);
-      if (section) {
-        e.preventDefault();
-        
-        // Hide all sections first
-        document.querySelectorAll('main > section').forEach(sec => {
-          sec.hidden = sec.id !== sectionId;
-        });
-        
-        // Special handling for me-page
-        if (sectionId === 'me-page') {
-          const registerPage = document.getElementById('register-page');
-          if (registerPage) registerPage.hidden = true;
-          
-          // Show the upload box in me-page
-          const uploadBox = document.querySelector('#me-page #user-upload-area');
-          if (uploadBox) uploadBox.style.display = 'block';
-        } else if (sectionId === 'register-page') {
-          // Ensure me-page is hidden when register-page is shown
-          const mePage = document.getElementById('me-page');
-          if (mePage) mePage.hidden = true;
-        }
-        
-        section.scrollIntoView({ behavior: "smooth" });
-        
-        // Close mobile menu if open
-        const burger = document.getElementById('burger-toggle');
-        if (burger && burger.checked) burger.checked = false;
-      }
-    });
+    link.addEventListener('click', handleNavClick);
   });
+  
+  // Handle initial page load and hash changes
+  const handleHashChange = () => {
+    let hash = window.location.hash.substring(1);
+    
+    // Map URL hashes to section IDs if they don't match exactly
+    const sectionMap = {
+      'welcome': 'welcome-page',
+      'streams': 'stream-page',
+      'account': 'register-page',
+      'login': 'login-page',
+      'me': 'me-page'
+    };
+    
+    // Use mapped section ID or the hash as is
+    const sectionId = sectionMap[hash] || hash || 'welcome-page';
+    const targetSection = document.getElementById(sectionId);
+    
+    if (targetSection) {
+      // Hide all sections
+      document.querySelectorAll('main > section').forEach(section => {
+        section.hidden = section.id !== sectionId;
+      });
+      
+      // Show target section
+      targetSection.hidden = false;
+      targetSection.scrollIntoView({ behavior: 'smooth' });
+      
+      // Update active state of navigation links
+      navLinks.forEach(link => {
+        const linkHref = link.getAttribute('href');
+        // Match both the exact hash and the mapped section ID
+        link.classList.toggle('active', 
+          linkHref === `#${hash}` || 
+          linkHref === `#${sectionId}` ||
+          link.getAttribute('data-target') === sectionId ||
+          link.getAttribute('data-target') === hash
+        );
+      });
+      
+      // Special handling for streams page
+      if (sectionId === 'stream-page' && typeof window.maybeLoadStreamsOnShow === 'function') {
+        window.maybeLoadStreamsOnShow();
+      }
+    } else {
+      console.warn(`Section with ID '${sectionId}' not found`);
+    }
+  };
+  
+  // Listen for hash changes
+  window.addEventListener('hashchange', handleHashChange);
+  
+  // Handle initial page load
+  handleHashChange();
 }
 
 function initProfilePlayer() {
@@ -354,14 +429,344 @@ function initProfilePlayer() {
   showProfilePlayerFromUrl();
 }
 
+// Track previous authentication state
+let wasAuthenticated = null;
+// Debug flag - set to false to disable auth state change logs
+const DEBUG_AUTH_STATE = false;
+
+// Track all intervals and timeouts
+const activeIntervals = new Map();
+const activeTimeouts = new Map();
+
+// Store original timer functions
+const originalSetInterval = window.setInterval;
+const originalClearInterval = window.clearInterval;
+const originalSetTimeout = window.setTimeout;
+const originalClearTimeout = window.clearTimeout;
+
+// Override setInterval to track all intervals
+window.setInterval = (callback, delay, ...args) => {
+  const id = originalSetInterval((...args) => {
+    trackFunctionCall('setInterval callback', { id, delay, callback: callback.toString() });
+    return callback(...args);
+  }, delay, ...args);
+  
+  activeIntervals.set(id, {
+    id,
+    delay,
+    callback: callback.toString(),
+    createdAt: Date.now(),
+    stack: new Error().stack
+  });
+  
+  if (DEBUG_AUTH_STATE) {
+    console.log(`[Interval ${id}] Created with delay ${delay}ms`, {
+      id,
+      delay,
+      callback: callback.toString(),
+      stack: new Error().stack
+    });
+  }
+  
+  return id;
+};
+
+// Override clearInterval to track interval cleanup
+window.clearInterval = (id) => {
+  if (activeIntervals.has(id)) {
+    activeIntervals.delete(id);
+    if (DEBUG_AUTH_STATE) {
+      console.log(`[Interval ${id}] Cleared`);
+    }
+  } else if (DEBUG_AUTH_STATE) {
+    console.log(`[Interval ${id}] Cleared (not tracked)`);
+  }
+  originalClearInterval(id);
+};
+
+// Override setTimeout to track timeouts (debug logging disabled)
+window.setTimeout = (callback, delay, ...args) => {
+  const id = originalSetTimeout(callback, delay, ...args);
+  // Store minimal info without logging
+  activeTimeouts.set(id, { 
+    id, 
+    delay, 
+    callback: callback.toString(), 
+    createdAt: Date.now() 
+  });
+  return id;
+};
+
+// Override clearTimeout to track timeout cleanup (debug logging disabled)
+window.clearTimeout = (id) => {
+  if (activeTimeouts.has(id)) {
+    activeTimeouts.delete(id);
+  }
+  originalClearTimeout(id);
+};
+
+// Track auth check calls
+let lastAuthCheckTime = 0;
+let authCheckCounter = 0;
+const AUTH_CHECK_DEBOUNCE = 1000; // 1 second
+
+// Override console.log to capture all logs
+const originalConsoleLog = console.log;
+const originalConsoleGroup = console.group;
+const originalConsoleGroupEnd = console.groupEnd;
+
+// Track all console logs
+const consoleLogs = [];
+const MAX_LOGS = 100;
+
+console.log = function(...args) {
+  // Store the log
+  consoleLogs.push({
+    type: 'log',
+    timestamp: new Date().toISOString(),
+    args: [...args],
+    stack: new Error().stack
+  });
+  
+  // Keep only the most recent logs
+  while (consoleLogs.length > MAX_LOGS) {
+    consoleLogs.shift();
+  }
+  
+  // Filter out the auth state check messages
+  if (args[0] && typeof args[0] === 'string' && args[0].includes('Auth State Check')) {
+    return;
+  }
+  
+  originalConsoleLog.apply(console, args);
+};
+
+// Track console groups
+console.group = function(...args) {
+  consoleLogs.push({ type: 'group', timestamp: new Date().toISOString(), args });
+  originalConsoleGroup.apply(console, args);
+};
+
+console.groupEnd = function() {
+  consoleLogs.push({ type: 'groupEnd', timestamp: new Date().toISOString() });
+  originalConsoleGroupEnd.apply(console);
+};
+
+// Track all function calls that might trigger auth checks
+const trackedFunctions = ['checkAuthState', 'setInterval', 'setTimeout', 'addEventListener', 'removeEventListener'];
+const functionCalls = [];
+const MAX_FUNCTION_CALLS = 100;
+
+
+
+// Function to format stack trace for better readability
+function formatStack(stack) {
+  if (!stack) return 'No stack trace';
+  // Remove the first line (the error message) and limit to 5 frames
+  const frames = stack.split('\n').slice(1).slice(0, 5);
+  return frames.join('\n');
+}
+
+// Function to dump debug info
+window.dumpDebugInfo = () => {
+  console.group('Debug Info');
+  
+  // Active Intervals
+  console.group('Active Intervals');
+  if (activeIntervals.size === 0) {
+    console.log('No active intervals');
+  } else {
+    activeIntervals.forEach((info, id) => {
+      console.group(`Interval ${id} (${info.delay}ms)`);
+      console.log('Created at:', new Date(info.createdAt).toISOString());
+      console.log('Callback:', info.callback.split('\n')[0]); // First line of callback
+      console.log('Stack trace:');
+      console.log(formatStack(info.stack));
+      console.groupEnd();
+    });
+  }
+  console.groupEnd();
+  
+  // Active Timeouts
+  console.group('Active Timeouts');
+  if (activeTimeouts.size === 0) {
+    console.log('No active timeouts');
+  } else {
+    activeTimeouts.forEach((info, id) => {
+      console.group(`Timeout ${id} (${info.delay}ms)`);
+      console.log('Created at:', new Date(info.createdAt).toISOString());
+      console.log('Callback:', info.callback.split('\n')[0]); // First line of callback
+      console.log('Stack trace:');
+      console.log(formatStack(info.stack));
+      console.groupEnd();
+    });
+  }
+  console.groupEnd();
+  
+  // Document state
+  console.group('Document State');
+  console.log('Visibility:', document.visibilityState);
+  console.log('Has Focus:', document.hasFocus());
+  console.log('URL:', window.location.href);
+  console.groupEnd();
+  
+  // Recent logs
+  console.group('Recent Logs (10 most recent)');
+  if (consoleLogs.length === 0) {
+    console.log('No logs recorded');
+  } else {
+    consoleLogs.slice(-10).forEach((log, i) => {
+      console.group(`Log ${i + 1} (${log.timestamp})`);
+      console.log(...log.args);
+      if (log.stack) {
+        console.log('Stack trace:');
+        console.log(formatStack(log.stack));
+      }
+      console.groupEnd();
+    });
+  }
+  console.groupEnd();
+  
+  // Auth state
+  console.group('Auth State');
+  console.log('Has auth cookie:', document.cookie.includes('sessionid='));
+  console.log('Has UID cookie:', document.cookie.includes('uid='));
+  console.log('Has localStorage auth:', localStorage.getItem('isAuthenticated') === 'true');
+  console.log('Has auth token:', !!localStorage.getItem('auth_token'));
+  console.groupEnd();
+  
+  console.groupEnd(); // End main group
+};
+
+function trackFunctionCall(name, ...args) {
+  const callInfo = {
+    name,
+    time: Date.now(),
+    timestamp: new Date().toISOString(),
+    args: args.map(arg => {
+      try {
+        return JSON.stringify(arg);
+      } catch (e) {
+        return String(arg);
+      }
+    }),
+    stack: new Error().stack
+  };
+  
+  functionCalls.push(callInfo);
+  if (functionCalls.length > MAX_FUNCTION_CALLS) {
+    functionCalls.shift();
+  }
+  
+  if (name === 'checkAuthState') {
+    console.group(`[${functionCalls.length}] Auth check at ${callInfo.timestamp}`);
+    console.log('Call stack:', callInfo.stack);
+    console.log('Recent function calls:', functionCalls.slice(-5));
+    console.groupEnd();
+  }
+}
+
+// Override tracked functions
+trackedFunctions.forEach(fnName => {
+  if (window[fnName]) {
+    const originalFn = window[fnName];
+    window[fnName] = function(...args) {
+      trackFunctionCall(fnName, ...args);
+      return originalFn.apply(this, args);
+    };
+  }
+});
+
+// Check authentication state and update UI
+function checkAuthState() {
+  const now = Date.now();
+  
+  // Throttle the checks
+  if (now - lastAuthCheckTime < AUTH_CHECK_DEBOUNCE) {
+    return;
+  }
+  lastAuthCheckTime = now;
+  
+  // Check various auth indicators
+  const hasAuthCookie = document.cookie.includes('sessionid=');
+  const hasUidCookie = document.cookie.includes('uid=');
+  const hasLocalStorageAuth = localStorage.getItem('isAuthenticated') === 'true';
+  const hasAuthToken = localStorage.getItem('authToken') !== null;
+  
+  const isAuthenticated = hasAuthCookie || hasUidCookie || hasLocalStorageAuth || hasAuthToken;
+  
+  // Only log if debug is enabled or if state has changed
+  if (DEBUG_AUTH_STATE || isAuthenticated !== wasAuthenticated) {
+    console.log('Auth State Check:', {
+      hasAuthCookie,
+      hasUidCookie,
+      hasLocalStorageAuth,
+      hasAuthToken,
+      isAuthenticated,
+      wasAuthenticated
+    });
+  }
+  
+  // Only update if authentication state has changed
+  if (isAuthenticated !== wasAuthenticated) {
+    if (DEBUG_AUTH_STATE) {
+      console.log('Auth state changed, updating navigation...');
+    }
+    
+    // Update UI state
+    if (isAuthenticated) {
+      document.body.classList.add('authenticated');
+      document.body.classList.remove('guest');
+    } else {
+      document.body.classList.remove('authenticated');
+      document.body.classList.add('guest');
+    }
+    
+    // Update navigation
+    if (typeof injectNavigation === 'function') {
+      injectNavigation(isAuthenticated);
+    } else if (DEBUG_AUTH_STATE) {
+      console.warn('injectNavigation function not found');
+    }
+    
+    // Update the tracked state
+    wasAuthenticated = isAuthenticated;
+    
+    // Force reflow to ensure CSS updates
+    void document.body.offsetHeight;
+  }
+  
+  return isAuthenticated;
+}
+
+// Periodically check authentication state
+function setupAuthStatePolling() {
+  // Initial check
+  checkAuthState();
+  
+  // Check every 30 seconds instead of 2 to reduce load
+  setInterval(checkAuthState, 30000);
+  
+  // Also check after certain events that might affect auth state
+  window.addEventListener('storage', checkAuthState);
+  document.addEventListener('visibilitychange', () => {
+    if (!document.hidden) checkAuthState();
+  });
+}
+
+
 // Initialize the application when DOM is loaded
 document.addEventListener("DOMContentLoaded", () => {
+  // Set up authentication state monitoring
+  setupAuthStatePolling();
+  
   // Handle magic link redirect if needed
   handleMagicLoginRedirect();
   
   // Initialize components
   initNavigation();
   
+  
   // Initialize profile player after a short delay
   setTimeout(() => {
     initProfilePlayer();
@@ -453,26 +858,27 @@ document.addEventListener("DOMContentLoaded", () => {
     
     // Set up delete account button if it exists
     const deleteAccountBtn = document.getElementById('delete-account');
-    if (deleteAccountBtn) {
-      deleteAccountBtn.addEventListener('click', async (e) => {
-        e.preventDefault();
+    const deleteAccountFromPrivacyBtn = document.getElementById('delete-account-from-privacy');
+    
+    const deleteAccount = async (e) => {
+      if (e) e.preventDefault();
+      
+      if (!confirm('Are you sure you want to delete your account? This action cannot be undone.')) {
+        return;
+      }
+      
+      try {
+        const response = await fetch('/api/delete-account', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          }
+        });
         
-        if (!confirm('Are you sure you want to delete your account? This action cannot be undone.')) {
-          return;
-        }
-        
-        try {
-          const response = await fetch('/api/delete-account', {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-            }
-          });
-          
-          if (response.ok) {
-            // Clear local storage and redirect to home page
-            localStorage.clear();
-            window.location.href = '/';
+        if (response.ok) {
+          // Clear local storage and redirect to home page
+          localStorage.clear();
+          window.location.href = '/';
           } else {
             const error = await response.json();
             throw new Error(error.detail || 'Failed to delete account');
@@ -481,12 +887,48 @@ document.addEventListener("DOMContentLoaded", () => {
           console.error('Error deleting account:', error);
           showToast(`❌ ${error.message || 'Failed to delete account'}`, 'error');
         }
-      });
-    }
+      };
+      
+      // Add event listeners to both delete account buttons
+      if (deleteAccountBtn) {
+        deleteAccountBtn.addEventListener('click', deleteAccount);
+      }
+      
+      if (deleteAccountFromPrivacyBtn) {
+        deleteAccountFromPrivacyBtn.addEventListener('click', deleteAccount);
+      }
     
   }, 200); // End of setTimeout
 });
 
+// Logout function
+function logout() {
+  // Clear authentication state
+  document.body.classList.remove('authenticated');
+  localStorage.removeItem('isAuthenticated');
+  localStorage.removeItem('uid');
+  localStorage.removeItem('confirmed_uid');
+  localStorage.removeItem('uid_time');
+  
+  // Clear cookies
+  document.cookie = 'isAuthenticated=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
+  document.cookie = 'uid=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
+  
+  // Stop any playing audio
+  stopMainAudio();
+  
+  // Redirect to home page
+  window.location.href = '/';
+}
+
+// Add click handler for logout button
+document.addEventListener('click', (e) => {
+  if (e.target.id === 'logout-button' || e.target.closest('#logout-button')) {
+    e.preventDefault();
+    logout();
+  }
+});
+
 // Expose functions for global access
 window.logToServer = logToServer;
 window.getMainAudio = () => globalAudio;
diff --git a/static/css/colors.css b/static/css/colors.css
new file mode 100644
index 0000000..265a2a5
--- /dev/null
+++ b/static/css/colors.css
@@ -0,0 +1,69 @@
+/* 
+ * Color System Documentation
+ * 
+ * This file documents the color variables used throughout the application.
+ * All colors should be defined as CSS variables in :root, and these variables
+ * should be used consistently across all CSS and JavaScript files.
+ */
+
+:root {
+  /* Primary Colors */
+  --primary-color: #4a6fa5;    /* Main brand color */
+  --primary-hover: #3a5a8c;   /* Darker shade for hover states */
+  
+  /* Text Colors */
+  --text-color: #f0f0f0;      /* Main text color */
+  --text-muted: #888;         /* Secondary text, less important info */
+  --text-light: #999;         /* Lighter text for disabled states */
+  --text-lighter: #bbb;       /* Very light text, e.g., placeholders */
+  
+  /* Background Colors */
+  --background: #1a1a1a;      /* Main background color */
+  --surface: #2a2a2a;         /* Surface color for cards, panels, etc. */
+  --code-bg: #222;            /* Background for code blocks */
+  
+  /* Border Colors */
+  --border: #444;             /* Default border color */
+  --border-light: #555;       /* Lighter border */
+  --border-lighter: #666;     /* Even lighter border */
+  
+  /* Status Colors */
+  --success: #2e8b57;         /* Success messages, confirmations */
+  --warning: #ff6600;         /* Warnings, important notices */
+  --error: #ff4444;           /* Error messages, destructive actions */
+  --error-hover: #ff6666;     /* Hover state for error buttons */
+  --info: #1e90ff;            /* Informational messages, links */
+  --link-hover: #74c0fc;      /* Hover state for links */
+  
+  /* Transitions */
+  --transition: all 0.2s ease; /* Default transition */
+}
+
+/* 
+ * Usage Examples:
+ * 
+ * .button {
+ *   background-color: var(--primary-color);
+ *   color: var(--text-color);
+ *   border: 1px solid var(--border);
+ *   transition: var(--transition);
+ * }
+ * 
+ * .button:hover {
+ *   background-color: var(--primary-hover);
+ * }
+ * 
+ * .error-message {
+ *   color: var(--error);
+ *   background-color: color-mix(in srgb, var(--error) 10%, transparent);
+ *   border-left: 3px solid var(--error);
+ * }
+ */
+
+/* 
+ * Accessibility Notes:
+ * - Ensure text has sufficient contrast with its background
+ * - Use semantic color names that describe the purpose, not the color
+ * - Test with color blindness simulators for accessibility
+ * - Maintain consistent color usage throughout the application
+ */
diff --git a/static/css/components/file-upload.css b/static/css/components/file-upload.css
new file mode 100644
index 0000000..dc95409
--- /dev/null
+++ b/static/css/components/file-upload.css
@@ -0,0 +1,268 @@
+/* File upload and list styles */
+#user-upload-area {
+  border: 2px dashed var(--border);
+  border-radius: 8px;
+  padding: 2rem;
+  text-align: center;
+  margin: 1rem 0;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  background-color: var(--surface);
+}
+
+#user-upload-area:hover,
+#user-upload-area.highlight {
+  border-color: var(--primary);
+  background-color: rgba(var(--primary-rgb), 0.05);
+}
+
+#user-upload-area p {
+  margin: 0;
+  color: var(--text-secondary);
+}
+
+#file-list {
+  list-style: none;
+  padding: 0;
+  margin: 1rem 0 0;
+}
+
+#file-list {
+  margin: 1.5rem 0;
+  padding: 0;
+}
+
+#file-list li {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  margin: 0.5rem 0;
+  background-color: var(--surface);
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  transition: all 0.2s ease-in-out;
+}
+
+#file-list li:hover {
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  transform: translateY(-1px);
+}
+
+#file-list li.no-files,
+#file-list li.loading-message,
+#file-list li.error-message {
+  display: block;
+  text-align: center;
+  color: var(--text-muted);
+  padding: 2rem 1.5rem;
+  background-color: transparent;
+  border: 2px dashed var(--border);
+  margin: 1rem 0;
+  border-radius: 8px;
+  font-size: 1.1em;
+}
+
+#file-list li.loading-message {
+  color: var(--primary);
+  font-style: italic;
+}
+
+#file-list li.error-message {
+  color: var(--error);
+  border-color: var(--error);
+}
+
+#file-list li.error-message .login-link {
+  color: var(--primary);
+  text-decoration: none;
+  font-weight: bold;
+  margin-left: 0.3em;
+}
+
+#file-list li.error-message .login-link:hover {
+  text-decoration: underline;
+}
+
+#file-list li.no-files:hover {
+  background-color: rgba(var(--primary-rgb), 0.05);
+  border-color: var(--primary);
+  transform: none;
+  box-shadow: none;
+}
+
+.file-item {
+  width: 100%;
+}
+
+.file-info {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0; /* Allows text truncation */
+}
+
+.file-icon {
+  margin-right: 0.75rem;
+  font-size: 1.2em;
+  flex-shrink: 0;
+}
+
+.file-name {
+  color: var(--primary);
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 0.5rem;
+}
+
+.file-name:hover {
+  text-decoration: underline;
+}
+
+.file-size {
+  color: var(--text-muted);
+  font-size: 0.85em;
+  margin-left: 0.5rem;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.file-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-left: 1rem;
+  flex-shrink: 0;
+}
+
+.download-button,
+.delete-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.4rem 0.8rem;
+  border-radius: 4px;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-decoration: none;
+  border: 1px solid transparent;
+}
+
+.download-button {
+  background-color: var(--primary);
+  color: white;
+}
+
+.download-button:hover {
+  background-color: var(--primary-hover);
+  transform: translateY(-1px);
+}
+
+.delete-button {
+  background-color: transparent;
+  color: var(--error);
+  border-color: var(--error);
+}
+
+.delete-button:hover {
+  background-color: rgba(var(--error-rgb), 0.1);
+}
+
+.button-icon {
+  font-size: 1em;
+}
+
+.button-text {
+  display: none;
+}
+
+/* Show text on larger screens */
+@media (min-width: 640px) {
+  .button-text {
+    display: inline;
+  }
+  
+  .download-button,
+  .delete-button {
+    padding: 0.4rem 1rem;
+  }
+}
+
+/* Responsive adjustments */
+@media (max-width: 480px) {
+  #file-list li {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+  
+  .file-actions {
+    width: 100%;
+    margin-left: 0;
+    justify-content: flex-end;
+  }
+  
+  .file-name {
+    max-width: 100%;
+  }
+}
+
+#file-list li a {
+  color: var(--primary);
+  text-decoration: none;
+  flex-grow: 1;
+  margin-right: 1rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#file-list li a:hover {
+  text-decoration: underline;
+}
+
+.file-size {
+  color: var(--text-secondary);
+  font-size: 0.9em;
+  margin-left: 0.5rem;
+}
+
+.delete-file {
+  background: none;
+  border: none;
+  color: var(--error);
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.delete-file:hover {
+  background-color: rgba(var(--error-rgb), 0.1);
+}
+
+/* Loading state */
+#file-list.loading {
+  opacity: 0.7;
+  pointer-events: none;
+}
+
+/* Mobile optimizations */
+@media (max-width: 768px) {
+  #user-upload-area {
+    padding: 1.5rem 1rem;
+  }
+  
+  #file-list li {
+    padding: 0.5rem;
+    font-size: 0.9rem;
+  }
+  
+  .file-size {
+    display: block;
+    margin-left: 0;
+    margin-top: 0.25rem;
+  }
+}
diff --git a/static/css/layout/footer.css b/static/css/layout/footer.css
index 8def7f8..46ca031 100644
--- a/static/css/layout/footer.css
+++ b/static/css/layout/footer.css
@@ -1,7 +1,7 @@
 /* Footer styles */
 footer {
   background: #2c3e50;
-  color: #ecf0f1;
+  color: var(--text-color);
   padding: 2rem 0;
   margin-top: 3rem;
   width: 100%;
@@ -26,30 +26,30 @@ footer {
 }
 
 .footer-links a {
-  color: #ecf0f1;
+  color: var(--text-color);
   text-decoration: none;
   transition: color 0.2s;
 }
 
 .footer-links a:hover,
 .footer-links a:focus {
-  color: #3498db;
+  color: var(--info);
   text-decoration: underline;
 }
 
 .separator {
-  color: #7f8c8d;
+  color: var(--text-muted);
   margin: 0 0.25rem;
 }
 
 .footer-hint {
   margin-top: 1rem;
   font-size: 0.9rem;
-  color: #bdc3c7;
+  color: var(--text-light);
 }
 
 .footer-hint a {
-  color: #3498db;
+  color: var(--info);
   text-decoration: none;
 }
 
diff --git a/static/css/layout/header.css b/static/css/layout/header.css
index eb9d305..497b46a 100644
--- a/static/css/layout/header.css
+++ b/static/css/layout/header.css
@@ -81,7 +81,7 @@ header {
 .nav-link:focus {
   background: rgba(255, 255, 255, 0.1);
   text-decoration: none;
-  color: #fff;
+  color: var(--text-color);
 }
 
 /* Active navigation item */
diff --git a/static/css/section.css b/static/css/section.css
new file mode 100644
index 0000000..453aafb
--- /dev/null
+++ b/static/css/section.css
@@ -0,0 +1,54 @@
+/* section.css - Centralized visibility control with class-based states */
+
+/* Base section visibility - all sections hidden by default */
+main > section {
+  display: none;
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  opacity: 0;
+}
+
+/* Active section styling - only visibility properties */
+main > section.active {
+  display: block;
+  position: relative;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+  opacity: 1;
+}
+
+/* Authentication-based visibility classes */
+.guest-only { display: block; }
+.auth-only { 
+  display: none;
+}
+
+/* Show auth-only elements when authenticated */
+body.authenticated .auth-only {
+  display: block;
+}
+
+/* Ensure me-page and its direct children are visible when me-page is active */
+#me-page:not([hidden]) > .auth-only,
+#me-page:not([hidden]) > section,
+#me-page:not([hidden]) > article,
+#me-page:not([hidden]) > div,
+/* Ensure account deletion section is visible when privacy page is active and user is authenticated */
+#privacy-page:not([hidden]) .auth-only,
+#privacy-page:not([hidden]) #account-deletion {
+  display: block !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+
+body.authenticated .guest-only { 
+  display: none;
+}
+
+.always-visible { 
+  display: block !important; 
+}
diff --git a/static/dashboard.js b/static/dashboard.js
index d60a19a..2c75e7e 100644
--- a/static/dashboard.js
+++ b/static/dashboard.js
@@ -1,5 +1,6 @@
 import { showToast } from "./toast.js";
 
+// Utility function to get cookie value by name
 function getCookie(name) {
   const value = `; ${document.cookie}`;
   const parts = value.split(`; ${name}=`);
@@ -8,7 +9,7 @@ function getCookie(name) {
 }
 // dashboard.js — toggle guest vs. user dashboard and reposition streams link
 
-// Logout function
+// Global state
 let isLoggingOut = false;
 
 async function handleLogout(event) {
@@ -31,8 +32,10 @@ async function handleLogout(event) {
     localStorage.removeItem('confirmed_uid');
     localStorage.removeItem('last_page');
     
-    // Clear cookie
-    document.cookie = 'uid=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
+    // Clear session cookie with SameSite attribute to match how it was set
+    const isLocalhost = window.location.hostname === 'localhost';
+    const secureFlag = !isLocalhost ? '; Secure' : '';
+    document.cookie = `sessionid=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT; SameSite=Lax${secureFlag};`;
     
     // Update UI state immediately
     const userDashboard = document.getElementById('user-dashboard');
@@ -134,6 +137,31 @@ async function handleDeleteAccount() {
   }
 }
 
+// Debug function to check element visibility and styles
+function debugElementVisibility(elementId) {
+  const el = document.getElementById(elementId);
+  if (!el) {
+    console.error(`[DEBUG] Element ${elementId} not found`);
+    return {};
+  }
+  const style = window.getComputedStyle(el);
+  return {
+    id: elementId,
+    exists: true,
+    display: style.display,
+    visibility: style.visibility,
+    opacity: style.opacity,
+    hidden: el.hidden,
+    classList: Array.from(el.classList),
+    parentDisplay: el.parentElement ? window.getComputedStyle(el.parentElement).display : 'no-parent',
+    parentVisibility: el.parentElement ? window.getComputedStyle(el.parentElement).visibility : 'no-parent',
+    rect: el.getBoundingClientRect()
+  };
+}
+
+/**
+ * Initialize the dashboard and handle authentication state
+ */
 async function initDashboard() {
   console.log('[DASHBOARD] Initializing dashboard...');
   
@@ -143,14 +171,7 @@ async function initDashboard() {
   const userUpload = document.getElementById('user-upload-area');
   const logoutButton = document.getElementById('logout-button');
   const deleteAccountButton = document.getElementById('delete-account-button');
-  
-  console.log('[DASHBOARD] Elements found:', {
-    guestDashboard: !!guestDashboard,
-    userDashboard: !!userDashboard,
-    userUpload: !!userUpload,
-    logoutButton: !!logoutButton,
-    deleteAccountButton: !!deleteAccountButton
-  });
+  const fileList = document.getElementById('file-list');
   
   // Add click event listeners for logout and delete account buttons
   if (logoutButton) {
@@ -165,41 +186,146 @@ async function initDashboard() {
       handleDeleteAccount();
     });
   }
-
-  const uid = getCookie('uid');
-  console.log('[DASHBOARD] UID from cookie:', uid);
   
-  // Guest view
-  if (!uid) {
-    console.log('[DASHBOARD] No UID found, showing guest dashboard');
+  // Check authentication state - consolidated to avoid duplicate declarations
+  const hasAuthCookie = document.cookie.includes('isAuthenticated=true');
+  const hasUidCookie = document.cookie.includes('uid=');
+  const hasLocalStorageAuth = localStorage.getItem('isAuthenticated') === 'true';
+  const hasAuthToken = localStorage.getItem('authToken') !== null;
+  const isAuthenticated = hasAuthCookie || hasUidCookie || hasLocalStorageAuth || hasAuthToken;
+  
+  // Debug authentication state
+  console.log('[AUTH] Authentication state:', {
+    hasAuthCookie,
+    hasUidCookie,
+    hasLocalStorageAuth,
+    hasAuthToken,
+    isAuthenticated,
+    cookies: document.cookie,
+    localStorage: {
+      isAuthenticated: localStorage.getItem('isAuthenticated'),
+      uid: localStorage.getItem('uid'),
+      authToken: localStorage.getItem('authToken') ? 'present' : 'not present'
+    },
+    bodyClasses: document.body.className
+  });
+  
+  // Handle authenticated user
+  if (isAuthenticated) {
+    console.log('[DASHBOARD] User is authenticated, showing user dashboard');
+    if (userDashboard) userDashboard.style.display = 'block';
+    if (userUpload) userUpload.style.display = 'block';
+    if (guestDashboard) guestDashboard.style.display = 'none';
+    
+    // Add authenticated class to body if not present
+    document.body.classList.add('authenticated');
+    
+    // Get UID from cookies or localStorage
+    let uid = getCookie('uid') || localStorage.getItem('uid');
+    
+    if (!uid) {
+      console.warn('[DASHBOARD] No UID found in cookies or localStorage');
+      // Try to get UID from the URL or hash fragment
+      const urlParams = new URLSearchParams(window.location.search);
+      uid = urlParams.get('uid') || window.location.hash.substring(1);
+      
+      if (uid) {
+        console.log(`[DASHBOARD] Using UID from URL/hash: ${uid}`);
+        localStorage.setItem('uid', uid);
+      } else {
+        console.error('[DASHBOARD] No UID available for file listing');
+        if (fileList) {
+          fileList.innerHTML = `
+            <li class="error-message">
+              Error: Could not determine user account. Please <a href="/#login" class="login-link">log in</a> again.
+            </li>`;
+        }
+        return;
+      }
+    }
+    
+    // Initialize file listing if we have a UID
+    if (window.fetchAndDisplayFiles) {
+      console.log(`[DASHBOARD] Initializing file listing for UID: ${uid}`);
+      try {
+        await window.fetchAndDisplayFiles(uid);
+      } catch (error) {
+        console.error('[DASHBOARD] Error initializing file listing:', error);
+        if (fileList) {
+          fileList.innerHTML = `
+            <li class="error-message">
+              Error loading files: ${error.message || 'Unknown error'}. 
+              Please <a href="/#login" class="login-link">log in</a> again.
+            </li>`;
+        }
+      }
+    }
+  } else {
+    // Guest view
+    console.log('[DASHBOARD] User not authenticated, showing guest dashboard');
     if (guestDashboard) guestDashboard.style.display = 'block';
     if (userDashboard) userDashboard.style.display = 'none';
     if (userUpload) userUpload.style.display = 'none';
-    if (logoutButton) logoutButton.style.display = 'none';
-    if (deleteAccountButton) deleteAccountButton.style.display = 'none';
-    const mePage = document.getElementById('me-page');
-    if (mePage) mePage.style.display = 'none';
+    
+    // Remove authenticated class if present
+    document.body.classList.remove('authenticated');
+    
+    // Show login prompt
+    if (fileList) {
+      fileList.innerHTML = `
+        <li class="error-message">
+          Please <a href="/#login" class="login-link">log in</a> to view your files.
+        </li>`;
+    }
+  }
+
+  // Log authentication details for debugging
+  console.log('[DASHBOARD] Authentication details:', {
+    uid: getCookie('uid') || localStorage.getItem('uid'),
+    cookies: document.cookie,
+    localStorage: {
+      uid: localStorage.getItem('uid'),
+      isAuthenticated: localStorage.getItem('isAuthenticated'),
+      authToken: localStorage.getItem('authToken') ? 'present' : 'not present'
+    }
+  });
+  
+  // If not authenticated, show guest view and return early
+  if (!isAuthenticated) {
+    console.log('[DASHBOARD] User not authenticated, showing guest dashboard');
+    if (guestDashboard) guestDashboard.style.display = 'block';
+    if (userDashboard) userDashboard.style.display = 'none';
+    if (userUpload) userUpload.style.display = 'none';
+    
+    // Remove authenticated class if present
+    document.body.classList.remove('authenticated');
+    
+    // Show login prompt
+    if (fileList) {
+      fileList.innerHTML = `
+        <li class="error-message">
+          Please <a href="/#login" class="login-link">log in</a> to view your files.
+        </li>`;
+    }
     return;
   }
   
-  // Logged-in view - show user dashboard by default
+  // Logged-in view - show user dashboard
   console.log('[DASHBOARD] User is logged in, showing user dashboard');
   
-  // Log current display states
-  console.log('[DASHBOARD] Current display states:', {
+  // Get all page elements
+  const mePage = document.getElementById('me-page');
+  
+  // Log current display states for debugging
+  console.log('[DASHBOARD] Updated display states:', {
     guestDashboard: guestDashboard ? window.getComputedStyle(guestDashboard).display : 'not found',
     userDashboard: userDashboard ? window.getComputedStyle(userDashboard).display : 'not found',
     userUpload: userUpload ? window.getComputedStyle(userUpload).display : 'not found',
     logoutButton: logoutButton ? window.getComputedStyle(logoutButton).display : 'not found',
-    deleteAccountButton: deleteAccountButton ? window.getComputedStyle(deleteAccountButton).display : 'not found'
+    deleteAccountButton: deleteAccountButton ? window.getComputedStyle(deleteAccountButton).display : 'not found',
+    mePage: mePage ? window.getComputedStyle(mePage).display : 'not found'
   });
   
-  // Show delete account button for logged-in users
-  if (deleteAccountButton) {
-    deleteAccountButton.style.display = 'block';
-    console.log('[DASHBOARD] Showing delete account button');
-  }
-  
   // Hide guest dashboard
   if (guestDashboard) {
     console.log('[DASHBOARD] Hiding guest dashboard');
@@ -213,6 +339,14 @@ async function initDashboard() {
     userDashboard.style.visibility = 'visible';
     userDashboard.hidden = false;
     
+    // Log final visibility state after changes
+    console.log('[DEBUG] Final visibility state after showing user dashboard:', {
+      userDashboard: debugElementVisibility('user-dashboard'),
+      guestDashboard: debugElementVisibility('guest-dashboard'),
+      computedDisplay: window.getComputedStyle(userDashboard).display,
+      computedVisibility: window.getComputedStyle(userDashboard).visibility
+    });
+    
     // Debug: Check if the element is actually in the DOM
     console.log('[DASHBOARD] User dashboard parent:', userDashboard.parentElement);
     console.log('[DASHBOARD] User dashboard computed display:', window.getComputedStyle(userDashboard).display);
@@ -234,73 +368,115 @@ async function initDashboard() {
   }
   
   // Show me-page for logged-in users
-  const mePage = document.getElementById('me-page');
   if (mePage) {
     console.log('[DASHBOARD] Showing me-page');
     mePage.style.display = 'block';
   }
 
   try {
-    console.log(`[DEBUG] Fetching user data for UID: ${uid}`);
-    const res = await fetch(`/me/${uid}`);
-    if (!res.ok) {
-      const errorText = await res.text();
-      console.error(`[ERROR] Failed to fetch user data: ${res.status} ${res.statusText}`, errorText);
-      throw new Error(`HTTP ${res.status}: ${res.statusText}`);
-    }
-    const data = await res.json();
-    console.log('[DEBUG] User data loaded:', data);
+    // Try to get UID from various sources
+    let uid = getCookie('uid') || localStorage.getItem('uid');
     
-    // Ensure upload area is visible if last_page was me-page
-    if (userUpload && localStorage.getItem('last_page') === 'me-page') {
-      // userUpload visibility is now only controlled by nav.js SPA logic
-    }
+    // If we have a valid UID, try to fetch user data
+    if (uid && uid !== 'welcome-page' && uid !== 'undefined' && uid !== 'null') {
+      console.log('[DASHBOARD] Found valid UID:', uid);
+      console.log(`[DEBUG] Fetching user data for UID: ${uid}`);
+      const response = await fetch(`/me/${uid}`);
+      if (!response.ok) {
+        const errorText = await response.text();
+        console.error(`[ERROR] Failed to fetch user data: ${response.status} ${response.statusText}`, errorText);
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+      
+      // Parse and handle the response data
+      const data = await response.json();
+      console.log('[DEBUG] User data loaded:', data);
+      
+      // Ensure upload area is visible if last_page was me-page
+      if (userUpload && localStorage.getItem('last_page') === 'me-page') {
+        // userUpload visibility is now only controlled by nav.js SPA logic
+      }
 
-    // Remove guest warning if present
-    const guestMsg = document.getElementById('guest-warning-msg');
-    if (guestMsg && guestMsg.parentNode) guestMsg.parentNode.removeChild(guestMsg);
-    // Show user dashboard and logout button
-    if (userDashboard) userDashboard.style.display = '';
-    if (logoutButton) {
-      logoutButton.style.display = 'block';
-      logoutButton.onclick = handleLogout;
-    }
+      // Remove guest warning if present
+      const guestMsg = document.getElementById('guest-warning-msg');
+      if (guestMsg && guestMsg.parentNode) guestMsg.parentNode.removeChild(guestMsg);
+      
+      // Show user dashboard and logout button
+      if (userDashboard) userDashboard.style.display = '';
+      if (logoutButton) {
+        logoutButton.style.display = 'block';
+        logoutButton.onclick = handleLogout;
+      }
 
-    // Set audio source
-    const meAudio = document.getElementById('me-audio');
-    if (meAudio && data && data.username) {
-      // Use username instead of UID for the audio file path
-      meAudio.src = `/audio/${encodeURIComponent(data.username)}/stream.opus?t=${Date.now()}`;
-      console.log('Setting audio source to:', meAudio.src);
-    } else if (meAudio && uid) {
-      // Fallback to UID if username is not available
-      meAudio.src = `/audio/${encodeURIComponent(uid)}/stream.opus?t=${Date.now()}`;
-      console.warn('Using UID fallback for audio source:', meAudio.src);
-    }
+      // Set audio source
+      const meAudio = document.getElementById('me-audio');
+      const username = data?.username || '';
+      
+      if (meAudio) {
+        if (username) {
+          // Use username for the audio file path if available
+          meAudio.src = `/audio/${encodeURIComponent(username)}/stream.opus?t=${Date.now()}`;
+          console.log('Setting audio source to:', meAudio.src);
+        } else if (uid) {
+          // Fallback to UID if username is not available
+          meAudio.src = `/audio/${encodeURIComponent(uid)}/stream.opus?t=${Date.now()}`;
+          console.warn('Using UID fallback for audio source:', meAudio.src);
+        }
+      }
 
-    // Update quota and ensure quota meter is visible
-    const quotaMeter = document.getElementById('quota-meter');
-    const quotaBar = document.getElementById('quota-bar');
-    const quotaText = document.getElementById('quota-text');
-    if (quotaBar) quotaBar.value = data.quota;
-    if (quotaText) quotaText.textContent = `${data.quota} MB used`;
-    if (quotaMeter) {
-      quotaMeter.hidden = false;
-      quotaMeter.style.display = 'block'; // Ensure it's not hidden by display:none
-    }
-    
-    // Fetch and display the list of uploaded files if the function is available
-    if (window.fetchAndDisplayFiles) {
-      window.fetchAndDisplayFiles(uid);
+      // Update quota and ensure quota meter is visible if data is available
+      const quotaMeter = document.getElementById('quota-meter');
+      const quotaBar = document.getElementById('quota-bar');
+      const quotaText = document.getElementById('quota-text');
+      
+      if (quotaBar && data.quota !== undefined) {
+        quotaBar.value = data.quota;
+      }
+      
+      if (quotaText && data.quota !== undefined) {
+        quotaText.textContent = `${data.quota} MB`;
+      }
+      
+      if (quotaMeter) {
+        quotaMeter.hidden = false;
+        quotaMeter.style.display = 'block'; // Ensure it's not hidden by display:none
+      }
+      
+      // Fetch and display the list of uploaded files if the function is available
+      if (window.fetchAndDisplayFiles) {
+        console.log('[DASHBOARD] Calling fetchAndDisplayFiles with UID:', uid);
+        // Ensure we have the most up-to-date UID from the response data if available
+        const effectiveUid = data?.uid || uid;
+        console.log('[DASHBOARD] Using effective UID:', effectiveUid);
+        window.fetchAndDisplayFiles(effectiveUid);
+      } else {
+        console.error('[DASHBOARD] fetchAndDisplayFiles function not found!');
+      }
+    } else {
+      // No valid UID found, ensure we're in guest mode
+      console.log('[DASHBOARD] No valid UID found, showing guest dashboard');
+      userDashboard.style.display = 'none';
+      guestDashboard.style.display = 'block';
+      userUpload.style.display = 'none';
+      document.body.classList.remove('authenticated');
+      return; // Exit early for guest users
     }
 
     // Ensure Streams link remains in nav, not moved
     // (No action needed if static)
   } catch (e) {
-    console.warn('Dashboard init error, treating as guest:', e);
+    console.warn('Dashboard init error, falling back to guest mode:', e);
     
-    userUpload.style.display = '';
+    // Ensure guest UI is shown
+    userUpload.style.display = 'none';
     userDashboard.style.display = 'none';
+    if (guestDashboard) guestDashboard.style.display = 'block';
+    
+    // Update body classes
+    document.body.classList.remove('authenticated');
+    document.body.classList.add('guest-mode');
+    
+    // Ensure navigation is in correct state
     const registerLink = document.getElementById('guest-login');
     const streamsLink = document.getElementById('guest-streams');
     if (registerLink && streamsLink) {
@@ -309,45 +485,417 @@ async function initDashboard() {
   }
 }
 
-document.addEventListener('DOMContentLoaded', initDashboard);
+// Function to delete a file - only define if not already defined
+if (typeof window.deleteFile === 'undefined') {
+  window.deleteFile = async function(uid, fileName, listItem) {
+    if (!confirm(`Are you sure you want to delete "${fileName}"? This cannot be undone.`)) {
+      return;
+    }
 
-// Registration form handler for guests
-// Handles the submit event on #register-form, sends data to /register, and alerts the user with the result
+    try {
+      console.log(`[FILES] Deleting file: ${fileName} for user: ${uid}`);
+      
+      const response = await fetch(`/delete-file/${uid}/${encodeURIComponent(fileName)}`, {
+        method: 'DELETE',
+        credentials: 'include',
+        headers: {
+          'Accept': 'application/json'
+        }
+      });
+      
+      console.log('[FILES] Delete response:', response.status, response.statusText);
+      
+      if (!response.ok) {
+        const errorText = await response.text();
+        console.error('[FILES] Delete error:', errorText);
+        showToast(`Error deleting file: ${response.statusText}`, 'error');
+        return;
+      }
+      
+      // Remove the file from the UI
+      if (listItem && listItem.parentNode) {
+        listItem.parentNode.removeChild(listItem);
+      }
+      
+      showToast('File deleted successfully', 'success');
+      
+      // If no files left, show "no files" message
+      const fileList = document.getElementById('file-list');
+      if (fileList && fileList.children.length === 0) {
+        fileList.innerHTML = '<li class="no-files">No files uploaded yet.</li>';
+      }
+      
+    } catch (error) {
+      console.error('[FILES] Error deleting file:', error);
+      showToast('Error deleting file. Please try again.', 'error');
+    }
+  }; // Close the function expression
+} // Close the if statement
 
+// Function to fetch and display user's uploaded files
+async function fetchAndDisplayFiles(uid) {
+  const fileList = document.getElementById('file-list');
+  
+  if (!fileList) {
+    console.error('[FILES] File list element not found');
+    return;
+  }
+  
+  console.log(`[FILES] Fetching files for user: ${uid}`);
+  fileList.innerHTML = '<li class="loading-message">Loading your files...</li>';
+  
+  // Prepare headers with auth token if available
+  const authToken = localStorage.getItem('authToken');
+  const headers = { 
+    'Accept': 'application/json',
+    'Content-Type': 'application/json'
+  };
+  
+  if (authToken) {
+    headers['Authorization'] = `Bearer ${authToken}`;
+  }
+  
+  console.log('[FILES] Making request to /me with headers:', headers);
+  
+  try {
+    // The backend should handle authentication via session cookies
+    // We include the auth token in headers if available, but don't rely on it for auth
+    console.log('[FILES] Making request to /me with credentials...');
+    const response = await fetch('/me', {
+      method: 'GET',
+      credentials: 'include',  // Important: include cookies for session auth
+      headers: headers
+    });
+    
+    console.log('[FILES] Response status:', response.status);
+    console.log('[FILES] Response headers:', Object.fromEntries([...response.headers.entries()]));
+    
+    // Get response as text first to handle potential JSON parsing errors
+    const responseText = await response.text();
+    console.log('[FILES] Raw response text:', responseText);
+    
+    // Parse the JSON response
+    let responseData = {};
+    if (responseText && responseText.trim() !== '') {
+      try {
+        responseData = JSON.parse(responseText);
+        console.log('[FILES] Successfully parsed JSON response:', responseData);
+      } catch (e) {
+        console.error('[FILES] Failed to parse JSON response. Response text:', responseText);
+        console.error('[FILES] Error details:', e);
+        
+        // If we have a non-JSON response but the status is 200, try to handle it
+        if (response.ok) {
+          console.warn('[FILES] Non-JSON response with 200 status, treating as empty response');
+        } else {
+          throw new Error(`Invalid JSON response from server: ${e.message}`);
+        }
+      }
+    } else {
+      console.log('[FILES] Empty response received, using empty object');
+    }
+    
+    // Note: Authentication is handled by the parent component
+    // We'll just handle the response status without clearing auth state
+    
+    if (response.ok) {
+      // Check if the response has the expected format
+      if (!responseData || !Array.isArray(responseData.files)) {
+        console.error('[FILES] Invalid response format, expected {files: [...]}:', responseData);
+        fileList.innerHTML = '<li>Error: Invalid response from server</li>';
+        return;
+      }
+      
+      const files = responseData.files;
+      console.log('[FILES] Files array:', files);
+      
+      if (files.length === 0) {
+        fileList.innerHTML = '<li class="no-files">No files uploaded yet.</li>';
+        return;
+      }
+      
+      // Clear the loading message
+      fileList.innerHTML = '';
+      
+      // Add each file to the list
+      files.forEach(fileName => {
+        const fileExt = fileName.split('.').pop().toLowerCase();
+        const fileUrl = `/data/${uid}/${encodeURIComponent(fileName)}`;
+        const fileSize = 'N/A'; // We don't have size info in the current API response
+        
+        const listItem = document.createElement('li');
+        listItem.className = 'file-item';
+        
+        // Create file icon based on file extension
+        let fileIcon = '📄'; // Default icon
+        if (['mp3', 'wav', 'ogg', 'm4a', 'opus'].includes(fileExt)) {
+          fileIcon = '🎵';
+        } else if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(fileExt)) {
+          fileIcon = '🖼️';
+        } else if (['pdf', 'doc', 'docx', 'txt'].includes(fileExt)) {
+          fileIcon = '📄';
+        }
+        
+        listItem.innerHTML = `
+          <div class="file-info">
+            <span class="file-icon">${fileIcon}</span>
+            <a href="${fileUrl}" class="file-name" target="_blank" rel="noopener noreferrer">
+              ${fileName}
+            </a>
+            <span class="file-size">${fileSize}</span>
+          </div>
+          <div class="file-actions">
+            <a href="${fileUrl}" class="download-button" download>
+              <span class="button-icon">⬇️</span>
+              <span class="button-text">Download</span>
+            </a>
+            <button class="delete-button" data-filename="${fileName}">
+              <span class="button-icon">🗑️</span>
+              <span class="button-text">Delete</span>
+            </button>
+          </div>
+        `;
+        
+        // Add delete button handler
+        const deleteButton = listItem.querySelector('.delete-button');
+        if (deleteButton) {
+          deleteButton.addEventListener('click', () => deleteFile(uid, fileName, listItem));
+        }
+        
+        fileList.appendChild(listItem);
+      });
+    } else {
+      // Handle non-OK responses
+      if (response.status === 401) {
+        // Parent component will handle authentication state
+        fileList.innerHTML = `
+          <li class="error-message">
+            Please <a href="/#login" class="login-link">log in</a> to view your files.
+          </li>`;
+      } else {
+        fileList.innerHTML = `
+          <li class="error-message">
+            Error loading files (${response.status}). Please try again later.
+          </li>`;
+      }
+      console.error('[FILES] Server error:', response.status, response.statusText);
+    }
+  } catch (error) {
+    console.error('[FILES] Error fetching files:', error);
+    const fileList = document.getElementById('file-list');
+    if (fileList) {
+      fileList.innerHTML = `
+        <li class="error-message">
+          Error loading files: ${error.message || 'Unknown error'}
+        </li>`;
+    }
+  }
+}
+
+// Function to handle file deletion
+async function deleteFile(fileId, uid) {
+  if (!confirm('Are you sure you want to delete this file?')) {
+    return;
+  }
+  
+  try {
+    const response = await fetch(`/api/files/${fileId}`, {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      credentials: 'same-origin'
+    });
+    
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    
+    // Refresh the file list
+    fetchAndDisplayFiles(uid);
+    showToast('File deleted successfully');
+    
+  } catch (error) {
+    console.error('[FILES] Error deleting file:', error);
+    showToast('Error deleting file', 'error');
+  }
+}
+
+// Initialize file upload functionality
+function initFileUpload() {
+  const uploadArea = document.getElementById('user-upload-area');
+  const fileInput = document.getElementById('fileInputUser');
+  
+  if (!uploadArea || !fileInput) {
+    console.warn('[UPLOAD] Required elements not found for file upload');
+    return;
+  }
+  
+  // Handle click on upload area
+  uploadArea.addEventListener('click', () => {
+    fileInput.click();
+  });
+  
+  // Handle file selection
+  fileInput.addEventListener('change', async (e) => {
+    const file = e.target.files[0];
+    if (!file) return;
+    
+    // Check file size (100MB limit)
+    if (file.size > 100 * 1024 * 1024) {
+      showToast('File is too large. Maximum size is 100MB.', 'error');
+      return;
+    }
+    
+    // Show loading state
+    const originalText = uploadArea.innerHTML;
+    uploadArea.innerHTML = 'Uploading...';
+    
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+      
+      // Get UID from localStorage (parent UI ensures we're authenticated)
+      const uid = localStorage.getItem('uid');
+      formData.append('uid', uid);
+      
+      // Proceed with the upload
+      const response = await fetch('/upload', {
+        method: 'POST',
+        body: formData,
+        credentials: 'include',  // Include cookies for authentication
+        headers: {
+          'Accept': 'application/json'  // Explicitly accept JSON response
+        }
+      });
+      
+      if (!response.ok) {
+        const error = await response.text();
+        throw new Error(error || 'Upload failed');
+      }
+      
+      const result = await response.json();
+      showToast('File uploaded successfully!');
+      
+      // Refresh file list
+      if (window.fetchAndDisplayFiles) {
+        window.fetchAndDisplayFiles(uid);
+      }
+      
+    } catch (error) {
+      console.error('[UPLOAD] Error uploading file:', error);
+      showToast(`Upload failed: ${error.message}`, 'error');
+    } finally {
+      // Reset file input and restore upload area text
+      fileInput.value = '';
+      uploadArea.innerHTML = originalText;
+    }
+  });
+  
+  // Handle drag and drop
+  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+    uploadArea.addEventListener(eventName, preventDefaults, false);
+  });
+  
+  function preventDefaults(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  
+  ['dragenter', 'dragover'].forEach(eventName => {
+    uploadArea.addEventListener(eventName, highlight, false);
+  });
+  
+  ['dragleave', 'drop'].forEach(eventName => {
+    uploadArea.addEventListener(eventName, unhighlight, false);
+  });
+  
+  function highlight() {
+    uploadArea.classList.add('highlight');
+  }
+  
+  function unhighlight() {
+    uploadArea.classList.remove('highlight');
+  }
+  
+  // Handle dropped files
+  uploadArea.addEventListener('drop', (e) => {
+    const dt = e.dataTransfer;
+    const files = dt.files;
+    
+    if (files.length) {
+      fileInput.files = files;
+      const event = new Event('change');
+      fileInput.dispatchEvent(event);
+    }
+  });
+}
+
+// Main initialization when the DOM is fully loaded
 document.addEventListener('DOMContentLoaded', () => {
+  // Initialize dashboard components
+  initDashboard();
+  initFileUpload();
+  
+  // Make fetchAndDisplayFiles available globally
+  window.fetchAndDisplayFiles = fetchAndDisplayFiles;
+  
+  // Login/Register (guest)
   const regForm = document.getElementById('register-form');
   if (regForm) {
     regForm.addEventListener('submit', async (e) => {
       e.preventDefault();
       const formData = new FormData(regForm);
+      const submitButton = regForm.querySelector('button[type="submit"]');
+      const originalButtonText = submitButton.textContent;
+      
       try {
+        // Disable button during submission
+        submitButton.disabled = true;
+        submitButton.textContent = 'Sending...';
+        
         const res = await fetch('/register', {
           method: 'POST',
-          body: formData
+          body: formData,
+          headers: {
+            'Accept': 'application/json'
+          }
         });
+
         let data;
         const contentType = res.headers.get('content-type');
-        if (contentType && contentType.includes('application/json')) {
-          data = await res.json();
-        } else {
-          data = { detail: await res.text() };
-        }
-        if (res.ok) {
-          showToast('Confirmation sent! Check your email.');
-        } else {
-          showToast('Registration failed: ' + (data.detail || res.status));
+
+        try {
+          if (contentType && contentType.includes('application/json')) {
+            data = await res.json();
+          } else {
+            const text = await res.text();
+            data = { detail: text };
+          }
+
+          if (res.ok) {
+            showToast('', 'success');
+            // Clear the form on success
+            regForm.reset();
+          } else {
+            showToast(`Error: ${data.detail || 'Unknown error occurred'}`, 'error');
+            console.error('Registration failed:', data);
+          }
+        } catch (parseError) {
+          console.error('Error parsing response:', parseError);
+          showToast('Error processing the response. Please try again.', 'error');
         }
       } catch (err) {
-        showToast('Network error: ' + err);
+        console.error('Network error:', err);
+        showToast('Network error. Please check your connection and try again.', 'error');
+      } finally {
+        // Re-enable button
+        submitButton.disabled = false;
+        submitButton.textContent = originalButtonText;
       }
     });
   }
-});
-
-
-// Connect Login or Register link to register form
-
-document.addEventListener('DOMContentLoaded', () => {
+  // Connect Login or Register link to register form
   // Login/Register (guest)
   const loginLink = document.getElementById('guest-login');
   if (loginLink) {
@@ -417,4 +965,154 @@ document.addEventListener('DOMContentLoaded', () => {
       });
     }
   });
-});
+
+  // Back to top button functionality
+  const backToTop = document.getElementById('back-to-top');
+  if (backToTop) {
+    backToTop.addEventListener('click', (e) => {
+      e.preventDefault();
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    });
+  }
+
+  // Mobile menu functionality
+  const menuToggle = document.getElementById('mobile-menu-toggle');
+  const mainNav = document.getElementById('main-navigation');
+  
+  if (menuToggle && mainNav) {
+    // Toggle mobile menu
+    menuToggle.addEventListener('click', () => {
+      const isExpanded = menuToggle.getAttribute('aria-expanded') === 'true' || false;
+      menuToggle.setAttribute('aria-expanded', !isExpanded);
+      mainNav.setAttribute('aria-hidden', isExpanded);
+      
+      // Toggle mobile menu visibility
+      if (isExpanded) {
+        mainNav.classList.remove('mobile-visible');
+        document.body.style.overflow = '';
+      } else {
+        mainNav.classList.add('mobile-visible');
+        document.body.style.overflow = 'hidden';
+      }
+    });
+
+    // Close mobile menu when clicking outside
+    document.addEventListener('click', (e) => {
+      const isClickInsideNav = mainNav.contains(e.target);
+      const isClickOnToggle = menuToggle === e.target || menuToggle.contains(e.target);
+      
+      if (mainNav.classList.contains('mobile-visible') && !isClickInsideNav && !isClickOnToggle) {
+        mainNav.classList.remove('mobile-visible');
+        menuToggle.setAttribute('aria-expanded', 'false');
+        document.body.style.overflow = '';
+      }
+    });
+  }
+
+  // Handle navigation link clicks
+  const navLinks = document.querySelectorAll('nav a[href^="#"]');
+  navLinks.forEach(link => {
+    link.addEventListener('click', (e) => {
+      const targetId = link.getAttribute('href');
+      if (targetId === '#') return;
+      
+      const targetElement = document.querySelector(targetId);
+      if (targetElement) {
+        e.preventDefault();
+        
+        // Close mobile menu if open
+        if (mainNav && mainNav.classList.contains('mobile-visible')) {
+          mainNav.classList.remove('mobile-visible');
+          if (menuToggle) {
+            menuToggle.setAttribute('aria-expanded', 'false');
+          }
+          document.body.style.overflow = '';
+        }
+        
+        // Smooth scroll to target
+        targetElement.scrollIntoView({ behavior: 'smooth' });
+        
+        // Update URL without page reload
+        if (history.pushState) {
+          history.pushState(null, '', targetId);
+        } else {
+          location.hash = targetId;
+        }
+      }
+    });
+  });
+
+  // Helper function to handle page section navigation
+  const setupPageNavigation = (linkIds, pageId) => {
+    const links = linkIds
+      .map(id => document.getElementById(id))
+      .filter(Boolean);
+    
+    links.forEach(link => {
+      link.addEventListener('click', (e) => {
+        e.preventDefault();
+        document.querySelectorAll('main > section').forEach(sec => {
+          sec.hidden = sec.id !== pageId;
+        });
+        const targetPage = document.getElementById(pageId);
+        if (targetPage) {
+          targetPage.hidden = false;
+          targetPage.scrollIntoView({ behavior: 'smooth' });
+        }
+      });
+    });
+  };
+
+  // Setup navigation for different sections
+  setupPageNavigation(['guest-terms', 'user-terms'], 'terms-page');
+  setupPageNavigation(['guest-imprint', 'user-imprint'], 'imprint-page');
+  setupPageNavigation(['guest-privacy', 'user-privacy'], 'privacy-page');
+
+  // Registration form handler for guests - removed duplicate declaration
+  // The form submission is already handled earlier in the file
+
+  // Login link handler - removed duplicate declaration
+  // The login link is already handled by the setupPageNavigation function
+
+  // Handle drag and drop
+  const uploadArea = document.getElementById('upload-area');
+  if (uploadArea) {
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+      uploadArea.addEventListener(eventName, preventDefaults, false);
+    });
+    
+    ['dragenter', 'dragover'].forEach(eventName => {
+      uploadArea.addEventListener(eventName, highlight, false);
+    });
+    
+    ['dragleave', 'drop'].forEach(eventName => {
+      uploadArea.addEventListener(eventName, unhighlight, false);
+    });
+    
+    function preventDefaults(e) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+    
+    function highlight() {
+      uploadArea.classList.add('highlight');
+    }
+    
+    function unhighlight() {
+      uploadArea.classList.remove('highlight');
+    }
+    
+    // Handle dropped files
+    uploadArea.addEventListener('drop', (e) => {
+      const dt = e.dataTransfer;
+      const files = dt.files;
+      
+      if (files.length) {
+        const fileInput = document.getElementById('file-input');
+        fileInput.files = files;
+        const event = new Event('change');
+        fileInput.dispatchEvent(event);
+      }
+    });
+  }
+}); // End of DOMContentLoaded
diff --git a/static/desktop.css b/static/desktop.css
index 8e6d414..6c85ecc 100644
--- a/static/desktop.css
+++ b/static/desktop.css
@@ -1,18 +1,24 @@
 /* Desktop-specific styles for screens 960px and wider */
 @media (min-width: 960px) {
+  :root {
+    --content-max-width: 800px;
+    --content-padding: 1.25rem;
+    --section-spacing: 1.5rem;
+  }
+
   html {
     background-color: #111 !important;
     background-image:
       repeating-linear-gradient(
         45deg,
-        rgba(188, 183, 107, 0.1) 0,  /* Olive color */
+        rgba(188, 183, 107, 0.1) 0,
         rgba(188, 183, 107, 0.1) 1px,
         transparent 1px,
         transparent 20px
       ),
       repeating-linear-gradient(
         -45deg,
-        rgba(188, 183, 107, 0.1) 0,  /* Olive color */
+        rgba(188, 183, 107, 0.1) 0,
         rgba(188, 183, 107, 0.1) 1px,
         transparent 1px,
         transparent 20px
@@ -26,72 +32,200 @@
   body {
     background: transparent !important;
     min-height: 100vh !important;
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Main content container */
+  main {
+    flex: 1;
+    width: 100%;
+    max-width: var(--content-max-width);
+    margin: 0 auto;
+    padding: 0 var(--content-padding);
+    box-sizing: border-box;
+  }
+
+  /* Ensure h2 in legal pages matches other pages */
+  #privacy-page > article > h2:first-child,
+  #imprint-page > article > h2:first-child {
+    margin-top: 0;
+    padding-top: 0;
+  }
+
+  /* Streams Page Specific Styles */
+  #streams-page section {
+    width: 100%;
+    max-width: var(--content-max-width);
+    margin: 0 auto;
+    padding: 2rem;
+    box-sizing: border-box;
+  }
+
+  .stream-card {
+    margin-bottom: 1rem;
+    background: var(--surface);
+    border-radius: 8px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+  }
+
+  .stream-card:last-child {
+    margin-bottom: 0;
+  }
+
+  .stream-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+
+  .stream-card .card-content {
+    padding: 1.25rem 1.5rem;
+  }
+
+  /* Section styles */
+  section {
+    width: 100%;
+    max-width: var(--content-max-width);
+    margin: 0 auto var(--section-spacing);
+    background: rgba(26, 26, 26, 0.9);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 10px;
+    padding: 2rem;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    box-sizing: border-box;
+  }
+
+  section:hover {
+    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
+  }
+
+  /* Navigation */
+  nav.dashboard-nav {
+    padding: 1rem 0;
+    margin-bottom: 2rem;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(5px);
+    display: block;
+  }
+
+  /* Desktop navigation visibility */
+  nav.dashboard-nav {
+    display: block;
   }
-  /* Section styles are now handled in style.css */
   
+  /* Show desktop navigation */
+  section#links { 
+    display: block; 
+  }
+  
+  /* Hide mobile navigation elements */
+  #burger-label,
+  #burger-toggle {
+    display: none !important;
+  }
+
+  /* Dashboard navigation */
+  #guest-dashboard,
+  #user-dashboard {
+    display: flex;
+    gap: 1rem;
+  }
+
+
   nav.dashboard-nav a {
-    padding: 5px;
+    padding: 0.5rem 1rem;
     margin: 0 0.5em;
-    border-radius: 3px;
+    border-radius: 4px;
+    transition: background-color 0.2s ease;
   }
-  
-  /* Reset mobile-specific styles for desktop */
-  .dashboard-nav {
-    padding: 0.5em;
-    max-width: none;
-    justify-content: center;
+
+  nav.dashboard-nav a:hover {
+    background-color: rgba(255, 255, 255, 0.1);
   }
-  
-  .dashboard-nav a {
-    min-width: auto;
-    font-size: 1rem;
+
+  /* Form elements */
+  input[type="email"],
+  input[type="text"],
+  input[type="password"] {
+    width: 100%;
+    max-width: 400px;
+    padding: 0.75rem;
+    margin: 0.5rem 0;
+    border: 1px solid #444;
+    border-radius: 4px;
+    background: #2a2a2a;
+    color: #f0f0f0;
+  }
+
+  /* Buttons */
+  button,
+  .button {
+    padding: 0.75rem 1.5rem;
+    border: none;
+    border-radius: 4px;
+    background: #4a6fa5;
+    color: white;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+  }
+
+  button:hover,
+  .button:hover {
+    background: #5a8ad4;
   }
 
   /* Global article styles */
   main > section > article,
-  #stream-page > article {
+  #stream-page > article,
+  #stream-page #stream-list > li .stream-player {
     max-width: 600px;
-    margin: 0 auto 2em auto;
+    margin: 2em auto 2em auto;
     padding: 2em;
     background: #1e1e1e;
     border: 1px solid #333;
     border-radius: 8px;
     transition: all 0.2s ease;
+    box-sizing: border-box;
+  }
+  
+  /* Add top margin to all stream players except the first one */
+  #stream-page #stream-list > li:not(:first-child) .stream-player {
+    margin-top: 2px;
   }
   
   /* Stream player styles */
   #stream-page #stream-list > li {
     list-style: none;
-    margin-bottom: 1.5em;
-  }
-  
-  #stream-page #stream-list > li .stream-player {
-    padding: 1.5em;
-    background: #1e1e1e;
+    margin: 0;
+    padding: 0;
     border: none;
-    border-radius: 8px;
-    transition: all 0.2s ease;
+    background: transparent;
   }
   
-  /* Hover states - only apply to direct article children of sections */
-  main > section > article:hover {
-    transform: translateY(-2px);
-    background: linear-gradient(45deg, rgba(255, 102, 0, 0.05), rgba(255, 102, 0, 0.02));
-    border: 1px solid #ff6600;
+  #stream-page #stream-list {
+    padding: 0;
+    margin: 0 auto;
+    max-width: 600px;
+    width: 100%;
   }
   
+  /* Stream player specific overrides can be added here if needed in the future */
+  
+  /* Hover states moved to style.css for consistency */
+  
   /* Stream list desktop styles */
   #stream-list {
     max-width: 600px;
     margin: 0 auto;
-    padding: 0 1rem;
   }
   
-  /* User upload area desktop styles */
+  /* User upload area - matches article styling */
   #user-upload-area {
-    max-width: 600px !important;
-    width: 100% !important;
-    margin: 1.5rem auto !important;
-    box-sizing: border-box !important;
+    max-width: 600px;
+    width: 100%;
+    margin: 2rem auto;
+    box-sizing: border-box;
   }
 }
diff --git a/static/index.html b/static/index.html
index 4371ea4..3b4d872 100644
--- a/static/index.html
+++ b/static/index.html
@@ -10,19 +10,19 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="description" content="dicta2stream is a minimalist voice streaming platform for looping your spoken audio anonymously." />
   <title>dicta2stream</title>
-  <!-- Responsive burger menu display -->
+  <!-- Section visibility and navigation styles -->
+  <link rel="stylesheet" href="/static/css/section.css" media="all" />
+  
   <style>
-    #burger-label, #burger-toggle { display: none; }
-    @media (max-width: 959px) {
-      #burger-label { display: block; }
-      section#links { display: none; }
-      #burger-toggle:checked + #burger-label + section#links { display: block; }
-    }
+    /* Hide mobile menu by default on larger screens */
     @media (min-width: 960px) {
-      section#links { display: block; }
+      #mobile-menu { display: none !important; }
+      #burger-label { display: none !important; }
     }
   </style>
   <link rel="modulepreload" href="/static/sound.js" />
+  <script src="/static/streams-ui.js" type="module"></script>
+  <script src="/static/app.js" type="module"></script>
 </head>
 <body>
   <header>
@@ -33,50 +33,54 @@
   <main>
   
     <!-- Guest Dashboard -->
-    <nav id="guest-dashboard" class="dashboard-nav">
+    <nav id="guest-dashboard" class="dashboard-nav guest-only">
       <a href="#welcome-page" id="guest-welcome">Welcome</a>
       <a href="#stream-page" id="guest-streams">Streams</a>
-      <a href="#register-page" id="guest-login">Account</a>
+      <a href="#account" id="guest-login">Account</a>
     </nav>
 
     <!-- User Dashboard -->
-    <nav id="user-dashboard" class="dashboard-nav" style="display:none;">
+    <nav id="user-dashboard" class="dashboard-nav auth-only">
       <a href="#welcome-page" id="user-welcome">Welcome</a>
       <a href="#stream-page" id="user-streams">Streams</a>
       <a href="#me-page" id="show-me">Your Stream</a>
     </nav>
-    <section id="me-page">
-      <div style="position: relative; margin: 0 0 1.5rem 0; text-align: center;">
-        <h2 style="margin: 0; padding: 0; line-height: 1; display: inline-block; position: relative; text-align: center;">
-          Your Stream
-        </h2>
-        <div style="position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; gap: 0.5rem;">
-          <button id="delete-account-button" class="delete-account-btn" style="font-size: 1rem; padding: 0.4em 0.8em; white-space: nowrap; display: none; background-color: #ff4444; color: white; border: none; border-radius: 4px; cursor: pointer;">🗑️ Delete Account</button>
-          <button id="logout-button" class="logout-btn" style="font-size: 1rem; padding: 0.4em 0.8em; white-space: nowrap; display: none;">🚪 LogOut</button>
-        </div>
+    <section id="me-page" class="auth-only">
+      <div>
+        <h2>Your Stream</h2>
       </div>
       <article>
         <p>This is your personal stream. Only you can upload to it.</p>
         <audio id="me-audio"></audio>
         <div class="audio-controls">
-          <button class="play-pause-btn" type="button" aria-label="Play">▶️</button>
+          <button class="play-pause-btn" type="button" aria-label="Play" data-uid="">▶️</button>
         </div>
       </article>
-      <section id="user-upload-area" class="dropzone">
-        <p>🎙 Drag & drop your audio file here<br>or click to browse</p>
+      <section id="user-upload-area" class="auth-only">
+        <p>Drag & drop your audio file here<br>or click to browse</p>
         <input type="file" id="fileInputUser" accept="audio/*" hidden />
       </section>
+      
+      <article id="log-out" class="auth-only article--bordered logout-section">
+        <button id="logout-button" class="button">🚪 Log Out</button>
+      </article>
+      
+      <section id="quota-meter" class="auth-only">
+        <p class="quota-meter">Quota: <progress id="quota-bar" value="0" max="100"></progress> <span id="quota-text">0 MB</span></p>
+        <h4>Uploaded Files</h4>
+        <ul id="file-list" class="file-list">
+          <li>Loading files...</li>
+        </ul>
+      </section>
     </section>
 
     <div id="spinner" class="spinner"></div>
 
-
-
     <!-- Burger menu and legacy links section removed for clarity -->
 
-    <section id="terms-page" hidden>
+    <section id="terms-page" class="always-visible">
       <h2>Terms of Service</h2>
-      <article>
+      <article class="article--bordered">
         <p>By accessing or using dicta2stream.net (the "Service"), you agree to be bound by these Terms of Service ("Terms"). If you do not agree, do not use the Service.</p>
         <ul>
           <li>You must be at least 18 years old to register.</li>
@@ -90,31 +94,53 @@
       </article>
     </section>
 
-    <section id="privacy-page" hidden>
-      <h2>Privacy Policy</h2>
-      <article>
+    <section id="privacy-page" class="always-visible">
+      <div>
+        <h2>Privacy Policy</h2>
+      </div>
+      <article class="article--bordered">
         <ul>
           <li><strong>Users</strong>: Session uses both cookies and localStorage to store UID and authentication state.</li>
           <li><strong>Guests</strong>: No cookies are set. No persistent identifiers are stored.</li>
           <li>We log IP + UID only for abuse protection and quota enforcement.</li>
           <li>Uploads are scanned via Whisper+Ollama but not stored as transcripts.</li>
-          <li>Data is never sold. Contact us for account deletion.</li>
+          <li>Data is never sold.</li>
         </ul>
       </article>
+      
+      <!-- This section will be shown only to authenticated users -->
+      <div class="auth-only">
+        <section id="account-deletion" class="article--bordered">
+          <h3>Account Deletion</h3>
+          <p>You can delete your account and all associated data at any time. This action is irreversible and will permanently remove:</p>
+          <ul>
+            <li>Your account information</li>
+            <li>All uploaded audio files</li>
+          </ul>
+          
+          <div class="centered-container">
+            <button id="delete-account-from-privacy" class="button">
+              🗑️ Delete My Account
+            </button>
+          </div>
+        </section>
+      </div>
+      
+      <!-- Guest login message removed as per user request -->
     </section>
 
-    <section id="imprint-page" hidden>
+    <section id="imprint-page" class="always-visible">
       <h2>Imprint</h2>
-      <article>
+      <article class="article--bordered">
         <p><strong>Andreas Michael Fleckl</strong></p>
         <p>Johnstrassse 7/6<br>1140 Vienna<br>Austria / Europe</p>
       </article>
     </section>
 
-    <section id="welcome-page">
+    <section id="welcome-page" class="always-visible">
       <h2>Welcome</h2>
-      <article>
-        <p>dicta2stream is a minimalist voice streaming platform for your spoken audio anonymously under a nickname in a loop. <br><br>
+      <article class="article--bordered">
+        <p>dicta2stream is a minimalist voice streaming platform for your spoken audio anonymously under a nickname in a loop. <span class="text-muted">(Opus | Mono | 48 kHz | 60 kbps)</span><br><br>
         <strong>What you can do here:</strong></p>
         <ul>
           <li>🎧 Listen to public voice streams from others, instantly</li>
@@ -122,51 +148,41 @@
           <li>🕵️ No sign-up required for listening</li>
           <li>🔒 Optional registration for uploading and managing your own stream</li>
         </ul>
-
+        <div class="email-section">
+          <a href="mailto:Andreas.Fleckl@dicta2stream.net" class="button">
+            Andreas.Fleckl@dicta2stream.net
+          </a>
+        </div>
       </article>
     </section>
-    <section id="stream-page" hidden>
+    <section id="stream-page" class="always-visible">
       <h2>Public Streams</h2>
       <!-- The list below is dynamically populated by streams-ui.js; shows 'Loading...' while fetching -->
       <ul id="stream-list"><li>Loading...</li></ul>
     </section>
 
-    <section id="register-page" hidden>
+    <section id="register-page" class="guest-only">
       <h2>Account</h2>
-      <article>
+      <article class="article--wide">
         <form id="register-form">
           <p><label>Email<br><input type="email" name="email" required /></label></p>
           <p><label>Username<br><input type="text" name="user" required /></label></p>
-          <p style="display: none;">
+          <p class="bot-trap">
             <label>Leave this empty:<br>
               <input type="text" name="bot_trap" autocomplete="off" />
             </label>
           </p>
           <p><button type="submit">Login / Create Account</button></p>
         </form>
-        <p><small>You’ll receive a magic login link via email. No password required.</small></p>
-        <p style="font-size: 0.85em; opacity: 0.65; margin-top: 1em;">Your session expires after 1 hour. Shareable links redirect to homepage.</p>
+        <p class="form-note">You'll receive a magic login link via email. No password required.</p>
+        <p class="form-note session-note">Your session expires after 1 hour. Shareable links redirect to homepage.</p>
       </article>
     </section>
 
 
-    <section id="quota-meter" hidden>
-      <p class="quota-meter">Quota: <progress id="quota-bar" value="0" max="100"></progress> <span id="quota-text">0 MB used</span></p>
-      <div id="uploaded-files" style="margin-top: 10px; font-size: 0.9em;">
-        <div style="font-weight: bold; margin-bottom: 5px;">Uploaded Files:</div>
-        <div id="file-list" style="max-height: 200px; overflow-y: auto; border: 1px solid #333; padding: 5px; border-radius: 4px; background: #1a1a1a;">
-          <div style="padding: 5px 0; color: #888; font-style: italic;">Loading files...</div>
-        </div>
-      </div>
-    </section>
-
-
   </main>
 
   <footer>
-    <p>Built for public voice streaming • Opus | Mono | 48 kHz | 60 kbps</p>
-    <p class="footer-hint">Need more space? Contact<a href="mailto:Andreas.Fleckl@dicta2stream.net">Andreas.Fleckl@dicta2stream.net</a></p>
-
     <p class="footer-links">
       <a href="#" id="footer-terms" data-target="terms-page">Terms</a> |
       <a href="#" id="footer-privacy" data-target="privacy-page">Privacy</a> |
@@ -200,5 +216,6 @@
       }
     }
   </script>
+  <script type="module" src="/static/init-personal-stream.js"></script>
 </body>
 </html>
diff --git a/static/init-personal-stream.js b/static/init-personal-stream.js
new file mode 100644
index 0000000..1e2136d
--- /dev/null
+++ b/static/init-personal-stream.js
@@ -0,0 +1,35 @@
+// Initialize the personal stream play button with the user's UID
+document.addEventListener('DOMContentLoaded', () => {
+  // Function to update the play button with UID
+  function updatePersonalStreamPlayButton() {
+    const playButton = document.querySelector('#me-page .play-pause-btn');
+    if (!playButton) return;
+    
+    // Get UID from localStorage or cookie
+    const uid = localStorage.getItem('uid') || getCookie('uid');
+    
+    if (uid) {
+      // Set the data-uid attribute if not already set
+      if (!playButton.dataset.uid) {
+        playButton.dataset.uid = uid;
+        console.log('[personal-stream] Set UID for personal stream play button:', uid);
+      }
+    } else {
+      console.warn('[personal-stream] No UID found for personal stream play button');
+    }
+  }
+
+  // Helper function to get cookie value by name
+  function getCookie(name) {
+    const value = `; ${document.cookie}`;
+    const parts = value.split(`; ${name}=`);
+    if (parts.length === 2) return parts.pop().split(';').shift();
+    return null;
+  }
+
+  // Initial update
+  updatePersonalStreamPlayButton();
+  
+  // Also update when auth state changes (e.g., after login)
+  document.addEventListener('authStateChanged', updatePersonalStreamPlayButton);
+});
diff --git a/static/inject-nav.js b/static/inject-nav.js
index 67f141d..3f00e91 100644
--- a/static/inject-nav.js
+++ b/static/inject-nav.js
@@ -1,136 +1,55 @@
 // inject-nav.js - Handles dynamic injection and management of navigation elements
 import { showOnly } from './router.js';
 
-// Menu state
-let isMenuOpen = false;
-
-// Export the injectNavigation function
-export function injectNavigation(isAuthenticated = false) {
-  console.log('injectNavigation called with isAuthenticated:', isAuthenticated);
-  const navContainer = document.getElementById('main-navigation');
-  if (!navContainer) {
-    console.error('Navigation container not found. Looking for #main-navigation');
-    console.log('Available elements with id:', document.querySelectorAll('[id]'));
-    return;
-  }
-
-  // Clear existing content
-  navContainer.innerHTML = '';
+// Function to set up guest navigation links
+function setupGuestNav() {
+  const guestDashboard = document.getElementById('guest-dashboard');
+  if (!guestDashboard) return;
   
-  console.log('Creating navigation...');
-  try {
-    // Create the navigation wrapper
-    const navWrapper = document.createElement('nav');
-    navWrapper.className = 'nav-wrapper';
-    
-    // Create the navigation content
-    const nav = isAuthenticated ? createUserNav() : createGuestNav();
-    console.log('Navigation HTML created:', nav.outerHTML);
-    
-    // Append navigation to wrapper
-    navWrapper.appendChild(nav);
-    
-    // Append to container
-    navContainer.appendChild(navWrapper);
-    
-    console.log('Navigation appended to container');
-    
-    // Initialize menu toggle after navigation is injected
-    setupMenuToggle();
-    
-    // Set up menu links
-    setupMenuLinks();
-    
-    // Add click handler for the logo to navigate home
-    const logo = document.querySelector('.logo');
-    if (logo) {
-      logo.addEventListener('click', (e) => {
-        e.preventDefault();
-        showOnly('welcome');
-        closeMenu();
-      });
-    }
-  } catch (error) {
-    console.error('Error creating navigation:', error);
-    return;
-  }
-  
-    // Set up menu toggle for mobile
-  setupMenuToggle();
-  
-  // Set up menu links
-  setupMenuLinks();
-  
-  // Close menu when clicking on a nav link on mobile
-  const navLinks = navContainer.querySelectorAll('.nav-link');
-  navLinks.forEach(link => {
-    link.addEventListener('click', () => {
-      if (window.innerWidth < 768) { // Mobile breakpoint
-        closeMenu();
-      }
-    });
-  });
-  
-  // Add click handler for the logo to navigate home
-  const logo = document.querySelector('.logo');
-  if (logo) {
-    logo.addEventListener('click', (e) => {
+  const links = guestDashboard.querySelectorAll('a');
+  links.forEach(link => {
+    link.addEventListener('click', (e) => {
       e.preventDefault();
-      showOnly('welcome');
-    });
-  }
-}
-
-// Function to create the guest navigation
-function createGuestNav() {
-  const nav = document.createElement('div');
-  nav.className = 'dashboard-nav';
-  nav.setAttribute('role', 'navigation');
-  nav.setAttribute('aria-label', 'Main navigation');
-  
-  const navList = document.createElement('ul');
-  navList.className = 'nav-list';
-  
-  const links = [
-    { id: 'nav-login', target: 'login', text: 'Login / Register' },
-    { id: 'nav-streams', target: 'streams', text: 'Streams' },
-    { id: 'nav-welcome', target: 'welcome', text: 'Welcome' }
-  ];
-  
-  // Create and append links
-  links.forEach((link) => {
-    const li = document.createElement('li');
-    li.className = 'nav-item';
-    
-    const a = document.createElement('a');
-    a.id = link.id;
-    a.href = `#${link.target}`;
-    a.className = 'nav-link';
-    a.setAttribute('data-target', link.target);
-    a.textContent = link.text;
-    
-    // Add click handler for navigation
-    a.addEventListener('click', (e) => {
-      e.preventDefault();
-      const target = e.currentTarget.getAttribute('data-target');
+      const target = link.getAttribute('href')?.substring(1); // Remove '#'
       if (target) {
         window.location.hash = target;
         if (window.router && typeof window.router.showOnly === 'function') {
           window.router.showOnly(target);
         }
-        // Close menu on mobile after clicking a link
-        if (window.innerWidth < 768) {
-          closeMenu();
-        }
       }
     });
-    
-    li.appendChild(a);
-    navList.appendChild(li);
   });
+}
+
+// Function to set up user navigation links
+function setupUserNav() {
+  const userDashboard = document.getElementById('user-dashboard');
+  if (!userDashboard) return;
   
-  nav.appendChild(navList);
-  return nav;
+  const links = userDashboard.querySelectorAll('a');
+  links.forEach(link => {
+    // Handle logout specially
+    if (link.getAttribute('href') === '#logout') {
+      link.addEventListener('click', (e) => {
+        e.preventDefault();
+        if (window.handleLogout) {
+          window.handleLogout();
+        }
+      });
+    } else {
+      // Handle regular navigation
+      link.addEventListener('click', (e) => {
+        e.preventDefault();
+        const target = link.getAttribute('href')?.substring(1); // Remove '#'
+        if (target) {
+          window.location.hash = target;
+          if (window.router && typeof window.router.showOnly === 'function') {
+            window.router.showOnly(target);
+          }
+        }
+      });
+    }
+  });
 }
 
 function createUserNav() {
@@ -150,7 +69,7 @@ function createUserNav() {
   ];
   
   // Create and append links
-  links.forEach((link, index) => {
+  links.forEach((link) => {
     const li = document.createElement('li');
     li.className = 'nav-item';
     
@@ -158,35 +77,24 @@ function createUserNav() {
     a.id = link.id;
     a.href = '#';
     a.className = 'nav-link';
-    
-    // Special handling for logout
-    if (link.target === 'logout') {
-      a.href = '#';
-      a.addEventListener('click', async (e) => {
-        e.preventDefault();
-        closeMenu();
-        // Use the handleLogout function from dashboard.js if available
-        if (typeof handleLogout === 'function') {
-          await handleLogout();
-        } else {
-          // Fallback in case handleLogout is not available
-          localStorage.removeItem('user');
-          localStorage.removeItem('uid');
-          localStorage.removeItem('uid_time');
-          localStorage.removeItem('confirmed_uid');
-          document.cookie = 'uid=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
-          window.location.href = '/';
-        }
-        window.location.href = '#';
-        // Force reload to reset the app state
-        window.location.reload();
-      });
-    } else {
-      a.setAttribute('data-target', link.target);
-    }
-    
+    a.setAttribute('data-target', link.target);
     a.textContent = link.text;
     
+    a.addEventListener('click', (e) => {
+      e.preventDefault();
+      const target = e.currentTarget.getAttribute('data-target');
+      if (target === 'logout') {
+        if (window.handleLogout) {
+          window.handleLogout();
+        }
+      } else if (target) {
+        window.location.hash = target;
+        if (window.router && typeof window.router.showOnly === 'function') {
+          window.router.showOnly(target);
+        }
+      }
+    });
+    
     li.appendChild(a);
     navList.appendChild(li);
   });
@@ -195,243 +103,82 @@ function createUserNav() {
   return nav;
 }
 
-// Set up menu toggle functionality
-function setupMenuToggle() {
-  const menuToggle = document.querySelector('.menu-toggle');
-  const navWrapper = document.querySelector('.nav-wrapper');
-  
-  if (!menuToggle || !navWrapper) return;
-  
-  menuToggle.addEventListener('click', toggleMenu);
-  
-  // Close menu when clicking outside
-  document.addEventListener('click', (e) => {
-    if (isMenuOpen && !navWrapper.contains(e.target) && !menuToggle.contains(e.target)) {
-      closeMenu();
-    }
-  });
-  
-  // Close menu on escape key
-  document.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape' && isMenuOpen) {
-      closeMenu();
-    }
-  });
-  
-  // Close menu when resizing to desktop
-  let resizeTimer;
-  window.addEventListener('resize', () => {
-    if (window.innerWidth >= 768) {
-      closeMenu();
-    }
-  });
-}
-
-// Toggle mobile menu
-function toggleMenu(event) {
-  if (event) {
-    event.preventDefault();
-    event.stopPropagation();
-  }
-  
-  const navWrapper = document.querySelector('.nav-wrapper');
-  const menuToggle = document.querySelector('.menu-toggle');
-  
-  if (!navWrapper || !menuToggle) return;
-  
-  isMenuOpen = !isMenuOpen;
-  
-  if (isMenuOpen) {
-    // Open menu
-    navWrapper.classList.add('active');
-    menuToggle.setAttribute('aria-expanded', 'true');
-    menuToggle.innerHTML = '✕';
-    document.body.style.overflow = 'hidden';
-    
-    // Focus the first link in the menu for better keyboard navigation
-    const firstLink = navWrapper.querySelector('a');
-    if (firstLink) firstLink.focus();
-    
-    // Add click outside handler
-    document._handleClickOutside = (e) => {
-      if (!navWrapper.contains(e.target) && e.target !== menuToggle) {
-        closeMenu();
-      }
-    };
-    document.addEventListener('click', document._handleClickOutside);
-    
-    // Add escape key handler
-    document._handleEscape = (e) => {
-      if (e.key === 'Escape') {
-        closeMenu();
-      }
-    };
-    document.addEventListener('keydown', document._handleEscape);
-  } else {
-    closeMenu();
-  }
-}
-
-// Close menu function
-function closeMenu() {
-  const navWrapper = document.querySelector('.nav-wrapper');
-  const menuToggle = document.querySelector('.menu-toggle');
-  
-  if (!navWrapper || !menuToggle) return;
-  
-  isMenuOpen = false;
-  navWrapper.classList.remove('active');
-  menuToggle.setAttribute('aria-expanded', 'false');
-  menuToggle.innerHTML = '☰';
-  document.body.style.overflow = '';
-  
-  // Remove event listeners
-  if (document._handleClickOutside) {
-    document.removeEventListener('click', document._handleClickOutside);
-    delete document._handleClickOutside;
-  }
-  
-  if (document._handleEscape) {
-    document.removeEventListener('keydown', document._handleEscape);
-    delete document._handleEscape;
-  }
-}
-
-// Initialize menu toggle on page load
-function initializeMenuToggle() {
-  console.log('Initializing menu toggle...');
-  const menuToggle = document.getElementById('menu-toggle');
-  
-  if (!menuToggle) {
-    console.error('Main menu toggle button not found!');
-    return;
-  }
-  
-  console.log('Menu toggle button found:', menuToggle);
-  
-  // Remove any existing click listeners
-  const newToggle = menuToggle.cloneNode(true);
-  if (menuToggle.parentNode) {
-    menuToggle.parentNode.replaceChild(newToggle, menuToggle);
-    console.log('Replaced menu toggle button');
-  } else {
-    console.error('Menu toggle has no parent node!');
-    return;
-  }
-  
-  // Add click handler to the new toggle
-  newToggle.addEventListener('click', function(event) {
-    console.log('Menu toggle clicked!', event);
-    event.preventDefault();
-    event.stopPropagation();
-    toggleMenu(event);
-    return false;
-  });
-  
-  // Also handle the header menu toggle if it exists
-  const headerMenuToggle = document.getElementById('header-menu-toggle');
-  if (headerMenuToggle) {
-    console.log('Header menu toggle found, syncing with main menu');
-    headerMenuToggle.addEventListener('click', function(event) {
-      event.preventDefault();
-      event.stopPropagation();
-      newToggle.click(); // Trigger the main menu toggle
-      return false;
-    });
-  }
-}
-
-// Initialize when DOM is loaded
-document.addEventListener('DOMContentLoaded', () => {
-  console.log('DOM fully loaded and parsed');
-  
-  // Initialize navigation based on authentication state
-  // This will be set by the main app after checking auth status
-  if (window.initializeNavigation) {
-    window.initializeNavigation();
-  }
-  
-  // Initialize menu toggle
-  initializeMenuToggle();
-  
-  // Also try to initialize after a short delay in case the DOM changes
-  setTimeout(initializeMenuToggle, 500);
-});
-
 // Navigation injection function
 export function injectNavigation(isAuthenticated = false) {
-  console.log('Injecting navigation, isAuthenticated:', isAuthenticated);
-  const container = document.getElementById('main-navigation');
-  const navWrapper = document.querySelector('.nav-wrapper');
+  // Get the appropriate dashboard element based on auth state
+  const guestDashboard = document.getElementById('guest-dashboard');
+  const userDashboard = document.getElementById('user-dashboard');
   
-  if (!container || !navWrapper) {
-    console.error('Navigation elements not found. Looking for #main-navigation and .nav-wrapper');
-    return null;
+  if (isAuthenticated) {
+    // Show user dashboard, hide guest dashboard
+    if (guestDashboard) guestDashboard.style.display = 'none';
+    if (userDashboard) userDashboard.style.display = 'block';
+    document.body.classList.add('authenticated');
+    document.body.classList.remove('guest-mode');
+  } else {
+    // Show guest dashboard, hide user dashboard
+    if (guestDashboard) guestDashboard.style.display = 'block';
+    if (userDashboard) userDashboard.style.display = 'none';
+    document.body.classList.add('guest-mode');
+    document.body.classList.remove('authenticated');
   }
   
-  try {
-    // Store scroll position
-    const scrollPosition = window.scrollY;
-    
-    // Clear existing navigation
-    container.innerHTML = '';
-    
-    // Create the appropriate navigation based on authentication status
-    const nav = isAuthenticated ? createUserNav() : createGuestNav();
-    
-    // Append the navigation to the container
-    container.appendChild(nav);
-    
-    // Set up menu toggle functionality
-    setupMenuToggle();
-    
-    // Set up navigation links
-    setupMenuLinks();
-    
-    // Show the appropriate page based on URL
-    if (window.location.hash === '#streams' || window.location.pathname === '/streams') {
-      showOnly('stream-page');
-      if (typeof window.maybeLoadStreamsOnShow === 'function') {
-        window.maybeLoadStreamsOnShow();
-      }
-    } else if (!window.location.hash || window.location.hash === '#') {
-      // Show welcome page by default if no hash
-      showOnly('welcome-page');
-    }
-    
-    // Restore scroll position
-    window.scrollTo(0, scrollPosition);
-    
-    return nav;
-  } catch (error) {
-    console.error('Error injecting navigation:', error);
-    return null;
-  }
+  // Set up menu links and active state
+  setupMenuLinks();
+  updateActiveNav();
+  
+  return isAuthenticated ? userDashboard : guestDashboard;
 }
 
 // Set up menu links with click handlers
 function setupMenuLinks() {
-  // Handle navigation link clicks
-  document.addEventListener('click', function(e) {
-    // Check if click is on a nav link or its children
-    let link = e.target.closest('.nav-link');
-    if (!link) return;
-    
-    const target = link.getAttribute('data-target');
-    if (target) {
-      e.preventDefault();
-      console.log('Navigation link clicked:', target);
-      showOnly(target);
-      closeMenu();
-      
-      // Update active state
-      document.querySelectorAll('.nav-link').forEach(l => {
-        l.classList.remove('active');
-      });
+  // Set up guest and user navigation links
+  setupGuestNav();
+  setupUserNav();
+  
+  // Handle hash changes for SPA navigation
+  window.addEventListener('hashchange', updateActiveNav);
+}
+
+// Update active navigation link
+function updateActiveNav() {
+  const currentHash = window.location.hash.substring(1) || 'welcome';
+  
+  // Remove active class from all links in both dashboards
+  document.querySelectorAll('#guest-dashboard a, #user-dashboard a').forEach(link => {
+    link.classList.remove('active');
+    // Check if this link's href matches the current hash
+    const linkTarget = link.getAttribute('href')?.substring(1); // Remove '#'
+    if (linkTarget === currentHash) {
       link.classList.add('active');
     }
   });
 }
 
+// Initialize when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+  // Check authentication state and initialize navigation
+  const isAuthenticated = document.cookie.includes('sessionid=') || 
+                         localStorage.getItem('isAuthenticated') === 'true';
+  
+  // Initialize navigation based on authentication state
+  injectNavigation(isAuthenticated);
+  
+  // Set up menu links and active navigation
+  setupMenuLinks();
+  updateActiveNav();
+  
+  // Update body classes based on authentication state
+  if (isAuthenticated) {
+    document.body.classList.add('authenticated');
+    document.body.classList.remove('guest-mode');
+  } else {
+    document.body.classList.add('guest-mode');
+    document.body.classList.remove('authenticated');
+  }
+  
+  console.log('[NAV] Navigation initialized', { isAuthenticated });
+});
+
 // Make the function available globally for debugging
 window.injectNavigation = injectNavigation;
diff --git a/static/magic-login.js b/static/magic-login.js
index b374269..705c3f0 100644
--- a/static/magic-login.js
+++ b/static/magic-login.js
@@ -27,10 +27,17 @@ export async function initMagicLogin() {
       const url = new URL(res.url);
       const confirmedUid = url.searchParams.get('confirmed_uid');
       if (confirmedUid) {
-        document.cookie = "uid=" + encodeURIComponent(confirmedUid) + "; path=/";
-        // Set localStorage for SPA session logic instantly
+        // Generate a simple auth token (in a real app, this would come from the server)
+        const authToken = 'token-' + Math.random().toString(36).substring(2, 15);
+        
+        // Set cookies and localStorage for SPA session logic
+        document.cookie = `uid=${encodeURIComponent(confirmedUid)}; path=/`;
+        document.cookie = `authToken=${authToken}; path=/`;
+        
+        // Store in localStorage for client-side access
         localStorage.setItem('uid', confirmedUid);
         localStorage.setItem('confirmed_uid', confirmedUid);
+        localStorage.setItem('authToken', authToken);
         localStorage.setItem('uid_time', Date.now().toString());
       }
       window.location.href = res.url;
@@ -42,10 +49,17 @@ export async function initMagicLogin() {
     if (contentType && contentType.includes('application/json')) {
       data = await res.json();
       if (data && data.confirmed_uid) {
-        document.cookie = "uid=" + encodeURIComponent(data.confirmed_uid) + "; path=/";
-        // Set localStorage for SPA session logic
+        // Generate a simple auth token (in a real app, this would come from the server)
+        const authToken = 'token-' + Math.random().toString(36).substring(2, 15);
+        
+        // Set cookies and localStorage for SPA session logic
+        document.cookie = `uid=${encodeURIComponent(data.confirmed_uid)}; path=/`;
+        document.cookie = `authToken=${authToken}; path=/`;
+        
+        // Store in localStorage for client-side access
         localStorage.setItem('uid', data.confirmed_uid);
         localStorage.setItem('confirmed_uid', data.confirmed_uid);
+        localStorage.setItem('authToken', authToken);
         localStorage.setItem('uid_time', Date.now().toString());
         import('./toast.js').then(({ showToast }) => {
           showToast('✅ Login successful!');
diff --git a/static/mobile.css b/static/mobile.css
index e98d06f..819bf80 100644
--- a/static/mobile.css
+++ b/static/mobile.css
@@ -36,6 +36,145 @@
     box-sizing: border-box;
   }
 
+  /* Mobile navigation */
+  #user-dashboard.dashboard-nav {
+    display: flex !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+  }
+  
+  .dashboard-nav {
+    display: flex;
+    justify-content: space-around;
+    padding: 0.5rem 0;
+    background: var(--surface);
+    border-bottom: 1px solid var(--border);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    margin-bottom: 1rem;
+  }
+  
+  .dashboard-nav a {
+    padding: 0.5rem 0.25rem;
+    text-align: center;
+    font-size: 0.9rem;
+    color: var(--text-color);
+    text-decoration: none;
+    flex: 1;
+    border-radius: 4px;
+    transition: background-color 0.2s ease;
+  }
+  
+  .dashboard-nav a:hover,
+  .dashboard-nav a:focus {
+    background-color: var(--hover-bg);
+    outline: none;
+  }
+  
+
+  
+  /* Account Deletion Section */
+  #privacy-page.active #account-deletion,
+  #privacy-page:not(.active) #account-deletion {
+    display: block !important;
+    opacity: 1 !important;
+    position: relative !important;
+    clip: auto !important;
+    width: auto !important;
+    height: auto !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    overflow: visible !important;
+  }
+  
+  .account-deletion-section {
+    margin: 2rem 0;
+    padding: 1.75rem;
+    background: rgba(26, 26, 26, 0.8);
+    border-radius: 16px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+    backdrop-filter: blur(10px);
+  }
+  
+  .account-deletion-section h3 {
+    color: #fff;
+    font-size: 1.5rem;
+    margin-bottom: 1.25rem;
+    padding-bottom: 0.75rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+  
+  .account-deletion-section h3 {
+    color: #fff;
+    margin-bottom: 1rem;
+    font-size: 1.4rem;
+  }
+  
+  .account-deletion-section ul {
+    margin: 1.5rem 0 2rem 1.5rem;
+    padding-left: 0.5rem;
+  }
+  
+  .account-deletion-section li {
+    margin-bottom: 0.75rem;
+    color: #f0f0f0;
+    line-height: 1.5;
+    position: relative;
+    padding-left: 1.5rem;
+  }
+  
+  .account-deletion-section li:before {
+    content: '•';
+    color: #ff5e57;
+    font-weight: bold;
+    font-size: 1.5rem;
+    position: absolute;
+    left: 0;
+    top: -0.25rem;
+  }
+  
+  .danger-button {
+    background: linear-gradient(135deg, #ff3b30, #ff5e57);
+    color: white;
+    border: none;
+    padding: 1rem 1.5rem;
+    border-radius: 8px;
+    font-weight: 600;
+    cursor: pointer;
+    width: 100%;
+    max-width: 300px;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3);
+    text-align: center;
+  }
+  
+  .danger-button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.4);
+  }
+  
+  .danger-button:active {
+    transform: translateY(0);
+  }
+  
+  .text-link {
+    color: #4dabf7;
+    text-decoration: none;
+    transition: color 0.2s ease;
+  }
+  
+  .text-link:hover {
+    color: #74c0fc;
+    text-decoration: underline;
+  }
+
+  /* Hide desktop navigation in mobile */
+  nav.dashboard-nav {
+    display: none;
+  }
+
   header {
     padding: 0.5rem 1rem;
   }
@@ -98,15 +237,22 @@
   }
 
   #quota-meter {
-    margin: 1rem 0;
+    max-width: 600px;
+    width: 100%;
+    margin: 1rem auto;
+    padding: 0 1rem;
+    box-sizing: border-box;
   }
 
   .quota-meter {
     height: 20px;
   }
 
+  /* Stream item styles moved to .stream-player */
   .stream-item {
-    padding: 0.75rem;
+    padding: 0;
+    margin: 0;
+    border: none;
   }
 
   .modal-content {
@@ -183,8 +329,8 @@
   nav.dashboard-nav a {
     all: unset;
     display: inline-block;
-    background-color: #1e1e1e;
-    color: #fff;
+    background-color: var(--surface);
+    color: var(--text-color);
     padding: 0.5rem 1rem;
     margin: 0 0.25rem;
     border-radius: 4px;
@@ -197,7 +343,7 @@
   }
 
   .dashboard-nav a:active {
-    background-color: #333;
+    background-color: var(--border);
   }
 
   /* Stream page specific styles */
@@ -215,11 +361,19 @@
   }
 
   #stream-list {
-    padding: 0.5rem;
+    padding: 0 1rem;
+    margin: 0 auto;
+    max-width: 600px;
+    width: 100%;
+    box-sizing: border-box;
   }
 
   #stream-list li {
-    margin-bottom: 1rem;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    list-style: none;
   }
 
   .stream-player {
@@ -234,18 +388,22 @@
     font-size: 0.9rem;
   }
 
-  #stream-list > li {
-    margin-bottom: 1.5rem;
-  }
+  /* Stream list items are now handled by the rules above */
 
-  /* User upload area */
+  /* User upload area - matches article styling */
   #user-upload-area {
-    margin: 1rem 0;
-    padding: 1.5rem;
+    margin: 2rem auto;
+    padding: 1.6875rem;
+    background: var(--surface);
+    border: 1px solid var(--border-color, #2a2a2a);
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     text-align: center;
     cursor: pointer;
-    border: 2px dashed #666;
-    border-radius: 8px;
+    max-width: 600px;
+    width: 100%;
+    box-sizing: border-box;
+    color: var(--text-color);
   }
 
   #user-upload-area p {
@@ -268,7 +426,7 @@
 
   .stream-info {
     font-size: 0.9rem;
-    color: #aaa;
+    color: var(--text-muted);
     margin-bottom: 0.5rem;
   }
 
@@ -277,14 +435,31 @@
   }
 
   /* Form elements */
+
   input[type="text"],
   input[type="email"],
   input[type="password"],
   textarea {
     width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
     padding: 0.75rem;
     margin: 0.5rem 0;
     font-size: 1rem;
+    border-radius: 4px;
+    border: 1px solid #444;
+    background-color: #2a2a2a;
+    color: #f0f0f0;
+  }
+  
+  /* Firefox mobile specific fixes */
+  @-moz-document url-prefix() {
+    input[type="email"] {
+      min-height: 2.5rem;
+      appearance: none;
+    }
   }
 
   /* Adjust audio element for mobile */
diff --git a/static/nav.js b/static/nav.js
index 11b8bc9..61d2684 100644
--- a/static/nav.js
+++ b/static/nav.js
@@ -8,62 +8,267 @@ function getCookie(name) {
 }
 
 document.addEventListener("DOMContentLoaded", () => {
+  // Check authentication status
+  const isLoggedIn = !!getCookie('uid');
+  
+  // Update body class for CSS-based visibility
+  document.body.classList.toggle('logged-in', isLoggedIn);
+  
+  // Get all main content sections
+  const mainSections = Array.from(document.querySelectorAll('main > section'));
+  
+  // Show/hide sections with smooth transitions
+  const showSection = (sectionId) => {
+    // Update body class to indicate current page
+    document.body.className = '';
+    if (sectionId) {
+      document.body.classList.add(`page-${sectionId}`);
+    } else {
+      document.body.classList.add('page-welcome');
+    }
+    
+    // Update active state of navigation links
+    document.querySelectorAll('.dashboard-nav a').forEach(link => {
+      link.classList.remove('active');
+      if ((!sectionId && link.getAttribute('href') === '#welcome-page') || 
+          (sectionId && link.getAttribute('href') === `#${sectionId}`)) {
+        link.classList.add('active');
+      }
+    });
+    
+    mainSections.forEach(section => {
+      // Skip navigation sections
+      if (section.id === 'guest-dashboard' || section.id === 'user-dashboard') {
+        return;
+      }
+      
+      const isTarget = section.id === sectionId;
+      const isLegalPage = ['terms-page', 'privacy-page', 'imprint-page'].includes(sectionId);
+      const isWelcomePage = !sectionId || sectionId === 'welcome-page';
+      
+      if (isTarget || (isLegalPage && section.id === sectionId)) {
+        // Show the target section or legal page
+        section.classList.add('active');
+        section.hidden = false;
+        
+        // Focus the section for accessibility with a small delay
+        // Only focus if the section is focusable and in the viewport
+        const focusSection = () => {
+          try {
+            if (section && typeof section.focus === 'function' && 
+                section.offsetParent !== null && // Check if element is visible
+                section.getBoundingClientRect().top < window.innerHeight &&
+                section.getBoundingClientRect().bottom > 0) {
+              section.focus({ preventScroll: true });
+            }
+          } catch (e) {
+            // Silently fail if focusing isn't possible
+            if (window.DEBUG_NAV || (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1')) {
+              console.debug('Could not focus section:', e);
+            }
+          }
+        };
+        
+        // Use requestAnimationFrame for better performance
+        requestAnimationFrame(() => {
+          // Only set the timeout in debug mode or local development
+          if (window.DEBUG_NAV || (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1')) {
+            setTimeout(focusSection, 50);
+          } else {
+            focusSection();
+          }
+        });
+      } else if (isWelcomePage && section.id === 'welcome-page') {
+        // Special handling for welcome page
+        section.classList.add('active');
+        section.hidden = false;
+      } else {
+        // Hide other sections
+        section.classList.remove('active');
+        section.hidden = true;
+      }
+    });
+    
+    // Update URL hash without page scroll
+    if (sectionId && !['terms-page', 'privacy-page', 'imprint-page'].includes(sectionId)) {
+      if (sectionId === 'welcome-page') {
+        history.replaceState(null, '', window.location.pathname);
+      } else {
+        history.replaceState(null, '', `#${sectionId}`);
+      }
+    }
+  };
+  
+  // Handle initial page load
+  const getValidSection = (sectionId) => {
+    const protectedSections = ['me-page', 'register-page'];
+    
+    // If not logged in and trying to access protected section
+    if (!isLoggedIn && protectedSections.includes(sectionId)) {
+      return 'welcome-page';
+    }
+    
+    // If section doesn't exist, default to welcome page
+    if (!document.getElementById(sectionId)) {
+      return 'welcome-page';
+    }
+    
+    return sectionId;
+  };
+  
+  // Process initial page load
+  const initialPage = window.location.hash.substring(1) || 'welcome-page';
+  const validSection = getValidSection(initialPage);
+  
+  // Update URL if needed
+  if (validSection !== initialPage) {
+    window.location.hash = validSection;
+  }
+  
+  // Show the appropriate section
+  showSection(validSection);
+
   const Router = {
     sections: Array.from(document.querySelectorAll("main > section")),
+    
     showOnly(id) {
-      // Define which sections are part of the 'Your Stream' section
-      const yourStreamSections = ['me-page', 'register-page', 'quota-meter'];
-      const isYourStreamSection = yourStreamSections.includes(id);
+      // Validate the section ID
+      const validId = getValidSection(id);
+      
+      // Update URL if needed
+      if (validId !== id) {
+        window.location.hash = validId;
+        return;
+      }
+      
+      // Show the requested section
+      showSection(validId);
       
       // Handle the quota meter visibility - only show with 'me-page'
       const quotaMeter = document.getElementById('quota-meter');
       if (quotaMeter) {
-        quotaMeter.hidden = id !== 'me-page';
-        quotaMeter.tabIndex = id === 'me-page' ? 0 : -1;
+        quotaMeter.hidden = validId !== 'me-page';
+        quotaMeter.tabIndex = validId === 'me-page' ? 0 : -1;
       }
       
-      // Check if user is logged in
-      const isLoggedIn = !!getCookie('uid');
-      
-      // Handle all sections
-      this.sections.forEach(sec => {
-        // Skip quota meter as it's already handled
-        if (sec.id === 'quota-meter') return;
-        
-        // Special handling for register page - only show to guests
-        if (sec.id === 'register-page') {
-          sec.hidden = isLoggedIn || id !== 'register-page';
-          sec.tabIndex = (!isLoggedIn && id === 'register-page') ? 0 : -1;
-          return;
-        }
-        
-        // Show the section if it matches the target ID
-        // OR if it's a 'Your Stream' section and we're in a 'Your Stream' context
-        const isSectionInYourStream = yourStreamSections.includes(sec.id);
-        const shouldShow = (sec.id === id) || 
-                         (isYourStreamSection && isSectionInYourStream);
-        
-        sec.hidden = !shouldShow;
-        sec.tabIndex = shouldShow ? 0 : -1;
-      });
-      // Show user-upload-area only when me-page is shown and user is logged in
-      const userUpload = document.getElementById("user-upload-area");
-      if (userUpload) {
-        const uid = getCookie("uid");
-        userUpload.style.display = (id === "me-page" && uid) ? '' : 'none';
-      }
-      localStorage.setItem("last_page", id);
-      const target = document.getElementById(id);
-      if (target) target.focus();
+      // Update navigation active states
+      this.updateActiveNav(validId);
     },
-    init() {
-      initNavLinks();
-      initBackButtons();
-  
-      initStreamLinks();
+    
+    updateActiveNav(activeId) {
+      // Update active states for navigation links
+      document.querySelectorAll('.dashboard-nav a').forEach(link => {
+        const target = link.getAttribute('href').substring(1);
+        if (target === activeId) {
+          link.setAttribute('aria-current', 'page');
+          link.classList.add('active');
+        } else {
+          link.removeAttribute('aria-current');
+          link.classList.remove('active');
+        }
+      });
     }
   };
-  const showOnly = Router.showOnly.bind(Router);
+  
+  // Initialize the router
+  const router = Router;
+  
+  // Handle section visibility based on authentication
+  const updateSectionVisibility = (sectionId) => {
+    const section = document.getElementById(sectionId);
+    if (!section) return;
+    
+    // Skip navigation sections and quota meter
+    if (['guest-dashboard', 'user-dashboard', 'quota-meter'].includes(sectionId)) {
+      return;
+    }
+    
+    const currentHash = window.location.hash.substring(1);
+    const isLegalPage = ['terms-page', 'privacy-page', 'imprint-page'].includes(sectionId);
+    
+    // Special handling for legal pages - always show when in hash
+    if (isLegalPage) {
+      const isActive = sectionId === currentHash;
+      section.hidden = !isActive;
+      section.tabIndex = isActive ? 0 : -1;
+      if (isActive) section.focus();
+      return;
+    }
+    
+    // Special handling for me-page - only show to authenticated users
+    if (sectionId === 'me-page') {
+      section.hidden = !isLoggedIn || currentHash !== 'me-page';
+      section.tabIndex = (isLoggedIn && currentHash === 'me-page') ? 0 : -1;
+      return;
+    }
+    
+    // Special handling for register page - only show to guests
+    if (sectionId === 'register-page') {
+      section.hidden = isLoggedIn || currentHash !== 'register-page';
+      section.tabIndex = (!isLoggedIn && currentHash === 'register-page') ? 0 : -1;
+      return;
+    }
+    
+    // For other sections, show if they match the current section ID
+    const isActive = sectionId === currentHash;
+    section.hidden = !isActive;
+    section.tabIndex = isActive ? 0 : -1;
+    
+    if (isActive) {
+      section.focus();
+    }
+  };
+  
+  // Initialize the router
+  router.init = function() {
+    // Update visibility for all sections
+    this.sections.forEach(section => {
+      updateSectionVisibility(section.id);
+    });
+    
+    // Show user-upload-area only when me-page is shown and user is logged in
+    const userUpload = document.getElementById("user-upload-area");
+    if (userUpload) {
+      const uid = getCookie("uid");
+      userUpload.style.display = (window.location.hash === '#me-page' && uid) ? '' : 'none';
+    }
+    
+    // Store the current page
+    localStorage.setItem("last_page", window.location.hash.substring(1));
+    
+    // Initialize navigation
+    initNavLinks();
+    initBackButtons();
+    initStreamLinks();
+    
+    // Ensure proper focus management for accessibility
+    const currentSection = document.querySelector('main > section:not([hidden])');
+    if (currentSection) {
+      currentSection.setAttribute('tabindex', '0');
+      currentSection.focus();
+    }
+  };
+  
+  // Initialize the router
+  router.init();
+  
+  // Handle footer links
+  document.querySelectorAll('.footer-links a').forEach(link => {
+    link.addEventListener('click', (e) => {
+      e.preventDefault();
+      const target = link.dataset.target;
+      if (target) {
+        // Show the target section without updating URL hash
+        showSection(target);
+      }
+    });
+  });
+  
+  // Export the showOnly function for global access
+  window.showOnly = router.showOnly.bind(router);
+  
+  // Make router available globally for debugging
+  window.appRouter = router;
 
   // Highlight active profile link on browser back/forward navigation
   function highlightActiveProfileLink() {
@@ -80,6 +285,15 @@ document.addEventListener("DOMContentLoaded", () => {
   window.addEventListener('popstate', () => {
     const params = new URLSearchParams(window.location.search);
     const profileUid = params.get('profile');
+    const currentPage = window.location.hash.substring(1) || 'welcome-page';
+    
+    // Prevent unauthorized access to me-page
+    if ((currentPage === 'me-page' || profileUid) && !getCookie('uid')) {
+      history.replaceState(null, '', '#welcome-page');
+      showOnly('welcome-page');
+      return;
+    }
+    
     if (profileUid) {
       showOnly('me-page');
       if (typeof window.showProfilePlayerFromUrl === 'function') {
@@ -227,5 +441,13 @@ document.addEventListener("DOMContentLoaded", () => {
   }
 
   // Initialize Router
+  document.addEventListener('visibilitychange', () => {
+    // Re-check authentication when tab becomes visible again
+    if (!document.hidden && window.location.hash === '#me-page' && !getCookie('uid')) {
+      window.location.hash = 'welcome-page';
+      showOnly('welcome-page');
+    }
+  });
+
   Router.init();
 });
diff --git a/static/router.js b/static/router.js
index 7c6a49d..abd02f6 100644
--- a/static/router.js
+++ b/static/router.js
@@ -1,15 +1,168 @@
 // static/router.js — core routing for SPA navigation
 export const Router = {
-  sections: Array.from(document.querySelectorAll("main > section")),
+  sections: [],
+  // Map URL hashes to section IDs
+  sectionMap: {
+    'welcome': 'welcome-page',
+    'streams': 'stream-page',
+    'account': 'register-page',
+    'login': 'login-page',
+    'me': 'me-page',
+    'your-stream': 'me-page'  // Map 'your-stream' to 'me-page'
+  },
+  
+  init() {
+    this.sections = Array.from(document.querySelectorAll("main > section"));
+    // Set up hash change handler
+    window.addEventListener('hashchange', this.handleHashChange.bind(this));
+    // Initial route
+    this.handleHashChange();
+  },
+  
+  handleHashChange() {
+    let hash = window.location.hash.substring(1) || 'welcome';
+    
+    // First check if the hash matches any direct section ID
+    const directSection = this.sections.find(sec => sec.id === hash);
+    
+    if (directSection) {
+      // If it's a direct section ID match, show it directly
+      this.showOnly(hash);
+    } else {
+      // Otherwise, use the section map
+      const sectionId = this.sectionMap[hash] || hash;
+      this.showOnly(sectionId);
+    }
+  },
+  
   showOnly(id) {
-    this.sections.forEach(sec => {
-      sec.hidden = sec.id !== id;
-      sec.tabIndex = -1;
+    if (!id) return;
+    
+    // Update URL hash without triggering hashchange
+    if (window.location.hash !== `#${id}`) {
+      window.history.pushState(null, '', `#${id}`);
+    }
+    
+    const isAuthenticated = document.body.classList.contains('authenticated');
+    const isMePage = id === 'me-page' || id === 'your-stream';
+    
+    // Helper function to update section visibility
+    const updateSection = (sec) => {
+      const isTarget = sec.id === id;
+      const isGuestOnly = sec.classList.contains('guest-only');
+      const isAuthOnly = sec.classList.contains('auth-only');
+      const isAlwaysVisible = sec.classList.contains('always-visible');
+      const isQuotaMeter = sec.id === 'quota-meter';
+      const isUserUploadArea = sec.id === 'user-upload-area';
+      const isLogOut = sec.id === 'log-out';
+      
+      // Determine if section should be visible
+      let shouldShow = isTarget;
+      
+      // Always show sections with always-visible class
+      if (isAlwaysVisible) {
+        shouldShow = true;
+      }
+      
+      // Handle guest-only sections
+      if (isGuestOnly && isAuthenticated) {
+        shouldShow = false;
+      }
+      
+      // Handle auth-only sections
+      if (isAuthOnly && !isAuthenticated) {
+        shouldShow = false;
+      }
+      
+      // Special case for me-page and its children
+      const isChildOfMePage = sec.closest('#me-page') !== null;
+      const shouldBeActive = isTarget || 
+                          (isQuotaMeter && isMePage) || 
+                          (isUserUploadArea && isMePage) ||
+                          (isLogOut && isMePage) ||
+                          (isChildOfMePage && isMePage);
+      
+      // Update visibility and tab index
+      sec.hidden = !shouldShow;
+      sec.tabIndex = shouldShow ? 0 : -1;
+      
+      // Update active state and ARIA attributes
+      if (shouldBeActive) {
+        sec.setAttribute('aria-current', 'page');
+        sec.classList.add('active');
+        
+        // Ensure target section is visible
+        if (sec.hidden) {
+          sec.style.display = 'block';
+          sec.hidden = false;
+        }
+        
+        // Show all children of the active section
+        if (isTarget) {
+          sec.focus();
+          // Make sure all auth-only children are visible
+          const authChildren = sec.querySelectorAll('.auth-only');
+          authChildren.forEach(child => {
+            if (isAuthenticated) {
+              child.style.display = '';
+              child.hidden = false;
+            }
+          });
+        }
+      } else {
+        sec.removeAttribute('aria-current');
+        sec.classList.remove('active');
+        
+        // Reset display property for sections when not active
+        if (shouldShow && !isAlwaysVisible) {
+          sec.style.display = ''; // Reset to default from CSS
+        }
+      }
+    };
+    
+    // Update all sections
+    this.sections.forEach(updateSection);
+    
+    // Update active nav links
+    document.querySelectorAll('[data-target], [href^="#"]').forEach(link => {
+      let target = link.getAttribute('data-target');
+      const href = link.getAttribute('href');
+      
+      // If no data-target, try to get from href
+      if (!target && href) {
+        // Remove any query parameters and # from the href
+        const hash = href.split('?')[0].substring(1);
+        // Use mapped section ID or the hash as is
+        target = this.sectionMap[hash] || hash;
+      }
+      
+      // Check if this link points to the current section or its mapped equivalent
+      const linkId = this.sectionMap[target] || target;
+      const currentId = this.sectionMap[id] || id;
+      
+      if (linkId === currentId) {
+        link.setAttribute('aria-current', 'page');
+        link.classList.add('active');
+      } else {
+        link.removeAttribute('aria-current');
+        link.classList.remove('active');
+      }
     });
+    
+    // Close mobile menu if open
+    const menuToggle = document.querySelector('.menu-toggle');
+    if (menuToggle && menuToggle.getAttribute('aria-expanded') === 'true') {
+      menuToggle.setAttribute('aria-expanded', 'false');
+      document.body.classList.remove('menu-open');
+    }
+    
     localStorage.setItem("last_page", id);
-    const target = document.getElementById(id);
-    if (target) target.focus();
   }
 };
 
+// Initialize router when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+  Router.init();
+});
+
 export const showOnly = Router.showOnly.bind(Router);
diff --git a/static/streams-ui.js b/static/streams-ui.js
index 3d1d8c9..074049d 100644
--- a/static/streams-ui.js
+++ b/static/streams-ui.js
@@ -65,17 +65,26 @@ function loadAndRenderStreams() {
   let streams = [];
   let connectionTimeout = null;
   
-  // Close previous connection and clear any pending timeouts
+  // Clean up previous connection and timeouts
   if (window._streamsSSE) {
-    console.log('[streams-ui] Aborting previous connection');
+    console.group('[streams-ui] Cleaning up previous connection');
+    console.log('Previous connection exists, aborting...');
     if (window._streamsSSE.abort) {
       window._streamsSSE.abort();
+      console.log('Previous connection aborted');
+    } else {
+      console.log('No abort method on previous connection');
     }
     window._streamsSSE = null;
+    console.groupEnd();
   }
+  
   if (connectionTimeout) {
+    console.log('[streams-ui] Clearing previous connection timeout');
     clearTimeout(connectionTimeout);
     connectionTimeout = null;
+  } else {
+    console.log('[streams-ui] No previous connection timeout to clear');
   }
   
   console.log(`[streams-ui] Creating fetch-based SSE connection to ${sseUrl}`);
@@ -87,14 +96,41 @@ function loadAndRenderStreams() {
   // Store the controller for cleanup
   window._streamsSSE = controller;
   
-  // Set a connection timeout
-  connectionTimeout = setTimeout(() => {
+  // Set a connection timeout with debug info
+  const connectionStartTime = Date.now();
+  const connectionTimeoutId = setTimeout(() => {
     if (!gotAny) {
-      console.log('[streams-ui] Connection timeout reached, forcing retry...');
+      // Only log in development (localhost) or if explicitly enabled
+      const isLocalDevelopment = window.location.hostname === 'localhost' || 
+                               window.location.hostname === '127.0.0.1';
+      if (isLocalDevelopment || window.DEBUG_STREAMS) {
+        const duration = Date.now() - connectionStartTime;
+        console.group('[streams-ui] Connection timeout reached');
+        console.log(`Duration: ${duration}ms`);
+        console.log('Current time:', new Date().toISOString());
+        console.log('Streams received:', streams.length);
+        console.log('Active intervals:', window.activeIntervals ? window.activeIntervals.size : 'N/A');
+        console.log('Active timeouts:', window.activeTimeouts ? window.activeTimeouts.size : 'N/A');
+        console.groupEnd();
+      }
+      
+      // Clean up and retry with backoff
       controller.abort();
-      loadAndRenderStreams();
+      
+      // Only retry if we haven't exceeded max retries
+      const retryCount = window.streamRetryCount || 0;
+      if (retryCount < 3) { // Max 3 retries
+        window.streamRetryCount = retryCount + 1;
+        const backoffTime = Math.min(1000 * Math.pow(2, retryCount), 10000); // Exponential backoff, max 10s
+        setTimeout(loadAndRenderStreams, backoffTime);
+      } else if (process.env.NODE_ENV === 'development' || window.DEBUG_STREAMS) {
+        console.warn('Max retries reached for stream loading');
+      }
     }
-  }, 10000); // 10 second timeout
+  }, 15000); // 15 second timeout (increased from 10s)
+  
+  // Store the timeout ID for cleanup
+  connectionTimeout = connectionTimeoutId;
   
   console.log('[streams-ui] Making fetch request to:', sseUrl);
   
@@ -102,7 +138,7 @@ function loadAndRenderStreams() {
   
   console.log('[streams-ui] Creating fetch request with URL:', sseUrl);
   
-  // Make the fetch request
+  // Make the fetch request with proper error handling
   fetch(sseUrl, {
     method: 'GET',
     headers: {
@@ -112,7 +148,6 @@ function loadAndRenderStreams() {
     },
     credentials: 'same-origin',
     signal: signal,
-    // Add mode and redirect options for better error handling
     mode: 'cors',
     redirect: 'follow'
   })
@@ -200,44 +235,49 @@ function loadAndRenderStreams() {
     return reader.read().then(processStream);
   })
   .catch(error => {
-    console.error('[streams-ui] Fetch request failed:', error);
+    // Only handle the error if it's not an AbortError (from our own abort)
+    if (error.name === 'AbortError') {
+      console.log('[streams-ui] Request was aborted as expected');
+      return;
+    }
+    
+    console.error('[streams-ui] Stream loading failed:', error);
     
     // Log additional error details
     if (error.name === 'TypeError') {
       console.error('[streams-ui] This is likely a network error or CORS issue');
-      if (error.message.includes('fetch')) {
-        console.error('[streams-ui] The fetch request was blocked or failed to reach the server');
-      }
-      if (error.message.includes('CORS')) {
-        console.error('[streams-ui] CORS error detected. Check server CORS configuration');
-      }
     }
     
-    if (error.name === 'AbortError') {
-      console.log('[streams-ui] Request was aborted');
-    } else {
-      console.error('[streams-ui] Error details:', {
-        name: error.name,
-        message: error.message,
-        stack: error.stack,
-        constructor: error.constructor.name,
-        errorCode: error.code,
-        errorNumber: error.errno,
-        response: error.response
-      });
+    // Show a user-friendly error message
+    const ul = document.getElementById('stream-list');
+    if (ul) {
+      let errorMessage = 'Error loading streams. ';
       
-      // Show a user-friendly error message
-      const ul = document.getElementById('stream-list');
-      if (ul) {
-        ul.innerHTML = `
-          <li class="error">
-            <p>Error loading streams. Please try again later.</p>
-            <p><small>Technical details: ${error.name}: ${error.message}</small></p>
-          </li>
-        `;
+      if (error.message.includes('Failed to fetch')) {
+        errorMessage += 'Unable to connect to the server. Please check your internet connection.';
+      } else if (error.message.includes('CORS')) {
+        errorMessage += 'A server configuration issue occurred. Please try again later.';
+      } else {
+        errorMessage += 'Please try again later.';
       }
       
-      handleSSEError(error);
+      ul.innerHTML = `
+        <li class="error">
+          <p>${errorMessage}</p>
+          <button id="retry-loading" class="retry-button">
+            <span class="retry-icon">↻</span> Try Again
+          </button>
+        </li>
+      `;
+      
+      // Add retry handler
+      const retryButton = document.getElementById('retry-loading');
+      if (retryButton) {
+        retryButton.addEventListener('click', () => {
+          ul.innerHTML = '<li>Loading streams...</li>';
+          loadAndRenderStreams();
+        });
+      }
     }
   });
   
@@ -279,7 +319,7 @@ function loadAndRenderStreams() {
               <div class="audio-controls">
                 <button class="play-pause-btn" data-uid="${escapeHtml(uid)}" aria-label="Play">▶️</button>
               </div>
-              <p class="stream-info" style='color:gray;font-size:90%'>[${sizeMb} MB, ${mtime}]</p>
+              <p class="stream-info" style='color:var(--text-muted);font-size:90%'>[${sizeMb} MB, ${mtime}]</p>
             </article>
           `;
           ul.appendChild(li);
@@ -288,7 +328,7 @@ function loadAndRenderStreams() {
           console.error(`[streams-ui] Error rendering stream ${uid}:`, error);
           const errorLi = document.createElement('li');
           errorLi.textContent = `Error loading stream: ${uid}`;
-          errorLi.style.color = 'red';
+          errorLi.style.color = 'var(--error)';
           ul.appendChild(errorLi);
         }
       });
@@ -352,7 +392,7 @@ export function renderStreamList(streams) {
           const uid = stream.uid || '';
           const sizeKb = stream.size ? (stream.size / 1024).toFixed(1) : '?';
           const mtime = stream.mtime ? new Date(stream.mtime * 1000).toLocaleString() : '';
-          return `<li><a href="/?profile=${encodeURIComponent(uid)}" class="profile-link">▶ ${uid}</a> <span style='color:gray;font-size:90%'>[${sizeKb} KB, ${mtime}]</span></li>`;
+          return `<li><a href="/?profile=${encodeURIComponent(uid)}" class="profile-link">▶ ${uid}</a> <span style='color:var(--text-muted);font-size:90%'>[${sizeKb} KB, ${mtime}]</span></li>`;
         })
         .join('');
     } else {
@@ -704,50 +744,55 @@ function cleanupAudio() {
   }
 }
 
-// Event delegation for play/pause buttons
-document.addEventListener('click', async (e) => {
-  const playPauseBtn = e.target.closest('.play-pause-btn');
-  if (!playPauseBtn) return;
+// Event delegation for play/pause buttons - only handle buttons within the stream list
+const streamList = document.getElementById('stream-list');
+if (streamList) {
+  streamList.addEventListener('click', async (e) => {
+    const playPauseBtn = e.target.closest('.play-pause-btn');
+    // Skip if not a play button or if it's the personal stream's play button
+    if (!playPauseBtn || playPauseBtn.closest('#me-page')) return;
+    
+    // Prevent event from bubbling up to document-level handlers
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+    e.preventDefault();
   
-  // Prevent default to avoid any potential form submission or link following
-  e.preventDefault();
-  e.stopPropagation();
-  
-  const uid = playPauseBtn.dataset.uid;
-  if (!uid) {
-    console.error('No UID found for play button');
-    return;
-  }
-  
-  console.log(`[streams-ui] Play/pause clicked for UID: ${uid}, currentUid: ${currentUid}, isPlaying: ${isPlaying}`);
-  
-  // If clicking the currently playing button, toggle pause/play
-  if (currentUid === uid) {
-    if (isPlaying) {
-      console.log('[streams-ui] Pausing current audio');
-      await audioElement.pause();
-      isPlaying = false;
-      updatePlayPauseButton(playPauseBtn, false);
-    } else {
-      console.log('[streams-ui] Resuming current audio');
-      try {
-        await audioElement.play();
-        isPlaying = true;
-        updatePlayPauseButton(playPauseBtn, true);
-      } catch (error) {
-        console.error('[streams-ui] Error resuming audio:', error);
-        // If resume fails, try reloading the audio
-        await loadAndPlayAudio(uid, playPauseBtn);
-      }
+    const uid = playPauseBtn.dataset.uid;
+    if (!uid) {
+      console.error('No UID found for play button');
+      return;
     }
-    return;
-  }
-  
-  // If a different stream is playing, stop it and start the new one
-  console.log(`[streams-ui] Switching to new audio stream: ${uid}`);
-  stopPlayback();
-  await loadAndPlayAudio(uid, playPauseBtn);
-});
+    
+    console.log(`[streams-ui] Play/pause clicked for UID: ${uid}, currentUid: ${currentUid}, isPlaying: ${isPlaying}`);
+    
+    // If clicking the currently playing button, toggle pause/play
+    if (currentUid === uid) {
+      if (isPlaying) {
+        console.log('[streams-ui] Pausing current audio');
+        await audioElement.pause();
+        isPlaying = false;
+        updatePlayPauseButton(playPauseBtn, false);
+      } else {
+        console.log('[streams-ui] Resuming current audio');
+        try {
+          await audioElement.play();
+          isPlaying = true;
+          updatePlayPauseButton(playPauseBtn, true);
+        } catch (error) {
+          console.error('[streams-ui] Error resuming audio:', error);
+          // If resume fails, try reloading the audio
+          await loadAndPlayAudio(uid, playPauseBtn);
+        }
+      }
+      return;
+    }
+    
+    // If a different stream is playing, stop it and start the new one
+    console.log(`[streams-ui] Switching to new audio stream: ${uid}`);
+    stopPlayback();
+    await loadAndPlayAudio(uid, playPauseBtn);
+  });
+}
 
 // Handle audio end event to update button state
 document.addEventListener('play', (e) => {
diff --git a/static/style.css b/static/style.css
index 34f05b7..299721a 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,94 +1,465 @@
-main {
+/* Import component styles */
+@import url('./css/components/file-upload.css');
+
+/* Base Styles */
+:root {
+  --primary-color: #4a6fa5;
+  --primary-hover: #3a5a8c;
+  --text-color: #f0f0f0;
+  --text-muted: #888;
+  --background: #1a1a1a;
+  --surface: #2a2a2a;
+  --border: #444;
+  --border-light: #555;
+  --border-lighter: #666;
+  --text-light: #999;
+  --text-lighter: #bbb;
+  --error: #ff4444;
+  --error-hover: #ff6666;
+  --success: #2e8b57;
+  --warning: #ff6600;
+  --info: #1e90ff;
+  --code-bg: #222;
+  --link-hover: #74c0fc;
+  --transition: all 0.2s ease;
+}
+
+/* Reset and Base Styles */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  line-height: 1.6;
+  color: var(--text-color);
+  background-color: var(--background);
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+  margin-bottom: 1rem;
+  line-height: 1.2;
+  font-weight: 600;
+}
+
+h1 { 
+  font-size: 2.5rem; 
+  font-weight: 700;
+}
+
+/* Base h2 styles - applied to all h2 elements */
+h2 {
+  font-size: 2rem;
+  font-weight: 600;
+  line-height: 1.2;
+  margin: 1.5rem auto; /* Center with auto margins */
+  color: var(--text-color);
+  font-family: inherit;
+  text-align: center; /* Center text by default */
+  display: block;
+  width: 100%;
+  max-width: 800px; /* Optional: Limit width for better readability */
+}
+
+/* Utility classes for h2 variations */
+h2.section-header {
+  color: var(--text-light);
+  padding: 1rem 1.5rem;
+  margin: 0;
+  font-size: 1.8rem;
+  font-weight: 500;
+  text-align: center;
+}
+
+h2.guest-login {
+  font-size: 1.1em;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  display: inline-block;
+  background: var(--success);
+  color: var(--text-light);
+  padding: 0.4em 1em;
+  border-radius: 5px;
+  text-decoration: none;
+  margin: 0.5em 0;
+  transition: background 0.2s ease;
+}
+
+h2.guest-login:hover {
+  background: #256b45;
+}
+h3 { 
+  font-size: 1.75rem; 
+  font-weight: 500;
+  text-align: center;
+  width: 100%;
+  margin: 0.5rem 0 1.5rem;
+}
+h4 { font-size: 1.5rem; }
+h5 { font-size: 1.25rem; }
+h6 { font-size: 1rem; }
+
+p {
+  margin-bottom: 1rem;
+}
+
+a {
+  color: var(--primary-color);
+  text-decoration: none;
+  transition: var(--transition);
+}
+
+a:hover {
+  color: var(--primary-hover);
+  text-decoration: underline;
+}
+
+/* Layout */
+body {
+  min-height: 100vh;
   display: flex;
   flex-direction: column;
-  align-items: center; /* centers children horizontally */
+  margin: 0;
+}
+
+main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem 1.25rem;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
 }
 
 /* Global section styles */
-main > section {
+section {
   width: 100%;
   max-width: 100%;
-  margin: 0 0 1.5rem 0;
-  padding: 0; /* Remove padding from section, will be handled by inner elements */
-  box-sizing: border-box;
-  background: var(--crt-screen, #1a1a1a);
-  border-radius: 8px;
-  overflow: hidden; /* Ensures border-radius clips child elements */
+  margin-bottom: 1.5rem;
+  background: var(--surface);
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
-/* Ensure consistent background for all sections */
+/* Page containers */
 #welcome-page,
 #register-page,
 #stream-page,
 #me-page,
 #terms-page,
 #privacy-page,
+#imprint-page,
+/* Legal pages container */
+#terms-page,
+#privacy-page,
 #imprint-page {
-  background: var(--crt-screen, #1a1a1a);
-}
-
-/* Style articles within sections */
-section > article {
-  background: transparent;
-  padding: 0;
-  margin: 0 auto;
-  box-shadow: none;
-  color: #f0f0f0;
-  max-width: 400px;
-  width: 100%;
-  padding: 2rem 1rem;
-  box-sizing: border-box;
-}
-
-/* Center the register form */
-#register-form {
+  flex: 1;
   display: flex;
   flex-direction: column;
+  width: 100%;
+}
+
+/* Article styles */
+article, #account-deletion {
+  /* Base article styles - card appearance by default */
+  background: var(--surface);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  padding: 1.6875rem; /* 27px */
+  box-sizing: border-box;
+  margin: 2rem auto;
+  max-width: 600px;
+  width: 100%;
+  color: var(--text-color);
+  transition: all 0.2s ease;
+}
+
+/* Article with top border */
+article.article--bordered {
+  border-top: 1px solid var(--border);
+  padding: 2rem;
+  margin: 2rem auto;
+}
+
+/* Ensure account deletion section matches article styling */
+#account-deletion {
+  padding: 2rem;
+  margin: 2rem auto;
+}
+
+article.article--wide {
+  /* For wider articles */
+  max-width: 800px;
+  padding: 2rem;
+}
+
+/* Forms */
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  max-width: 500px;
+  margin: 0 auto;
+  padding: 1.5rem;
+}
+
+/* Form elements */
+input[type="email"],
+input[type="text"],
+input[type="password"],
+textarea {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  margin: 0.25rem 0;
+  border: 1px solid var(--border);
+  border-radius: var(--border-radius);
+  background: var(--background);
+  color: var(--text-color);
+  font-size: 1rem;
+  transition: var(--transition);
+}
+
+input[type="email"]:focus,
+input[type="text"]:focus,
+input[type="password"]:focus,
+textarea:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 2px rgba(74, 111, 165, 0.25);
+}
+
+/* Buttons */
+button,
+.button,
+input[type="submit"] {
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  max-width: 300px;
+  border: none;
+  border-radius: var(--border-radius);
+  background: var(--primary-color);
+  color: white;
+  cursor: pointer;
+  transition: var(--transition);
+  text-align: center;
+  text-decoration: none;
+  padding: 0.5em 1em;
+}
+
+button:hover:not(#logout-button):not(#delete-account-from-privacy),
+.button:hover:not(#logout-button):not(#delete-account-from-privacy),
+input[type="submit"]:hover:not(#logout-button):not(#delete-account-from-privacy) {
+  background: var(--primary-hover);
+}
+
+button:active:not(#logout-button):not(#delete-account-from-privacy),
+.button:active:not(#logout-button):not(#delete-account-from-privacy),
+input[type="submit"]:active:not(#logout-button):not(#delete-account-from-privacy) {
+  opacity: 0.9;
+}
+
+/* Special button styles */
+#logout-button,
+#delete-account-from-privacy,
+.email-section .button {
+  background: transparent !important;
+  color: var(--warning) !important;
+  border: 1px solid var(--warning) !important;
+  display: block;
   margin: 0 auto;
 }
 
-#register-form p {
-  margin: 0.5rem 0;
-  width: 100%;
+#logout-button:hover,
+#delete-account-from-privacy:hover,
+.email-section .button:hover {
+  background: rgba(255, 102, 0, 0.1) !important;
 }
 
-#register-form label {
+/* Logout Section */
+.logout-section {
+  width: 100%;
+  max-width: 600px;
+  margin: 2rem auto;
+  text-align: center;
+  padding: 2rem;
+  cursor: default;
+}
+
+/* Centered Container */
+.centered-container {
+  text-align: center;
+  margin: 1.5rem 0;
+}
+
+/* Email Section */
+.email-section {
+  text-align: center;
+  margin: 2em 0;
+}
+
+.email-section .button {
+  display: inline-block;
+}
+
+/* Utility Classes */
+.text-center { text-align: center; }
+.text-muted { color: var(--text-muted); }
+.mt-1 { margin-top: 0.5rem; }
+.mb-1 { margin-bottom: 0.5rem; }
+.mt-2 { margin-top: 1rem; }
+.mb-2 { margin-bottom: 1rem; }
+.mt-3 { margin-top: 1.5rem; }
+.mb-3 { margin-bottom: 1.5rem; }
+
+/* Audio Player Specific Styles */
+.audio-player {
+  width: 100%;
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 1rem;
+  background: var(--surface);
+  border-radius: var(--border-radius);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.audio-controls {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.audio-progress {
+  flex: 1;
+  height: 4px;
+  background: var(--border);
+  border-radius: 2px;
+  cursor: pointer;
+  position: relative;
+}
+
+.audio-progress-filled {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: var(--primary-color);
+  border-radius: 2px;
+  transition: width 0.1s linear;
+}
+
+.time-display {
+  font-size: 0.875rem;
+  color: var(--text-muted);
+  min-width: 80px;
+  text-align: center;
+}
+
+/* Form Elements */
+form {
+  max-width: 600px;
+  margin: 1.5rem auto;
+  padding: 0 1rem;
+}
+
+label {
   display: block;
   margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: var(--text-color);
 }
 
-#register-form input[type="email"],
-#register-form input[type="text"] {
+input[type="email"],
+input[type="text"],
+input[type="password"] {
   width: 100%;
-  padding: 0.5rem;
-  box-sizing: border-box;
-}
-
-#register-form button[type="submit"] {
-  margin-top: 1rem;
-  width: calc(250px + 1.6em);
   padding: 0.75rem;
-  cursor: pointer;
+  margin-bottom: 1rem;
+  border: 1px solid var(--border);
+  border-radius: var(--border-radius);
+  background-color: var(--background);
+  color: var(--text-color);
+  font-size: 1rem;
+  transition: var(--transition);
   max-width: 100%;
   box-sizing: border-box;
 }
 
-/* Style text inputs in register form */
-#register-page #register-form input[type="email"],
-#register-page #register-form input[type="text"] {
-  width: calc(250px + 1.6em);
-  max-width: 100%;
-  box-sizing: border-box;
+input[type="email"]:focus,
+input[type="text"]:focus,
+input[type="password"]:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 2px rgba(74, 111, 165, 0.25);
+}
+
+button,
+input[type="submit"],
+input[type="button"] {
+  background-color: var(--primary-color);
+  color: white;
+  border: none;
+  border-radius: var(--border-radius);
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition);
+  margin-top: 1rem;
+  width: 100%;
+  max-width: 300px;
+  display: block;
+}
+
+button:hover:not(:disabled):not(#logout-button):not(#delete-account-from-privacy),
+input[type="submit"]:hover:not(:disabled):not(#logout-button):not(#delete-account-from-privacy),
+input[type="button"]:hover:not(:disabled):not(#logout-button):not(#delete-account-from-privacy) {
+  background-color: var(--primary-hover);
+}
+
+button:disabled,
+input[type="submit"]:disabled,
+input[type="button"]:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Form Notes */
+.form-note {
+  display: block;
+  font-size: 0.85em;
+  color: var(--text-muted);
+  margin: 0.5rem 0 1rem;
+  line-height: 1.4;
+}
+
+.session-note {
+  opacity: 0.65;
+  margin-top: 1rem;
+}
+
+/* Bot trap - hide from view but keep accessible to screen readers */
+.bot-trap {
+  position: absolute;
+  left: -9999px;
+  opacity: 0;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
 }
 
 /* Add subtle dividers between sections */
-section + section,
-article + article {
-  border-top: 1px solid #444;
+section + section {
+  border-top: 1px solid var(--border);
 }
 
 nav#guest-dashboard.dashboard-nav {
@@ -113,7 +484,7 @@ nav#guest-dashboard.dashboard-nav {
 
 .toast {
   background: rgba(30, 30, 30, 0.95);
-  color: #fff;
+  color: var(--text-light);
   padding: 1.2em 2em;
   border-radius: 8px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
@@ -155,10 +526,236 @@ nav#guest-dashboard.dashboard-nav {
   pointer-events: auto;
 }
 
+/* Me Page Header */
+#me-page > div {
+  position: relative;
+  margin: 0 0 1.5rem 0;
+  text-align: center;
+}
+
+/* Me page h2 uses section-header class */
+
+#me-page .header-actions {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  gap: 0.5rem;
+}
+
+/* Common Button Styles */
+.action-btn {
+  font-size: 1rem;
+  padding: 0.5em 1em;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  min-height: 2.5em;
+  transition: all 0.2s ease;
+  text-align: center;
+  line-height: 1.2;
+  color: var(--text-light);
+}
+
+/* Button specific styles */
+#delete-account-button {
+  background-color: var(--error);
+}
+
+#delete-account-button:hover {
+  background-color: var(--error-hover);
+}
+
+#logout-button {
+  background: var(--primary-color);
+}
+
+#logout-button:hover {
+  background: var(--primary-hover);
+}
+
+/* Quota meter and uploaded files section */
+#quota-meter {
+  background: var(--surface); /* Match article background */
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  padding: 1.6875rem;
+  box-sizing: border-box;
+  margin: 2rem auto;
+  max-width: 600px;
+  width: 100%;
+  color: var(--text-light);
+}
+
+#quota-meter {
+  transition: all 0.2s ease;
+}
+
+#quota-meter h4 {
+  font-weight: 400;
+  text-align: center;
+  margin: 1.5rem 0 0.75rem;
+  color: var(--text);
+}
+
+#quota-meter > h4 {
+  margin-top: 1.5rem;
+  text-align: center;
+  font-weight: 400;
+  color: var(--text);
+}
+
+.file-list {
+  list-style: none;
+  padding: 0;
+  margin: 0.5rem 0 0;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.file-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border);
+  transition: background-color 0.2s ease;
+}
+
+.file-item:last-child {
+  border-bottom: none;
+}
+
+.file-item:hover {
+  background-color: var(--surface-hover);
+}
+
+.file-name {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-right: 1rem;
+}
+
+.stored-as {
+  font-size: 0.8em;
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: 0.25rem;
+}
+
+.file-size {
+  color: var(--text-muted);
+  white-space: nowrap;
+  font-size: 0.9em;
+  margin-right: 0.5rem;
+}
+
+.delete-file {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  margin-left: 0.5rem;
+  border-radius: 4px;
+  font-size: 0.9em;
+  transition: all 0.2s ease;
+  opacity: 0.7;
+}
+
+.delete-file:hover {
+  color: var(--danger);
+  background-color: rgba(255, 99, 71, 0.1);
+  opacity: 1;
+}
+
+.delete-file:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--danger);
+}
+
+.stored-as .delete-file {
+  margin-left: 0.5rem;
+  font-size: 0.8em;
+}
+
+.loading-message,
+.empty-message {
+  padding: 0.75rem 1rem;
+  color: var(--text-muted);
+  font-style: italic;
+  text-align: center;
+  border-bottom: 1px solid var(--border);
+}
+
+.empty-message {
+  color: var(--text-muted);
+}
+
+#uploaded-files > div:first-child {
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: var(--text-color);
+}
+
+#file-list {
+  max-height: 200px;
+  overflow-y: auto;
+  border: 1px solid var(--border);
+  padding: 0.5rem;
+  border-radius: 4px;
+  background: var(--background);
+  margin: 0;
+  list-style: none;
+}
+
+#file-list > div {
+  padding: 0.5rem 0;
+  color: var(--text-muted);
+  font-style: italic;
+  border-bottom: 1px solid var(--border);
+}
+
+#file-list > div:last-child {
+  border-bottom: none;
+}
+
+#quota-meter:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+}
+
 .quota-meter {
   font-size: 0.9em;
-  margin-top: 0.5em;
-  color: #555;
+  color: var(--text-muted);
+  margin: 0 0 1rem 0;
+}
+
+#file-list {
+  margin: 1rem 0 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+#file-list > div {
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--border-color, #333);
+}
+
+#file-list > div:last-child {
+  border-bottom: none;
 }
 
 .footer-hint {
@@ -173,7 +770,7 @@ nav#guest-dashboard.dashboard-nav {
   margin-top: 0.4em;
   font-size: 0.95em;
   background: #b22222;
-  color: white;
+  color: var(--text-light);
   border: none;
   padding: 0.5em 1.2em;
   border-radius: 4px;
@@ -188,7 +785,7 @@ nav#guest-dashboard.dashboard-nav {
 .delete-account {
   margin-top: 1em;
   background: #ccc;
-  color: black;
+  color: var(--text-light);
   padding: 0.4em 1em;
   border-radius: 5px;
   font-size: 0.9em;
@@ -249,17 +846,17 @@ audio {
 }
 
 #me-page .audio-controls button:hover {
-  background: #222;
+  background: var(--audio-bg, #222);
   transform: scale(1.05);
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
-  border-color: #666;
+  border-color: var(--border-lighter);
 }
 
 .audio-controls button {
   background: rgba(26, 26, 26, 0.9);
   border: 2px solid #444;
   border-radius: 12px;
-  color: #f0f0f0;
+  color: var(--text-light);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -284,10 +881,10 @@ audio {
 
 /* Hover and active states */
 .audio-controls button:hover {
-  background: #222;
+  background: var(--audio-bg, #222);
   transform: scale(1.05);
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
-  border-color: #666;
+  border-color: var(--border-lighter);
 }
 
 .audio-controls button:active {
@@ -315,7 +912,7 @@ audio {
 .audio-controls button:active {
   transform: scale(0.98);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  background: #1a1a1a;
+  background: var(--background);
 }
 
 .audio-controls svg {
@@ -347,11 +944,11 @@ main > section {
   width: 100%;
   max-width: 900px;
   padding: 2em;
-  background: #1a1a1a;
+  background: var(--background);
   border: 1px solid var(--audio-metal);
   border-radius: 8px;
   margin-bottom: 1.5em;
-  color: var(--audio-text);
+  color: var(--text-light);
   text-shadow: 0 0 2px rgba(255, 102, 0, 0.2);
   position: relative;
 }
@@ -382,9 +979,9 @@ main > section::before {
 
 /* Audio controls styling */
 button.audio-control {
-  background: #333;
-  border: 2px solid #555;
-  color: #fff;
+  background: var(--audio-metal, #333);
+  border: 2px solid var(--border-light);
+  color: var(--text-light);
   padding: 0.5em 1em;
   border-radius: 6px;
   cursor: pointer;
@@ -407,52 +1004,61 @@ button.audio-control {
 #register-form label {
   display: inline;
   margin-right: 10px;
-  color: #d3d3d3;
+  color: var(--text-color);
   font-family: 'Courier New', monospace;
 }
 
 #register-form input[type="text"],
 #register-form input[type="email"],
 #register-form input[type="password"] {
-  display: inline;
+  display: block;
   background-color: rgb(26, 26, 26);
   border: 1px solid #444;
-  color: #d3d3d3;
+  color: var(--text-light);
   padding: 0.8em;
   border-radius: 4px;
-  width: 250px;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
   transition: all 0.2s ease;
+  margin: 0.5rem 0;
 }
 
 #register-form input[type="text"]:focus,
 #register-form input[type="email"]:focus,
 #register-form input[type="password"]:focus {
   outline: none;
-  border-color: #ff6600;
+  border-color: var(--warning);
   box-shadow: 0 0 0 2px rgba(255, 102, 0, 0.1);
 }
 
 /* Submit button styling */
 #register-form button[type="submit"] {
-  display: inline;
-  width: calc(250px + 1.6em);
+  display: block;
+  width: 100%;
+  max-width: 100%;
   padding: 0.8em;
   background: transparent;
-  color: #d3d3d3;
+  color: var(--text-light);
   border: none;
   border-radius: 4px;
   cursor: pointer;
   font-size: 16px;
-  margin-top: 1.25em;
-  transition: color 0.3s;
+  margin: 1.25em 0 0 0;
+  transition: all 0.3s ease;
   font-family: 'Courier New', monospace;
   text-align: center;
   border: 1px solid #444;
-  background: #1a1a1a;
+  background: var(--background);
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
 }
 
 #register-form button[type="submit"]:hover {
-  color: #ff6600;
+  color: var(--warning);
 }
 
 #register-form button[type="submit"]:active {
@@ -463,15 +1069,15 @@ button.audio-control {
 }
 
 button.audio-control:hover {
-  background: #444;
-  border-color: #666;
+  background: var(--border);
+  border-color: var(--border-lighter);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
 }
 
 /* Audio meter styling */
 .audio-meter {
-  background: #333;
-  border: 1px solid #555;
+  background: var(--audio-metal, #333);
+  border: 1px solid var(--border-light);
   height: 10px;
   border-radius: 5px;
   overflow: hidden;
@@ -488,14 +1094,19 @@ button.audio-control:hover {
   list-style: none;
   padding: 0;
   margin: 0;
-  background: #1a1a1a;
+  background: var(--background);
   border: 1px solid var(--audio-metal);
   border-radius: 8px;
   overflow: hidden;
 }
 
+/* Stream list items - styles moved to .stream-player */
 #stream-list > li {
-  background: #1a1a1a;
+  background: transparent;
+  border: none;
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
 /* Stream player styling */
@@ -531,7 +1142,7 @@ button.audio-control:hover {
   width: 100%;
   max-width: 500px;
   margin: 1em 0;
-  background: #1a1a1a;
+  background: var(--background);
   border: 1px solid #444;
   border-radius: 6px;
 }
@@ -540,7 +1151,7 @@ button.audio-control:hover {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  background: #1a1a1a;
+  background: var(--background);
   border: none;
   border-radius: 6px;
   width: 100%;
@@ -556,7 +1167,7 @@ button.audio-control:hover {
   left: 0.5em;
   top: 50%;
   transform: translateY(-50%);
-  color: #2e8b57;
+  color: var(--success);
   font-size: 1.5em;
   cursor: pointer;
   z-index: 1;
@@ -564,7 +1175,7 @@ button.audio-control:hover {
 
 /* Custom progress bar */
 .stream-player audio::-webkit-progress-bar {
-  background: #444;
+  background: var(--border);
   border-radius: 3px;
 }
 
@@ -586,35 +1197,15 @@ button.audio-control:hover {
 
 .stream-player audio::-webkit-slider-runnable-track {
   height: 4px;
-  background: #444;
+  background: var(--border);
   border-radius: 2px;
 }
 
-/* Guest login heading styling */
-#guest-login h2 {
-  color: var(--audio-accent);
-  font-size: 1.1em;
-  margin: 0.5em 0;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  font-weight: 500;
-  text-align: center;
-  display: inline-block;
-  background: #2e8b57;
-  color: white;
-  padding: 0.4em 1em;
-  border-radius: 5px;
-  text-decoration: none;
-  transition: background 0.2s ease;
-}
-
-#guest-login h2:hover {
-  background: #256b45;
-}
+/* Guest login h2 uses guest-login class */
 
 .audio-list li {
-  background: #333;
-  border: 1px solid #555;
+  background: var(--audio-metal, #333);
+  border: 1px solid var(--border-light);
   padding: 1em;
   margin-bottom: 0.5em;
   border-radius: 6px;
@@ -622,8 +1213,8 @@ button.audio-control:hover {
 }
 
 .audio-list li:hover {
-  background: #444;
-  border-color: #666;
+  background: var(--border);
+  border-color: var(--border-lighter);
   transform: translateY(-1px);
 }
 
@@ -634,7 +1225,8 @@ button.audio-control:hover {
   border-radius: 8px;
   margin: 2em auto;
   max-width: 600px;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
+  width: 100%;
+  color: var(--text-light);
   transition: opacity 0.6s ease;
   opacity: 1;
 }
@@ -654,7 +1246,7 @@ button.audio-control:hover {
 
 #quota-bar[value="100"] + #quota-text::after {
   content: " (Full)";
-  color: #b22222;
+  color: var(--error);
   font-weight: bold;
 }
 
@@ -664,7 +1256,7 @@ input[disabled], button[disabled] {
 }
 
 .uploading-toast {
-  color: #1e90ff;
+  color: var(--info);
   background: #eaf4ff;
   border: 1px solid #b3daff;
   padding: 0.5em 1em;
@@ -675,7 +1267,7 @@ input[disabled], button[disabled] {
 }
 
 .success-toast {
-  color: #2e8b57;
+  color: var(--success);
   background: #e7f6ed;
   border: 1px solid #c2e3d3;
   padding: 0.5em 1em;
@@ -688,7 +1280,7 @@ input[disabled], button[disabled] {
 #stream-info, #stream-info * {
   display: initial !important;
   visibility: visible !important;
-  color: #222 !important;
+  color: var(--background) !important;
   background: #fff !important;
 }
 
@@ -698,7 +1290,7 @@ html {
   min-height: 100%;
   margin: 0;
   padding: 0;
-  background-color: #111;
+  background-color: var(--background);
   background-image:
     repeating-linear-gradient(
       45deg,
@@ -725,21 +1317,13 @@ body {
   padding: 0;
   display: flex;
   flex-direction: column;
-  color: #f0f0f0;
+  color: var(--text-light);
   font-family: sans-serif;
   line-height: 1.6;
   background: transparent;
 }
 
-/* Ensure main content stretches to fill available space */
-main {
-  flex: 1 0 auto;
-  width: 100%;
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 1rem;
-  box-sizing: border-box;
-}
+/* Main content styles are defined once at the top of the file */
 
 main > section {
   width: 100%;
@@ -753,12 +1337,7 @@ main > section {
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
-section > article {
-  background: transparent;
-  padding: 0;
-  margin: 0;
-  box-shadow: none;
-}
+/* Section articles use the article--plain class */
 
 /* Fallback for browsers that don't support flexbox */
 @supports not (display: flex) {
@@ -777,6 +1356,7 @@ section > article {
 
 header h1 {
   animation: slideDown 0.6s ease-out;
+  margin: 1rem 0; /* Equal top and bottom margins to match other headings */
 }
 
 header h1::before {
@@ -798,35 +1378,6 @@ footer p {
   opacity: 0.8;
 }
 
-.dropzone::before {
-  animation: emojiBounce 0.6s ease-out;
-  content: "📤 ";
-  font-size: 1.2em;
-  display: block;
-  margin-bottom: 0.5em;
-}
-
-.dropzone {
-  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
-  border: 2px dashed #999;
-  padding: 2em;
-  text-align: center;
-  cursor: pointer;
-}
-
-.dropzone.dragover {
-  background: #e0f7ff;
-  border-color: #00aaff;
-  box-shadow: 0 0 0.4em rgba(0, 170, 255, 0.4);
-  background: #f0f8ff;
-  border-color: #00aaff;
-}
-
-.dropzone.pulse,
-.dropzone.pulse::before {
-  box-shadow: 0 0 0.6em rgba(0, 170, 255, 0.6);
-  animation: pulse 0.6s ease-in-out;
-}
 
 /* Reusable glowing pulse */
 .pulse-glow {
@@ -843,7 +1394,7 @@ footer p {
   margin-top: 0.8em;
   font-size: 0.95em;
   text-align: center;
-  color: #555;
+  color: var(--text-light);
 }
 
 .emoji-bounce {
@@ -890,7 +1441,7 @@ footer p {
 }
 
 .error-toast {
-  color: #b22222;
+  color: var(--error);
   background: #fcebea;
   border: 1px solid #f5c6cb;
   padding: 0.5em 1em;
@@ -932,8 +1483,8 @@ a.button[aria-label]::after {
   left: 50%;
   bottom: 100%;
   transform: translateX(-50%);
-  background: #333;
-  color: #fff;
+  background: var(--audio-metal, #333);
+  color: var(--text-light);
   font-size: 0.75em;
   padding: 0.3em 0.6em;
   border-radius: 4px;
@@ -951,8 +1502,7 @@ a.button[aria-label]:hover::after {
 a.button {
   display: inline-block;
   background: #2e8b57;
-  color: white;
-  padding: 0.4em 1em;
+  color: var(--text-light);
   margin-top: 0.5em;
   border-radius: 4px;
   text-decoration: none;
@@ -976,17 +1526,17 @@ section article.stream-page {
 }
 
 .stream-player {
-  background: #1a1a1a;
+  background: var(--background);
   border: 1px solid #444;
   border-radius: 8px;
   position: relative;
-  color: #d3d3d3;
+  color: var(--text-light);
   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
 }
 
 .stream-player h3 {
   margin: 0 0 15px 0;
-  color: #d3d3d3;
+  color: var(--text-light);
 }
 
 .stream-audio {
@@ -1010,7 +1560,7 @@ section article.stream-page {
   background: none;
   border: none;
   box-shadow: none;
-  color: #f0f0f0;
+  color: var(--text-light);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1022,35 +1572,49 @@ section article.stream-page {
 
 .stream-info {
   margin: 0;
-  color: #666;
+  color: var(--text-muted);
   font-size: 0.9em;
 }
 
 /* Stream list styles */
-#stream-page article {
-  background: transparent;
-  border: none;
-  border-radius: 0;
-  box-shadow: none;
-}
+/* Stream page articles use the article--plain class */
 
 /* User upload area styles */
 #user-upload-area {
   width: 100%;
   margin: 1.5rem auto;
-  padding: 1.5rem;
-  background: var(--crt-screen);
-  border: 1px solid #444;
+  padding: 1.6875rem; /* 27px - matches article padding */
+  background: var(--surface);
+  border: 1px solid var(--border-color, #2a2a2a);
   border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   text-align: center;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.2s ease; /* Matches article transition timing */
+  position: relative;
+  color: var(--text-light); /* Match article text color */
 }
 
-#user-upload-area:hover {
-  transform: translateY(-2px);
-  background: linear-gradient(45deg, rgba(255, 102, 0, 0.05), rgba(255, 102, 0, 0.02));
-  border: 1px solid #ff6600;
+#user-upload-area::before {
+  animation: emojiBounce 0.6s ease-out;
+  content: "📤 ";
+  font-size: 1.2em;
+  display: block;
+  margin-bottom: 0.5em;
+}
+
+/* Removed duplicate hover effect - now using the shared hover effect below */
+
+#user-upload-area.dragover {
+  background: #e0f7ff;
+  border-color: var(--info);
+  box-shadow: 0 0 0.4em rgba(0, 170, 255, 0.4);
+}
+
+#user-upload-area.pulse,
+#user-upload-area.pulse::before {
+  box-shadow: 0 0 0.6em rgba(0, 170, 255, 0.6);
+  animation: pulse 0.6s ease-in-out;
 }
 
 #user-upload-area p {
@@ -1069,11 +1633,11 @@ section article.stream-page {
 }
 
 #stream-list > li {
-  background: #222;
+  background: var(--audio-bg, #222);
   border: 1px solid #444;
   border-radius: 8px;
   overflow: hidden;
-  transition: transform 0.2s ease, border-color 0.2s ease;
+  transition: transform 0.2s ease;
   margin: 0;
   width: 100%;
   box-sizing: border-box;
@@ -1081,7 +1645,19 @@ section article.stream-page {
 
 #stream-list > li:hover {
   transform: translateY(-2px);
-  border-color: #ff6600;
+  border-color: var(--warning);
+}
+
+/* No hover effect for logout button */
+#logout-button,
+#logout-button:hover,
+#logout-button:active {
+  cursor: pointer;
+  transform: none !important;
+  box-shadow: none !important;
+  background: transparent !important;
+  color: var(--warning) !important;
+  border-color: var(--warning) !important;
 }
 
 .stream-player {
@@ -1093,15 +1669,20 @@ section article.stream-page {
   transition: all 0.25s ease;
 }
 
-.stream-player:hover {
+/* Consistent hover effects for all interactive elements */
+article:hover,
+.stream-player:hover,
+#user-upload-area:hover {
   transform: translateY(-2px);
-  border-color: #ff6600;
-  background: linear-gradient(45deg, rgba(255, 102, 0, 0.05), rgba(255, 102, 0, 0.02));
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  border-color: var(--border-hover, #444);
+  background: var(--surface); /* Match the normal state background */
+  transition: all 0.2s ease;
 }
 
 .stream-player h3 {
   margin: 0 0 1.25rem;
-  color: #fff;
+  color: var(--text-light);
   font-size: 1.3rem;
   font-weight: 500;
   text-align: center;
@@ -1112,8 +1693,8 @@ section article.stream-page {
 
 .stream-info {
   margin: 1.25rem 0 0;
-  color: #a0a0a0 !important;
-  font-size: 0.9rem !important;
+  color: var(--text-muted);
+  font-size: 0.9rem;
   text-align: center;
   line-height: 1.6;
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
@@ -1142,20 +1723,20 @@ section article.stream-page {
 }
 
 #stream-list a {
-  color: #4dabf7;
+  color: var(--info);
   text-decoration: none;
   font-weight: 500;
   transition: color 0.2s ease;
 }
 
 #stream-list a:hover {
-  color: #74c0fc;
+  color: var(--link-hover);
   text-decoration: underline;
 }
 
 #stream-list .stream-meta {
   display: block;
-  color: #888;
+  color: var(--text-muted);
   font-size: 0.85rem;
   margin-top: 0.5rem;
 }
@@ -1187,11 +1768,9 @@ section article.stream-page {
 
 /* Responsive adjustments */
 @media (max-width: 767px) {
-  #stream-page article {
+  /* Articles with plain style on mobile */
+  .article--plain {
     padding: 1rem;
-    border: none;
-    background: transparent;
-    box-shadow: none;
   }
   
   #stream-list {
@@ -1203,28 +1782,16 @@ section article.stream-page {
   }
 }
 
-/* Section h2 headers */
-main > section > h2 {
-  text-align: center;
-  margin: 0;
-  padding: 1rem 1.5rem;
-  color: #f0f0f0;
-  font-size: 1.8rem;
-  font-weight: 500;
-}
+/* Section headers use section-header class */
 
-/* Article styles consolidated above */
-
-/* Stream page specific styles */
-#stream-page > article {
+/* Stream page articles use article--plain and article--wide classes */
+.article--stream {
   max-width: 1200px; /* Wider for the stream list */
   padding: 2rem 1rem; /* Match padding of other sections */
-  margin: 0 auto; /* Ensure centering */
 }
 
-/* Full width for form elements */
-#register-page article,
-#me-page > article {
+/* Full width articles use the article--wide class */
+.article--wide {
   max-width: 100%;
 }
 
@@ -1235,33 +1802,12 @@ main > section:has(> h2:only-child) {
 
 /* Space between h2 and logout button is now handled inline */
 
-section article a[href^="mailto"]::before {
-  content: "✉️ ";
-  margin-right: 0.3em;
-}
-
-section article a[href^="mailto"] {
-  display: inline-block;
-  background: #2e8b57;
-  color: white;
-  padding: 0.3em 0.9em;
-  margin-top: 0.5em;
-  border-radius: 4px;
-  text-decoration: none;
-  font-weight: bold;
-  transition: background 0.2s ease;
-}
-
-section article a[href^="mailto"]:hover {
-  background: #256b45;
-}
-
 code {
-  background: #1a1a1a;
+  background: var(--background);
   padding: 0.2em 0.4em;
   border-radius: 4px;
   font-family: 'Courier New', monospace;
-  color: #fff;
+  color: var(--text-light);
   text-shadow: 0 0 4px rgba(0, 255, 0, 0.1);
 }
 
@@ -1318,7 +1864,6 @@ main::before {
 nav#guest-dashboard.dashboard-nav,
 nav#user-dashboard.dashboard-nav {
   width: fit-content;
-  margin: 20px auto;
   padding: 10px;
   background: var(--crt-screen);
   border: 1px solid var(--crt-border);
@@ -1335,7 +1880,7 @@ nav.dashboard-nav a {
 }
 
 nav.dashboard-nav a:hover {
-  color: #ff6600;
+  color: var(--warning);
 }
 
 /* Toast notification styles */
@@ -1354,7 +1899,7 @@ nav.dashboard-nav a:hover {
 }
 
 .footer-links a:hover {
-  color: #ff6600;
+  color: var(--warning);
 }
 
 
@@ -1368,11 +1913,15 @@ footer p.footer-hint a {
 }
 
 footer p.footer-hint a:hover {
-  color: #ff6600;
+  color: var(--warning);
 }
 
 @media (min-width: 960px) {
   /* Set max-width for content sections */
+  /* Wide articles remain full width on mobile */
+  .article--wide {
+    padding: 1.5rem;
+  }
   #register-page > article,
   #me-page > article,
   #user-upload-area {
@@ -1488,10 +2037,10 @@ footer p.footer-hint a:hover {
 }
 
 .logout-btn:hover {
-  background: #222;
+  background: var(--audio-bg, #222);
   transform: scale(1.05);
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
-  border-color: #666;
+  border-color: var(--border-lighter);
 }
 
 .logout-btn:active {
diff --git a/static/test-audio-player.html b/static/test-audio-player.html
index 42620f3..8976547 100644
--- a/static/test-audio-player.html
+++ b/static/test-audio-player.html
@@ -5,25 +5,43 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Audio Player Test</title>
   <style>
+    :root {
+      --success: #2e8b57;
+      --error: #ff4444;
+      --border: #444;
+      --text-color: #f0f0f0;
+      --surface: #2a2a2a;
+    }
+    
     body {
       font-family: Arial, sans-serif;
       max-width: 800px;
       margin: 0 auto;
       padding: 20px;
       line-height: 1.6;
+      background: #1a1a1a;
+      color: var(--text-color);
     }
     .test-case {
       margin-bottom: 20px;
       padding: 15px;
-      border: 1px solid #ddd;
+      border: 1px solid var(--border);
       border-radius: 5px;
+      background: var(--surface);
     }
-    .success { color: green; }
-    .error { color: red; }
+    .success { color: var(--success); }
+    .error { color: var(--error); }
     button {
       padding: 8px 16px;
       margin: 5px;
       cursor: pointer;
+      background: #4a6fa5;
+      color: white;
+      border: none;
+      border-radius: 4px;
+    }
+    button:hover {
+      background: #3a5a8c;
     }
     #log {
       margin-top: 20px;
diff --git a/static/test-audio.html b/static/test-audio.html
index e59cee6..60b781a 100644
--- a/static/test-audio.html
+++ b/static/test-audio.html
@@ -5,25 +5,43 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Audio Player Test</title>
   <style>
+    :root {
+      --success: #2e8b57;
+      --error: #ff4444;
+      --border: #444;
+      --text-color: #f0f0f0;
+      --surface: #2a2a2a;
+    }
+    
     body {
       font-family: Arial, sans-serif;
       max-width: 800px;
       margin: 0 auto;
       padding: 20px;
       line-height: 1.6;
+      background: #1a1a1a;
+      color: var(--text-color);
     }
     .test-case {
       margin-bottom: 20px;
       padding: 15px;
-      border: 1px solid #ddd;
+      border: 1px solid var(--border);
       border-radius: 5px;
+      background: var(--surface);
     }
-    .success { color: green; }
-    .error { color: red; }
+    .success { color: var(--success); }
+    .error { color: var(--error); }
     button {
       padding: 8px 16px;
       margin: 5px;
       cursor: pointer;
+      background: #4a6fa5;
+      color: white;
+      border: none;
+      border-radius: 4px;
+    }
+    button:hover {
+      background: #3a5a8c;
     }
     #log {
       margin-top: 20px;
diff --git a/static/upload.js b/static/upload.js
index d3bc858..de1b960 100644
--- a/static/upload.js
+++ b/static/upload.js
@@ -112,8 +112,10 @@ document.addEventListener('DOMContentLoaded', () => {
   };
 
   // Function to fetch and display uploaded files
-  async function fetchAndDisplayFiles(uid) {
-    console.log('[DEBUG] fetchAndDisplayFiles called with uid:', uid);
+  async function fetchAndDisplayFiles(uidFromParam) {
+    console.log('[UPLOAD] fetchAndDisplayFiles called with uid:', uidFromParam);
+    
+    // Get the file list element
     const fileList = document.getElementById('file-list');
     if (!fileList) {
       const errorMsg = 'File list element not found in DOM';
@@ -121,12 +123,47 @@ document.addEventListener('DOMContentLoaded', () => {
       return showErrorInUI(errorMsg);
     }
 
+    // Get UID from parameter, localStorage, or cookie
+    const uid = uidFromParam || localStorage.getItem('uid') || getCookie('uid');
+    const authToken = localStorage.getItem('authToken');
+    const headers = {
+      'Accept': 'application/json',
+    };
+  
+    // Include auth token in headers if available, but don't fail if it's not
+    // The server should handle both token-based and UID-based auth
+    if (authToken) {
+      headers['Authorization'] = `Bearer ${authToken}`;
+    } else {
+      console.debug('[UPLOAD] No auth token available, using UID-only authentication');
+    }
+
+    console.log('[UPLOAD] Auth state - UID:', uid, 'Token exists:', !!authToken);
+
+    if (!uid) {
+      console.error('[UPLOAD] No UID found in any source');
+      fileList.innerHTML = '<li class="error-message">User session expired. Please refresh the page.</li>';
+      return;
+    }
+
+    // Log the authentication method being used
+    if (!authToken) {
+      console.debug('[UPLOAD] No auth token found, using UID-only authentication');
+    } else {
+      console.debug('[UPLOAD] Using token-based authentication');
+    }
+
     // Show loading state
-    fileList.innerHTML = '<div style="padding: 10px; color: #888; font-style: italic;">Loading files...</div>';
+    fileList.innerHTML = '<li class="loading-message">Loading files...</li>';
 
     try {
       console.log(`[DEBUG] Fetching files for user: ${uid}`);
-      const response = await fetch(`/me/${uid}`);
+      const response = await fetch(`/me/${uid}`, {
+        headers: {
+          'Authorization': authToken ? `Bearer ${authToken}` : '',
+          'Content-Type': 'application/json',
+        },
+      });
       console.log('[DEBUG] Response status:', response.status, response.statusText);
       
       if (!response.ok) {
@@ -152,21 +189,63 @@ document.addEventListener('DOMContentLoaded', () => {
           const displayName = file.original_name || file.name;
           const isRenamed = file.original_name && file.original_name !== file.name;
           return `
-            <div style="display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid #2a2a2a;">
-              <div style="flex: 1; min-width: 0;">
-                <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${displayName}">
-                  ${displayName}
-                  ${isRenamed ? `<div style="font-size: 0.8em; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="Stored as: ${file.name}">${file.name}</div>` : ''}
-                </div>
+            <li class="file-item" data-filename="${file.name}">
+              <div class="file-name" title="${displayName}">
+                ${displayName}
+                ${isRenamed ? `<div class="stored-as" title="Stored as: ${file.name}">${file.name} <button class="delete-file" data-filename="${file.name}" title="Delete file">🗑️</button></div>` : 
+                  `<button class="delete-file" data-filename="${file.name}" title="Delete file">🗑️</button>`}
               </div>
-              <span style="color: #888; white-space: nowrap; margin-left: 10px;">${sizeMB} MB</span>
-            </div>
+              <span class="file-size">${sizeMB} MB</span>
+            </li>
           `;
         }).join('');
       } else {
-        fileList.innerHTML = '<div style="padding: 5px 0; color: #888; font-style: italic;">No files uploaded yet</div>';
+        fileList.innerHTML = '<li class="empty-message">No files uploaded yet</li>';
       }
       
+      // Add event listeners to delete buttons
+      document.querySelectorAll('.delete-file').forEach(button => {
+        button.addEventListener('click', async (e) => {
+          e.stopPropagation();
+          const filename = button.dataset.filename;
+          if (confirm(`Are you sure you want to delete ${filename}?`)) {
+            try {
+              // Get the auth token from the cookie
+              const token = document.cookie
+                .split('; ')
+                .find(row => row.startsWith('sessionid='))
+                ?.split('=')[1];
+              
+              if (!token) {
+                throw new Error('Not authenticated');
+              }
+              
+              const response = await fetch(`/delete/${filename}`, {
+                method: 'DELETE',
+                headers: {
+                  'Authorization': `Bearer ${token}`,
+                  'Content-Type': 'application/json',
+                },
+              });
+              
+              if (!response.ok) {
+                const errorData = await response.json().catch(() => ({}));
+                throw new Error(errorData.detail || `Failed to delete file: ${response.statusText}`);
+              }
+              
+              // Refresh the file list
+              const uid = document.body.dataset.userUid;
+              if (uid) {
+                fetchAndDisplayFiles(uid);
+              }
+            } catch (error) {
+              console.error('Error deleting file:', error);
+              alert('Failed to delete file. Please try again.');
+            }
+          }
+        });
+      });
+      
       // Update quota display if available
       if (data.quota !== undefined) {
         const bar = document.getElementById('quota-bar');
@@ -176,7 +255,7 @@ document.addEventListener('DOMContentLoaded', () => {
           quotaSec.hidden = false;
           bar.value = data.quota;
           bar.max = 100;
-          text.textContent = `${data.quota.toFixed(1)} MB used`;
+          text.textContent = `${data.quota.toFixed(1)} MB`;
         }
       }
     } catch (error) {
@@ -193,15 +272,15 @@ document.addEventListener('DOMContentLoaded', () => {
           margin: 5px 0;
           background: #2a0f0f;
           border-left: 3px solid #f55;
-          color: #ff9999;
+          color: var(--error-hover);
           font-family: monospace;
           font-size: 0.9em;
           white-space: pre-wrap;
           word-break: break-word;
         ">
-          <div style="font-weight: bold; color: #f55;">Error loading files</div>
+          <div style="font-weight: bold; color: var(--error);">Error loading files</div>
           <div style="margin-top: 5px;">${message}</div>
-          <div style="margin-top: 10px; font-size: 0.8em; color: #888;">
+          <div style="margin-top: 10px; font-size: 0.8em; color: var(--text-muted);">
             Check browser console for details
           </div>
         </div>
@@ -217,6 +296,14 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   }
 
+  // Helper function to get cookie value by name
+  function getCookie(name) {
+    const value = `; ${document.cookie}`;
+    const parts = value.split(`; ${name}=`);
+    if (parts.length === 2) return parts.pop().split(';').shift();
+    return null;
+  }
+
   // Export functions for use in other modules
   window.upload = upload;
   window.fetchAndDisplayFiles = fetchAndDisplayFiles;
diff --git a/upload.py b/upload.py
index ba1d026..0878f49 100644
--- a/upload.py
+++ b/upload.py
@@ -6,15 +6,17 @@ from slowapi.util import get_remote_address
 from slowapi.errors import RateLimitExceeded
 from pathlib import Path
 from convert_to_opus import convert_to_opus
-from database import get_db
 from models import UploadLog, UserQuota, User
 from sqlalchemy import select
+from database import get_db
 
 limiter = Limiter(key_func=get_remote_address)
 router = APIRouter()
 #   # Not needed for SlowAPI ≥0.1.5
 DATA_ROOT = Path("./data")
 
+
+
 @limiter.limit("5/minute")
 @router.post("/upload")
 async def upload(request: Request, db = Depends(get_db), uid: str = Form(...), file: UploadFile = Form(...)):