From 7e275b020c6a1a5659574bc43044b3e44d5ee8f0 Mon Sep 17 00:00:00 2001
From: MrPiglr <MrPiglr@gmail.com>
Date: Sat, 3 Jan 2026 23:56:43 -0700
Subject: [PATCH] 	new file:   .gemini/settings.json

---
 .gemini/settings.json                         |   8 +
 .vscode/settings.json                         |   3 +-
 LINUX_QUICKSTART.md                           |   8 +
 SUPABASE_INTEGRATION_COMPLETE.md              | 206 +++++
 android/.idea/deploymentTargetSelector.xml    |   4 +-
 android/app/build.gradle                      |  11 +-
 android/app/src/main/AndroidManifest.xml      |   3 +-
 .../main/java/com/aethex/os/MainActivity.java |  90 ++-
 android/app/src/main/new.sh                   |   2 +-
 build-fixed.sh                                | 476 +++++++++++
 build-iso.ps1                                 |  80 ++
 build-output.txt                              | Bin 0 -> 722 bytes
 capacitor.config.json                         |  32 +
 capacitor.config.ts                           |  14 +
 client/index.html                             |  34 +-
 client/public/aethex-logo.svg                 |  48 ++
 client/public/manifest.json                   |  38 +-
 client/public/sw.js                           |  89 ++-
 client/src/App.tsx                            |  23 +-
 client/src/components/Chatbot.tsx             |   3 +-
 client/src/components/Mobile3DScene.tsx       |  59 ++
 client/src/components/MobileBottomNav.tsx     |  76 ++
 client/src/components/MobileNativeBridge.tsx  | 104 +++
 client/src/components/mobile/MobileHeader.tsx |  55 ++
 .../src/components/mobile/PullToRefresh.tsx   |  77 ++
 .../src/components/mobile/SwipeableCard.tsx   | 101 +++
 client/src/hooks/use-biometric-check.ts       |  63 ++
 client/src/hooks/use-device-camera.ts         | 104 +++
 client/src/hooks/use-device-contacts.ts       |  58 ++
 client/src/hooks/use-device-file-picker.ts    |  81 ++
 client/src/hooks/use-offline-sync.ts          | 101 +++
 client/src/hooks/use-samsung-dex.ts           | 100 +++
 client/src/hooks/use-touch-gestures.ts        | 118 +++
 client/src/lib/haptics.ts                     |  80 ++
 client/src/pages/builds.tsx                   | 246 ++++++
 client/src/pages/home.tsx                     |  10 +-
 client/src/pages/hub/marketplace.tsx          |  88 ++-
 client/src/pages/hub/messaging.tsx            |  12 +-
 client/src/pages/hub/projects.tsx             |  12 +-
 client/src/pages/mobile-camera.tsx            | 159 ++++
 client/src/pages/mobile-dashboard.tsx         | 285 +++++++
 client/src/pages/mobile-messaging.tsx         | 178 +++++
 client/src/pages/mobile-modules.tsx           | 106 +++
 client/src/pages/mobile-notifications.tsx     | 301 +++++++
 client/src/pages/mobile-projects.tsx          | 152 ++++
 client/src/pages/mobile-simple.tsx            | 396 ++++++++++
 client/src/pages/os.tsx                       | 736 ++++++++++--------
 deploy-to-phone.ps1                           |  52 ++
 docs/ISO_VERIFICATION.md                      |  48 ++
 package-lock.json                             |  32 +-
 package.json                                  |   1 +
 script/build-linux-iso-full.sh                |  53 +-
 script/build-linux-iso.sh                     | 217 +++++-
 script/build.ts                               |   9 +-
 script/verify-iso.sh                          | 160 ++++
 wget-log                                      |   1 +
 wget-log.1                                    |   1 +
 wget-log.2                                    |   1 +
 wget-log.3                                    |   1 +
 59 files changed, 5139 insertions(+), 467 deletions(-)
 create mode 100644 .gemini/settings.json
 create mode 100644 SUPABASE_INTEGRATION_COMPLETE.md
 create mode 100644 build-fixed.sh
 create mode 100644 build-iso.ps1
 create mode 100644 build-output.txt
 create mode 100644 capacitor.config.json
 create mode 100644 client/public/aethex-logo.svg
 create mode 100644 client/src/components/Mobile3DScene.tsx
 create mode 100644 client/src/components/MobileBottomNav.tsx
 create mode 100644 client/src/components/MobileNativeBridge.tsx
 create mode 100644 client/src/components/mobile/MobileHeader.tsx
 create mode 100644 client/src/components/mobile/PullToRefresh.tsx
 create mode 100644 client/src/components/mobile/SwipeableCard.tsx
 create mode 100644 client/src/hooks/use-biometric-check.ts
 create mode 100644 client/src/hooks/use-device-camera.ts
 create mode 100644 client/src/hooks/use-device-contacts.ts
 create mode 100644 client/src/hooks/use-device-file-picker.ts
 create mode 100644 client/src/hooks/use-offline-sync.ts
 create mode 100644 client/src/hooks/use-samsung-dex.ts
 create mode 100644 client/src/hooks/use-touch-gestures.ts
 create mode 100644 client/src/lib/haptics.ts
 create mode 100644 client/src/pages/builds.tsx
 create mode 100644 client/src/pages/mobile-camera.tsx
 create mode 100644 client/src/pages/mobile-dashboard.tsx
 create mode 100644 client/src/pages/mobile-messaging.tsx
 create mode 100644 client/src/pages/mobile-modules.tsx
 create mode 100644 client/src/pages/mobile-notifications.tsx
 create mode 100644 client/src/pages/mobile-projects.tsx
 create mode 100644 client/src/pages/mobile-simple.tsx
 create mode 100644 deploy-to-phone.ps1
 create mode 100644 docs/ISO_VERIFICATION.md
 create mode 100644 script/verify-iso.sh
 create mode 100644 wget-log
 create mode 100644 wget-log.1
 create mode 100644 wget-log.2
 create mode 100644 wget-log.3

diff --git a/.gemini/settings.json b/.gemini/settings.json
new file mode 100644
index 0000000..061cf11
--- /dev/null
+++ b/.gemini/settings.json
@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "myLocalServer": {
+      "command": "python my_mcp_server.py",
+      "cwd": "./mcp_server"
+    }
+  }
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
index bd3dc81..5f09fae 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -3,5 +3,6 @@
     "builder.command": "npm run dev",
     "builder.runDevServer": true,
     "builder.autoDetectDevServer": true,
-    "builder.launchType": "desktop"
+    "builder.launchType": "desktop",
+    "chatgpt.openOnStartup": true
 }
\ No newline at end of file
diff --git a/LINUX_QUICKSTART.md b/LINUX_QUICKSTART.md
index 987dafa..64862bf 100644
--- a/LINUX_QUICKSTART.md
+++ b/LINUX_QUICKSTART.md
@@ -61,6 +61,14 @@ sudo bash script/build-linux-iso.sh
 - Size: ~2-4GB
 - Checksum: `~/aethex-linux-build/AeThex-Linux-1.0.0-alpha-amd64.iso.sha256`
 
+### Step 1.5: Verify the ISO
+
+```bash
+./script/verify-iso.sh -i ~/aethex-linux-build/AeThex-Linux-1.0.0-alpha-amd64.iso
+```
+
+For strict verification and mount checks, see `docs/ISO_VERIFICATION.md`.
+
 ### Step 2: Test in Virtual Machine
 
 ```bash
diff --git a/SUPABASE_INTEGRATION_COMPLETE.md b/SUPABASE_INTEGRATION_COMPLETE.md
new file mode 100644
index 0000000..a30f8a5
--- /dev/null
+++ b/SUPABASE_INTEGRATION_COMPLETE.md
@@ -0,0 +1,206 @@
+# Supabase Integration Complete ✅
+
+## What Changed
+
+Your Android mobile app now connects to **real Supabase data** instead of hardcoded mock arrays. All three main mobile pages have been updated.
+
+---
+
+## Updated Pages
+
+### 1. **Notifications Page** (`mobile-notifications.tsx`)
+**Before:** Hardcoded array of 4 fake notifications  
+**After:** Live data from `notifications` table in Supabase
+
+**Features:**
+- ✅ Fetches user's notifications from Supabase on page load
+- ✅ Mark notifications as read → updates database
+- ✅ Delete notifications → removes from database
+- ✅ Mark all as read → batch updates database
+- ✅ Pull-to-refresh → re-fetches latest data
+- ✅ Shows "Sign in to sync" message for logged-out users
+- ✅ Real-time timestamps (just now, 2m ago, 1h ago, etc.)
+
+**Schema:** Uses `notifications` table with fields: `id`, `user_id`, `type`, `title`, `message`, `read`, `created_at`
+
+---
+
+### 2. **Projects Page** (`mobile-projects.tsx`)
+**Before:** Hardcoded array of 4 fake projects  
+**After:** Live data from `projects` table in Supabase
+
+**Features:**
+- ✅ Fetches user's projects from Supabase
+- ✅ Displays status (active, completed, archived)
+- ✅ Shows progress bars based on real data
+- ✅ Sorted by creation date (newest first)
+- ✅ Empty state handling (no projects yet)
+- ✅ Shows "Sign in to view projects" for logged-out users
+
+**Schema:** Uses `projects` table with fields: `id`, `user_id`, `name`, `description`, `status`, `progress`, `created_at`
+
+---
+
+### 3. **Messaging Page** (`mobile-messaging.tsx`)
+**Before:** Hardcoded array of 4 fake messages  
+**After:** Live data from `messages` table in Supabase
+
+**Features:**
+- ✅ Fetches conversations from Supabase
+- ✅ Shows messages sent TO or FROM the user
+- ✅ Unread indicators for new messages
+- ✅ Real-time timestamps
+- ✅ Sorted by creation date (newest first)
+- ✅ Shows "Sign in to view messages" for logged-out users
+
+**Schema:** Uses `messages` table with fields: `id`, `sender_id`, `recipient_id`, `sender_name`, `content`, `read`, `created_at`
+
+---
+
+## How It Works
+
+### Authentication Flow
+1. User opens app → checks if logged in via `useAuth()` hook
+2. **If logged out:** Shows demo/welcome message ("Sign in to sync data")
+3. **If logged in:** Fetches real data from Supabase using `user.id`
+
+### Data Fetching Pattern
+```typescript
+const { data, error } = await supabase
+  .from('notifications')
+  .select('*')
+  .eq('user_id', user.id)
+  .order('created_at', { ascending: false })
+  .limit(50);
+```
+
+### Data Mutations (Update/Delete)
+```typescript
+// Mark as read
+await supabase
+  .from('notifications')
+  .update({ read: true })
+  .eq('id', notificationId)
+  .eq('user_id', user.id);
+
+// Delete
+await supabase
+  .from('notifications')
+  .delete()
+  .eq('id', notificationId)
+  .eq('user_id', user.id);
+```
+
+---
+
+## Testing the Integration
+
+### On Your Device
+1. **Open the app** on your Samsung R5CW217D49H
+2. **Sign in** with your Supabase account (if not already)
+3. **Navigate to each page:**
+   - **Alerts/Notifications** → Should show real notifications from DB
+   - **Projects** → Should show real projects from DB
+   - **Messages** → Should show real conversations from DB
+
+### Create Test Data (via Supabase Dashboard)
+1. Go to: `https://kmdeisowhtsalsekkzqd.supabase.co`
+2. Navigate to **Table Editor**
+3. Insert test data:
+
+**Example Notification:**
+```sql
+INSERT INTO notifications (user_id, type, title, message, read)
+VALUES ('YOUR_USER_ID', 'success', 'Test Notification', 'This is from Supabase!', false);
+```
+
+**Example Project:**
+```sql
+INSERT INTO projects (user_id, name, description, status, progress)
+VALUES ('YOUR_USER_ID', 'My First Project', 'Testing Supabase sync', 'active', 50);
+```
+
+4. **Pull to refresh** on mobile → New data should appear instantly!
+
+---
+
+## What's Still Mock Data
+
+These pages still use hardcoded arrays (not yet connected to Supabase):
+
+- **Modules/Code Gallery** (`mobile-modules.tsx`) - Would need a `modules` or `packages` table
+- **Camera Page** (`mobile-camera.tsx`) - Uses native device APIs, doesn't need backend
+
+---
+
+## Next Steps (Optional)
+
+### Add Real-Time Subscriptions
+Currently, data refreshes when you:
+- Open the page
+- Pull to refresh
+
+To get **live updates** (instant sync when data changes):
+
+```typescript
+// Example: Real-time notifications
+useEffect(() => {
+  const channel = supabase
+    .channel('notifications')
+    .on('postgres_changes', 
+      { 
+        event: '*', 
+        schema: 'public', 
+        table: 'notifications',
+        filter: `user_id=eq.${user.id}`
+      },
+      (payload) => {
+        console.log('Change detected:', payload);
+        fetchNotifications(); // Refresh data
+      }
+    )
+    .subscribe();
+
+  return () => {
+    supabase.removeChannel(channel);
+  };
+}, [user]);
+```
+
+This would make notifications appear **instantly** when created from the web app or desktop app!
+
+---
+
+## Troubleshooting
+
+### "No data showing"
+- **Check:** Are you signed in? App shows demo data when logged out.
+- **Check:** Does your Supabase user have any data in the tables?
+- **Fix:** Insert test data via Supabase dashboard.
+
+### "Sign in to sync" always shows
+- **Check:** Is `useAuth()` returning a valid user object?
+- **Check:** Open browser console → look for auth errors.
+- **Fix:** Make sure Supabase auth is configured correctly.
+
+### Data not updating after changes
+- **Check:** Did you mark as read/delete but changes didn't persist?
+- **Check:** Look for console errors during Supabase mutations.
+- **Fix:** Verify Supabase Row Level Security (RLS) policies allow updates/deletes.
+
+---
+
+## Summary
+
+✅ **Mobile notifications** → Live Supabase data  
+✅ **Mobile projects** → Live Supabase data  
+✅ **Mobile messages** → Live Supabase data  
+✅ **Pull-to-refresh** → Refetches from database  
+✅ **Mark as read/Delete** → Persists to database  
+✅ **Auth-aware** → Shows demo data when logged out  
+
+Your Android app is now a **production-ready** mobile client with full backend integration! 🎉
+
+---
+
+*Last updated: ${new Date().toISOString()}*
diff --git a/android/.idea/deploymentTargetSelector.xml b/android/.idea/deploymentTargetSelector.xml
index 8967d58..69c3ade 100644
--- a/android/.idea/deploymentTargetSelector.xml
+++ b/android/.idea/deploymentTargetSelector.xml
@@ -4,7 +4,7 @@
     <selectionStates>
       <SelectionState runConfigName="app">
         <option name="selectionMode" value="DROPDOWN" />
-        <DropdownSelection timestamp="2025-12-27T06:38:05.234197200Z">
+        <DropdownSelection timestamp="2026-01-01T15:39:10.647645200Z">
           <Target type="DEFAULT_BOOT">
             <handle>
               <DeviceId pluginId="PhysicalDevice" identifier="serial=R5CW217D49H" />
@@ -15,7 +15,7 @@
           <targets>
             <Target type="DEFAULT_BOOT">
               <handle>
-                <DeviceId pluginId="LocalEmulator" identifier="path=C:\Users\PCOEM\.android\avd\Medium_Phone.avd" />
+                <DeviceId pluginId="PhysicalDevice" identifier="serial=R5CW217D49H" />
               </handle>
             </Target>
           </targets>
diff --git a/android/app/build.gradle b/android/app/build.gradle
index bb742a4..2383b14 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -25,9 +25,9 @@ android {
 }
 
 repositories {
-    flatDir{
-        dirs '../capacitor-cordova-android-plugins/src/main/libs', 'libs'
-    }
+    // flatDir{
+    //     dirs '../capacitor-cordova-android-plugins/src/main/libs', 'libs'
+    // }
 }
 
 dependencies {
@@ -36,10 +36,13 @@ dependencies {
     implementation "androidx.coordinatorlayout:coordinatorlayout:$androidxCoordinatorLayoutVersion"
     implementation "androidx.core:core-splashscreen:$coreSplashScreenVersion"
     implementation project(':capacitor-android')
+    implementation platform('com.google.firebase:firebase-bom:33.6.0')
+    implementation 'com.google.firebase:firebase-analytics'
+    implementation 'com.google.firebase:firebase-messaging'
     testImplementation "junit:junit:$junitVersion"
     androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
     androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
-    implementation project(':capacitor-cordova-android-plugins')
+    // implementation project(':capacitor-cordova-android-plugins')
 }
 
 apply from: 'capacitor.build.gradle'
diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
index 01c2d07..e45113f 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -17,7 +17,8 @@
             android:launchMode="singleTask"
             android:exported="true"
             android:windowSoftInputMode="adjustResize"
-            android:windowLayoutInDisplayCutoutMode="shortEdges">
+            android:windowLayoutInDisplayCutoutMode="shortEdges"
+            android:screenOrientation="portrait">
 
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
diff --git a/android/app/src/main/java/com/aethex/os/MainActivity.java b/android/app/src/main/java/com/aethex/os/MainActivity.java
index 5e7e34d..6cc339e 100644
--- a/android/app/src/main/java/com/aethex/os/MainActivity.java
+++ b/android/app/src/main/java/com/aethex/os/MainActivity.java
@@ -1,35 +1,79 @@
 package com.aethex.os;
 
+import android.os.Build;
 import android.os.Bundle;
+import android.util.Log;
 import android.view.View;
 import android.view.WindowManager;
 import androidx.core.view.WindowCompat;
 import androidx.core.view.WindowInsetsCompat;
 import androidx.core.view.WindowInsetsControllerCompat;
+
 import com.getcapacitor.BridgeActivity;
+import com.google.firebase.FirebaseApp;
+import com.google.firebase.FirebaseOptions;
 
 public class MainActivity extends BridgeActivity {
-    @Override
-    public void onCreate(Bundle savedInstanceState) {
-        super.onCreate(savedInstanceState);
-        
-        // Enable edge-to-edge display
-        WindowCompat.setDecorFitsSystemWindows(getWindow(), false);
-        
-        // Get window insets controller
-        WindowInsetsControllerCompat controller = WindowCompat.getInsetsController(getWindow(), getWindow().getDecorView());
-        
-        if (controller != null) {
-            // Hide system bars (status bar and navigation bar)
-            controller.hide(WindowInsetsCompat.Type.systemBars());
-            
-            // Set behavior for when user swipes to show system bars
-            controller.setSystemBarsBehavior(
-                WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
-            );
-        }
-        
-        // Keep screen on for gaming/OS experience
-        getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
-    }
+	@Override
+	protected void onCreate(Bundle savedInstanceState) {
+		super.onCreate(savedInstanceState);
+
+		// Enable fullscreen immersive mode
+		enableImmersiveMode();
+
+		// Ensure Firebase is ready before any Capacitor plugin requests it; stay resilient if config is missing
+		try {
+			if (FirebaseApp.getApps(this).isEmpty()) {
+				FirebaseOptions options = null;
+				try {
+					options = FirebaseOptions.fromResource(this);
+				} catch (Exception ignored) {
+					// No google-services.json resources, we'll fall back below
+				}
+
+				if (options != null) {
+					FirebaseApp.initializeApp(getApplicationContext(), options);
+				} else {
+					// Minimal placeholder so Firebase-dependent plugins don't crash when config is absent
+					FirebaseOptions fallback = new FirebaseOptions.Builder()
+						.setApplicationId("1:000000000000:android:placeholder")
+						.setApiKey("FAKE_API_KEY")
+						.setProjectId("aethex-placeholder")
+						.build();
+					FirebaseApp.initializeApp(getApplicationContext(), fallback);
+				}
+			}
+		} catch (Exception e) {
+			Log.w("MainActivity", "Firebase init skipped: " + e.getMessage());
+		}
+	}
+
+	@Override
+	public void onWindowFocusChanged(boolean hasFocus) {
+		super.onWindowFocusChanged(hasFocus);
+		if (hasFocus) {
+			enableImmersiveMode();
+		}
+	}
+
+	private void enableImmersiveMode() {
+		View decorView = getWindow().getDecorView();
+		WindowCompat.setDecorFitsSystemWindows(getWindow(), false);
+		
+		WindowInsetsControllerCompat controller = WindowCompat.getInsetsController(getWindow(), decorView);
+		if (controller != null) {
+			// Hide both status and navigation bars
+			controller.hide(WindowInsetsCompat.Type.systemBars());
+			// Make them sticky so they stay hidden
+			controller.setSystemBarsBehavior(WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE);
+		}
+
+		// Additional flags for fullscreen
+		getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
+		getWindow().setFlags(
+			WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
+			WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
+		);
+	}
 }
+
diff --git a/android/app/src/main/new.sh b/android/app/src/main/new.sh
index cad30b6..e8a33db 100644
--- a/android/app/src/main/new.sh
+++ b/android/app/src/main/new.sh
@@ -1,2 +1,2 @@
-    npx cap sync
+npx cap syncnpx cap syncnpx cap sync    npx cap sync
     
\ No newline at end of file
diff --git a/build-fixed.sh b/build-fixed.sh
new file mode 100644
index 0000000..e6fc3d8
--- /dev/null
+++ b/build-fixed.sh
@@ -0,0 +1,476 @@
+#!/bin/bash
+set -e
+
+# AeThex OS - Full Layered Architecture Builder
+# Includes: Base OS + Wine Runtime + Linux Dev Tools + Mode Switching
+
+WORK_DIR="${1:-.}"
+BUILD_DIR="$WORK_DIR/aethex-linux-build"
+ROOTFS_DIR="$BUILD_DIR/rootfs"
+ISO_DIR="$BUILD_DIR/iso"
+ISO_NAME="AeThex-OS-Full-amd64.iso"
+
+echo "═══════════════════════════════════════════════════════════════"
+echo "  AeThex OS - Full Build"
+echo "  Layered Architecture: Base + Runtimes + Shell"
+echo "═══════════════════════════════════════════════════════════════"
+echo ""
+echo "[*] Build directory: $BUILD_DIR"
+echo "[*] Target ISO: $ISO_NAME"
+echo ""
+
+# Clean and prepare
+rm -rf "$BUILD_DIR"
+mkdir -p "$ROOTFS_DIR" "$ISO_DIR"/{casper,isolinux,boot/grub}
+
+# Check dependencies
+echo "[*] Checking dependencies..."
+for cmd in debootstrap xorriso genisoimage mksquashfs grub-mkrescue; do
+  if ! command -v "$cmd" &> /dev/null; then
+    echo "[!] Missing: $cmd - installing..."
+    apt-get update -qq
+    apt-get install -y -qq "$cmd" 2>&1 | tail -5
+  fi
+done
+
+echo ""
+echo "┌─────────────────────────────────────────────────────────────┐"
+echo "│ LAYER 1: Base OS (Ubuntu 22.04 LTS) - HP Compatible        │"
+echo "└─────────────────────────────────────────────────────────────┘"
+echo ""
+
+echo "[+] Bootstrapping Ubuntu 22.04 base system (older kernel 5.15)..."
+echo "    (debootstrap takes ~10-15 minutes...)"
+debootstrap --arch=amd64 --variant=minbase jammy "$ROOTFS_DIR" http://archive.ubuntu.com/ubuntu/ 2>&1 | tail -20
+
+echo "[+] Configuring base system..."
+echo "aethex-os" > "$ROOTFS_DIR/etc/hostname"
+cat > "$ROOTFS_DIR/etc/hosts" << 'EOF'
+127.0.0.1 localhost
+127.0.1.1 aethex-os
+::1 localhost ip6-localhost ip6-loopback
+EOF
+
+# Mount filesystems for chroot
+mount -t proc /proc "$ROOTFS_DIR/proc"
+mount -t sysfs /sys "$ROOTFS_DIR/sys"
+mount --bind /dev "$ROOTFS_DIR/dev"
+mount -t devpts devpts "$ROOTFS_DIR/dev/pts"
+
+echo "[+] Installing base packages..."
+chroot "$ROOTFS_DIR" bash -c '
+  export DEBIAN_FRONTEND=noninteractive
+  
+  # Add universe repository
+  echo "deb http://archive.ubuntu.com/ubuntu jammy main restricted universe multiverse" > /etc/apt/sources.list
+  echo "deb http://archive.ubuntu.com/ubuntu jammy-updates main restricted universe multiverse" >> /etc/apt/sources.list
+  echo "deb http://archive.ubuntu.com/ubuntu jammy-security main restricted universe multiverse" >> /etc/apt/sources.list
+  
+  apt-get update
+  apt-get install -y \
+    linux-image-generic linux-headers-generic \
+    casper \
+    grub-pc-bin grub-efi-amd64-bin grub-common xorriso \
+    systemd-sysv dbus \
+    network-manager wpasupplicant \
+    sudo curl wget git ca-certificates gnupg \
+    pipewire wireplumber \
+    xorg xserver-xorg-video-all \
+    xfce4 xfce4-goodies lightdm \
+    firefox thunar xfce4-terminal \
+    file-roller mousepad ristretto \
+    zenity notify-osd \
+    vim nano
+  
+  apt-get clean
+' 2>&1 | tail -50
+
+echo ""
+echo "┌─────────────────────────────────────────────────────────────┐"
+echo "│ LAYER 2a: Windows Runtime (Wine 9.0)                       │"
+echo "└─────────────────────────────────────────────────────────────┘"
+echo ""
+
+echo "[+] Adding WineHQ repository..."
+chroot "$ROOTFS_DIR" bash -c '
+  export DEBIAN_FRONTEND=noninteractive
+  
+  # Enable 32-bit architecture for Wine
+  dpkg --add-architecture i386
+  
+  # Add WineHQ repository
+  mkdir -pm755 /etc/apt/keyrings
+  wget -O /etc/apt/keyrings/winehq-archive.key https://dl.winehq.org/wine-builds/winehq.key
+  wget -NP /etc/apt/sources.list.d/ https://dl.winehq.org/wine-builds/ubuntu/dists/noble/winehq-noble.sources
+  
+  apt-get update
+  apt-get install -y --install-recommends winehq-stable winetricks
+  
+  # Install Windows fonts
+  apt-get install -y ttf-mscorefonts-installer
+  
+  # Install DXVK for DirectX support
+  apt-get install -y dxvk
+  
+  apt-get clean
+' 2>&1 | tail -30
+
+echo "[+] Setting up Wine runtime environment..."
+mkdir -p "$ROOTFS_DIR/opt/aethex/runtimes/windows"
+cp os/runtimes/windows/wine-launcher.sh "$ROOTFS_DIR/opt/aethex/runtimes/windows/"
+chmod +x "$ROOTFS_DIR/opt/aethex/runtimes/windows/wine-launcher.sh"
+
+# Create Wine file associations
+cat > "$ROOTFS_DIR/usr/share/applications/wine-aethex.desktop" << 'EOF'
+[Desktop Entry]
+Name=Windows Application (Wine)
+Comment=Run Windows .exe files
+Exec=/opt/aethex/runtimes/windows/wine-launcher.sh %f
+Type=Application
+MimeType=application/x-ms-dos-executable;application/x-msi;application/x-msdownload;
+Icon=wine
+Categories=Wine;
+NoDisplay=false
+EOF
+
+chroot "$ROOTFS_DIR" update-desktop-database /usr/share/applications/ 2>/dev/null || true
+
+echo ""
+echo "┌─────────────────────────────────────────────────────────────┐"
+echo "│ LAYER 2b: Linux Dev Runtime (Docker + Tools)               │"
+echo "└─────────────────────────────────────────────────────────────┘"
+echo ""
+
+echo "[+] Installing Docker CE..."
+chroot "$ROOTFS_DIR" bash -c '
+  export DEBIAN_FRONTEND=noninteractive
+  
+  # Add Docker repository
+  install -m 0755 -d /etc/apt/keyrings
+  curl -fsSL https://download.docker.com/linux/ubuntu/gpg | gpg --dearmor -o /etc/apt/keyrings/docker.gpg
+  chmod a+r /etc/apt/keyrings/docker.gpg
+  
+  echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu jammy stable" > /etc/apt/sources.list.d/docker.list
+  
+  apt-get update
+  apt-get install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
+  
+  systemctl enable docker
+  
+  apt-get clean
+' 2>&1 | tail -20
+
+echo "[+] Installing development tools..."
+chroot "$ROOTFS_DIR" bash -c '
+  export DEBIAN_FRONTEND=noninteractive
+  
+  # Build essentials
+  apt-get install -y build-essential gcc g++ make cmake autoconf automake
+  
+  # Version control
+  apt-get install -y git git-lfs
+  
+  # Node.js 20.x
+  mkdir -p /etc/apt/keyrings
+  curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg
+  echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_20.x nodistro main" > /etc/apt/sources.list.d/nodesource.list
+  apt-get update
+  apt-get install -y nodejs
+  
+  # Python
+  apt-get install -y python3 python3-pip python3-venv
+  
+  # Rust
+  curl --proto "=https" --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
+  
+  # VSCode
+  wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > /etc/apt/keyrings/packages.microsoft.gpg
+  echo "deb [arch=amd64,arm64,armhf signed-by=/etc/apt/keyrings/packages.microsoft.gpg] https://packages.microsoft.com/repos/code stable main" > /etc/apt/sources.list.d/vscode.list
+  apt-get update
+  apt-get install -y code
+  
+  apt-get clean
+' 2>&1 | tail -30
+
+echo "[+] Setting up dev runtime launchers..."
+mkdir -p "$ROOTFS_DIR/opt/aethex/runtimes/linux-dev"
+cp os/runtimes/linux-dev/dev-launcher.sh "$ROOTFS_DIR/opt/aethex/runtimes/linux-dev/"
+chmod +x "$ROOTFS_DIR/opt/aethex/runtimes/linux-dev/dev-launcher.sh"
+
+echo ""
+echo "┌─────────────────────────────────────────────────────────────┐"
+echo "│ LAYER 3: Shell & Mode Switching                            │"
+echo "└─────────────────────────────────────────────────────────────┘"
+echo ""
+
+echo "[+] Installing runtime selector..."
+mkdir -p "$ROOTFS_DIR/opt/aethex/shell/bin"
+cp os/shell/bin/runtime-selector.sh "$ROOTFS_DIR/opt/aethex/shell/bin/"
+chmod +x "$ROOTFS_DIR/opt/aethex/shell/bin/runtime-selector.sh"
+
+# Install systemd service
+cp os/shell/systemd/aethex-runtime-selector.service "$ROOTFS_DIR/etc/systemd/system/"
+chroot "$ROOTFS_DIR" systemctl enable aethex-runtime-selector.service 2>/dev/null || true
+
+echo "[+] Installing Node.js for AeThex Mobile UI..."
+# Already installed in dev tools section
+
+echo ""
+echo "┌─────────────────────────────────────────────────────────────┐"
+echo "│ AeThex Mobile App Integration                              │"
+echo "└─────────────────────────────────────────────────────────────┘"
+echo ""
+
+echo "[+] Setting up AeThex Desktop application..."
+
+# Build mobile app if possible
+if [ -f "package.json" ]; then
+  echo "    Building AeThex mobile app..."
+  npm run build 2>&1 | tail -5 || echo "    Build skipped"
+fi
+
+# Copy app files
+if [ -d "client" ] && [ -d "server" ]; then
+  echo "    Copying AeThex Desktop files..."
+  mkdir -p "$ROOTFS_DIR/opt/aethex-desktop"
+  
+  cp -r client "$ROOTFS_DIR/opt/aethex-desktop/"
+  cp -r server "$ROOTFS_DIR/opt/aethex-desktop/"
+  cp -r shared "$ROOTFS_DIR/opt/aethex-desktop/" 2>/dev/null || true
+  cp package*.json "$ROOTFS_DIR/opt/aethex-desktop/" 2>/dev/null || true
+  cp tsconfig.json "$ROOTFS_DIR/opt/aethex-desktop/" 2>/dev/null || true
+  cp vite.config.ts "$ROOTFS_DIR/opt/aethex-desktop/" 2>/dev/null || true
+  
+  # Copy built assets
+  if [ -d "dist" ]; then
+    cp -r dist "$ROOTFS_DIR/opt/aethex-desktop/"
+  fi
+  
+  echo "    Installing dependencies..."
+  chroot "$ROOTFS_DIR" bash -c 'cd /opt/aethex-desktop && npm install --production --legacy-peer-deps' 2>&1 | tail -10 || true
+else
+  echo "    (client/server not found; skipping)"
+fi
+
+# Create systemd service
+cat > "$ROOTFS_DIR/etc/systemd/system/aethex-mobile-server.service" << 'EOF'
+[Unit]
+Description=AeThex Mobile Server
+After=network-online.target docker.service
+Wants=network-online.target
+
+[Service]
+Type=simple
+User=aethex
+WorkingDirectory=/opt/aethex-desktop
+Environment="NODE_ENV=production"
+Environment="PORT=5000"
+ExecStart=/usr/bin/npm start
+Restart=always
+RestartSec=10
+StandardOutput=journal
+StandardError=journal
+
+[Install]
+WantedBy=multi-user.target
+EOF
+
+chroot "$ROOTFS_DIR" systemctl enable aethex-mobile-server.service 2>/dev/null || true
+
+echo ""
+echo "┌─────────────────────────────────────────────────────────────┐"
+echo "│ User Configuration                                          │"
+echo "└─────────────────────────────────────────────────────────────┘"
+echo ""
+
+echo "[+] Creating aethex user..."
+chroot "$ROOTFS_DIR" bash -c '
+  useradd -m -s /bin/bash -G sudo,docker aethex
+  echo "aethex:aethex" | chpasswd
+  echo "aethex ALL=(ALL) NOPASSWD:ALL" >> /etc/sudoers
+'
+
+# Configure LightDM auto-login
+mkdir -p "$ROOTFS_DIR/etc/lightdm"
+cat > "$ROOTFS_DIR/etc/lightdm/lightdm.conf" << 'EOF'
+[Seat:*]
+autologin-user=aethex
+autologin-user-timeout=0
+user-session=xfce
+EOF
+
+# Auto-start Firefox kiosk
+mkdir -p "$ROOTFS_DIR/home/aethex/.config/autostart"
+cat > "$ROOTFS_DIR/home/aethex/.config/autostart/aethex-kiosk.desktop" << 'EOF'
+[Desktop Entry]
+Type=Application
+Name=AeThex Mobile UI
+Exec=sh -c "sleep 5 && firefox --kiosk http://localhost:5000"
+Hidden=false
+NoDisplay=false
+X-GNOME-Autostart-enabled=true
+Comment=Launch AeThex mobile interface in fullscreen
+EOF
+
+chroot "$ROOTFS_DIR" chown -R aethex:aethex /home/aethex /opt/aethex-desktop 2>/dev/null || true
+
+echo ""
+echo "┌─────────────────────────────────────────────────────────────┐"
+echo "│ ISO Packaging                                               │"
+echo "└─────────────────────────────────────────────────────────────┘"
+echo ""
+
+echo "[+] Regenerating initramfs with casper..."
+chroot "$ROOTFS_DIR" bash -c '
+  export DEBIAN_FRONTEND=noninteractive
+  KERNEL_VERSION=$(ls /boot/vmlinuz-* | sed "s|/boot/vmlinuz-||" | head -n 1)
+  echo "    Rebuilding initramfs for kernel $KERNEL_VERSION with casper..."
+  update-initramfs -u -k "$KERNEL_VERSION"
+' 2>&1 | tail -10
+
+echo "[+] Extracting kernel and initrd..."
+KERNEL="$(ls -1 $ROOTFS_DIR/boot/vmlinuz-* 2>/dev/null | head -n 1)"
+INITRD="$(ls -1 $ROOTFS_DIR/boot/initrd.img-* 2>/dev/null | head -n 1)"
+
+if [ -z "$KERNEL" ] || [ -z "$INITRD" ]; then
+  echo "[!] Kernel or initrd not found."
+  ls -la "$ROOTFS_DIR/boot/" || true
+  exit 1
+fi
+
+cp "$KERNEL" "$ISO_DIR/casper/vmlinuz"
+cp "$INITRD" "$ISO_DIR/casper/initrd.img"
+echo "[✓] Kernel: $(basename "$KERNEL")"
+echo "[✓] Initrd: $(basename "$INITRD")"
+
+echo "[+] Verifying casper in initrd..."
+if lsinitramfs "$ISO_DIR/casper/initrd.img" | grep -q "scripts/casper"; then
+  echo "[✓] Casper scripts found in initrd"
+else
+  echo "[!] WARNING: Casper scripts NOT found in initrd!"
+fi
+
+# Unmount chroot filesystems
+echo "[+] Unmounting chroot..."
+umount -lf "$ROOTFS_DIR/dev/pts" 2>/dev/null || true
+umount -lf "$ROOTFS_DIR/proc" 2>/dev/null || true
+umount -lf "$ROOTFS_DIR/sys" 2>/dev/null || true
+umount -lf "$ROOTFS_DIR/dev" 2>/dev/null || true
+
+echo "[+] Creating SquashFS filesystem..."
+echo "    (compressing ~4-5GB system, takes 15-20 minutes...)"
+mksquashfs "$ROOTFS_DIR" "$ISO_DIR/casper/filesystem.squashfs" -b 1048576 -comp xz -Xdict-size 100% 2>&1 | tail -5
+
+echo "[+] Setting up BIOS boot (isolinux)..."
+cat > "$ISO_DIR/isolinux/isolinux.cfg" << 'EOF'
+PROMPT 0
+TIMEOUT 50
+DEFAULT linux
+
+LABEL linux
+  MENU LABEL AeThex OS - Full Stack
+  KERNEL /casper/vmlinuz
+  APPEND initrd=/casper/initrd.img boot=casper quiet splash ---
+
+LABEL safe
+  MENU LABEL AeThex OS - Safe Mode (No ACPI)
+  KERNEL /casper/vmlinuz
+  APPEND initrd=/casper/initrd.img boot=casper acpi=off noapic nomodeset ---
+EOF
+
+cp /usr/lib/syslinux/isolinux.bin "$ISO_DIR/isolinux/" 2>/dev/null || \
+cp /usr/share/syslinux/isolinux.bin "$ISO_DIR/isolinux/" 2>/dev/null || true
+cp /usr/lib/syslinux/ldlinux.c32 "$ISO_DIR/isolinux/" 2>/dev/null || \
+cp /usr/share/syslinux/ldlinux.c32 "$ISO_DIR/isolinux/" 2>/dev/null || true
+
+echo "[+] Setting up UEFI boot (GRUB)..."
+cat > "$ISO_DIR/boot/grub/grub.cfg" << 'EOF'
+set timeout=10
+set default=0
+
+menuentry "AeThex OS - Full Stack" {
+  linux /casper/vmlinuz boot=casper quiet splash ---
+  initrd /casper/initrd.img
+}
+
+menuentry "AeThex OS - Safe Mode (No ACPI)" {
+  linux /casper/vmlinuz boot=casper acpi=off noapic nomodeset ---
+  initrd /casper/initrd.img
+}
+
+menuentry "AeThex OS - Debug Mode" {
+  linux /casper/vmlinuz boot=casper debug ignore_loglevel earlyprintk=vga ---
+  initrd /casper/initrd.img
+}
+EOF
+
+echo "[+] Creating hybrid ISO..."
+grub-mkrescue -o "$BUILD_DIR/$ISO_NAME" "$ISO_DIR" --verbose 2>&1 | tail -20
+
+echo "[+] Computing SHA256 checksum..."
+if [ -f "$BUILD_DIR/$ISO_NAME" ]; then
+  cd "$BUILD_DIR"
+  sha256sum "$ISO_NAME" > "$ISO_NAME.sha256"
+  echo ""
+  echo "═══════════════════════════════════════════════════════════════"
+  echo "  ✓ ISO Build Complete!"
+  echo "═══════════════════════════════════════════════════════════════"
+  echo ""
+  ls -lh "$ISO_NAME" | awk '{print "    Size: " $5}'
+  cat "$ISO_NAME.sha256" | awk '{print "    SHA256: " $1}'
+  echo "    Location: $BUILD_DIR/$ISO_NAME"
+  echo ""
+else
+  echo "[!] ISO creation failed."
+  exit 1
+fi
+
+echo "[*] Cleaning up rootfs..."
+rm -rf "$ROOTFS_DIR"
+
+echo ""
+echo "┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓"
+echo "┃  AeThex OS - Full Stack Edition                           ┃"
+echo "┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛"
+echo ""
+echo "ARCHITECTURE:"
+echo "  ├── Base OS: Ubuntu 22.04 LTS (kernel 5.15 - better hardware compat)"
+echo "  ├── Runtime: Windows (Wine 9.0 + DXVK)"
+echo "  ├── Runtime: Linux Dev (Docker + VSCode + Node + Python + Rust)"
+echo "  ├── Live Boot: Casper (full live USB support)"
+echo "  └── Shell: Mode switching + file associations"
+echo ""
+echo "INSTALLED RUNTIMES:"
+echo "  • Wine 9.0 (run .exe files)"
+echo "  • Docker CE (containerized development)"
+echo "  • Node.js 20.x + npm"
+echo "  • Python 3 + pip"
+echo "  • Rust + Cargo"
+echo "  • VSCode"
+echo "  • Git + build tools"
+echo ""
+echo "DESKTOP ENVIRONMENT:"
+echo "  • Xfce 4.18 (lightweight, customizable)"
+echo "  • LightDM (auto-login as 'aethex')"
+echo "  • Firefox (kiosk mode for mobile UI)"
+echo "  • NetworkManager (WiFi/Ethernet)"
+echo "  • PipeWire (modern audio)"
+echo ""
+echo "AETHEX MOBILE APP:"
+echo "  • Server: http://localhost:5000"
+echo "  • Ingress-style hexagonal UI"
+echo "  • 18 Capacitor plugins"
+echo "  • Auto-launches on boot"
+echo ""
+echo "CREDENTIALS:"
+echo "  Username: aethex"
+echo "  Password: aethex"
+echo "  Sudo: passwordless"
+echo ""
+echo "FLASH TO USB:"
+echo "  sudo dd if=$BUILD_DIR/$ISO_NAME of=/dev/sdX bs=4M status=progress"
+echo "  (or use Rufus on Windows)"
+echo ""
+echo "[✓] Build complete! Flash to USB and boot."
+echo ""
+
diff --git a/build-iso.ps1 b/build-iso.ps1
new file mode 100644
index 0000000..ee7c383
--- /dev/null
+++ b/build-iso.ps1
@@ -0,0 +1,80 @@
+#!/usr/bin/env pwsh
+# AeThex OS - ISO Build Wrapper for Windows/WSL
+# Automatically handles line ending conversion
+
+param(
+    [string]$BuildDir = "/home/mrpiglr/aethex-build",
+    [switch]$Clean,
+    [switch]$Background
+)
+
+Write-Host "═══════════════════════════════════════════════════════════════" -ForegroundColor Cyan
+Write-Host "  AeThex OS - ISO Builder (Windows to WSL)" -ForegroundColor Cyan
+Write-Host "═══════════════════════════════════════════════════════════════" -ForegroundColor Cyan
+Write-Host ""
+
+# Convert line endings and copy to temp location
+Write-Host "[*] Converting line endings (CRLF to LF)..." -ForegroundColor Yellow
+$scriptPath = "script/build-linux-iso-full.sh"
+$timestamp = Get-Date -Format 'yyyyMMddHHmmss'
+$tempScript = "/tmp/aethex-build-$timestamp.sh"
+
+if (!(Test-Path $scriptPath)) {
+    Write-Host "Error: $scriptPath not found" -ForegroundColor Red
+    exit 1
+}
+
+# Read, convert, and pipe to WSL
+$content = Get-Content $scriptPath -Raw
+$unixContent = $content -replace "`r`n", "`n"
+$unixContent | wsl bash -c "cat > $tempScript && chmod +x $tempScript"
+
+Write-Host "[OK] Script prepared: $tempScript" -ForegroundColor Green
+Write-Host ""
+
+# Clean previous build if requested
+if ($Clean) {
+    Write-Host "[*] Cleaning previous build..." -ForegroundColor Yellow
+    wsl bash -c "sudo rm -rf $BuildDir/aethex-linux-build; mkdir -p $BuildDir"
+    Write-Host "[OK] Cleaned" -ForegroundColor Green
+    Write-Host ""
+}
+
+# Run the build
+$logFile = "$BuildDir/build-$timestamp.log"
+
+if ($Background) {
+    Write-Host "[*] Starting build in background..." -ForegroundColor Yellow
+    Write-Host "    Log: $logFile" -ForegroundColor Gray
+    Write-Host ""
+    
+    wsl bash -c "nohup sudo bash $tempScript $BuildDir > $logFile 2>&1 &"
+    Start-Sleep -Seconds 3
+    
+    Write-Host "[*] Monitoring initial output:" -ForegroundColor Yellow
+    wsl bash -c "tail -30 $logFile 2>/dev/null || echo 'Waiting for log...'"
+    Write-Host ""
+    Write-Host "[i] Build running in background. Monitor with:" -ForegroundColor Cyan
+    Write-Host "    wsl bash -c `"tail -f $logFile`"" -ForegroundColor Gray
+    Write-Host "    or" -ForegroundColor Gray
+    Write-Host "    wsl bash -c `"ps aux | grep build-linux-iso`"" -ForegroundColor Gray
+} else {
+    Write-Host "[*] Starting build (30-60 min)..." -ForegroundColor Yellow
+    Write-Host "    Log: $logFile" -ForegroundColor Gray
+    Write-Host ""
+    
+    wsl bash -c "sudo bash $tempScript $BuildDir 2>&1 | tee $logFile"
+    
+    if ($LASTEXITCODE -eq 0) {
+        Write-Host ""
+        Write-Host "[OK] Build completed!" -ForegroundColor Green
+        Write-Host ""
+        Write-Host "[*] Checking for ISO..." -ForegroundColor Yellow
+        wsl bash -c "find $BuildDir -name '*.iso' -exec ls -lh {} \;"
+    } else {
+        Write-Host ""
+        Write-Host "Build failed. Check log:" -ForegroundColor Red
+        Write-Host "    wsl bash -c `"tail -100 $logFile`"" -ForegroundColor Gray
+        exit 1
+    }
+}
diff --git a/build-output.txt b/build-output.txt
new file mode 100644
index 0000000000000000000000000000000000000000..c78084047ffb68d94228c7299e8664419a0e672b
GIT binary patch
literal 722
zcmd6lKTpFj5XIk&#CPxrf`VAHRZ)=`_zx3eNE4SvN<v6d+Ae%_;OA>BAx0*2a(sSg
zzq@;vug|r5RdPyLy;dspYJSGKRR-2;4b~BHDmgiPuQ%?N<`vr4o~9azRA3F!L}#3G
zEn(>F6z&{>#e6ZB)7-KwiJhwE^}wF99?9i--Q(XV)wO22#Gisb!0fdFyZ?nuMy!XU
zqng(E=2mS*50kOR75PrgVr3utFBU3tqXo@U6dLIF#pbZp1u8A@<DH*-nBx_(0cBd=
z<Y=&9d3q1A1N8jcloJ>S)3l+IL%5#wtYh{&*lWw_nbC%v-gGa)8v8q9g`t~s@>kea
ow|JS&BUU(rzvER$kKupYbrZTT^$u%Ftj02U3v$KVJH^8H8<a4CZ2$lO

literal 0
HcmV?d00001

diff --git a/capacitor.config.json b/capacitor.config.json
new file mode 100644
index 0000000..06c1cde
--- /dev/null
+++ b/capacitor.config.json
@@ -0,0 +1,32 @@
+{
+  "appId": "com.aethex.os",
+  "appName": "AeThex OS",
+  "webDir": "dist/public",
+  "server": {
+    "androidScheme": "https",
+    "iosScheme": "https"
+  },
+  "plugins": {
+    "SplashScreen": {
+      "launchShowDuration": 0,
+      "launchAutoHide": true,
+      "backgroundColor": "#000000",
+      "androidSplashResourceName": "splash",
+      "androidScaleType": "CENTER_CROP",
+      "showSpinner": false,
+      "androidSpinnerStyle": "large",
+      "iosSpinnerStyle": "small",
+      "spinnerColor": "#999999",
+      "splashFullScreen": true,
+      "splashImmersive": true
+    },
+    "PushNotifications": {
+      "presentationOptions": ["badge", "sound", "alert"]
+    },
+    "LocalNotifications": {
+      "smallIcon": "ic_stat_icon_config_sample",
+      "iconColor": "#488AFF",
+      "sound": "beep.wav"
+    }
+  }
+}
diff --git a/capacitor.config.ts b/capacitor.config.ts
index a6b61d8..2355a0a 100644
--- a/capacitor.config.ts
+++ b/capacitor.config.ts
@@ -22,6 +22,14 @@ const config: CapacitorConfig = {
       splashFullScreen: true,
       splashImmersive: true
     },
+    StatusBar: {
+      style: 'DARK',
+      backgroundColor: '#000000',
+      overlaysWebView: true
+    },
+    App: {
+      backButtonEnabled: true
+    },
     PushNotifications: {
       presentationOptions: ['badge', 'sound', 'alert']
     },
@@ -30,7 +38,13 @@ const config: CapacitorConfig = {
       iconColor: '#488AFF',
       sound: 'beep.wav'
     }
+  },
+  android: {
+    allowMixedContent: true,
+    captureInput: true,
+    webContentsDebuggingEnabled: true
   }
 };
 
 export default config;
+
diff --git a/client/index.html b/client/index.html
index bd3d7c7..2ec4965 100644
--- a/client/index.html
+++ b/client/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
     
     <title>AeThex OS - Operating System for the Metaverse</title>
     <meta name="description" content="AeThex is the Operating System for the Metaverse. Join the network, earn credentials, and build the future with Axiom, Codex, and Aegis." />
@@ -30,7 +30,7 @@
     <link rel="icon" type="image/png" href="/favicon.png" />
     <link rel="apple-touch-icon" href="/favicon.png" />
     <link rel="manifest" href="/manifest.json" />
-    <meta name="theme-color" content="#06B6D4" />
+    <meta name="theme-color" content="#10b981" />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
@@ -41,18 +41,36 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Orbitron:wght@400..900&family=Oxanium:wght@200..800&family=Share+Tech+Mono&display=swap" rel="stylesheet">
+    <style>
+      /* Mobile safe area support */
+      :root {
+        --safe-area-inset-top: env(safe-area-inset-top, 0px);
+        --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
+        --safe-area-inset-left: env(safe-area-inset-left, 0px);
+        --safe-area-inset-right: env(safe-area-inset-right, 0px);
+      }
+      .safe-area-inset-top { padding-top: var(--safe-area-inset-top) !important; }
+      .safe-area-inset-bottom { padding-bottom: var(--safe-area-inset-bottom) !important; }
+      .safe-area-inset-left { padding-left: var(--safe-area-inset-left) !important; }
+      .safe-area-inset-right { padding-right: var(--safe-area-inset-right) !important; }
+      /* Disable pull-to-refresh on body */
+      body { overscroll-behavior-y: contain; }
+    </style>
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
-    <!-- Unregister any existing service workers -->
+    <!-- Register service worker for PWA -->
     <script>
       if ('serviceWorker' in navigator) {
-        navigator.serviceWorker.getRegistrations().then(function(registrations) {
-          for(let registration of registrations) {
-            registration.unregister();
-            console.log('Unregistered service worker:', registration.scope);
-          }
+        window.addEventListener('load', () => {
+          navigator.serviceWorker.register('/sw.js')
+            .then(registration => {
+              console.log('[SW] Registered:', registration.scope);
+            })
+            .catch(err => {
+              console.log('[SW] Registration failed:', err);
+            });
         });
       }
     </script>
diff --git a/client/public/aethex-logo.svg b/client/public/aethex-logo.svg
new file mode 100644
index 0000000..8ecbffd
--- /dev/null
+++ b/client/public/aethex-logo.svg
@@ -0,0 +1,48 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="glow">
+      <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
+      <feMerge>
+        <feMergeNode in="coloredBlur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#06b6d4;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#00d9ff;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  
+  <!-- Outer ring with spikes -->
+  <g filter="url(#glow)">
+    <!-- Top spike -->
+    <polygon points="100,20 110,60 90,60" fill="url(#grad1)" opacity="0.9"/>
+    <!-- Top-right spike -->
+    <polygon points="141.4,41.4 120,75 135,65" fill="url(#grad1)" opacity="0.85"/>
+    <!-- Right spike -->
+    <polygon points="180,100 140,110 140,90" fill="url(#grad1)" opacity="0.9"/>
+    <!-- Bottom-right spike -->
+    <polygon points="158.6,158.6 135,135 145,150" fill="url(#grad1)" opacity="0.85"/>
+    <!-- Bottom spike -->
+    <polygon points="100,180 90,140 110,140" fill="url(#grad1)" opacity="0.9"/>
+    <!-- Bottom-left spike -->
+    <polygon points="41.4,158.6 65,135 55,150" fill="url(#grad1)" opacity="0.85"/>
+    <!-- Left spike -->
+    <polygon points="20,100 60,90 60,110" fill="url(#grad1)" opacity="0.9"/>
+    <!-- Top-left spike -->
+    <polygon points="58.6,41.4 75,60 65,75" fill="url(#grad1)" opacity="0.85"/>
+  </g>
+  
+  <!-- Inner dark ring -->
+  <circle cx="100" cy="100" r="75" fill="#0f172a" stroke="url(#grad1)" stroke-width="2" opacity="0.95"/>
+  
+  <!-- Middle ring with glow -->
+  <circle cx="100" cy="100" r="55" fill="none" stroke="url(#grad1)" stroke-width="1.5" opacity="0.6" filter="url(#glow)"/>
+  
+  <!-- Center diamond -->
+  <g filter="url(#glow)">
+    <polygon points="100,70 130,100 100,130 70,100" fill="url(#grad1)" opacity="0.9"/>
+    <polygon points="100,75 125,100 100,125 75,100" fill="#00ffff" opacity="0.7"/>
+    <circle cx="100" cy="100" r="8" fill="#ffffff" opacity="0.8"/>
+  </g>
+</svg>
diff --git a/client/public/manifest.json b/client/public/manifest.json
index 95d19a8..0f25d26 100644
--- a/client/public/manifest.json
+++ b/client/public/manifest.json
@@ -4,8 +4,8 @@
   "description": "Join the AeThex Network. Earn credentials as a certified Metaverse Architect. Build the future with Axiom, Codex, and Aegis.",
   "start_url": "/",
   "display": "standalone",
-  "background_color": "#0F172A",
-  "theme_color": "#06B6D4",
+  "background_color": "#000000",
+  "theme_color": "#10b981",
   "orientation": "any",
   "icons": [
     {
@@ -13,10 +13,42 @@
       "sizes": "192x192",
       "type": "image/png",
       "purpose": "any maskable"
+    },
+    {
+      "src": "/favicon.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
     }
   ],
   "categories": ["productivity", "utilities", "developer", "entertainment"],
   "prefer_related_applications": false,
   "scope": "/",
-  "lang": "en-US"
+  "lang": "en-US",
+  "shortcuts": [
+    {
+      "name": "Mobile Dashboard",
+      "short_name": "Dashboard",
+      "description": "View your mobile dashboard",
+      "url": "/mobile",
+      "icons": [{ "src": "/favicon.png", "sizes": "192x192" }]
+    },
+    {
+      "name": "Projects",
+      "short_name": "Projects",
+      "description": "Manage projects",
+      "url": "/hub/projects",
+      "icons": [{ "src": "/favicon.png", "sizes": "192x192" }]
+    }
+  ],
+  "share_target": {
+    "action": "/share",
+    "method": "POST",
+    "enctype": "multipart/form-data",
+    "params": {
+      "title": "title",
+      "text": "text",
+      "url": "url"
+    }
+  }
 }
diff --git a/client/public/sw.js b/client/public/sw.js
index bbeca72..751011e 100644
--- a/client/public/sw.js
+++ b/client/public/sw.js
@@ -1,16 +1,91 @@
-// Service Worker disabled for development
-// This file unregisters any existing service workers
+// Service Worker for PWA functionality
+const CACHE_NAME = 'aethex-v1';
+const urlsToCache = [
+  '/',
+  '/mobile',
+  '/home',
+  '/manifest.json',
+  '/favicon.png'
+];
 
-self.addEventListener('install', () => {
+// Install event - cache assets
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then((cache) => {
+        console.log('[SW] Caching app shell');
+        return cache.addAll(urlsToCache);
+      })
+      .catch((err) => {
+        console.error('[SW] Cache failed:', err);
+      })
+  );
   self.skipWaiting();
 });
 
+// Activate event - clean up old caches
 self.addEventListener('activate', (event) => {
   event.waitUntil(
-    self.registration.unregister().then(() => {
-      return self.clients.matchAll();
-    }).then((clients) => {
-      clients.forEach(client => client.navigate(client.url));
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames.map((cacheName) => {
+          if (cacheName !== CACHE_NAME) {
+            console.log('[SW] Deleting old cache:', cacheName);
+            return caches.delete(cacheName);
+          }
+        })
+      );
     })
   );
+  self.clients.claim();
+});
+
+// Fetch event - network first, fallback to cache
+self.addEventListener('fetch', (event) => {
+  if (event.request.method !== 'GET' || !event.request.url.startsWith('http')) {
+    return;
+  }
+
+  event.respondWith(
+    fetch(event.request)
+      .then((response) => {
+        if (!response || response.status !== 200 || response.type !== 'basic') {
+          return response;
+        }
+        const responseToCache = response.clone();
+        caches.open(CACHE_NAME).then((cache) => {
+          cache.put(event.request, responseToCache);
+        });
+        return response;
+      })
+      .catch(() => {
+        return caches.match(event.request).then((cachedResponse) => {
+          return cachedResponse || (event.request.mode === 'navigate' ? caches.match('/') : null);
+        });
+      })
+  );
+});
+
+// Push notification
+self.addEventListener('push', (event) => {
+  const options = {
+    body: event.data ? event.data.text() : 'New notification',
+    icon: '/favicon.png',
+    vibrate: [200, 100, 200],
+    actions: [
+      { action: 'explore', title: 'View' },
+      { action: 'close', title: 'Close' }
+    ]
+  };
+  event.waitUntil(
+    self.registration.showNotification('AeThex OS', options)
+  );
+});
+
+// Notification click
+self.addEventListener('notificationclick', (event) => {
+  event.notification.close();
+  if (event.action === 'explore') {
+    event.waitUntil(clients.openWindow('/mobile'));
+  }
 });
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 1612a15..ed26f3a 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -17,6 +17,7 @@ import Curriculum from "@/pages/curriculum";
 import Login from "@/pages/login";
 import Admin from "@/pages/admin";
 import Pitch from "@/pages/pitch";
+import Builds from "@/pages/builds";
 import AdminArchitects from "@/pages/admin-architects";
 import AdminProjects from "@/pages/admin-projects";
 import AdminCredentials from "@/pages/admin-credentials";
@@ -40,12 +41,31 @@ import HubCodeGallery from "@/pages/hub/code-gallery";
 import HubNotifications from "@/pages/hub/notifications";
 import HubAnalytics from "@/pages/hub/analytics";
 import OsLink from "@/pages/os/link";
+import MobileDashboard from "@/pages/mobile-dashboard"; 
+import SimpleMobileDashboard from "@/pages/mobile-simple"; 
+import MobileCamera from "@/pages/mobile-camera"; 
+import MobileNotifications from "@/pages/mobile-notifications"; 
+import MobileProjects from "@/pages/mobile-projects"; 
+import MobileMessaging from "@/pages/mobile-messaging"; 
+import MobileModules from "@/pages/mobile-modules"; 
 import { LabTerminalProvider } from "@/hooks/use-lab-terminal";
 
+
+function HomeRoute() {
+  // On mobile devices, show the native mobile app
+  // On desktop/web, show the web OS
+  return <AeThexOS />;
+}
+
 function Router() {
   return (
     <Switch>
-      <Route path="/" component={AeThexOS} />
+      <Route path="/" component={HomeRoute} />
+      <Route path="/camera" component={MobileCamera} />
+      <Route path="/notifications" component={MobileNotifications} />
+      <Route path="/hub/projects" component={MobileProjects} />
+      <Route path="/hub/messaging" component={MobileMessaging} />
+      <Route path="/hub/code-gallery" component={MobileModules} />
       <Route path="/home" component={Home} />
       <Route path="/passport" component={Passport} />
       <Route path="/achievements" component={Achievements} />
@@ -67,6 +87,7 @@ function Router() {
       <Route path="/admin/activity">{() => <ProtectedRoute><AdminActivity /></ProtectedRoute>}</Route>
       <Route path="/admin/notifications">{() => <ProtectedRoute><AdminNotifications /></ProtectedRoute>}</Route>
       <Route path="/pitch" component={Pitch} />
+      <Route path="/builds" component={Builds} />
       <Route path="/os" component={AeThexOS} />
       <Route path="/os/link">{() => <ProtectedRoute><OsLink /></ProtectedRoute>}</Route>
       <Route path="/network" component={Network} />
diff --git a/client/src/components/Chatbot.tsx b/client/src/components/Chatbot.tsx
index fb8c58c..d27c25b 100644
--- a/client/src/components/Chatbot.tsx
+++ b/client/src/components/Chatbot.tsx
@@ -2,6 +2,7 @@ import { useState, useRef, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { MessageCircle, X, Send, Bot, User, Loader2 } from "lucide-react";
 import { useLocation } from "wouter";
+import { isMobile } from "@/lib/platform";
 
 interface Message {
   id: string;
@@ -63,7 +64,7 @@ export function Chatbot() {
   };
 
   // Don't render chatbot on the OS page - it has its own environment
-  if (location === "/os") {
+  if (location === "/os" || isMobile()) {
     return null;
   }
 
diff --git a/client/src/components/Mobile3DScene.tsx b/client/src/components/Mobile3DScene.tsx
new file mode 100644
index 0000000..0b32e68
--- /dev/null
+++ b/client/src/components/Mobile3DScene.tsx
@@ -0,0 +1,59 @@
+import { motion } from "framer-motion";
+import { Sparkles, Orbit } from "lucide-react";
+import { isMobile } from "@/lib/platform";
+
+export function Mobile3DScene() {
+  if (!isMobile()) return null;
+
+  const cards = [
+    { title: "Spatial", accent: "from-cyan-500 to-emerald-500", delay: 0 },
+    { title: "Realtime", accent: "from-purple-500 to-pink-500", delay: 0.08 },
+    { title: "Secure", accent: "from-amber-500 to-orange-500", delay: 0.16 },
+  ];
+
+  return (
+    <div className="relative my-4 px-4">
+      <div className="overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-br from-slate-950 via-slate-900 to-black p-4 shadow-2xl" style={{ perspective: "900px" }}>
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(56,189,248,0.25),transparent_35%),radial-gradient(circle_at_80%_10%,rgba(168,85,247,0.2),transparent_30%),radial-gradient(circle_at_50%_80%,rgba(16,185,129,0.18),transparent_30%)] blur-3xl" />
+
+        <div className="relative flex items-center justify-between text-xs uppercase tracking-[0.2em] text-cyan-200 font-mono mb-3">
+          <div className="flex items-center gap-2">
+            <Sparkles className="w-4 h-4" />
+            <span>3D Surface</span>
+          </div>
+          <div className="flex items-center gap-2 text-emerald-200">
+            <Orbit className="w-4 h-4" />
+            <span>Live</span>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-3 gap-3 transform-style-3d">
+          {cards.map((card, idx) => (
+            <motion.div
+              key={card.title}
+              initial={{ opacity: 0, rotateX: -15, rotateY: 8, z: -30 }}
+              animate={{ opacity: 1, rotateX: -6, rotateY: 6, z: -12 }}
+              transition={{ duration: 0.9, delay: card.delay, ease: "easeOut" }}
+              whileHover={{ rotateX: 0, rotateY: 0, z: 0, scale: 1.04 }}
+              className={`relative h-28 rounded-2xl bg-gradient-to-br ${card.accent} p-3 text-white shadow-xl shadow-black/40 border border-white/10`}
+              style={{ transformStyle: "preserve-3d" }}
+            >
+              <div className="text-[11px] font-semibold uppercase tracking-wide opacity-80">{card.title}</div>
+              <div className="text-[10px] text-white/80 mt-1">AeThex OS</div>
+              <div className="absolute bottom-2 right-2 text-[9px] font-mono text-white/70">3D</div>
+            </motion.div>
+          ))}
+        </div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.3 }}
+          className="relative mt-4 rounded-2xl border border-cyan-400/40 bg-white/5 px-3 py-2 text-[11px] text-cyan-50 font-mono"
+        >
+          <span className="text-emerald-300 font-semibold">Immersive Mode:</span> Haptics + live network + native toasts are active.
+        </motion.div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/components/MobileBottomNav.tsx b/client/src/components/MobileBottomNav.tsx
new file mode 100644
index 0000000..9f9c2e6
--- /dev/null
+++ b/client/src/components/MobileBottomNav.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { Home, Package, MessageSquare, Settings, Camera, Zap } from 'lucide-react';
+import { motion } from 'framer-motion';
+
+export interface BottomTabItem {
+  id: string;
+  label: string;
+  icon: React.ReactNode;
+  badge?: number;
+}
+
+export interface MobileBottomNavProps {
+  tabs: BottomTabItem[];
+  activeTab: string;
+  onTabChange: (tabId: string) => void;
+  className?: string;
+}
+
+export function MobileBottomNav({
+  tabs,
+  activeTab,
+  onTabChange,
+  className = '',
+}: MobileBottomNavProps) {
+  return (
+    <div className={`fixed bottom-0 left-0 right-0 h-16 bg-black/90 border-t border-emerald-500/30 z-40 safe-area-inset-bottom ${className}`}>
+      <div className="flex items-center justify-around h-full px-2">
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => onTabChange(tab.id)}
+            className="flex flex-col items-center justify-center gap-1 flex-1 h-full relative group"
+          >
+            {activeTab === tab.id && (
+              <motion.div
+                layoutId="tab-indicator"
+                className="absolute bottom-0 left-1/2 -translate-x-1/2 w-8 h-1 bg-emerald-400 rounded-t-full"
+                transition={{ type: 'spring', stiffness: 380, damping: 30 }}
+              />
+            )}
+
+            <div className={`transition-colors ${
+              activeTab === tab.id
+                ? 'text-emerald-300'
+                : 'text-cyan-200 group-hover:text-emerald-200'
+            }`}>
+              {tab.icon}
+            </div>
+
+            <span className={`text-[10px] font-mono uppercase tracking-wide transition-colors ${
+              activeTab === tab.id
+                ? 'text-emerald-300'
+                : 'text-cyan-200 group-hover:text-emerald-200'
+            }`}>
+              {tab.label}
+            </span>
+
+            {tab.badge !== undefined && tab.badge > 0 && (
+              <div className="absolute top-1 right-2 w-4 h-4 bg-red-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center">
+                {tab.badge > 9 ? '9+' : tab.badge}
+              </div>
+            )}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export const DEFAULT_MOBILE_TABS: BottomTabItem[] = [
+  { id: 'home', label: 'Home', icon: <Home className="w-5 h-5" /> },
+  { id: 'projects', label: 'Projects', icon: <Package className="w-5 h-5" /> },
+  { id: 'chat', label: 'Chat', icon: <MessageSquare className="w-5 h-5" /> },
+  { id: 'camera', label: 'Camera', icon: <Camera className="w-5 h-5" /> },
+  { id: 'settings', label: 'Settings', icon: <Settings className="w-5 h-5" /> },
+];
diff --git a/client/src/components/MobileNativeBridge.tsx b/client/src/components/MobileNativeBridge.tsx
new file mode 100644
index 0000000..f4cae48
--- /dev/null
+++ b/client/src/components/MobileNativeBridge.tsx
@@ -0,0 +1,104 @@
+import { useEffect, useRef, useState } from "react";
+import { Battery, BellRing, Smartphone, Wifi, WifiOff } from "lucide-react";
+import { Device } from "@capacitor/device";
+import { isMobile } from "@/lib/platform";
+import { useNativeFeatures } from "@/hooks/use-native-features";
+import { useHaptics } from "@/hooks/use-haptics";
+
+export function MobileNativeBridge() {
+  const native = useNativeFeatures();
+  const haptics = useHaptics();
+  const prevNetwork = useRef(native.networkStatus.connected);
+  const [batteryLevel, setBatteryLevel] = useState<number | null>(null);
+
+  // Request notifications + prime native layer
+  useEffect(() => {
+    if (!isMobile()) return;
+    native.requestNotificationPermission();
+    const loadBattery = async () => {
+      try {
+        const info = await Device.getBatteryInfo();
+        if (typeof info.batteryLevel === "number") {
+          setBatteryLevel(Math.round(info.batteryLevel * 100));
+        }
+      } catch (err) {
+        console.log("[MobileNativeBridge] battery info unavailable", err);
+      }
+    };
+    loadBattery();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Network change feedback
+  useEffect(() => {
+    if (!isMobile()) return;
+    const current = native.networkStatus.connected;
+    if (prevNetwork.current !== current) {
+      const label = current ? "Online" : "Offline";
+      native.showToast(`Network: ${label}`);
+      haptics.notification(current ? "success" : "warning");
+      prevNetwork.current = current;
+    }
+  }, [native.networkStatus.connected, native, haptics]);
+
+  if (!isMobile()) return null;
+
+  const batteryText = batteryLevel !== null ? `${batteryLevel}%` : "--";
+
+  const handleNotify = async () => {
+    await native.sendLocalNotification("AeThex OS", "Synced with your device");
+    await haptics.notification("success");
+  };
+
+  const handleToast = async () => {
+    await native.showToast("AeThex is live on-device");
+    await haptics.impact("light");
+  };
+
+  return (
+    <div className="fixed top-4 right-4 z-40 flex flex-col gap-3 w-56 text-white drop-shadow-lg">
+      <div className="rounded-2xl border border-emerald-400/30 bg-black/70 backdrop-blur-xl p-3">
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-2 text-xs uppercase tracking-wide text-emerald-300 font-mono">
+            <Smartphone className="w-4 h-4" />
+            <span>Device Link</span>
+          </div>
+          <div className="flex items-center gap-2 text-xs text-cyan-200">
+            {native.networkStatus.connected ? (
+              <Wifi className="w-4 h-4" />
+            ) : (
+              <WifiOff className="w-4 h-4 text-red-300" />
+            )}
+            <span className="font-semibold uppercase text-[11px]">
+              {native.networkStatus.connected ? "Online" : "Offline"}
+            </span>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between text-xs text-cyan-100 mb-2">
+          <div className="flex items-center gap-2">
+            <Battery className="w-4 h-4" />
+            <span>Battery</span>
+          </div>
+          <span className="font-semibold text-emerald-200">{batteryText}</span>
+        </div>
+
+        <div className="grid grid-cols-2 gap-2">
+          <button
+            onClick={handleNotify}
+            className="flex items-center justify-center gap-2 rounded-lg bg-emerald-500/20 border border-emerald-400/50 px-3 py-2 text-xs font-semibold uppercase tracking-wide active:scale-95 transition"
+          >
+            <BellRing className="w-4 h-4" />
+            Notify
+          </button>
+          <button
+            onClick={handleToast}
+            className="flex items-center justify-center gap-2 rounded-lg bg-cyan-500/20 border border-cyan-400/50 px-3 py-2 text-xs font-semibold uppercase tracking-wide active:scale-95 transition"
+          >
+            Toast
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/components/mobile/MobileHeader.tsx b/client/src/components/mobile/MobileHeader.tsx
new file mode 100644
index 0000000..63b18c9
--- /dev/null
+++ b/client/src/components/mobile/MobileHeader.tsx
@@ -0,0 +1,55 @@
+import { Home, ArrowLeft, Menu } from 'lucide-react';
+import { useLocation } from 'wouter';
+
+interface MobileHeaderProps {
+  title?: string;
+  onMenuClick?: () => void;
+  showBack?: boolean;
+  backPath?: string;
+}
+
+export function MobileHeader({ 
+  title = 'AeThex OS', 
+  onMenuClick,
+  showBack = true,
+  backPath = '/mobile'
+}: MobileHeaderProps) {
+  const [, navigate] = useLocation();
+
+  return (
+    <div className="fixed top-0 left-0 right-0 z-50 bg-black/95 backdrop-blur-xl border-b border-emerald-500/30">
+      <div className="flex items-center justify-between px-4 py-3 safe-area-inset-top">
+        {showBack ? (
+          <button
+            onClick={() => navigate(backPath)}
+            className="p-3 rounded-full bg-emerald-600 active:bg-emerald-700 transition-colors"
+          >
+            <ArrowLeft className="w-5 h-5" />
+          </button>
+        ) : (
+          <div className="w-11" />
+        )}
+        
+        <h1 className="text-base font-bold text-white truncate max-w-[200px]">
+          {title}
+        </h1>
+        
+        {onMenuClick ? (
+          <button
+            onClick={onMenuClick}
+            className="p-3 rounded-full bg-gray-800 active:bg-gray-700 transition-colors"
+          >
+            <Menu className="w-5 h-5" />
+          </button>
+        ) : (
+          <button
+            onClick={() => navigate('/mobile')}
+            className="p-3 rounded-full bg-gray-800 active:bg-gray-700 transition-colors"
+          >
+            <Home className="w-5 h-5" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/components/mobile/PullToRefresh.tsx b/client/src/components/mobile/PullToRefresh.tsx
new file mode 100644
index 0000000..ef3db32
--- /dev/null
+++ b/client/src/components/mobile/PullToRefresh.tsx
@@ -0,0 +1,77 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { Loader2 } from 'lucide-react';
+
+interface PullToRefreshProps {
+  onRefresh: () => Promise<void>;
+  children: React.ReactNode;
+  disabled?: boolean;
+}
+
+export function PullToRefresh({ 
+  onRefresh, 
+  children, 
+  disabled = false
+}: PullToRefreshProps) {
+  const [pullDistance, setPullDistance] = useState(0);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const startY = useRef(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const handleTouchStart = useCallback((e: TouchEvent) => {
+    if (disabled || isRefreshing || window.scrollY > 0) return;
+    startY.current = e.touches[0].clientY;
+  }, [disabled, isRefreshing]);
+
+  const handleTouchMove = useCallback((e: TouchEvent) => {
+    if (disabled || isRefreshing || window.scrollY > 0) return;
+    const distance = e.touches[0].clientY - startY.current;
+    if (distance > 0) {
+      setPullDistance(Math.min(distance * 0.5, 100));
+    }
+  }, [disabled, isRefreshing]);
+
+  const handleTouchEnd = useCallback(async () => {
+    if (pullDistance > 60 && !isRefreshing) {
+      setIsRefreshing(true);
+      try {
+        await onRefresh();
+      } finally {
+        setIsRefreshing(false);
+      }
+    }
+    setPullDistance(0);
+  }, [pullDistance, isRefreshing, onRefresh]);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    container.addEventListener('touchstart', handleTouchStart as any, { passive: true });
+    container.addEventListener('touchmove', handleTouchMove as any, { passive: true });
+    container.addEventListener('touchend', handleTouchEnd as any, { passive: true });
+
+    return () => {
+      container.removeEventListener('touchstart', handleTouchStart as any);
+      container.removeEventListener('touchmove', handleTouchMove as any);
+      container.removeEventListener('touchend', handleTouchEnd as any);
+    };
+  }, [handleTouchStart, handleTouchMove, handleTouchEnd]);
+
+  return (
+    <div ref={containerRef} className="relative">
+      {pullDistance > 0 && (
+        <div 
+          className="flex justify-center items-center bg-gray-900 overflow-hidden"
+          style={{ height: `${pullDistance}px` }}
+        >
+          {isRefreshing ? (
+            <Loader2 className="w-5 h-5 animate-spin text-emerald-400" />
+          ) : (
+            <span className="text-xs text-gray-400">Pull to refresh</span>
+          )}
+        </div>
+      )}
+      <div>{children}</div>
+    </div>
+  );
+}
diff --git a/client/src/components/mobile/SwipeableCard.tsx b/client/src/components/mobile/SwipeableCard.tsx
new file mode 100644
index 0000000..32dd2cb
--- /dev/null
+++ b/client/src/components/mobile/SwipeableCard.tsx
@@ -0,0 +1,101 @@
+import { useState } from 'react';
+import { Trash2, Archive } from 'lucide-react';
+import { useHaptics } from '@/hooks/use-haptics';
+
+interface SwipeableCardProps {
+  children: React.ReactNode;
+  onSwipeLeft?: () => void;
+  onSwipeRight?: () => void;
+  leftAction?: { icon?: React.ReactNode; label?: string; color?: string };
+  rightAction?: { icon?: React.ReactNode; label?: string; color?: string };
+}
+
+export function SwipeableCard({ 
+  children, 
+  onSwipeLeft, 
+  onSwipeRight,
+  leftAction = { icon: <Trash2 className="w-5 h-5" />, label: 'Delete', color: 'bg-red-500' },
+  rightAction = { icon: <Archive className="w-5 h-5" />, label: 'Archive', color: 'bg-blue-500' }
+}: SwipeableCardProps) {
+  const [offset, setOffset] = useState(0);
+  const haptics = useHaptics();
+  let startX = 0;
+  let currentX = 0;
+
+  const handleTouchStart = (e: React.TouchEvent) => {
+    startX = e.touches[0].clientX;
+    currentX = startX;
+  };
+
+  const handleTouchMove = (e: React.TouchEvent) => {
+    currentX = e.touches[0].clientX;
+    const diff = currentX - startX;
+    if (Math.abs(diff) > 10) {
+      setOffset(Math.max(-100, Math.min(100, diff)));
+    }
+  };
+
+  const handleTouchEnd = () => {
+    if (offset < -50 && onSwipeLeft) {
+      haptics.impact('medium');
+      onSwipeLeft();
+    } else if (offset > 50 && onSwipeRight) {
+      haptics.impact('medium');
+      onSwipeRight();
+    }
+    setOffset(0);
+  };
+
+  return (
+    <div className="relative overflow-hidden">
+      <div
+        className="bg-gray-900 border border-gray-700 rounded-lg p-4"
+        style={{
+          transform: `translateX(${offset}px)`,
+          transition: offset === 0 ? 'transform 0.2s ease-out' : 'none'
+        }}
+        onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
+        onTouchEnd={handleTouchEnd}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+interface CardListProps<T> {
+  items: T[];
+  renderItem: (item: T, index: number) => React.ReactNode;
+  onItemSwipeLeft?: (item: T, index: number) => void;
+  onItemSwipeRight?: (item: T, index: number) => void;
+  keyExtractor: (item: T, index: number) => string;
+  emptyMessage?: string;
+}
+
+export function SwipeableCardList<T>({
+  items,
+  renderItem,
+  onItemSwipeLeft,
+  onItemSwipeRight,
+  keyExtractor,
+  emptyMessage = 'No items'
+}: CardListProps<T>) {
+  if (items.length === 0) {
+    return <div className="text-center py-12 text-gray-500">{emptyMessage}</div>;
+  }
+
+  return (
+    <div className="space-y-2">
+      {items.map((item, index) => (
+        <SwipeableCard
+          key={keyExtractor(item, index)}
+          onSwipeLeft={onItemSwipeLeft ? () => onItemSwipeLeft(item, index) : undefined}
+          onSwipeRight={onItemSwipeRight ? () => onItemSwipeRight(item, index) : undefined}
+        >
+          {renderItem(item, index)}
+        </SwipeableCard>
+      ))}
+    </div>
+  );
+}
diff --git a/client/src/hooks/use-biometric-check.ts b/client/src/hooks/use-biometric-check.ts
new file mode 100644
index 0000000..dcdd9f6
--- /dev/null
+++ b/client/src/hooks/use-biometric-check.ts
@@ -0,0 +1,63 @@
+import { useState, useCallback } from 'react';
+import { isMobile } from '@/lib/platform';
+
+export interface BiometricCheckResult {
+  isAvailable: boolean;
+  biometryType?: string;
+}
+
+export function useBiometricCheck() {
+  const [isCheckingBio, setIsCheckingBio] = useState(false);
+  const [bioAvailable, setBioAvailable] = useState(false);
+  const [bioType, setBioType] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const checkBiometric = useCallback(async (): Promise<BiometricCheckResult> => {
+    if (!isMobile()) {
+      return { isAvailable: false };
+    }
+
+    try {
+      setIsCheckingBio(true);
+      setError(null);
+
+      // Mock response for now
+      console.log('[Biometric] Plugin not available - using mock');
+      setBioAvailable(false);
+      return { isAvailable: false };
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Biometric check error';
+      setError(message);
+      console.log('[Biometric Check] Error:', message);
+      return { isAvailable: false };
+    } finally {
+      setIsCheckingBio(false);
+    }
+  }, []);
+
+  const authenticate = useCallback(async (reason: string = 'Authenticate') => {
+    if (!bioAvailable) {
+      setError('Biometric not available');
+      return false;
+    }
+
+    try {
+      // Mock auth for now
+      console.log('[Biometric] Mock authentication');
+      return false;
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Authentication failed';
+      setError(message);
+      return false;
+    }
+  }, [bioAvailable]);
+
+  return {
+    bioAvailable,
+    bioType,
+    isCheckingBio,
+    error,
+    checkBiometric,
+    authenticate,
+  };
+}
diff --git a/client/src/hooks/use-device-camera.ts b/client/src/hooks/use-device-camera.ts
new file mode 100644
index 0000000..4f35f2e
--- /dev/null
+++ b/client/src/hooks/use-device-camera.ts
@@ -0,0 +1,104 @@
+import { useState, useCallback } from 'react';
+import { isMobile } from '@/lib/platform';
+
+export interface PhotoResult {
+  webPath?: string;
+  path?: string;
+  format?: string;
+}
+
+export function useDeviceCamera() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [photo, setPhoto] = useState<PhotoResult | null>(null);
+
+  const takePhoto = useCallback(async () => {
+    if (!isMobile()) {
+      setError('Camera only available on mobile');
+      return null;
+    }
+
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      const { Camera } = await import('@capacitor/camera');
+      const { CameraResultType, CameraSource } = await import('@capacitor/camera');
+
+      const image = await Camera.getPhoto({
+        quality: 90,
+        allowEditing: false,
+        resultType: CameraResultType.Uri,
+        source: CameraSource.Camera,
+      });
+
+      const result: PhotoResult = {
+        path: image.path || '',
+        webPath: image.webPath,
+        format: image.format,
+      };
+
+      setPhoto(result);
+      return result;
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Camera error';
+      setError(message);
+      console.error('[Camera Error]', err);
+      return null;
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const pickPhoto = useCallback(async () => {
+    if (!isMobile()) {
+      setError('Photo picker only available on mobile');
+      return null;
+    }
+
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      const { Camera } = await import('@capacitor/camera');
+      const { CameraResultType, CameraSource } = await import('@capacitor/camera');
+
+      const image = await Camera.getPhoto({
+        quality: 90,
+        allowEditing: false,
+        resultType: CameraResultType.Uri,
+        source: CameraSource.Photos,
+      });
+
+      const result: PhotoResult = {
+        path: image.path || '',
+        webPath: image.webPath,
+        format: image.format,
+      };
+
+      setPhoto(result);
+      return result;
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Photo picker error';
+      setError(message);
+      console.error('[Photo Picker Error]', err);
+      return null;
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const clearPhoto = useCallback(() => {
+    setPhoto(null);
+    setError(null);
+  }, []);
+
+  return {
+    takePhoto,
+    pickPhoto,
+    clearPhoto,
+    photo,
+    isLoading,
+    error,
+  };
+}
diff --git a/client/src/hooks/use-device-contacts.ts b/client/src/hooks/use-device-contacts.ts
new file mode 100644
index 0000000..86884f5
--- /dev/null
+++ b/client/src/hooks/use-device-contacts.ts
@@ -0,0 +1,58 @@
+import { useState, useCallback } from 'react';
+import { isMobile } from '@/lib/platform';
+
+export interface ContactResult {
+  contactId: string;
+  displayName?: string;
+  phoneNumbers?: Array<{ number?: string }>;
+  emails?: Array<{ address?: string }>;
+  photoThumbnail?: string;
+}
+
+export function useDeviceContacts() {
+  const [contacts, setContacts] = useState<ContactResult[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchContacts = useCallback(async () => {
+    if (!isMobile()) {
+      setError('Contacts only available on mobile');
+      return [];
+    }
+
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      // Mock contacts for now since plugin may not be installed
+      const mockContacts = [
+        { contactId: '1', displayName: 'John Doe', phoneNumbers: [{ number: '555-0100' }], emails: [{ address: 'john@example.com' }] },
+        { contactId: '2', displayName: 'Jane Smith', phoneNumbers: [{ number: '555-0101' }], emails: [{ address: 'jane@example.com' }] },
+        { contactId: '3', displayName: 'Bob Wilson', phoneNumbers: [{ number: '555-0102' }], emails: [{ address: 'bob@example.com' }] },
+      ];
+
+      setContacts(mockContacts);
+      return mockContacts;
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Contacts fetch error';
+      setError(message);
+      console.error('[Contacts Error]', err);
+      return [];
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const clearContacts = useCallback(() => {
+    setContacts([]);
+    setError(null);
+  }, []);
+
+  return {
+    contacts,
+    isLoading,
+    error,
+    fetchContacts,
+    clearContacts,
+  };
+}
diff --git a/client/src/hooks/use-device-file-picker.ts b/client/src/hooks/use-device-file-picker.ts
new file mode 100644
index 0000000..f38e9fd
--- /dev/null
+++ b/client/src/hooks/use-device-file-picker.ts
@@ -0,0 +1,81 @@
+import { useState, useCallback } from 'react';
+
+export interface FileResult {
+  name: string;
+  size: number;
+  type: string;
+  dataUrl?: string;
+}
+
+export function useDeviceFilePicker() {
+  const [file, setFile] = useState<FileResult | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const pickFile = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      // Use web file input as fallback
+      const input = document.createElement('input');
+      input.type = 'file';
+      input.accept = '*/*';
+
+      const filePromise = new Promise<File | null>((resolve) => {
+        input.onchange = (e) => {
+          const target = e.target as HTMLInputElement;
+          resolve(target.files?.[0] || null);
+        };
+        input.oncancel = () => resolve(null);
+      });
+
+      input.click();
+
+      const selectedFile = await filePromise;
+      if (!selectedFile) {
+        return null;
+      }
+
+      // Read file as data URL
+      const reader = new FileReader();
+      const dataUrlPromise = new Promise<string>((resolve, reject) => {
+        reader.onload = () => resolve(reader.result as string);
+        reader.onerror = reject;
+      });
+
+      reader.readAsDataURL(selectedFile);
+      const dataUrl = await dataUrlPromise;
+
+      const result: FileResult = {
+        name: selectedFile.name,
+        size: selectedFile.size,
+        type: selectedFile.type,
+        dataUrl,
+      };
+
+      setFile(result);
+      return result;
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'File picker error';
+      setError(message);
+      console.error('[File Picker Error]', err);
+      return null;
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const clearFile = useCallback(() => {
+    setFile(null);
+    setError(null);
+  }, []);
+
+  return {
+    file,
+    isLoading,
+    error,
+    pickFile,
+    clearFile,
+  };
+}
diff --git a/client/src/hooks/use-offline-sync.ts b/client/src/hooks/use-offline-sync.ts
new file mode 100644
index 0000000..4babae8
--- /dev/null
+++ b/client/src/hooks/use-offline-sync.ts
@@ -0,0 +1,101 @@
+import { useState, useEffect, useCallback } from 'react';
+
+export interface SyncQueueItem {
+  id: string;
+  type: string;
+  action: string;
+  payload: any;
+  timestamp: number;
+  synced: boolean;
+}
+
+export function useOfflineSync() {
+  const [isOnline, setIsOnline] = useState(typeof navigator !== 'undefined' ? navigator.onLine : true);
+  const [syncQueue, setSyncQueue] = useState<SyncQueueItem[]>(() => {
+    if (typeof window === 'undefined') return [];
+    const saved = localStorage.getItem('aethex-sync-queue');
+    return saved ? JSON.parse(saved) : [];
+  });
+  const [isSyncing, setIsSyncing] = useState(false);
+
+  // Track online/offline
+  useEffect(() => {
+    const handleOnline = () => setIsOnline(true);
+    const handleOffline = () => setIsOnline(false);
+
+    window.addEventListener('online', handleOnline);
+    window.addEventListener('offline', handleOffline);
+
+    return () => {
+      window.removeEventListener('online', handleOnline);
+      window.removeEventListener('offline', handleOffline);
+    };
+  }, []);
+
+  // Persist queue to localStorage
+  useEffect(() => {
+    localStorage.setItem('aethex-sync-queue', JSON.stringify(syncQueue));
+  }, [syncQueue]);
+
+  // Auto-sync when online
+  useEffect(() => {
+    if (isOnline && syncQueue.length > 0) {
+      processSyncQueue();
+    }
+  }, [isOnline]);
+
+  const addToQueue = useCallback((type: string, action: string, payload: any) => {
+    const item: SyncQueueItem = {
+      id: `${type}-${Date.now()}`,
+      type,
+      action,
+      payload,
+      timestamp: Date.now(),
+      synced: false,
+    };
+
+    setSyncQueue(prev => [...prev, item]);
+    return item;
+  }, []);
+
+  const processSyncQueue = useCallback(async () => {
+    if (isSyncing || !isOnline) return;
+
+    setIsSyncing(true);
+    const unsynced = syncQueue.filter(item => !item.synced);
+
+    for (const item of unsynced) {
+      try {
+        // Send to server
+        const res = await fetch('/api/sync', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(item),
+        });
+
+        if (res.ok) {
+          setSyncQueue(prev =>
+            prev.map(i => i.id === item.id ? { ...i, synced: true } : i)
+          );
+        }
+      } catch (err) {
+        console.error('[Sync Error]', item.id, err);
+      }
+    }
+
+    setIsSyncing(false);
+  }, [syncQueue, isOnline, isSyncing]);
+
+  const clearSynced = useCallback(() => {
+    setSyncQueue(prev => prev.filter(item => !item.synced));
+  }, []);
+
+  return {
+    isOnline,
+    syncQueue,
+    isSyncing,
+    addToQueue,
+    processSyncQueue,
+    clearSynced,
+  };
+}
diff --git a/client/src/hooks/use-samsung-dex.ts b/client/src/hooks/use-samsung-dex.ts
new file mode 100644
index 0000000..62ff2a0
--- /dev/null
+++ b/client/src/hooks/use-samsung-dex.ts
@@ -0,0 +1,100 @@
+import { useState, useCallback, useEffect } from 'react';
+import { Device } from '@capacitor/device';
+import { isMobile } from '@/lib/platform';
+
+export function useSamsungDex() {
+  const [isDexMode, setIsDexMode] = useState(false);
+  const [isLinkAvailable, setIsLinkAvailable] = useState(false);
+  const [deviceInfo, setDeviceInfo] = useState<any>(null);
+  const [isChecking, setIsChecking] = useState(false);
+
+  const checkDexMode = useCallback(async () => {
+    if (!isMobile()) {
+      setIsLinkAvailable(false);
+      return false;
+    }
+
+    try {
+      setIsChecking(true);
+
+      const info = await Device.getInfo();
+      setDeviceInfo(info);
+
+      const screenWidth = window.innerWidth;
+      const screenHeight = window.innerHeight;
+      const aspectRatio = screenWidth / screenHeight;
+
+      // Check for Samsung-specific APIs and user agent
+      const hasSamsungAPIs = !!(
+        (window as any).__SAMSUNG__ || 
+        (window as any).samsung ||
+        (window as any).SamsungLink
+      );
+      const isSamsung = navigator.userAgent.includes('SAMSUNG') || 
+                       navigator.userAgent.includes('Samsung') ||
+                       info.manufacturer?.toLowerCase().includes('samsung');
+
+      // SAMSUNG LINK FOR WINDOWS DETECTION
+      // Link mirrors phone screen to Windows PC - key indicators:
+      // 1. Samsung device
+      // 2. Desktop-sized viewport (>1024px width)
+      // 3. Desktop aspect ratio (landscape)
+      // 4. Navigator platform hints at Windows connection
+      const isWindowsLink = isSamsung && 
+                           screenWidth >= 1024 && 
+                           aspectRatio > 1.3 &&
+                           (navigator.userAgent.includes('Windows') || 
+                            (window as any).SamsungLink ||
+                            hasSamsungAPIs);
+
+      // DeX (dock to monitor) vs Link (mirror to PC)
+      // DeX: 1920x1080+ desktop mode
+      // Link: 1024-1920 mirrored mode
+      const isDex = screenWidth >= 1920 && aspectRatio > 1.5 && aspectRatio < 1.8;
+      const isLink = screenWidth >= 1024 && screenWidth < 1920 && aspectRatio > 1.3;
+
+      setIsDexMode(isDex || isWindowsLink);
+      setIsLinkAvailable(isWindowsLink || isLink || hasSamsungAPIs);
+
+      console.log('🔗 [SAMSUNG WINDOWS LINK DETECTION]', {
+        screenWidth,
+        screenHeight,
+        aspectRatio,
+        isSamsung,
+        hasSamsungAPIs,
+        isDex,
+        isWindowsLink,
+        manufacturer: info.manufacturer,
+        platform: info.platform,
+        userAgent: navigator.userAgent.substring(0, 100),
+      });
+
+      return isDex || isWindowsLink;
+    } catch (err) {
+      console.log('[DeX/Link Check] Error:', err);
+      return false;
+    } finally {
+      setIsChecking(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    checkDexMode();
+
+    // Re-check on orientation change / window resize
+    const handleResize = () => {
+      checkDexMode();
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [checkDexMode]);
+
+  return {
+    isDexMode,
+    isLinkAvailable,
+    deviceInfo,
+    isChecking,
+    checkDexMode,
+  };
+}
diff --git a/client/src/hooks/use-touch-gestures.ts b/client/src/hooks/use-touch-gestures.ts
new file mode 100644
index 0000000..cd020c3
--- /dev/null
+++ b/client/src/hooks/use-touch-gestures.ts
@@ -0,0 +1,118 @@
+import { useEffect, useRef } from 'react';
+
+export interface SwipeHandlers {
+  onSwipeLeft?: () => void;
+  onSwipeRight?: () => void;
+  onSwipeUp?: () => void;
+  onSwipeDown?: () => void;
+  onPinch?: (scale: number) => void;
+  onDoubleTap?: () => void;
+  onLongPress?: () => void;
+}
+
+export function useTouchGestures(handlers: SwipeHandlers, elementRef?: React.RefObject<HTMLElement>) {
+  const touchStart = useRef<{ x: number; y: number; time: number } | null>(null);
+  const lastTap = useRef<number>(0);
+  const pinchStart = useRef<number>(0);
+  const longPressTimer = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    const target = elementRef?.current || document;
+
+    const handleTouchStart = (e: TouchEvent) => {
+      if (e.touches.length === 1) {
+        touchStart.current = {
+          x: e.touches[0].clientX,
+          y: e.touches[0].clientY,
+          time: Date.now()
+        };
+
+        // Start long press timer
+        if (handlers.onLongPress) {
+          longPressTimer.current = setTimeout(() => {
+            handlers.onLongPress?.();
+            touchStart.current = null;
+          }, 500);
+        }
+      } else if (e.touches.length === 2 && handlers.onPinch) {
+        const dx = e.touches[0].clientX - e.touches[1].clientX;
+        const dy = e.touches[0].clientY - e.touches[1].clientY;
+        pinchStart.current = Math.sqrt(dx * dx + dy * dy);
+      }
+    };
+
+    const handleTouchEnd = (e: TouchEvent) => {
+      // Clear long press timer
+      if (longPressTimer.current) {
+        clearTimeout(longPressTimer.current);
+        longPressTimer.current = null;
+      }
+
+      if (!touchStart.current || e.touches.length > 0) return;
+
+      const deltaX = e.changedTouches[0].clientX - touchStart.current.x;
+      const deltaY = e.changedTouches[0].clientY - touchStart.current.y;
+      const deltaTime = Date.now() - touchStart.current.time;
+
+      // Double tap detection
+      if (deltaTime < 300 && Math.abs(deltaX) < 10 && Math.abs(deltaY) < 10) {
+        if (Date.now() - lastTap.current < 300 && handlers.onDoubleTap) {
+          handlers.onDoubleTap();
+        }
+        lastTap.current = Date.now();
+      }
+
+      // Swipe detection (minimum 50px, max 300ms)
+      if (deltaTime < 300) {
+        if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {
+          if (deltaX > 0 && handlers.onSwipeRight) {
+            handlers.onSwipeRight();
+          } else if (deltaX < 0 && handlers.onSwipeLeft) {
+            handlers.onSwipeLeft();
+          }
+        } else if (Math.abs(deltaY) > 50) {
+          if (deltaY > 0 && handlers.onSwipeDown) {
+            handlers.onSwipeDown();
+          } else if (deltaY < 0 && handlers.onSwipeUp) {
+            handlers.onSwipeUp();
+          }
+        }
+      }
+
+      touchStart.current = null;
+    };
+
+    const handleTouchMove = (e: TouchEvent) => {
+      // Cancel long press on move
+      if (longPressTimer.current && touchStart.current) {
+        const dx = e.touches[0].clientX - touchStart.current.x;
+        const dy = e.touches[0].clientY - touchStart.current.y;
+        if (Math.abs(dx) > 10 || Math.abs(dy) > 10) {
+          clearTimeout(longPressTimer.current);
+          longPressTimer.current = null;
+        }
+      }
+
+      if (e.touches.length === 2 && handlers.onPinch && pinchStart.current) {
+        const dx = e.touches[0].clientX - e.touches[1].clientX;
+        const dy = e.touches[0].clientY - e.touches[1].clientY;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        const scale = distance / pinchStart.current;
+        handlers.onPinch(scale);
+      }
+    };
+
+    target.addEventListener('touchstart', handleTouchStart as any);
+    target.addEventListener('touchend', handleTouchEnd as any);
+    target.addEventListener('touchmove', handleTouchMove as any);
+
+    return () => {
+      if (longPressTimer.current) {
+        clearTimeout(longPressTimer.current);
+      }
+      target.removeEventListener('touchstart', handleTouchStart as any);
+      target.removeEventListener('touchend', handleTouchEnd as any);
+      target.removeEventListener('touchmove', handleTouchMove as any);
+    };
+  }, [handlers, elementRef]);
+}
diff --git a/client/src/lib/haptics.ts b/client/src/lib/haptics.ts
new file mode 100644
index 0000000..361efe9
--- /dev/null
+++ b/client/src/lib/haptics.ts
@@ -0,0 +1,80 @@
+export const haptics = {
+  /**
+   * Light impact for subtle feedback
+   */
+  light: () => {
+    if ('vibrate' in navigator) {
+      navigator.vibrate(10);
+    }
+  },
+
+  /**
+   * Medium impact for standard interactions
+   */
+  medium: () => {
+    if ('vibrate' in navigator) {
+      navigator.vibrate(20);
+    }
+  },
+
+  /**
+   * Heavy impact for significant actions
+   */
+  heavy: () => {
+    if ('vibrate' in navigator) {
+      navigator.vibrate([30, 10, 30]);
+    }
+  },
+
+  /**
+   * Success notification pattern
+   */
+  success: () => {
+    if ('vibrate' in navigator) {
+      navigator.vibrate([10, 30, 10]);
+    }
+  },
+
+  /**
+   * Warning notification pattern
+   */
+  warning: () => {
+    if ('vibrate' in navigator) {
+      navigator.vibrate([20, 50, 20]);
+    }
+  },
+
+  /**
+   * Error notification pattern
+   */
+  error: () => {
+    if ('vibrate' in navigator) {
+      navigator.vibrate([50, 50, 50]);
+    }
+  },
+
+  /**
+   * Selection changed pattern
+   */
+  selection: () => {
+    if ('vibrate' in navigator) {
+      navigator.vibrate(5);
+    }
+  },
+
+  /**
+   * Custom vibration pattern
+   */
+  pattern: (pattern: number | number[]) => {
+    if ('vibrate' in navigator) {
+      navigator.vibrate(pattern);
+    }
+  }
+};
+
+/**
+ * Check if device supports vibration
+ */
+export function isHapticSupported(): boolean {
+  return 'vibrate' in navigator;
+}
diff --git a/client/src/pages/builds.tsx b/client/src/pages/builds.tsx
new file mode 100644
index 0000000..c377649
--- /dev/null
+++ b/client/src/pages/builds.tsx
@@ -0,0 +1,246 @@
+import { Link } from "wouter";
+import { Button } from "@/components/ui/button";
+import gridBg from "@assets/generated_images/dark_digital_circuit_board_background.png";
+
+export default function Builds() {
+  return (
+    <div className="min-h-screen bg-background text-foreground font-mono relative overflow-hidden">
+      <div
+        className="absolute inset-0 opacity-15 pointer-events-none z-0"
+        style={{ backgroundImage: `url(${gridBg})`, backgroundSize: "cover" }}
+      />
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(234,179,8,0.18),transparent_60%)] opacity-80" />
+      <div className="absolute -top-40 right-0 h-72 w-72 rounded-full bg-secondary/20 blur-3xl" />
+      <div className="absolute -bottom-32 left-0 h-72 w-72 rounded-full bg-primary/20 blur-3xl" />
+
+      <div className="relative z-10 container mx-auto px-6 py-12 max-w-6xl">
+        <Link href="/">
+          <button className="text-muted-foreground hover:text-primary transition-colors flex items-center gap-2 uppercase text-xs tracking-widest mb-10">
+            Return Home
+          </button>
+        </Link>
+
+        <section className="mb-14">
+          <div className="inline-flex items-center gap-3 border border-primary/40 bg-primary/10 px-3 py-1 text-xs uppercase tracking-[0.3em] text-primary">
+            AeThex Builds
+          </div>
+          <h1 className="text-4xl md:text-6xl font-display font-bold uppercase tracking-tight mt-6 mb-4">
+            Everything We Ship
+          </h1>
+          <p className="text-muted-foreground text-lg max-w-3xl leading-relaxed">
+            AeThex OS is a multi-form build system: a live web OS, a bootable Linux ISO,
+            and an Android app that mirrors the OS runtime. This page is the single
+            source of truth for what exists, how to verify it, and how to build it.
+          </p>
+          <div className="mt-6 flex flex-wrap gap-3">
+            <Button asChild>
+              <a href="#build-matrix">Build Matrix</a>
+            </Button>
+            <Button variant="outline" asChild>
+              <a href="#verification">Verification</a>
+            </Button>
+          </div>
+        </section>
+
+        <section id="build-matrix" className="mb-16">
+          <div className="flex items-center gap-3 mb-6">
+            <div className="h-px flex-1 bg-primary/30" />
+            <h2 className="text-sm uppercase tracking-[0.4em] text-primary">Build Matrix</h2>
+            <div className="h-px flex-1 bg-primary/30" />
+          </div>
+          <div className="grid gap-6 md:grid-cols-2">
+            <div className="border border-primary/30 bg-card/60 p-6 relative">
+              <div className="absolute top-0 left-0 h-1 w-full bg-primary/60" />
+              <h3 className="font-display text-xl uppercase text-white mb-2">AeThex OS Linux ISO</h3>
+              <p className="text-sm text-muted-foreground mb-4">
+                Bootable Linux build of the full AeThex OS desktop runtime. Designed for
+                verification, demos, and on-device deployments.
+              </p>
+              <div className="text-xs uppercase tracking-widest text-secondary mb-2">Outputs</div>
+              <div className="text-sm text-muted-foreground mb-4">
+                `aethex-linux-build/AeThex-Linux-amd64.iso` plus checksum.
+              </div>
+              <div className="flex flex-wrap gap-2">
+                <Button variant="secondary" asChild>
+                  <a href="#verification">Verify ISO</a>
+                </Button>
+                <Button variant="outline" asChild>
+                  <a href="#iso-build">Build Guide</a>
+                </Button>
+              </div>
+            </div>
+
+            <div className="border border-secondary/30 bg-card/60 p-6 relative">
+              <div className="absolute top-0 left-0 h-1 w-full bg-secondary/60" />
+              <h3 className="font-display text-xl uppercase text-white mb-2">Android App</h3>
+              <p className="text-sm text-muted-foreground mb-4">
+                Capacitor + Android Studio build for mobile deployment. Mirrors the OS UI
+                with native bridge hooks and mobile quick actions.
+              </p>
+              <div className="text-xs uppercase tracking-widest text-secondary mb-2">Status</div>
+              <div className="text-sm text-muted-foreground mb-4">
+                Build from source now. Distribution APK coming soon.
+              </div>
+              <div className="flex flex-wrap gap-2">
+                <Button variant="secondary" asChild>
+                  <a href="#android-build">Build Android</a>
+                </Button>
+                <Button variant="outline" disabled>
+                  APK Coming Soon
+                </Button>
+              </div>
+            </div>
+
+            <div className="border border-white/10 bg-card/60 p-6 relative">
+              <div className="absolute top-0 left-0 h-1 w-full bg-white/30" />
+              <h3 className="font-display text-xl uppercase text-white mb-2">Web Client</h3>
+              <p className="text-sm text-muted-foreground mb-4">
+                Primary OS surface for browsers. Ships continuously and powers live
+                demos, admin panels, and the runtime workspace.
+              </p>
+              <div className="text-xs uppercase tracking-widest text-secondary mb-2">Status</div>
+              <div className="text-sm text-muted-foreground mb-4">
+                Live, iterating daily. Can be built locally or deployed on demand.
+              </div>
+              <div className="flex flex-wrap gap-2">
+                <Button variant="secondary" asChild>
+                  <a href="#web-build">Build Web</a>
+                </Button>
+                <Button variant="outline" asChild>
+                  <a href="/">Launch OS</a>
+                </Button>
+              </div>
+            </div>
+
+            <div className="border border-destructive/30 bg-card/60 p-6 relative">
+              <div className="absolute top-0 left-0 h-1 w-full bg-destructive/60" />
+              <h3 className="font-display text-xl uppercase text-white mb-2">iOS App</h3>
+              <p className="text-sm text-muted-foreground mb-4">
+                Native shell for Apple hardware. This will mirror the Android runtime with
+                device-grade entitlements and mobile UX tuning.
+              </p>
+              <div className="text-xs uppercase tracking-widest text-secondary mb-2">Status</div>
+              <div className="text-sm text-muted-foreground mb-4">
+                Coming soon. Placeholder only until Apple hardware validation is complete.
+              </div>
+              <Button variant="outline" disabled>
+                Coming Soon
+              </Button>
+            </div>
+          </div>
+        </section>
+
+        <section className="mb-16" id="verification">
+          <div className="flex items-center gap-3 mb-6">
+            <div className="h-px flex-1 bg-secondary/30" />
+            <h2 className="text-sm uppercase tracking-[0.4em] text-secondary">Verification</h2>
+            <div className="h-px flex-1 bg-secondary/30" />
+          </div>
+          <div className="grid gap-6 md:grid-cols-2">
+            <div className="border border-secondary/30 bg-card/60 p-6">
+              <h3 className="font-display text-lg uppercase text-white mb-3">ISO Integrity</h3>
+              <p className="text-sm text-muted-foreground mb-4">
+                Run the verification script to confirm checksums and boot assets before
+                you ship or demo.
+              </p>
+              <pre className="bg-black/40 border border-white/10 p-4 text-xs text-muted-foreground overflow-x-auto">
+{`./script/verify-iso.sh -i aethex-linux-build/AeThex-Linux-amd64.iso
+./script/verify-iso.sh -i AeThex-OS-Full-amd64.iso --mount`}
+              </pre>
+            </div>
+            <div className="border border-primary/30 bg-card/60 p-6">
+              <h3 className="font-display text-lg uppercase text-white mb-3">Artifact Checks</h3>
+              <p className="text-sm text-muted-foreground mb-4">
+                Always keep the ISO next to its checksum file. If the SHA changes, rebuild.
+              </p>
+              <pre className="bg-black/40 border border-white/10 p-4 text-xs text-muted-foreground overflow-x-auto">
+{`ls -lh aethex-linux-build/*.iso
+sha256sum -c aethex-linux-build/*.sha256`}
+              </pre>
+            </div>
+          </div>
+        </section>
+
+        <section className="mb-16" id="iso-build">
+          <div className="flex items-center gap-3 mb-6">
+            <div className="h-px flex-1 bg-primary/30" />
+            <h2 className="text-sm uppercase tracking-[0.4em] text-primary">ISO Build</h2>
+            <div className="h-px flex-1 bg-primary/30" />
+          </div>
+          <div className="border border-primary/30 bg-card/60 p-6">
+            <p className="text-sm text-muted-foreground mb-4">
+              The ISO build is scripted and reproducible. Use the full build script for a
+              complete OS image with the desktop runtime.
+            </p>
+            <pre className="bg-black/40 border border-white/10 p-4 text-xs text-muted-foreground overflow-x-auto">
+{`sudo bash script/build-linux-iso.sh
+# Output: aethex-linux-build/AeThex-Linux-amd64.iso`}
+            </pre>
+          </div>
+        </section>
+
+        <section className="mb-16" id="android-build">
+          <div className="flex items-center gap-3 mb-6">
+            <div className="h-px flex-1 bg-secondary/30" />
+            <h2 className="text-sm uppercase tracking-[0.4em] text-secondary">Android Build</h2>
+            <div className="h-px flex-1 bg-secondary/30" />
+          </div>
+          <div className="border border-secondary/30 bg-card/60 p-6">
+            <p className="text-sm text-muted-foreground mb-4">
+              Build the web bundle first, then sync to Capacitor and run the Gradle build.
+            </p>
+            <pre className="bg-black/40 border border-white/10 p-4 text-xs text-muted-foreground overflow-x-auto">
+{`npm install
+npm run build
+npx cap sync android
+cd android
+./gradlew assembleDebug`}
+            </pre>
+            <p className="text-xs text-muted-foreground mt-4">
+              The APK output will be in `android/app/build/outputs/apk/`.
+            </p>
+          </div>
+        </section>
+
+        <section className="mb-16" id="web-build">
+          <div className="flex items-center gap-3 mb-6">
+            <div className="h-px flex-1 bg-primary/30" />
+            <h2 className="text-sm uppercase tracking-[0.4em] text-primary">Web Client</h2>
+            <div className="h-px flex-1 bg-primary/30" />
+          </div>
+          <div className="border border-primary/30 bg-card/60 p-6">
+            <p className="text-sm text-muted-foreground mb-4">
+              The web OS runs on Vite + React. Use dev mode for iteration, build for production.
+            </p>
+            <pre className="bg-black/40 border border-white/10 p-4 text-xs text-muted-foreground overflow-x-auto">
+{`npm install
+npm run dev
+# or
+npm run build`}
+            </pre>
+          </div>
+        </section>
+
+        <section className="mb-8">
+          <div className="border border-white/10 bg-card/60 p-6">
+            <h2 className="font-display text-2xl uppercase text-white mb-4">The Big Explainer</h2>
+            <p className="text-muted-foreground text-sm leading-relaxed mb-4">
+              AeThex OS is not a single app. It is a multi-surface operating system that
+              treats the browser, desktop, and phone as interchangeable launch nodes for
+              the same living runtime. The web client is the living core. The Linux ISO
+              proves the OS can boot, isolate a runtime, and ship offline. The Android app
+              turns the OS into a pocket terminal with native bridge hooks. iOS is planned
+              to mirror the mobile stack once Apple hardware validation is complete.
+            </p>
+            <p className="text-muted-foreground text-sm leading-relaxed">
+              If you are an investor or partner, this is a platform bet: an OS that ships
+              across formats, built on a single codebase, with verifiable artifacts and
+              a real deployment pipeline. The deliverable is not hype. It is a build matrix
+              you can reproduce, verify, and ship.
+            </p>
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 7c6c5f4..678a547 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import { motion } from "framer-motion";
-import { Link } from "wouter";
+import { Link, useLocation } from "wouter";
 import { useQuery } from "@tanstack/react-query";
 import { 
   Shield, FileCode, Terminal as TerminalIcon, ChevronRight, BarChart3, Network, 
@@ -13,6 +13,7 @@ import { ThemeToggle } from "@/components/ThemeToggle";
 
 export default function Home() {
   const { startTutorial, hasCompletedTutorial, isActive } = useTutorial();
+  const [, navigate] = useLocation();
   
   const { data: metrics } = useQuery({
     queryKey: ["metrics"],
@@ -24,6 +25,13 @@ export default function Home() {
 
   return (
     <div className="min-h-screen bg-background text-foreground font-mono selection:bg-primary selection:text-background relative overflow-hidden">
+      {/* Mobile Back Button */}
+      <button
+        onClick={() => navigate('/mobile')}
+        className="fixed top-4 left-4 z-50 md:hidden p-3 rounded-full bg-emerald-600 active:bg-emerald-700 shadow-lg"
+      >
+        <ArrowRight className="w-6 h-6 rotate-180" />
+      </button>
       <div 
         className="absolute inset-0 opacity-20 pointer-events-none z-0"
         style={{ backgroundImage: `url(${gridBg})`, backgroundSize: 'cover' }}
diff --git a/client/src/pages/hub/marketplace.tsx b/client/src/pages/hub/marketplace.tsx
index 7454e18..8d41a99 100644
--- a/client/src/pages/hub/marketplace.tsx
+++ b/client/src/pages/hub/marketplace.tsx
@@ -78,54 +78,67 @@ export default function Marketplace() {
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-900 to-slate-800">
       {/* Header */}
-      <div className="bg-slate-950 border-b border-slate-700 px-6 py-4 flex items-center justify-between sticky top-0 z-10">
-        <div className="flex items-center gap-4">
-          <Link href="/">
-            <button className="text-slate-400 hover:text-white">
-              <ArrowLeft className="w-5 h-5" />
-            </button>
-          </Link>
-          <h1 className="text-2xl font-bold text-white">Marketplace</h1>
-        </div>
-        <div className="flex items-center gap-4">
-          <div className="bg-slate-800 px-4 py-2 rounded-lg border border-slate-700">
-            <p className="text-sm text-slate-400">Balance</p>
-            <p className="text-xl font-bold text-cyan-400">{balance} LP</p>
+      <div className="bg-slate-950 border-b border-slate-700 px-3 md:px-6 py-3 md:py-4 sticky top-0 z-10">
+        <div className="flex items-center justify-between gap-2">
+          <div className="flex items-center gap-2 md:gap-4 min-w-0 flex-1">
+            <Link href="/">
+              <button className="text-slate-400 hover:text-white shrink-0">
+                <ArrowLeft className="w-5 h-5" />
+              </button>
+            </Link>
+            <h1 className="text-lg md:text-2xl font-bold text-white truncate">Marketplace</h1>
+          </div>
+          <div className="flex items-center gap-2 md:gap-4 shrink-0">
+            <div className="bg-slate-800 px-2 md:px-4 py-1.5 md:py-2 rounded-lg border border-slate-700">
+              <p className="text-xs text-slate-400 hidden sm:block">Balance</p>
+              <p className="text-sm md:text-xl font-bold text-cyan-400">{balance} LP</p>
+            </div>
+            <Button className="bg-cyan-600 hover:bg-cyan-700 gap-1 md:gap-2 text-xs md:text-sm px-2 md:px-4 h-8 md:h-10">
+              <Plus className="w-3 h-3 md:w-4 md:h-4" />
+              <span className="hidden sm:inline">Sell Item</span>
+              <span className="sm:hidden">Sell</span>
+            </Button>
           </div>
-          <Button className="bg-cyan-600 hover:bg-cyan-700 gap-2">
-            <Plus className="w-4 h-4" />
-            Sell Item
-          </Button>
         </div>
       </div>
 
-      <div className="p-6 max-w-7xl mx-auto">
+      <div className="p-3 md:p-6 max-w-7xl mx-auto">
         {/* Category Tabs */}
         <Tabs value={selectedCategory} onValueChange={setSelectedCategory} className="mb-6">
-          <TabsList className="bg-slate-800 border-b border-slate-700">
-            <TabsTrigger value="all" className="text-slate-300">
+          <TabsList className="bg-slate-800 border-b border-slate-700 w-full overflow-x-auto flex-nowrap">
+            <TabsTrigger value="all" className="text-slate-300 text-xs md:text-sm whitespace-nowrap">
               All Items
             </TabsTrigger>
-            <TabsTrigger value="code" className="text-slate-300">
-              Code & Snippets
+            <TabsTrigger value="code" className="text-slate-300 text-xs md:text-sm whitespace-nowrap">
+              Code
             </TabsTrigger>
-            <TabsTrigger value="achievement" className="text-slate-300">
+            <TabsTrigger value="achievement" className="text-slate-300 text-xs md:text-sm whitespace-nowrap">
               Achievements
             </TabsTrigger>
-            <TabsTrigger value="service" className="text-slate-300">
+            <TabsTrigger value="service" className="text-slate-300 text-xs md:text-sm whitespace-nowrap">
               Services
             </TabsTrigger>
-            <TabsTrigger value="credential" className="text-slate-300">
+            <TabsTrigger value="credential" className="text-slate-300 text-xs md:text-sm whitespace-nowrap">
               Credentials
             </TabsTrigger>
           </TabsList>
 
           <TabsContent value={selectedCategory} className="mt-6">
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {loading ? (
+              <div className="flex items-center justify-center py-12">
+                <Loader2 className="w-8 h-8 text-cyan-400 animate-spin" />
+              </div>
+            ) : filteredListings.length === 0 ? (
+              <div className="text-center py-12 text-slate-400">
+                <ShoppingCart className="w-12 h-12 mx-auto mb-3 opacity-50" />
+                <p>No items found in this category</p>
+              </div>
+            ) : (
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 md:gap-4">
               {filteredListings.map((listing) => (
                 <Card
                   key={listing.id}
-                  className="bg-slate-800 border-slate-700 p-5 hover:border-cyan-500 transition-all group cursor-pointer"
+                  className="bg-slate-800 border-slate-700 p-4 md:p-5 hover:border-cyan-500 transition-all group cursor-pointer active:scale-[0.98]"
                 >
                   {/* Category Badge */}
                   <div className="mb-3 flex items-center gap-2">
@@ -139,13 +152,13 @@ export default function Marketplace() {
                   </div>
 
                   {/* Title */}
-                  <h3 className="text-white font-bold mb-2 text-lg group-hover:text-cyan-400 transition-colors">
+                  <h3 className="text-white font-bold mb-2 text-base md:text-lg group-hover:text-cyan-400 transition-colors line-clamp-2">
                     {listing.title}
                   </h3>
 
                   {/* Seller Info */}
                   <div className="mb-3 text-sm">
-                    <p className="text-slate-400">by {listing.seller}</p>
+                    <p className="text-slate-400 truncate">by {listing.seller}</p>
                   </div>
 
                   {/* Rating & Purchases */}
@@ -158,30 +171,31 @@ export default function Marketplace() {
                   </div>
 
                   {/* Price & Button */}
-                  <div className="flex items-center justify-between">
-                    <div className="text-2xl font-bold text-cyan-400">
+                  <div className="flex items-center justify-between gap-2">
+                    <div className="text-xl md:text-2xl font-bold text-cyan-400">
                       {listing.price}
-                      <span className="text-sm text-slate-400 ml-1">LP</span>
+                      <span className="text-xs md:text-sm text-slate-400 ml-1">LP</span>
                     </div>
-                    <Button className="bg-cyan-600 hover:bg-cyan-700 gap-2 h-9 px-3">
-                      <ShoppingCart className="w-4 h-4" />
+                    <Button className="bg-cyan-600 hover:bg-cyan-700 gap-1 md:gap-2 h-8 md:h-9 px-2 md:px-3 text-xs md:text-sm">
+                      <ShoppingCart className="w-3 h-3 md:w-4 md:h-4" />
                       Buy
                     </Button>
                   </div>
                 </Card>
               ))}
             </div>
+            )}
           </TabsContent>
         </Tabs>
 
         {/* Featured Section */}
         <div className="mt-12">
-          <h2 className="text-2xl font-bold text-white mb-4">Featured Sellers</h2>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <h2 className="text-xl md:text-2xl font-bold text-white mb-4">Featured Sellers</h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 md:gap-4">
             {["CodeMaster", "TechGuru", "AchievmentHunter"].map((seller) => (
               <Card
                 key={seller}
-                className="bg-slate-800 border-slate-700 p-4 hover:border-cyan-500 transition-colors"
+                className="bg-slate-800 border-slate-700 p-4 hover:border-cyan-500 transition-colors cursor-pointer active:scale-[0.98]"
               >
                 <div className="text-center">
                   <div className="w-12 h-12 rounded-full bg-cyan-600 mx-auto mb-3"></div>
diff --git a/client/src/pages/hub/messaging.tsx b/client/src/pages/hub/messaging.tsx
index bad8dfb..09a7025 100644
--- a/client/src/pages/hub/messaging.tsx
+++ b/client/src/pages/hub/messaging.tsx
@@ -1,9 +1,10 @@
 import { useState, useEffect } from "react";
-import { Link } from "wouter";
+import { Link, useLocation } from "wouter";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Card } from "@/components/ui/card";
 import { ArrowLeft, Send, Search, Loader2 } from "lucide-react";
+import { MobileHeader } from "@/components/mobile/MobileHeader";
 import { supabase } from "@/lib/supabase";
 import { useAuth } from "@/lib/auth";
 import { nanoid } from "nanoid";
@@ -97,8 +98,13 @@ export default function Messaging() {
 
   return (
     <div className="h-screen flex flex-col bg-slate-900">
-      {/* Header */}
-      <div className="bg-slate-950 border-b border-slate-700 px-6 py-4 flex items-center gap-4">
+      {/* Mobile Header */}
+      <div className="md:hidden">
+        <MobileHeader title="Messages" />
+      </div>
+      
+      {/* Desktop Header */}
+      <div className="hidden md:flex bg-slate-950 border-b border-slate-700 px-6 py-4 flex items-center gap-4">
         <Link href="/">
           <button className="text-slate-400 hover:text-white">
             <ArrowLeft className="w-5 h-5" />
diff --git a/client/src/pages/hub/projects.tsx b/client/src/pages/hub/projects.tsx
index 9763564..1e511fa 100644
--- a/client/src/pages/hub/projects.tsx
+++ b/client/src/pages/hub/projects.tsx
@@ -1,10 +1,11 @@
 import { useState, useEffect } from "react";
-import { Link } from "wouter";
+import { Link, useLocation } from "wouter";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Card } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { ArrowLeft, Plus, Trash2, ExternalLink, Github, Globe, Loader2 } from "lucide-react";
+import { MobileHeader } from "@/components/mobile/MobileHeader";
 import { supabase } from "@/lib/supabase";
 import { useAuth } from "@/lib/auth";
 import { nanoid } from "nanoid";
@@ -103,8 +104,13 @@ export default function Projects() {
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-900 to-slate-800">
-      {/* Header */}
-      <div className="bg-slate-950 border-b border-slate-700 px-6 py-4 flex items-center justify-between sticky top-0 z-10">
+      {/* Mobile Header */}
+      <div className="md:hidden">
+        <MobileHeader title="Projects" />
+      </div>
+      
+      {/* Desktop Header */}
+      <div className="hidden md:block bg-slate-950 border-b border-slate-700 px-6 py-4 flex items-center justify-between sticky top-0 z-10">
         <div className="flex items-center gap-4">
           <Link href="/">
             <button className="text-slate-400 hover:text-white transition-colors">
diff --git a/client/src/pages/mobile-camera.tsx b/client/src/pages/mobile-camera.tsx
new file mode 100644
index 0000000..e093e59
--- /dev/null
+++ b/client/src/pages/mobile-camera.tsx
@@ -0,0 +1,159 @@
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { Camera, X, FlipHorizontal, Image as ImageIcon, Send } from 'lucide-react';
+import { useLocation } from 'wouter';
+import { useDeviceCamera } from '@/hooks/use-device-camera';
+import { useNativeFeatures } from '@/hooks/use-native-features';
+import { haptics } from '@/lib/haptics';
+import { isMobile } from '@/lib/platform';
+
+export default function MobileCamera() {
+  const [, navigate] = useLocation();
+  const { photo, isLoading, error, takePhoto, pickPhoto } = useDeviceCamera();
+  const native = useNativeFeatures();
+  const [capturedImage, setCapturedImage] = useState<string | null>(null);
+
+  if (!isMobile()) {
+    navigate('/home');
+    return null;
+  }
+
+  const handleTakePhoto = async () => {
+    haptics.medium();
+    const result = await takePhoto();
+    if (result) {
+      setCapturedImage(result.webPath || result.path || '');
+      native.showToast('Photo captured!');
+      haptics.success();
+    }
+  };
+
+  const handlePickFromGallery = async () => {
+    haptics.light();
+    const result = await pickPhoto();
+    if (result) {
+      setCapturedImage(result.webPath || result.path || '');
+      native.showToast('Photo selected!');
+    }
+  };
+
+  const handleShare = async () => {
+    if (capturedImage) {
+      haptics.medium();
+      await native.shareText('Check out my photo!', 'Photo from AeThex OS');
+      haptics.success();
+    }
+  };
+
+  const handleClose = () => {
+    haptics.light();
+    navigate('/mobile');
+  };
+
+  return (
+    <div className="min-h-screen bg-black text-white">
+      {/* Header */}
+      <div className="fixed top-0 left-0 right-0 z-50 bg-black/90 backdrop-blur-xl border-b border-emerald-500/30">
+        <div className="flex items-center justify-between px-4 py-4 safe-area-inset-top">
+          <button
+            onClick={handleClose}
+            className="p-3 rounded-full bg-emerald-600 active:bg-emerald-700 transition-colors"
+          >
+            <X className="w-6 h-6" />
+          </button>
+          <h1 className="text-xl font-bold text-white">
+            Camera
+          </h1>
+          {capturedImage ? (
+            <button
+              onClick={handleShare}
+              className="p-3 rounded-full bg-blue-600 active:bg-blue-700 transition-colors"
+            >
+              <Send className="w-6 h-6" />
+            </button>
+          ) : (
+            <div className="w-12" />
+          )}
+        </div>
+      </div>
+
+      {/* Main content */}
+      <div className="pt-20 pb-32 px-4">
+        {capturedImage ? (
+          <motion.div
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            className="space-y-4"
+          >
+            <img
+              src={capturedImage}
+              alt="Captured"
+              className="w-full rounded-2xl shadow-2xl"
+            />
+            <div className="flex gap-3">
+              <button
+                onClick={() => {
+                  setCapturedImage(null);
+                  haptics.light();
+                }}
+                className="flex-1 py-3 bg-gray-800 hover:bg-gray-700 rounded-xl font-semibold transition-colors"
+              >
+                Retake
+              </button>
+              <button
+                onClick={handleShare}
+                className="flex-1 py-3 bg-gradient-to-r from-emerald-500 to-cyan-500 hover:from-emerald-400 hover:to-cyan-400 rounded-xl font-semibold transition-colors"
+              >
+                Share
+              </button>
+            </div>
+          </motion.div>
+        ) : (
+          <div className="space-y-6">
+            {/* Camera placeholder */}
+            <div className="aspect-[3/4] bg-gradient-to-br from-gray-900 to-gray-800 rounded-2xl flex items-center justify-center border-2 border-dashed border-emerald-500/30">
+              <div className="text-center">
+                <Camera className="w-16 h-16 mx-auto mb-4 text-emerald-400" />
+                <p className="text-sm text-gray-400">Tap button below to capture</p>
+              </div>
+            </div>
+
+            {error && (
+              <div className="bg-red-900/30 border border-red-500/50 rounded-xl p-4">
+                <p className="text-sm text-red-300">{error}</p>
+              </div>
+            )}
+
+            {/* Camera controls */}
+            <div className="flex gap-4">
+              <button
+                onClick={handlePickFromGallery}
+                disabled={isLoading}
+                className="flex-1 py-4 bg-gray-800 hover:bg-gray-700 rounded-xl font-semibold transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
+              >
+                <ImageIcon className="w-5 h-5" />
+                Gallery
+              </button>
+              <button
+                onClick={handleTakePhoto}
+                disabled={isLoading}
+                className="flex-1 py-4 bg-gradient-to-r from-emerald-500 to-cyan-500 hover:from-emerald-400 hover:to-cyan-400 rounded-xl font-semibold transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
+              >
+                <Camera className="w-5 h-5" />
+                {isLoading ? 'Capturing...' : 'Capture'}
+              </button>
+            </div>
+
+            {/* Info */}
+            <div className="bg-gradient-to-r from-cyan-900/30 to-emerald-900/30 border border-cyan-500/30 rounded-xl p-4">
+              <p className="text-xs text-cyan-200 font-mono">
+                📸 <strong>Camera Access:</strong> This feature uses your device camera.
+                Grant permission when prompted to capture photos.
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/pages/mobile-dashboard.tsx b/client/src/pages/mobile-dashboard.tsx
new file mode 100644
index 0000000..de3fbae
--- /dev/null
+++ b/client/src/pages/mobile-dashboard.tsx
@@ -0,0 +1,285 @@
+import { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { 
+  Home, Camera, Bell, Settings, Zap, Battery, Wifi, 
+  MessageSquare, Package, User, CheckCircle, Star, Award
+} from 'lucide-react';
+import { useLocation } from 'wouter';
+import { PullToRefresh } from '@/components/mobile/PullToRefresh';
+import { SwipeableCardList } from '@/components/mobile/SwipeableCard';
+import { MobileBottomNav, DEFAULT_MOBILE_TABS } from '@/components/MobileBottomNav';
+import { MobileNativeBridge } from '@/components/MobileNativeBridge';
+import { MobileQuickActions } from '@/components/MobileQuickActions';
+import { useNativeFeatures } from '@/hooks/use-native-features';
+import { useTouchGestures } from '@/hooks/use-touch-gestures';
+import { haptics } from '@/lib/haptics';
+import { isMobile } from '@/lib/platform';
+
+interface DashboardCard {
+  id: string;
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+  color: string;
+  badge?: number;
+  action: () => void;
+}
+
+export default function MobileDashboard() {
+  const [location, navigate] = useLocation();
+  const [activeTab, setActiveTab] = useState('home');
+  const [showQuickActions, setShowQuickActions] = useState(false);
+  const native = useNativeFeatures();
+
+  // Redirect non-mobile users
+  useEffect(() => {
+    if (!isMobile()) {
+      navigate('/home');
+    }
+  }, [navigate]);
+
+  const [cards, setCards] = useState<DashboardCard[]>([
+    {
+      id: '1',
+      title: 'Projects',
+      description: 'View and manage your active projects',
+      icon: <Package className="w-6 h-6" />,
+      color: 'from-blue-500 to-cyan-500',
+      badge: 3,
+      action: () => navigate('/hub/projects')
+    },
+    {
+      id: '2',
+      title: 'Messages',
+      description: 'Check your recent conversations',
+      icon: <MessageSquare className="w-6 h-6" />,
+      color: 'from-purple-500 to-pink-500',
+      badge: 5,
+      action: () => navigate('/hub/messaging')
+    },
+    {
+      id: '3',
+      title: 'Achievements',
+      description: 'Track your progress and milestones',
+      icon: <Award className="w-6 h-6" />,
+      color: 'from-yellow-500 to-orange-500',
+      action: () => navigate('/achievements')
+    },
+    {
+      id: '4',
+      title: 'Network',
+      description: 'Connect with other architects',
+      icon: <User className="w-6 h-6" />,
+      color: 'from-green-500 to-emerald-500',
+      action: () => navigate('/network')
+    },
+    {
+      id: '5',
+      title: 'Notifications',
+      description: 'View all your notifications',
+      icon: <Bell className="w-6 h-6" />,
+      color: 'from-red-500 to-pink-500',
+      badge: 2,
+      action: () => navigate('/hub/notifications')
+    }
+  ]);
+
+  // Redirect non-mobile users
+  useEffect(() => {
+    if (!isMobile()) {
+      navigate('/home');
+    }
+  }, [navigate]);
+
+  const handleRefresh = async () => {
+    haptics.light();
+    await new Promise(resolve => setTimeout(resolve, 1500));
+    native.showToast('Dashboard refreshed!');
+    haptics.success();
+  };
+
+  const handleCardSwipeLeft = (card: DashboardCard) => {
+    haptics.medium();
+    setCards(prev => prev.filter(c => c.id !== card.id));
+    native.showToast(`${card.title} removed`);
+  };
+
+  const handleCardSwipeRight = (card: DashboardCard) => {
+    haptics.medium();
+    native.showToast(`${card.title} favorited`);
+  };
+
+  const handleCardTap = (card: DashboardCard) => {
+    haptics.light();
+    card.action();
+  };
+
+  useTouchGestures({
+    onSwipeDown: () => {
+      setShowQuickActions(true);
+      haptics.light();
+    },
+    onSwipeUp: () => {
+      setShowQuickActions(false);
+      haptics.light();
+    }
+  });
+
+  if (!isMobile()) {
+    return null;
+  }
+
+  return (
+    <div className="min-h-screen bg-black text-white pb-20">
+      {/* Native bridge status */}
+      <MobileNativeBridge />
+
+      {/* Header */}
+      <div className="sticky top-0 z-30 bg-black/80 backdrop-blur-xl border-b border-emerald-500/30">
+        <div className="safe-area-inset-top px-4 py-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="text-2xl font-bold text-emerald-300 font-mono">
+                AETHEX MOBILE
+              </h1>
+              <p className="text-xs text-cyan-200 font-mono uppercase tracking-wide">
+                Device Dashboard
+              </p>
+            </div>
+            <button
+              onClick={() => {
+                setShowQuickActions(!showQuickActions);
+                haptics.light();
+              }}
+              className="p-3 rounded-full bg-gradient-to-r from-emerald-500 to-cyan-500 hover:from-emerald-400 hover:to-cyan-400 transition-all"
+            >
+              <Zap className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Main content with pull-to-refresh */}
+      <PullToRefresh onRefresh={handleRefresh}>
+        <div className="px-4 py-6 space-y-6">
+          {/* Quick stats */}
+          <div className="grid grid-cols-3 gap-3">
+            <StatCard 
+              icon={<Star className="w-5 h-5" />}
+              label="Points"
+              value="1,234"
+              color="from-yellow-500 to-orange-500"
+            />
+            <StatCard 
+              icon={<CheckCircle className="w-5 h-5" />}
+              label="Tasks"
+              value="42"
+              color="from-green-500 to-emerald-500"
+            />
+            <StatCard 
+              icon={<Zap className="w-5 h-5" />}
+              label="Streak"
+              value="7d"
+              color="from-purple-500 to-pink-500"
+            />
+          </div>
+
+          {/* Swipeable cards */}
+          <div>
+            <h2 className="text-lg font-bold text-emerald-300 mb-3 font-mono uppercase tracking-wide">
+              Quick Access
+            </h2>
+            <SwipeableCardList
+              items={cards}
+              keyExtractor={(card) => card.id}
+              onItemSwipeLeft={handleCardSwipeLeft}
+              onItemSwipeRight={handleCardSwipeRight}
+              renderItem={(card) => (
+                <div
+                  onClick={() => handleCardTap(card)}
+                  className="bg-gradient-to-r from-gray-900 to-gray-800 border border-emerald-500/20 rounded-xl p-4 cursor-pointer active:scale-95 transition-transform"
+                >
+                  <div className="flex items-start gap-4">
+                    <div className={`p-3 rounded-lg bg-gradient-to-r ${card.color}`}>
+                      {card.icon}
+                    </div>
+                    <div className="flex-1">
+                      <div className="flex items-center justify-between mb-1">
+                        <h3 className="font-semibold text-white">{card.title}</h3>
+                        {card.badge && (
+                          <span className="px-2 py-1 text-xs font-bold bg-red-500 text-white rounded-full">
+                            {card.badge}
+                          </span>
+                        )}
+                      </div>
+                      <p className="text-xs text-gray-400">{card.description}</p>
+                    </div>
+                  </div>
+                </div>
+              )}
+              emptyMessage="No quick access cards available"
+            />
+          </div>
+
+          {/* Helpful tip */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.5 }}
+            className="bg-gradient-to-r from-cyan-900/30 to-emerald-900/30 border border-cyan-500/30 rounded-xl p-4"
+          >
+            <p className="text-xs text-cyan-200 font-mono">
+              💡 <strong>TIP:</strong> Swipe cards left to remove, right to favorite. 
+              Pull down to refresh. Swipe down from top for quick actions.
+            </p>
+          </motion.div>
+        </div>
+      </PullToRefresh>
+
+      {/* Quick actions overlay */}
+      {showQuickActions && (
+        <motion.div
+          initial={{ opacity: 0, y: -50 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -50 }}
+          className="fixed top-20 left-4 right-4 z-40"
+        >
+          <MobileQuickActions />
+        </motion.div>
+      )}
+
+      {/* Bottom navigation */}
+      <MobileBottomNav
+        tabs={DEFAULT_MOBILE_TABS}
+        activeTab={activeTab}
+        onTabChange={(tabId) => {
+          setActiveTab(tabId);
+          haptics.selection();
+          navigate(tabId === 'home' ? '/mobile' : `/${tabId}`);
+        }}
+      />
+    </div>
+  );
+}
+
+function StatCard({ 
+  icon, 
+  label, 
+  value, 
+  color 
+}: { 
+  icon: React.ReactNode;
+  label: string;
+  value: string;
+  color: string;
+}) {
+  return (
+    <div className="bg-gray-900 border border-emerald-500/20 rounded-xl p-3">
+      <div className={`inline-flex p-2 rounded-lg bg-gradient-to-r ${color} mb-2`}>
+        {icon}
+      </div>
+      <div className="text-2xl font-bold text-white mb-1">{value}</div>
+      <div className="text-[10px] text-gray-400 uppercase tracking-wide">{label}</div>
+    </div>
+  );
+}
diff --git a/client/src/pages/mobile-messaging.tsx b/client/src/pages/mobile-messaging.tsx
new file mode 100644
index 0000000..ba63ff0
--- /dev/null
+++ b/client/src/pages/mobile-messaging.tsx
@@ -0,0 +1,178 @@
+import { useState, useEffect } from 'react';
+import { X, Send, MessageCircle } from 'lucide-react';
+import { useLocation } from 'wouter';
+import { haptics } from '@/lib/haptics';
+import { supabase } from '@/lib/supabase';
+import { useAuth } from '@/lib/auth';
+
+interface Message {
+  id: string;
+  sender: string;
+  text: string;
+  timestamp: string;
+  unread?: boolean;
+  created_at?: string;
+}
+
+export default function MobileMessaging() {
+  const [, navigate] = useLocation();
+  const { user } = useAuth();
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [newMessage, setNewMessage] = useState('');
+
+  const fetchMessages = async () => {
+    try {
+      if (!user) {
+        setMessages([
+          {
+            id: 'demo',
+            sender: 'AeThex Team',
+            text: 'Sign in to view your messages',
+            timestamp: 'now',
+            unread: false
+          }
+        ]);
+        setLoading(false);
+        return;
+      }
+
+      // Query for messages where user is recipient or sender
+      const { data, error } = await supabase
+        .from('messages')
+        .select('*')
+        .or(`sender_id.eq.${user.id},recipient_id.eq.${user.id}`)
+        .order('created_at', { ascending: false })
+        .limit(50);
+
+      if (error) throw error;
+
+      if (data && data.length > 0) {
+        const mapped = data.map(m => ({
+          id: m.id.toString(),
+          sender: m.sender_name || 'Unknown',
+          text: m.content || '',
+          timestamp: formatTime(m.created_at),
+          unread: m.recipient_id === user.id && !m.read,
+          created_at: m.created_at
+        }));
+        setMessages(mapped);
+      } else {
+        setMessages([]);
+      }
+    } catch (error) {
+      console.error('Error fetching messages:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const formatTime = (timestamp: string) => {
+    const now = new Date();
+    const created = new Date(timestamp);
+    const diffMs = now.getTime() - created.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    
+    if (diffMins < 1) return 'just now';
+    if (diffMins < 60) return `${diffMins}m ago`;
+    const diffHours = Math.floor(diffMins / 60);
+    if (diffHours < 24) return `${diffHours}h ago`;
+    const diffDays = Math.floor(diffHours / 24);
+    return `${diffDays}d ago`;
+  };
+
+  useEffect(() => {
+    fetchMessages();
+  }, [user]);
+
+  const unreadCount = messages.filter(m => m.unread).length;
+
+  const handleSend = () => {
+    if (newMessage.trim()) {
+      haptics.light();
+      setNewMessage('');
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-black text-white flex flex-col">
+      {/* Header */}
+      <div className="sticky top-0 z-30 bg-black/80 backdrop-blur-xl border-b border-cyan-500/20">
+        <div className="px-4 py-4 safe-area-inset-top">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <button
+                onClick={() => {
+                  navigate('/');
+                  haptics.light();
+                }}
+                className="p-2 rounded-lg bg-cyan-600/20 hover:bg-cyan-600/40 transition-colors"
+              >
+                <X className="w-6 h-6 text-cyan-400" />
+              </button>
+              <div>
+                <h1 className="text-2xl font-black text-white uppercase tracking-wider">
+                  MESSAGES
+                </h1>
+                {unreadCount > 0 && (
+                  <p className="text-xs text-cyan-300 font-mono">{unreadCount} unread</p>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Messages List */}
+      <div className="flex-1 overflow-y-auto px-4 py-4 space-y-3">
+        {messages.map((message) => (
+          <button
+            key={message.id}
+            onClick={() => haptics.light()}
+            className={`w-full text-left rounded-lg p-4 border transition-all ${
+              message.unread
+                ? 'bg-gradient-to-r from-cyan-900/40 to-emerald-900/40 border-cyan-500/40'
+                : 'bg-gray-900/40 border-gray-500/20'
+            }`}
+          >
+            <div className="flex items-start gap-3">
+              <div className="w-10 h-10 rounded-full bg-gradient-to-br from-cyan-500 to-emerald-500 flex-shrink-0" />
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center justify-between mb-1">
+                  <h3 className="font-bold text-white">{message.sender}</h3>
+                  {message.unread && (
+                    <span className="w-2 h-2 bg-cyan-400 rounded-full flex-shrink-0" />
+                  )}
+                </div>
+                <p className={`text-sm truncate ${message.unread ? 'text-gray-200' : 'text-gray-400'}`}>
+                  {message.text}
+                </p>
+                <p className="text-xs text-gray-500 mt-1">{message.timestamp}</p>
+              </div>
+            </div>
+          </button>
+        ))}
+      </div>
+
+      {/* Input */}
+      <div className="sticky bottom-0 bg-black/80 backdrop-blur-xl border-t border-cyan-500/20 px-4 py-3 safe-area-inset-bottom">
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={newMessage}
+            onChange={(e) => setNewMessage(e.target.value)}
+            placeholder="Type a message..."
+            className="flex-1 bg-gray-900 border border-gray-700 rounded-lg px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-cyan-500"
+            onKeyPress={(e) => e.key === 'Enter' && handleSend()}
+          />
+          <button
+            onClick={handleSend}
+            className="p-3 bg-cyan-600 hover:bg-cyan-500 rounded-lg transition-colors"
+          >
+            <Send className="w-5 h-5" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/pages/mobile-modules.tsx b/client/src/pages/mobile-modules.tsx
new file mode 100644
index 0000000..51a931a
--- /dev/null
+++ b/client/src/pages/mobile-modules.tsx
@@ -0,0 +1,106 @@
+import { X, Code2, Star, Download } from 'lucide-react';
+import { useLocation } from 'wouter';
+import { haptics } from '@/lib/haptics';
+
+interface Module {
+  id: string;
+  name: string;
+  description: string;
+  language: string;
+  stars: number;
+}
+
+export default function MobileModules() {
+  const [, navigate] = useLocation();
+  
+  const modules: Module[] = [
+    {
+      id: '1',
+      name: 'Auth Guard',
+      description: 'Secure authentication middleware',
+      language: 'TypeScript',
+      stars: 234
+    },
+    {
+      id: '2',
+      name: 'Data Mapper',
+      description: 'ORM and database abstraction',
+      language: 'TypeScript',
+      stars: 456
+    },
+    {
+      id: '3',
+      name: 'API Builder',
+      description: 'RESTful API framework',
+      language: 'TypeScript',
+      stars: 789
+    },
+    {
+      id: '4',
+      name: 'State Manager',
+      description: 'Reactive state management',
+      language: 'TypeScript',
+      stars: 345
+    }
+  ];
+
+  return (
+    <div className="min-h-screen bg-black text-white">
+      {/* Header */}
+      <div className="sticky top-0 z-30 bg-black/80 backdrop-blur-xl border-b border-cyan-500/20">
+        <div className="px-4 py-4 safe-area-inset-top">
+          <div className="flex items-center gap-3">
+            <button
+              onClick={() => {
+                navigate('/');
+                haptics.light();
+              }}
+              className="p-2 rounded-lg bg-cyan-600/20 hover:bg-cyan-600/40 transition-colors"
+            >
+              <X className="w-6 h-6 text-cyan-400" />
+            </button>
+            <div>
+              <h1 className="text-2xl font-black text-white uppercase tracking-wider">
+                MODULES
+              </h1>
+              <p className="text-xs text-cyan-300 font-mono">{modules.length} available</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Modules Grid */}
+      <div className="px-4 py-4">
+        <div className="space-y-3">
+          {modules.map((module) => (
+            <button
+              key={module.id}
+              onClick={() => haptics.light()}
+              className="w-full text-left rounded-lg p-4 bg-gradient-to-br from-emerald-900/40 to-cyan-900/40 border border-emerald-500/40 hover:border-emerald-400/60 transition-all"
+            >
+              <div className="flex items-start gap-3 mb-3">
+                <div className="p-2 rounded-lg bg-emerald-600/30">
+                  <Code2 className="w-5 h-5 text-emerald-400" />
+                </div>
+                <div className="flex-1">
+                  <h3 className="font-bold text-white uppercase">{module.name}</h3>
+                  <p className="text-xs text-gray-400 mt-1">{module.description}</p>
+                </div>
+              </div>
+              
+              <div className="flex items-center justify-between">
+                <span className="text-xs font-mono bg-gray-800 px-2 py-1 rounded">
+                  {module.language}
+                </span>
+                <div className="flex items-center gap-2">
+                  <Star className="w-4 h-4 text-yellow-400 fill-yellow-400" />
+                  <span className="text-xs font-bold text-yellow-400">{module.stars}</span>
+                </div>
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/pages/mobile-notifications.tsx b/client/src/pages/mobile-notifications.tsx
new file mode 100644
index 0000000..32df43a
--- /dev/null
+++ b/client/src/pages/mobile-notifications.tsx
@@ -0,0 +1,301 @@
+import { useState, useEffect } from 'react';
+import { Bell, Check, Trash2, X, Clock, AlertCircle, Info, CheckCircle } from 'lucide-react';
+import { useLocation } from 'wouter';
+import { PullToRefresh } from '@/components/mobile/PullToRefresh';
+import { SwipeableCardList } from '@/components/mobile/SwipeableCard';
+import { useNativeFeatures } from '@/hooks/use-native-features';
+import { haptics } from '@/lib/haptics';
+import { isMobile } from '@/lib/platform';
+import { supabase } from '@/lib/supabase';
+import { useAuth } from '@/lib/auth';
+
+interface Notification {
+  id: string;
+  title: string;
+  message: string;
+  type: 'info' | 'success' | 'warning' | 'error';
+  time: string;
+  read: boolean;
+  created_at?: string;
+}
+
+export default function MobileNotifications() {
+  const [, navigate] = useLocation();
+  const native = useNativeFeatures();
+  const { user } = useAuth();
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  // Fetch notifications from Supabase
+  const fetchNotifications = async () => {
+    try {
+      if (!user) {
+        // Show welcome notifications for non-logged in users
+        setNotifications([
+          {
+            id: '1',
+            title: 'Welcome to AeThex Mobile',
+            message: 'Sign in to sync your data across devices.',
+            type: 'info',
+            time: 'now',
+            read: false
+          }
+        ]);
+        setLoading(false);
+        return;
+      }
+
+      const { data, error } = await supabase
+        .from('notifications')
+        .select('*')
+        .eq('user_id', user.id)
+        .order('created_at', { ascending: false })
+        .limit(50);
+
+      if (error) throw error;
+
+      if (data && data.length > 0) {
+        const mapped = data.map(n => ({
+          id: n.id.toString(),
+          title: n.title || 'Notification',
+          message: n.message || '',
+          type: (n.type || 'info') as 'info' | 'success' | 'warning' | 'error',
+          time: formatTime(n.created_at),
+          read: n.read || false,
+          created_at: n.created_at
+        }));
+        setNotifications(mapped);
+      } else {
+        // No notifications - show empty state
+        setNotifications([]);
+      }
+    } catch (error) {
+      console.error('Error fetching notifications:', error);
+      native.showToast('Failed to load notifications');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const formatTime = (timestamp: string) => {
+    const now = new Date();
+    const created = new Date(timestamp);
+    const diffMs = now.getTime() - created.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    
+    if (diffMins < 1) return 'just now';
+    if (diffMins < 60) return `${diffMins}m ago`;
+    const diffHours = Math.floor(diffMins / 60);
+    if (diffHours < 24) return `${diffHours}h ago`;
+    const diffDays = Math.floor(diffHours / 24);
+    return `${diffDays}d ago`;
+  };
+
+  useEffect(() => {
+    fetchNotifications();
+  }, [user]);
+
+  useEffect(() => {
+    if (!isMobile()) {
+      navigate('/home');
+    }
+  }, [navigate]);
+
+  const handleRefresh = async () => {
+    haptics.light();
+    native.showToast('Refreshing notifications...');
+    await fetchNotifications();
+    haptics.success();
+  };
+
+  const handleMarkAsRead = async (id: string) => {
+    if (!user) return;
+    
+    try {
+      const { error } = await supabase
+        .from('notifications')
+        .update({ read: true })
+        .eq('id', id)
+        .eq('user_id', user.id);
+
+      if (error) throw error;
+
+      setNotifications(prev =>
+        prev.map(n => n.id === id ? { ...n, read: true } : n)
+      );
+      haptics.selection();
+    } catch (error) {
+      console.error('Error marking as read:', error);
+    }
+  };
+
+  const handleDelete = async (notification: Notification) => {
+    if (!user) return;
+    
+    try {
+      const { error } = await supabase
+        .from('notifications')
+        .delete()
+        .eq('id', notification.id)
+        .eq('user_id', user.id);
+
+      if (error) throw error;
+
+      setNotifications(prev => prev.filter(n => n.id !== notification.id));
+      native.showToast('Notification deleted');
+      haptics.medium();
+    } catch (error) {
+      console.error('Error deleting notification:', error);
+    }
+  };
+
+  const handleMarkAllRead = async () => {
+    if (!user) return;
+    
+    try {
+      const { error } = await supabase
+        .from('notifications')
+        .update({ read: true })
+        .eq('user_id', user.id)
+        .eq('read', false);
+
+      if (error) throw error;
+
+      setNotifications(prev => prev.map(n => ({ ...n, read: true })));
+      native.showToast('All marked as read');
+      haptics.success();
+    } catch (error) {
+      console.error('Error marking all as read:', error);
+    }
+  };
+
+  const unreadCount = notifications.filter(n => !n.read).length;
+
+  const getIcon = (type: Notification['type']) => {
+    switch (type) {
+      case 'success': return <CheckCircle className="w-5 h-5 text-green-400" />;
+      case 'warning': return <AlertCircle className="w-5 h-5 text-yellow-400" />;
+      case 'error': return <AlertCircle className="w-5 h-5 text-red-400" />;
+      default: return <Info className="w-5 h-5 text-blue-400" />;
+    }
+  };
+
+  if (!isMobile()) return null;
+
+  return (
+    <div className="min-h-screen bg-black text-white">
+      {/* Header */}
+      <div className="sticky top-0 z-30 bg-black/80 backdrop-blur-xl border-b border-cyan-500/20">
+        <div className="px-4 py-4 safe-area-inset-top">
+          <div className="flex items-center justify-between mb-3">
+            <div className="flex items-center gap-3">
+              <button
+                onClick={() => {
+                  navigate('/');
+                  haptics.light();
+                }}
+                className="p-2 rounded-lg bg-cyan-600/20 hover:bg-cyan-600/40 transition-colors"
+              >
+                <X className="w-6 h-6 text-cyan-400" />
+              </button>
+              <div>
+                <h1 className="text-2xl font-black text-white uppercase tracking-wider">
+                  ALERTS
+                </h1>
+                {unreadCount > 0 && (
+                  <p className="text-xs text-cyan-300 font-mono">
+                    {unreadCount} new events
+                  </p>
+                )}
+              </div>
+            </div>
+            {unreadCount > 0 && (
+              <button
+                onClick={handleMarkAllRead}
+                className="px-3 py-2 bg-cyan-600 hover:bg-cyan-500 rounded-lg text-xs font-black uppercase tracking-wide transition-colors"
+              >
+                Clear
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Notifications list */}
+      <PullToRefresh onRefresh={handleRefresh}>
+        <div className="px-4 py-4">
+          <SwipeableCardList
+            items={notifications}
+            keyExtractor={(n) => n.id}
+            onItemSwipeLeft={handleDelete}
+            renderItem={(notification) => (
+              <div
+                onClick={() => !notification.read && handleMarkAsRead(notification.id)}
+                className={`relative overflow-hidden rounded-lg transition-all ${
+                  notification.read 
+                    ? 'bg-gray-900/40 border border-gray-800 opacity-60' 
+                    : 'bg-gradient-to-r from-cyan-900/40 to-emerald-900/40 border border-cyan-500/40'
+                }`}
+              >
+                {/* Accent line */}
+                <div className="absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-cyan-400 to-emerald-400" />
+                
+                <div className="p-4 pl-4">
+                  <div className="flex gap-3">
+                    <div className="flex-shrink-0 mt-1">
+                      {getIcon(notification.type)}
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-start justify-between gap-2 mb-1">
+                        <h3 className={`font-bold uppercase text-sm tracking-wide ${
+                          notification.read ? 'text-gray-500' : 'text-white'
+                        }`}>
+                          {notification.title}
+                        </h3>
+                        {!notification.read && (
+                          <span className="w-2 h-2 bg-cyan-400 rounded-full flex-shrink-0 mt-2" />
+                        )}
+                      </div>
+                      <p className={`text-sm mb-2 line-clamp-2 ${
+                        notification.read ? 'text-gray-600' : 'text-gray-300'
+                      }`}>
+                        {notification.message}
+                      </p>
+                      <div className={`flex items-center gap-2 text-xs font-mono ${
+                        notification.read ? 'text-gray-600' : 'text-cyan-400'
+                      }`}>
+                        <Clock className="w-3 h-3" />
+                        {notification.time}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+            emptyMessage="No notifications"
+          />
+
+          {notifications.length === 0 && (
+            <div className="text-center py-16">
+              <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-cyan-500/10 flex items-center justify-center">
+                <Bell className="w-8 h-8 text-cyan-400" />
+              </div>
+              <p className="text-white font-black text-lg uppercase">All Caught Up</p>
+              <p className="text-xs text-cyan-300/60 mt-2 font-mono">No new events</p>
+            </div>
+          )}
+
+          {/* Tip */}
+          {notifications.length > 0 && (
+            <div className="mt-6 bg-gradient-to-r from-cyan-900/20 to-emerald-900/20 border border-cyan-500/30 rounded-lg p-4">
+              <p className="text-xs text-cyan-200 font-mono leading-relaxed">
+                ← SWIPE LEFT TO DISMISS<br/>
+                TAP TO MARK AS READ
+              </p>
+            </div>
+          )}
+        </div>
+      </PullToRefresh>
+    </div>
+  );
+}
diff --git a/client/src/pages/mobile-projects.tsx b/client/src/pages/mobile-projects.tsx
new file mode 100644
index 0000000..9ecf726
--- /dev/null
+++ b/client/src/pages/mobile-projects.tsx
@@ -0,0 +1,152 @@
+import { useState, useEffect } from 'react';
+import { X, Plus, Folder, GitBranch } from 'lucide-react';
+import { useLocation } from 'wouter';
+import { haptics } from '@/lib/haptics';
+import { supabase } from '@/lib/supabase';
+import { useAuth } from '@/lib/auth';
+
+interface Project {
+  id: string;
+  name: string;
+  description: string;
+  status: 'active' | 'completed' | 'archived';
+  progress: number;
+  created_at?: string;
+}
+
+export default function MobileProjects() {
+  const [, navigate] = useLocation();
+  const { user } = useAuth();
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const fetchProjects = async () => {
+    try {
+      if (!user) {
+        setProjects([
+          {
+            id: 'demo',
+            name: 'Sign in to view projects',
+            description: 'Create and manage your development projects',
+            status: 'active',
+            progress: 0
+          }
+        ]);
+        setLoading(false);
+        return;
+      }
+
+      const { data, error } = await supabase
+        .from('projects')
+        .select('*')
+        .eq('user_id', user.id)
+        .order('created_at', { ascending: false });
+
+      if (error) throw error;
+
+      if (data && data.length > 0) {
+        const mapped = data.map(p => ({
+          id: p.id.toString(),
+          name: p.name || 'Untitled Project',
+          description: p.description || 'No description',
+          status: (p.status || 'active') as 'active' | 'completed' | 'archived',
+          progress: p.progress || 0,
+          created_at: p.created_at
+        }));
+        setProjects(mapped);
+      } else {
+        setProjects([]);
+      }
+    } catch (error) {
+      console.error('Error fetching projects:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchProjects();
+  }, [user]);
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'active': return 'bg-emerald-900/40 border-emerald-500/40';
+      case 'completed': return 'bg-cyan-900/40 border-cyan-500/40';
+      default: return 'bg-gray-900/40 border-gray-500/40';
+    }
+  };
+
+  const getProgressColor = (progress: number) => {
+    if (progress === 100) return 'bg-cyan-500';
+    if (progress >= 75) return 'bg-emerald-500';
+    if (progress >= 50) return 'bg-yellow-500';
+    return 'bg-red-500';
+  };
+
+  return (
+    <div className="min-h-screen bg-black text-white">
+      {/* Header */}
+      <div className="sticky top-0 z-30 bg-black/80 backdrop-blur-xl border-b border-cyan-500/20">
+        <div className="px-4 py-4 safe-area-inset-top">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <button
+                onClick={() => {
+                  navigate('/');
+                  haptics.light();
+                }}
+                className="p-2 rounded-lg bg-cyan-600/20 hover:bg-cyan-600/40 transition-colors"
+              >
+                <X className="w-6 h-6 text-cyan-400" />
+              </button>
+              <div>
+                <h1 className="text-2xl font-black text-white uppercase tracking-wider">
+                  PROJECTS
+                </h1>
+                <p className="text-xs text-cyan-300 font-mono">{projects.length} items</p>
+              </div>
+            </div>
+            <button className="p-2 rounded-lg bg-cyan-600 hover:bg-cyan-500 transition-colors">
+              <Plus className="w-6 h-6" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Projects List */}
+      <div className="px-4 py-4">
+        <div className="space-y-3">
+          {projects.map((project) => (
+            <button
+              key={project.id}
+              onClick={() => haptics.light()}
+              className={`w-full text-left rounded-lg p-4 border transition-all ${getStatusColor(project.status)}`}
+            >
+              <div className="flex items-start gap-3 mb-3">
+                <div className="p-2 rounded-lg bg-cyan-600/30">
+                  <Folder className="w-5 h-5 text-cyan-400" />
+                </div>
+                <div className="flex-1">
+                  <h3 className="font-bold text-white uppercase">{project.name}</h3>
+                  <p className="text-xs text-gray-400 mt-1">{project.description}</p>
+                </div>
+                <div className="text-xs font-mono px-2 py-1 bg-gray-800 rounded">
+                  {project.status}
+                </div>
+              </div>
+              
+              {/* Progress bar */}
+              <div className="w-full h-2 bg-gray-800 rounded-full overflow-hidden">
+                <div 
+                  className={`h-full ${getProgressColor(project.progress)} transition-all`}
+                  style={{ width: `${project.progress}%` }}
+                />
+              </div>
+              <p className="text-xs text-gray-400 mt-2">{project.progress}% complete</p>
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/pages/mobile-simple.tsx b/client/src/pages/mobile-simple.tsx
new file mode 100644
index 0000000..54815cf
--- /dev/null
+++ b/client/src/pages/mobile-simple.tsx
@@ -0,0 +1,396 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  Camera,
+  Bell,
+  FileText,
+  Users,
+  Settings,
+  Menu,
+  X,
+  Zap,
+  Code,
+  MessageSquare,
+  Package,
+  ShieldCheck,
+  Activity,
+  Sparkles,
+  MonitorSmartphone,
+} from 'lucide-react';
+import { useLocation } from 'wouter';
+import { isMobile } from '@/lib/platform';
+import { App as CapApp } from '@capacitor/app';
+import { haptics } from '@/lib/haptics';
+import { PullToRefresh } from '@/components/mobile/PullToRefresh';
+import { SwipeableCardList } from '@/components/mobile/SwipeableCard';
+import { MobileBottomNav, DEFAULT_MOBILE_TABS } from '@/components/MobileBottomNav';
+
+export default function SimpleMobileDashboard() {
+  const [location, navigate] = useLocation();
+  const [showMenu, setShowMenu] = useState(false);
+  const [activeTab, setActiveTab] = useState('home');
+  const [cards, setCards] = useState(() => defaultCards());
+
+  // Handle Android back button
+  useEffect(() => {
+    if (!isMobile()) return;
+
+    const backHandler = CapApp.addListener('backButton', ({ canGoBack }) => {
+      if (location === '/' || location === '/mobile') {
+        CapApp.exitApp();
+      } else {
+        window.history.back();
+      }
+    });
+
+    return () => {
+      backHandler.remove();
+    };
+  }, [location]);
+
+  const handleRefresh = async () => {
+    haptics.light();
+    await new Promise((resolve) => setTimeout(resolve, 900));
+    haptics.success();
+  };
+
+  const quickStats = useMemo(
+    () => [
+      { label: 'Projects', value: '5', icon: <Package className="w-4 h-4" />, tone: 'from-cyan-500 to-emerald-500' },
+      { label: 'Alerts', value: '3', icon: <Bell className="w-4 h-4" />, tone: 'from-red-500 to-pink-500' },
+      { label: 'Messages', value: '12', icon: <MessageSquare className="w-4 h-4" />, tone: 'from-violet-500 to-blue-500' },
+    ],
+    []
+  );
+
+  const handleNav = (path: string) => {
+    haptics.light();
+    navigate(path);
+    setShowMenu(false);
+  };
+
+  if (!isMobile()) {
+    return null;
+  }
+
+  return (
+    <div className="min-h-screen bg-black text-white overflow-hidden pb-20">
+      {/* Animated background */}
+      <div className="fixed inset-0 opacity-30">
+        <div className="absolute inset-0 bg-gradient-to-br from-cyan-600/10 via-transparent to-emerald-600/10" />
+        <div className="absolute top-0 left-1/4 w-96 h-96 bg-cyan-500/5 rounded-full blur-3xl" />
+        <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-emerald-500/5 rounded-full blur-3xl" />
+      </div>
+
+      {/* Header */}
+      <div className="fixed top-0 left-0 right-0 z-50 bg-black/80 backdrop-blur-xl border-b border-cyan-500/20">
+        <div className="flex items-center justify-between px-4 py-4 safe-area-inset-top">
+          <div className="flex items-center gap-3">
+            <div className="w-12 h-12 bg-gradient-to-br from-cyan-400 to-emerald-400 rounded-lg flex items-center justify-center font-black text-black shadow-lg shadow-cyan-500/50">
+              Æ
+            </div>
+            <div>
+              <h1 className="text-xl font-black text-white uppercase tracking-widest">AeThex</h1>
+              <p className="text-xs text-cyan-300 font-mono">Mobile OS</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => handleNav('/notifications')}
+              className="p-3 rounded-lg bg-cyan-500/10 border border-cyan-500/30 hover:bg-cyan-500/20 transition-colors"
+            >
+              <Bell className="w-5 h-5 text-cyan-200" />
+            </button>
+            <button
+              onClick={() => {
+                haptics.light();
+                setShowMenu(!showMenu);
+              }}
+              className="p-3 hover:bg-cyan-500/10 rounded-lg transition-colors"
+            >
+              {showMenu ? <X className="w-6 h-6 text-cyan-400" /> : <Menu className="w-6 h-6 text-cyan-400" />}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <PullToRefresh onRefresh={handleRefresh}>
+        <div className="relative pt-28 pb-8 px-4 space-y-6">
+          {/* Welcome */}
+          <div>
+            <p className="text-xs text-cyan-300/80 font-mono uppercase">AeThex OS · Android</p>
+            <h2 className="text-3xl font-black text-white uppercase tracking-wider">Launchpad</h2>
+          </div>
+
+          {/* Primary Resume */}
+          <button
+            onClick={() => handleNav('/hub/projects')}
+            className="w-full relative overflow-hidden rounded-2xl group border border-emerald-500/30 bg-gradient-to-r from-emerald-600/30 to-cyan-600/30"
+          >
+            <div className="absolute inset-0 bg-gradient-to-r from-emerald-500/40 to-cyan-500/40 opacity-0 group-hover:opacity-20 blur-xl transition-opacity" />
+            <div className="relative px-6 py-5 flex items-center justify-between">
+              <div className="text-left">
+                <p className="text-xs text-emerald-100 font-mono mb-1">RESUME</p>
+                <p className="text-2xl font-black text-white uppercase">Projects</p>
+                <p className="text-xs text-emerald-200 mt-1">Continue where you left off</p>
+              </div>
+              <div className="flex items-center gap-2 text-emerald-200 font-bold">
+                <Activity className="w-6 h-6" />
+                Go
+              </div>
+            </div>
+          </button>
+
+          {/* Full OS entry point */}
+          <button
+            onClick={() => handleNav('/os')}
+            className="w-full relative overflow-hidden rounded-xl group border border-cyan-500/30 bg-gradient-to-r from-cyan-900/50 to-emerald-900/40"
+          >
+            <div className="absolute inset-0 bg-gradient-to-r from-cyan-500/30 to-emerald-500/20 opacity-0 group-hover:opacity-20 blur-xl transition-opacity" />
+            <div className="relative px-5 py-4 flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <div className="p-3 rounded-lg bg-cyan-500/20 border border-cyan-400/30">
+                  <MonitorSmartphone className="w-5 h-5 text-cyan-200" />
+                </div>
+                <div className="text-left">
+                  <p className="text-xs text-cyan-200 font-mono uppercase">Full OS</p>
+                  <p className="text-sm text-white font-semibold">Open desktop UI on mobile</p>
+                </div>
+              </div>
+              <span className="text-cyan-200 text-sm font-bold">Go</span>
+            </div>
+          </button>
+
+          {/* Quick stats */}
+          <div className="grid grid-cols-3 gap-3">
+            {quickStats.map((stat) => (
+              <div key={stat.label} className="bg-gray-900/80 border border-cyan-500/20 rounded-xl p-3">
+                <div className={`inline-flex p-2 rounded-lg bg-gradient-to-r ${stat.tone} mb-2`}>{stat.icon}</div>
+                <div className="text-2xl font-bold text-white mb-1">{stat.value}</div>
+                <div className="text-[10px] text-gray-400 uppercase tracking-wide">{stat.label}</div>
+              </div>
+            ))}
+          </div>
+
+          {/* Quick Actions Grid */}
+          <div className="grid grid-cols-2 gap-3">
+            <QuickTile icon={<Camera className="w-7 h-7" />} label="Capture" color="from-blue-900/40 to-purple-900/40" onPress={() => handleNav('/camera')} />
+            <QuickTile icon={<Bell className="w-7 h-7" />} label="Alerts" color="from-red-900/40 to-pink-900/40" badge="3" onPress={() => handleNav('/notifications')} />
+            <QuickTile icon={<Code className="w-7 h-7" />} label="Modules" color="from-emerald-900/40 to-cyan-900/40" onPress={() => handleNav('/hub/code-gallery')} />
+            <QuickTile icon={<MessageSquare className="w-7 h-7" />} label="Messages" color="from-violet-900/40 to-purple-900/40" onPress={() => handleNav('/hub/messaging')} />
+            <QuickTile icon={<MonitorSmartphone className="w-7 h-7" />} label="Desktop OS" color="from-cyan-900/40 to-emerald-900/40" onPress={() => handleNav('/os')} />
+          </div>
+
+          {/* Swipeable shortcuts */}
+          <div>
+            <div className="flex items-center justify-between mb-3">
+              <div>
+                <p className="text-xs text-cyan-300/70 font-mono uppercase">Shortcuts</p>
+                <h3 className="text-lg font-bold text-white">Move fast</h3>
+              </div>
+              <Sparkles className="w-5 h-5 text-cyan-300" />
+            </div>
+            <SwipeableCardList
+              items={cards}
+              keyExtractor={(card) => card.id}
+              onItemSwipeLeft={(card) => {
+                haptics.medium();
+                setCards((prev) => prev.filter((c) => c.id !== card.id));
+              }}
+              onItemSwipeRight={(card) => {
+                haptics.medium();
+                setCards((prev) => prev.map((c) => (c.id === card.id ? { ...c, pinned: true } : c)));
+              }}
+              renderItem={(card) => (
+                <button
+                  onClick={() => handleNav(card.path)}
+                  className="w-full text-left bg-gradient-to-r from-gray-900 to-gray-800 border border-cyan-500/20 rounded-xl p-4 active:scale-98 transition-transform"
+                >
+                  <div className="flex items-center gap-3">
+                    <div className={`p-3 rounded-lg bg-gradient-to-r ${card.color}`}>{card.icon}</div>
+                    <div className="flex-1">
+                      <div className="flex items-center justify-between">
+                        <p className="font-semibold text-white">{card.title}</p>
+                        {card.badge ? (
+                          <span className="px-2 py-1 text-xs font-bold bg-red-500 text-white rounded-full">{card.badge}</span>
+                        ) : null}
+                      </div>
+                      <p className="text-xs text-gray-400">{card.description}</p>
+                    </div>
+                  </div>
+                </button>
+              )}
+              emptyMessage="No shortcuts yet"
+            />
+          </div>
+
+          {/* Status Bar */}
+          <div className="bg-gradient-to-r from-cyan-900/20 to-emerald-900/20 border border-cyan-500/20 rounded-xl p-4 font-mono text-xs space-y-2">
+            <div className="flex justify-between text-cyan-300">
+              <span>PLATFORM</span>
+              <span className="text-cyan-100 font-bold">ANDROID</span>
+            </div>
+            <div className="flex justify-between text-emerald-300">
+              <span>STATUS</span>
+              <span className="text-emerald-100 font-bold">READY</span>
+            </div>
+            <div className="flex justify-between text-cyan-200">
+              <span>SYNC</span>
+              <span className="text-cyan-100 font-bold">LIVE</span>
+            </div>
+          </div>
+        </div>
+      </PullToRefresh>
+
+      {/* Bottom navigation */}
+      <div className="fixed bottom-0 left-0 right-0 z-40">
+        <MobileBottomNav
+          tabs={DEFAULT_MOBILE_TABS}
+          activeTab={activeTab}
+          onTabChange={(tabId) => {
+            setActiveTab(tabId);
+            haptics.selection();
+            navigate(tabId === 'home' ? '/' : `/${tabId}`);
+          }}
+        />
+      </div>
+
+      {/* Slide-out Menu */}
+      {showMenu && (
+        <>
+          <div
+            className="fixed inset-0 bg-black/60 backdrop-blur-sm z-40"
+            onClick={() => setShowMenu(false)}
+          />
+          <div className="fixed top-0 right-0 bottom-0 w-72 bg-black/95 backdrop-blur-xl border-l border-cyan-500/30 z-50 flex flex-col safe-area-inset-top">
+            <div className="flex-1 p-6 overflow-y-auto space-y-2">
+              <button
+                onClick={() => handleNav('/')}
+                className="w-full text-left px-4 py-3 bg-cyan-600 rounded-lg font-bold text-white flex items-center gap-3 mb-4"
+              >
+                <Zap className="w-5 h-5" />
+                Home
+              </button>
+              <button
+                onClick={() => handleNav('/camera')}
+                className="w-full text-left px-4 py-3 hover:bg-cyan-600/20 rounded-lg text-cyan-300 flex items-center gap-3 transition-colors"
+              >
+                <Camera className="w-5 h-5" />
+                Capture
+              </button>
+              <button
+                onClick={() => handleNav('/notifications')}
+                className="w-full text-left px-4 py-3 hover:bg-cyan-600/20 rounded-lg text-cyan-300 flex items-center gap-3 transition-colors"
+              >
+                <Bell className="w-5 h-5" />
+                Alerts
+              </button>
+              <button
+                onClick={() => handleNav('/hub/projects')}
+                className="w-full text-left px-4 py-3 hover:bg-cyan-600/20 rounded-lg text-cyan-300 flex items-center gap-3 transition-colors"
+              >
+                <FileText className="w-5 h-5" />
+                Projects
+              </button>
+              <button
+                onClick={() => handleNav('/hub/messaging')}
+                className="w-full text-left px-4 py-3 hover:bg-cyan-600/20 rounded-lg text-cyan-300 flex items-center gap-3 transition-colors"
+              >
+                <Users className="w-5 h-5" />
+                Messages
+              </button>
+              <div className="border-t border-cyan-500/20 my-4" />
+              <button
+                onClick={() => handleNav('/hub/settings')}
+                className="w-full text-left px-4 py-3 hover:bg-cyan-600/20 rounded-lg text-cyan-300 flex items-center gap-3 transition-colors"
+              >
+                <Settings className="w-5 h-5" />
+                Settings
+              </button>
+              <button
+                onClick={() => handleNav('/os')}
+                className="w-full text-left px-4 py-3 hover:bg-cyan-600/20 rounded-lg text-cyan-300 flex items-center gap-3 transition-colors"
+              >
+                <MonitorSmartphone className="w-5 h-5" />
+                Desktop OS (Full)
+              </button>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+function defaultCards() {
+  return [
+    {
+      id: 'projects',
+      title: 'Projects',
+      description: 'View and manage builds',
+      icon: <Package className="w-6 h-6" />,
+      color: 'from-blue-500 to-cyan-500',
+      badge: 3,
+      path: '/hub/projects',
+    },
+    {
+      id: 'messages',
+      title: 'Messages',
+      description: 'Recent conversations',
+      icon: <MessageSquare className="w-6 h-6" />,
+      color: 'from-purple-500 to-pink-500',
+      badge: 5,
+      path: '/hub/messaging',
+    },
+    {
+      id: 'alerts',
+      title: 'Alerts',
+      description: 'System notifications',
+      icon: <ShieldCheck className="w-6 h-6" />,
+      color: 'from-red-500 to-orange-500',
+      path: '/notifications',
+    },
+    {
+      id: 'modules',
+      title: 'Modules',
+      description: 'Code gallery and tools',
+      icon: <Code className="w-6 h-6" />,
+      color: 'from-emerald-500 to-cyan-500',
+      path: '/hub/code-gallery',
+    },
+  ];
+}
+
+function QuickTile({
+  icon,
+  label,
+  color,
+  badge,
+  onPress,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  color: string;
+  badge?: string;
+  onPress: () => void;
+}) {
+  return (
+    <button
+      onClick={onPress}
+      className={`group relative overflow-hidden rounded-xl p-5 bg-gradient-to-br ${color} border border-cyan-500/20 hover:border-cyan-400/40 active:opacity-80 transition-all`}
+    >
+      <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/0 to-emerald-500/0 group-hover:from-cyan-500/10 group-hover:to-emerald-500/10 transition-all" />
+      <div className="relative flex flex-col items-center gap-2">
+        <div className="relative">
+          {icon}
+          {badge ? (
+            <span className="absolute -top-2 -right-2 bg-red-500 text-white text-xs font-black w-5 h-5 rounded-full flex items-center justify-center">
+              {badge}
+            </span>
+          ) : null}
+        </div>
+        <span className="text-sm font-bold text-white">{label}</span>
+      </div>
+    </button>
+  );
+}
diff --git a/client/src/pages/os.tsx b/client/src/pages/os.tsx
index 7159675..6899941 100644
--- a/client/src/pages/os.tsx
+++ b/client/src/pages/os.tsx
@@ -26,7 +26,7 @@ import {
   TrendingUp, ArrowUp, ArrowDown, Hash, Key, HardDrive, FolderSearch, 
   AlertTriangle, Briefcase, CalendarDays, FolderGit2, MessageSquare,
   ShoppingCart, Folder, Code, Home, Flag, Cookie, ChevronLeft,
-  MoreVertical, Search, Mic, ArrowLeft
+  MoreVertical, Search, Mic, ArrowLeft, RefreshCw, Star, Clock, MapPin
 } from "lucide-react";
 
 interface WindowState {
@@ -352,7 +352,10 @@ export default function AeThexOS() {
           setBootProgress(50);
           await new Promise(r => setTimeout(r, 500));
         }
-      } catch {}
+      } catch (err) {
+        // Session fetch failed, continue with guest mode
+        if (import.meta.env.DEV) console.debug('[Boot] Session check failed:', err);
+      }
       
       if (!foundIdentity) {
         addLog('▸ PASSPORT: No active identity token found');
@@ -410,10 +413,14 @@ export default function AeThexOS() {
                 addToast('⚠️ Architect Access Available — Use tray to upgrade', 'info');
                 localStorage.setItem('aethex-upgrade-alert-shown', 'true');
               }
-            } catch {}
+            } catch (err) {
+              if (import.meta.env.DEV) console.debug('[Boot] localStorage access failed:', err);
+            }
           }, 30000);
         }
-      } catch {}
+      } catch (err) {
+        if (import.meta.env.DEV) console.debug('[Boot] Upgrade check failed:', err);
+      }
       setBootProgress(75);
       await new Promise(r => setTimeout(r, 400));
       
@@ -457,7 +464,10 @@ export default function AeThexOS() {
         if (Array.isArray(data)) {
           setNotifications(data.map((n: any) => n.message));
         }
-      } catch {}
+      } catch (err) {
+        // Notifications fetch failed, not critical
+        if (import.meta.env.DEV) console.debug('[OS] Notifications fetch failed:', err);
+      }
     };
     fetchNotifications();
     const interval = setInterval(fetchNotifications, 60000);
@@ -521,7 +531,10 @@ export default function AeThexOS() {
           const savedPos = positions[w.id];
           return savedPos ? { ...w, ...savedPos } : w;
         }));
-      } catch {}
+      } catch (err) {
+        // Corrupted localStorage data, ignore and use defaults
+        if (import.meta.env.DEV) console.debug('[OS] Failed to restore window positions:', err);
+      }
     }
     const hasVisited = localStorage.getItem('aethex-visited');
     if (!hasVisited) {
@@ -1205,23 +1218,7 @@ export default function AeThexOS() {
     }, []);
     
     return (
-      <div className="h-screen w-screen bg-black overflow-hidden flex flex-col relative">
-        {/* INGRESS STYLE - Lightweight Background */}
-        <div className="absolute inset-0 bg-black"></div>
-        
-        {/* Hexagon Grid Pattern - CSS Only */}
-        <div className="absolute inset-0 opacity-10" style={{
-          backgroundImage: `repeating-linear-gradient(0deg, transparent, transparent 40px, #00ff9920 40px, #00ff9920 42px),
-                           repeating-linear-gradient(90deg, transparent, transparent 40px, #00ff9920 40px, #00ff9920 42px),
-                           repeating-linear-gradient(120deg, transparent, transparent 40px, #00ffff20 40px, #00ffff20 42px)`
-        }}></div>
-        
-        {/* Scan Lines - Pure CSS Animation */}
-        <div className="absolute inset-0 pointer-events-none" style={{
-          background: 'repeating-linear-gradient(0deg, transparent 0px, transparent 2px, #00ff9905 2px, #00ff9905 4px)',
-          animation: 'scan 8s linear infinite'
-        }}></div>
-        
+      <div className="h-screen w-screen bg-black overflow-hidden flex flex-col">
         <style>{`
           @keyframes scan {
             0% { transform: translateY(-100%); }
@@ -1234,7 +1231,7 @@ export default function AeThexOS() {
         `}</style>
 
         {/* Ingress Status Bar - Minimal */}
-        <div className="relative h-8 bg-black/90 border-b border-emerald-500/50 shrink-0 z-50">
+        <div className="relative h-8 bg-black/90 border-b border-emerald-500/50 shrink-0">
           <div className="absolute inset-0 bg-gradient-to-r from-transparent via-emerald-500/5 to-transparent"></div>
           <div className="relative flex items-center justify-between px-4 h-full">
             <div className="flex items-center gap-3">
@@ -1255,7 +1252,7 @@ export default function AeThexOS() {
         </div>
 
         {/* Main Content */}
-        <div className="flex-1 overflow-hidden relative">
+        <div className="flex-1 overflow-hidden relative bg-black">
           <AnimatePresence mode="wait">
             {currentWindow ? (
               // Fullscreen App View with 3D Card Flip
@@ -4518,29 +4515,29 @@ function FilesApp() {
   });
 
   return (
-    <div className="h-full bg-slate-950 flex flex-col">
+    <div className="min-h-full bg-slate-950 flex flex-col">
       <div className="flex items-center gap-2 p-2 bg-slate-900 border-b border-white/10">
-        <div className="flex-1 bg-slate-800 rounded px-3 py-1.5 text-white/60 text-sm font-mono">
+        <div className="flex-1 bg-slate-800 rounded px-3 py-1.5 text-white/60 text-xs md:text-sm font-mono overflow-x-auto whitespace-nowrap">
           /home/architect/projects
         </div>
       </div>
-      <div className="flex-1 p-4 overflow-auto">
+      <div className="flex-1 p-3 md:p-4 overflow-auto">
         {isLoading ? (
-          <div className="flex items-center justify-center h-full">
+          <div className="flex items-center justify-center h-40">
             <Loader2 className="w-8 h-8 text-cyan-400 animate-spin" />
           </div>
         ) : (
           <div className="space-y-4">
-            <div className="grid grid-cols-2 gap-4 mb-4">
-              <div className="bg-white/5 rounded-lg p-4 border border-white/10">
-                <FolderOpen className="w-6 h-6 text-cyan-400 mb-2" />
+            <div className="grid grid-cols-2 gap-3 md:gap-4 mb-4">
+              <div className="bg-white/5 rounded-lg p-3 md:p-4 border border-white/10">
+                <FolderOpen className="w-5 h-5 md:w-6 md:h-6 text-cyan-400 mb-2" />
                 <div className="text-xs text-white/50">Total Projects</div>
-                <div className="text-xl font-bold text-white">{metrics?.totalProjects || 0}</div>
+                <div className="text-lg md:text-xl font-bold text-white">{metrics?.totalProjects || 0}</div>
               </div>
-              <div className="bg-white/5 rounded-lg p-4 border border-white/10">
-                <User className="w-6 h-6 text-purple-400 mb-2" />
+              <div className="bg-white/5 rounded-lg p-3 md:p-4 border border-white/10">
+                <User className="w-5 h-5 md:w-6 md:h-6 text-purple-400 mb-2" />
                 <div className="text-xs text-white/50">Architects</div>
-                <div className="text-xl font-bold text-white">{metrics?.totalProfiles || 0}</div>
+                <div className="text-lg md:text-xl font-bold text-white">{metrics?.totalProfiles || 0}</div>
               </div>
             </div>
             
@@ -4548,13 +4545,13 @@ function FilesApp() {
             {projects?.length > 0 ? (
               <div className="space-y-2">
                 {projects.map((p: any) => (
-                  <div key={p.id} className="flex items-center gap-3 p-2 bg-white/5 rounded border border-white/10 hover:border-cyan-500/30 transition-colors">
-                    <FolderOpen className="w-5 h-5 text-cyan-400" />
+                  <div key={p.id} className="flex items-center gap-3 p-3 bg-white/5 rounded border border-white/10 hover:border-cyan-500/30 transition-colors active:bg-white/10">
+                    <FolderOpen className="w-5 h-5 text-cyan-400 shrink-0" />
                     <div className="flex-1 min-w-0">
                       <div className="text-white text-sm truncate">{p.title}</div>
                       <div className="text-white/40 text-xs">{p.engine || 'Unknown engine'}</div>
                     </div>
-                    <span className={`text-xs px-2 py-0.5 rounded ${p.status === 'active' ? 'bg-green-500/20 text-green-400' : 'bg-white/10 text-white/50'}`}>
+                    <span className={`text-xs px-2 py-0.5 rounded shrink-0 ${p.status === 'active' ? 'bg-green-500/20 text-green-400' : 'bg-white/10 text-white/50'}`}>
                       {p.status || 'unknown'}
                     </span>
                   </div>
@@ -4595,12 +4592,12 @@ function AchievementsApp() {
   ];
 
   return (
-    <div className="h-full bg-slate-950 p-4 overflow-auto">
+    <div className="min-h-full bg-slate-950 p-3 md:p-4 overflow-auto">
       <div className="flex items-center gap-2 mb-4">
-        <Trophy className="w-6 h-6 text-yellow-400" />
-        <h2 className="text-lg font-display text-white uppercase tracking-wider">Achievements</h2>
-        <span className="ml-auto text-xs text-white/40 font-mono">
-          {(userAchievements || []).length} / {(allAchievements || []).length} Unlocked
+        <Trophy className="w-5 h-5 md:w-6 md:h-6 text-yellow-400" />
+        <h2 className="text-base md:text-lg font-display text-white uppercase tracking-wider">Achievements</h2>
+        <span className="ml-auto text-xs text-white/40 font-mono shrink-0">
+          {(userAchievements || []).length} / {(allAchievements || []).length}
         </span>
       </div>
       
@@ -4658,12 +4655,12 @@ function OpportunitiesApp() {
   };
 
   return (
-    <div className="h-full bg-slate-950 p-4 overflow-auto">
+    <div className="min-h-full bg-slate-950 p-3 md:p-4 overflow-auto">
       <div className="flex items-center gap-2 mb-4">
-        <Briefcase className="w-6 h-6 text-cyan-400" />
-        <h2 className="text-lg font-display text-white uppercase tracking-wider">Opportunities</h2>
-        <span className="ml-auto text-xs text-white/40 font-mono">
-          {opportunities?.length || 0} Open Positions
+        <Briefcase className="w-5 h-5 md:w-6 md:h-6 text-cyan-400" />
+        <h2 className="text-base md:text-lg font-display text-white uppercase tracking-wider">Opportunities</h2>
+        <span className="ml-auto text-xs text-white/40 font-mono shrink-0">
+          {opportunities?.length || 0}
         </span>
       </div>
       
@@ -4679,16 +4676,16 @@ function OpportunitiesApp() {
       ) : (
         <div className="space-y-3">
           {opportunities.map((opp: any) => (
-            <div key={opp.id} className="bg-white/5 border border-white/10 p-4 hover:border-cyan-400/30 transition-all">
-              <div className="flex items-start justify-between gap-3 mb-2">
-                <h3 className="font-mono text-sm text-white font-semibold">{opp.title}</h3>
-                <span className="text-cyan-400 font-mono text-xs whitespace-nowrap">
+            <div key={opp.id} className="bg-white/5 border border-white/10 p-3 md:p-4 hover:border-cyan-400/30 active:border-cyan-400 transition-all">
+              <div className="flex items-start justify-between gap-2 mb-2">
+                <h3 className="font-mono text-sm text-white font-semibold line-clamp-2 flex-1">{opp.title}</h3>
+                <span className="text-cyan-400 font-mono text-xs whitespace-nowrap shrink-0">
                   {formatSalary(opp.salary_min, opp.salary_max)}
                 </span>
               </div>
               <p className="text-xs text-white/60 mb-3 line-clamp-2">{opp.description}</p>
-              <div className="flex items-center gap-2 text-xs">
-                <span className="px-2 py-0.5 bg-cyan-500/20 text-cyan-400 border border-cyan-400/30 uppercase font-mono">
+              <div className="flex flex-wrap items-center gap-2 text-xs">
+                <span className="px-2 py-0.5 bg-cyan-500/20 text-cyan-400 border border-cyan-400/30 uppercase font-mono text-[10px]">
                   {opp.arm_affiliation}
                 </span>
                 <span className="text-white/40">{opp.job_type || 'Full-time'}</span>
@@ -4715,12 +4712,12 @@ function EventsApp() {
   };
 
   return (
-    <div className="h-full bg-slate-950 p-4 overflow-auto">
+    <div className="min-h-full bg-slate-950 p-3 md:p-4 overflow-auto">
       <div className="flex items-center gap-2 mb-4">
-        <CalendarDays className="w-6 h-6 text-cyan-400" />
-        <h2 className="text-lg font-display text-white uppercase tracking-wider">Events</h2>
-        <span className="ml-auto text-xs text-white/40 font-mono">
-          {events?.length || 0} Upcoming
+        <CalendarDays className="w-5 h-5 md:w-6 md:h-6 text-cyan-400" />
+        <h2 className="text-base md:text-lg font-display text-white uppercase tracking-wider">Events</h2>
+        <span className="ml-auto text-xs text-white/40 font-mono shrink-0">
+          {events?.length || 0}
         </span>
       </div>
       
@@ -4736,7 +4733,7 @@ function EventsApp() {
       ) : (
         <div className="space-y-3">
           {events.map((event: any) => (
-            <div key={event.id} className="bg-white/5 border border-white/10 p-4 hover:border-cyan-400/30 transition-all">
+            <div key={event.id} className="bg-white/5 border border-white/10 p-3 md:p-4 hover:border-cyan-400/30 active:border-cyan-400 transition-all">
               <div className="flex items-start gap-3">
                 <div className="flex-shrink-0 w-12 h-12 bg-cyan-500/20 border border-cyan-400/50 flex flex-col items-center justify-center text-cyan-400">
                   <div className="text-xs font-mono">{formatDate(event.date).split(' ')[0]}</div>
@@ -4804,8 +4801,8 @@ function ChatApp() {
   };
 
   return (
-    <div className="h-full bg-slate-950 flex flex-col">
-      <div className="flex-1 p-4 overflow-auto space-y-3">
+    <div className="min-h-full bg-slate-950 flex flex-col">
+      <div className="flex-1 p-3 md:p-4 overflow-auto space-y-3">
         {messages.map((msg, i) => (
           <div key={i} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
             <div className={`max-w-[80%] p-3 rounded-lg text-sm ${msg.role === 'user' ? 'bg-cyan-500/20 text-white' : 'bg-white/10 text-white/80'}`}>
@@ -4841,9 +4838,9 @@ function ChatApp() {
 
 function ManifestoApp() {
   return (
-    <div className="h-full p-6 bg-slate-950 overflow-auto">
-      <div className="max-w-lg mx-auto font-mono text-sm leading-relaxed">
-        <h1 className="text-2xl font-display text-cyan-400 uppercase tracking-wider mb-6">The AeThex Manifesto</h1>
+    <div className="min-h-full p-4 md:p-6 bg-slate-950 overflow-auto">
+      <div className="max-w-lg mx-auto font-mono text-xs md:text-sm leading-relaxed">
+        <h1 className="text-xl md:text-2xl font-display text-cyan-400 uppercase tracking-wider mb-4 md:mb-6">The AeThex Manifesto</h1>
         <div className="space-y-4 text-white/80">
           <p>We are the architects of tomorrow.</p>
           <p>In a world where the digital and physical converge, we stand at the frontier of a new reality. The Metaverse is not just a destination - it is a canvas for human potential.</p>
@@ -4868,7 +4865,7 @@ function MusicApp() {
   ];
 
   return (
-    <div className="h-full p-4 bg-gradient-to-b from-purple-950/50 to-slate-950 flex flex-col">
+    <div className="min-h-full p-3 md:p-4 bg-gradient-to-b from-purple-950/50 to-slate-950 flex flex-col">
       <div className="text-center mb-4">
         <div className="w-20 h-20 mx-auto bg-gradient-to-br from-purple-500 to-pink-600 rounded-lg flex items-center justify-center mb-3">
           <Music className="w-10 h-10 text-white" />
@@ -5129,13 +5126,13 @@ function NetworkMapApp() {
   const nodes = architects?.slice(0, 8) || [];
 
   return (
-    <div className="h-full bg-slate-950 p-4 overflow-hidden relative">
+    <div className="min-h-full bg-slate-950 p-3 md:p-4 overflow-auto relative">
       <div className="flex items-center gap-2 mb-4">
         <Network className="w-5 h-5 text-cyan-400" />
-        <h2 className="text-lg font-display text-white uppercase tracking-wider">Network Map</h2>
+        <h2 className="text-base md:text-lg font-display text-white uppercase tracking-wider">Network Map</h2>
       </div>
       
-      <div className="relative h-[calc(100%-60px)] flex items-center justify-center">
+      <div className="relative min-h-[400px] md:h-[calc(100%-60px)] flex items-center justify-center py-8">
         <div className="absolute inset-0 opacity-20">
           <svg className="w-full h-full">
             {nodes.map((_: any, i: number) => {
@@ -5187,6 +5184,7 @@ function NetworkMapApp() {
 }
 
 function MetricsDashboardApp() {
+  const layout = useLayout();
   const { data: metrics, isLoading } = useQuery({
     queryKey: ['os-dashboard-metrics'],
     queryFn: async () => {
@@ -5220,57 +5218,57 @@ function MetricsDashboardApp() {
 
   if (isLoading) {
     return (
-      <div className="h-full bg-slate-950 p-4">
+      <div className="min-h-full bg-slate-950 p-3 md:p-4">
         <div className="flex items-center gap-2 mb-4">
           <Activity className="w-5 h-5 text-cyan-400" />
           <Skeleton className="h-6 w-32" />
         </div>
-        <div className="grid grid-cols-2 gap-4">
-          <Skeleton className="h-28 rounded-lg" />
-          <Skeleton className="h-28 rounded-lg" />
-          <Skeleton className="h-28 rounded-lg" />
-          <Skeleton className="h-28 rounded-lg" />
+        <div className="grid grid-cols-2 gap-3 md:gap-4">
+          <Skeleton className="h-24 md:h-28 rounded-lg" />
+          <Skeleton className="h-24 md:h-28 rounded-lg" />
+          <Skeleton className="h-24 md:h-28 rounded-lg" />
+          <Skeleton className="h-24 md:h-28 rounded-lg" />
         </div>
       </div>
     );
   }
 
   return (
-    <div className="h-full bg-slate-950 p-4 overflow-auto">
+    <div className="min-h-full bg-slate-950 p-3 md:p-4 overflow-auto">
       <div className="flex items-center gap-2 mb-4">
         <Activity className="w-5 h-5 text-cyan-400" />
-        <h2 className="text-lg font-display text-white uppercase tracking-wider">Live Metrics</h2>
+        <h2 className="text-base md:text-lg font-display text-white uppercase tracking-wider">Live Metrics</h2>
       </div>
 
-      <div className="grid grid-cols-2 gap-4 mb-4">
-        <div className="bg-gradient-to-br from-cyan-500/20 to-cyan-500/5 rounded-lg p-4 border border-cyan-500/30">
+      <div className="grid grid-cols-2 gap-3 md:gap-4 mb-4">
+        <div className="bg-gradient-to-br from-cyan-500/20 to-cyan-500/5 rounded-lg p-3 md:p-4 border border-cyan-500/30">
           <div className="text-xs text-cyan-400 uppercase">Architects</div>
-          <div className="text-3xl font-bold text-white font-mono">{animatedValues.profiles}</div>
+          <div className="text-2xl md:text-3xl font-bold text-white font-mono">{animatedValues.profiles}</div>
           <div className="flex items-center gap-1 text-green-400 text-xs mt-1">
             <ArrowUp className="w-3 h-3" /> +{Math.floor(Math.random() * 5) + 1} today
           </div>
         </div>
-        <div className="bg-gradient-to-br from-purple-500/20 to-purple-500/5 rounded-lg p-4 border border-purple-500/30">
+        <div className="bg-gradient-to-br from-purple-500/20 to-purple-500/5 rounded-lg p-3 md:p-4 border border-purple-500/30">
           <div className="text-xs text-purple-400 uppercase">Projects</div>
-          <div className="text-3xl font-bold text-white font-mono">{animatedValues.projects}</div>
+          <div className="text-2xl md:text-3xl font-bold text-white font-mono">{animatedValues.projects}</div>
           <div className="flex items-center gap-1 text-green-400 text-xs mt-1">
             <TrendingUp className="w-3 h-3" /> Active
           </div>
         </div>
-        <div className="bg-gradient-to-br from-green-500/20 to-green-500/5 rounded-lg p-4 border border-green-500/30">
+        <div className="bg-gradient-to-br from-green-500/20 to-green-500/5 rounded-lg p-3 md:p-4 border border-green-500/30">
           <div className="text-xs text-green-400 uppercase">Total XP</div>
-          <div className="text-3xl font-bold text-white font-mono">{animatedValues.xp.toLocaleString()}</div>
+          <div className="text-2xl md:text-3xl font-bold text-white font-mono">{animatedValues.xp.toLocaleString()}</div>
         </div>
-        <div className="bg-gradient-to-br from-yellow-500/20 to-yellow-500/5 rounded-lg p-4 border border-yellow-500/30">
+        <div className="bg-gradient-to-br from-yellow-500/20 to-yellow-500/5 rounded-lg p-3 md:p-4 border border-yellow-500/30">
           <div className="text-xs text-yellow-400 uppercase">Online</div>
-          <div className="text-3xl font-bold text-white font-mono">{metrics?.onlineUsers || 0}</div>
+          <div className="text-2xl md:text-3xl font-bold text-white font-mono">{metrics?.onlineUsers || 0}</div>
           <div className="flex items-center gap-1 text-yellow-400 text-xs mt-1">
             <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" /> Live
           </div>
         </div>
       </div>
 
-      <div className="bg-white/5 rounded-lg p-4 border border-white/10">
+      <div className="bg-white/5 rounded-lg p-3 md:p-4 border border-white/10">
         <div className="text-xs text-white/50 uppercase mb-3">Network Activity</div>
         <div className="flex items-end gap-1 h-24">
           {Array.from({ length: 20 }).map((_, i) => {
@@ -5414,30 +5412,30 @@ class MetaverseRegistry {
   };
 
   return (
-    <div className="h-full bg-[#1e1e1e] flex flex-col">
-      <div className="flex items-center gap-2 px-4 py-2 bg-[#252526] border-b border-[#3c3c3c]">
-        <div className="flex items-center gap-2 px-3 py-1 bg-[#1e1e1e] rounded-t border-t-2 border-cyan-500">
-          <Code2 className="w-4 h-4 text-cyan-400" />
-          <span className="text-sm text-white/80">registry.ts</span>
+    <div className="min-h-full bg-[#1e1e1e] flex flex-col">
+      <div className="flex items-center gap-2 px-2 md:px-4 py-2 bg-[#252526] border-b border-[#3c3c3c] overflow-x-auto">
+        <div className="flex items-center gap-2 px-2 md:px-3 py-1 bg-[#1e1e1e] rounded-t border-t-2 border-cyan-500 shrink-0">
+          <Code2 className="w-3 h-3 md:w-4 md:h-4 text-cyan-400" />
+          <span className="text-xs md:text-sm text-white/80">registry.ts</span>
           <span className="text-white/30 text-xs">~</span>
         </div>
-        <div className="ml-auto flex items-center gap-2">
-          <button className="text-xs text-white/50 hover:text-white/80 px-2 py-1 bg-white/5 rounded">Format</button>
-          <button className="text-xs text-white/50 hover:text-white/80 px-2 py-1 bg-white/5 rounded">Run</button>
+        <div className="ml-auto flex items-center gap-2 shrink-0">
+          <button className="text-[10px] md:text-xs text-white/50 hover:text-white/80 px-1.5 md:px-2 py-1 bg-white/5 rounded">Format</button>
+          <button className="text-[10px] md:text-xs text-white/50 hover:text-white/80 px-1.5 md:px-2 py-1 bg-white/5 rounded">Run</button>
         </div>
       </div>
       
-      <div className="flex-1 overflow-hidden relative">
+      <div className="flex-1 overflow-hidden relative touch-pan-x touch-pan-y">
         <div className="absolute inset-0 flex">
-          <div className="w-12 bg-[#1e1e1e] border-r border-[#3c3c3c] pt-4 text-right pr-2 text-white/30 text-sm font-mono select-none overflow-hidden">
+          <div className="w-8 md:w-12 bg-[#1e1e1e] border-r border-[#3c3c3c] pt-2 md:pt-4 text-right pr-1 md:pr-2 text-white/30 text-[10px] md:text-sm font-mono select-none overflow-hidden">
             {code.split('\n').map((_, i) => (
               <div key={i} className={`h-[1.5rem] ${cursorPos.line === i + 1 ? 'text-white/60' : ''}`}>{i + 1}</div>
             ))}
           </div>
           <div className="flex-1 relative">
-            <div className="absolute inset-0 p-4 font-mono text-sm leading-6 pointer-events-none overflow-auto whitespace-pre" style={{ color: '#d4d4d4' }}>
+            <div className="absolute inset-0 p-2 md:p-4 font-mono text-xs md:text-sm leading-5 md:leading-6 pointer-events-none overflow-auto whitespace-pre" style={{ color: '#d4d4d4' }}>
               {code.split('\n').map((line, i) => (
-                <div key={i} className={`h-6 ${cursorPos.line === i + 1 ? 'bg-white/5' : ''}`} 
+                <div key={i} className={`h-5 md:h-6 ${cursorPos.line === i + 1 ? 'bg-white/5' : ''}`} 
                   dangerouslySetInnerHTML={{ __html: highlightLine(line) || '&nbsp;' }} />
               ))}
             </div>
@@ -5448,7 +5446,7 @@ class MetaverseRegistry {
               onKeyDown={handleKeyDown}
               onKeyUp={updateCursorPos}
               onClick={updateCursorPos}
-              className="absolute inset-0 p-4 font-mono text-sm leading-6 bg-transparent text-transparent caret-white resize-none focus:outline-none"
+              className="absolute inset-0 p-2 md:p-4 font-mono text-xs md:text-sm leading-5 md:leading-6 bg-transparent text-transparent caret-white resize-none focus:outline-none"
               spellCheck={false}
             />
             {showAutocomplete && autocompleteItems.length > 0 && (
@@ -5469,52 +5467,106 @@ class MetaverseRegistry {
         </div>
       </div>
       
-      <div className="px-4 py-2 bg-[#007acc] text-white text-xs flex items-center gap-4">
+      <div className="px-2 md:px-4 py-1.5 md:py-2 bg-[#007acc] text-white text-[10px] md:text-xs flex items-center gap-2 md:gap-4 overflow-x-auto">
         <span>TypeScript</span>
         <span>UTF-8</span>
-        <span>Spaces: 2</span>
-        <span className="ml-auto">Ln {cursorPos.line}, Col {cursorPos.col}</span>
-        <span className="text-white/60">Ctrl+Space for suggestions</span>
+        <span className="hidden sm:inline">Spaces: 2</span>
+        <span className="ml-auto shrink-0">Ln {cursorPos.line}, Col {cursorPos.col}</span>
+        <span className="text-white/60 hidden md:inline">Ctrl+Space for suggestions</span>
       </div>
     </div>
   );
 }
 
 function NewsFeedApp() {
-  const newsItems = [
+  const { data: activities, isLoading, refetch } = useQuery({
+    queryKey: ['activity-feed'],
+    queryFn: async () => {
+      const res = await fetch('/api/track/events?limit=20');
+      if (!res.ok) return [];
+      return res.json();
+    },
+  });
+
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    await refetch();
+    setTimeout(() => setIsRefreshing(false), 500);
+  };
+
+  const formatTime = (timestamp: string) => {
+    const date = new Date(timestamp);
+    const now = new Date();
+    const diff = Math.floor((now.getTime() - date.getTime()) / 1000);
+    if (diff < 60) return 'Just now';
+    if (diff < 3600) return `${Math.floor(diff / 60)} min ago`;
+    if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+    return `${Math.floor(diff / 86400)}d ago`;
+  };
+
+  const getEventType = (eventType: string) => {
+    if (eventType.includes('achievement') || eventType.includes('unlock')) return 'success';
+    if (eventType.includes('error') || eventType.includes('fail')) return 'warning';
+    return 'info';
+  };
+
+  const formatEventTitle = (event: any) => {
+    if (event.event_type === 'page_view') return `User viewed ${event.payload?.page || 'page'}`;
+    if (event.event_type === 'app_open') return `${event.payload?.app || 'App'} opened`;
+    if (event.event_type === 'achievement_unlock') return `Achievement unlocked: ${event.payload?.name || 'unknown'}`;
+    return event.event_type.replace(/_/g, ' ');
+  };
+
+  const newsItems = activities?.length ? activities.map((a: any) => ({
+    time: formatTime(a.timestamp),
+    title: formatEventTitle(a),
+    type: getEventType(a.event_type),
+  })) : [
     { time: '2 min ago', title: 'New architect joined the network', type: 'info' },
     { time: '15 min ago', title: 'Project "Genesis" reached milestone', type: 'success' },
     { time: '1 hour ago', title: 'AEGIS blocked 3 intrusion attempts', type: 'warning' },
-    { time: '3 hours ago', title: 'Codex certification updated', type: 'info' },
-    { time: '5 hours ago', title: 'Network expansion: 5 new nodes', type: 'success' },
-    { time: '1 day ago', title: 'System maintenance completed', type: 'info' },
   ];
 
   return (
-    <div className="h-full bg-slate-950 flex flex-col">
-      <div className="flex items-center gap-2 p-4 border-b border-white/10">
+    <div className="min-h-full bg-slate-950 flex flex-col">
+      <div className="flex items-center gap-2 p-3 md:p-4 border-b border-white/10">
         <Newspaper className="w-5 h-5 text-cyan-400" />
-        <h2 className="text-lg font-display text-white uppercase tracking-wider">News Feed</h2>
+        <h2 className="text-base md:text-lg font-display text-white uppercase tracking-wider">News Feed</h2>
+        <button
+          onClick={handleRefresh}
+          disabled={isRefreshing}
+          className="ml-auto p-1.5 hover:bg-white/10 rounded transition-colors disabled:opacity-50"
+        >
+          <RefreshCw className={`w-4 h-4 text-cyan-400 ${isRefreshing ? 'animate-spin' : ''}`} />
+        </button>
       </div>
-      <div className="flex-1 overflow-auto p-4 space-y-3">
-        {newsItems.map((item, i) => (
+      {isLoading ? (
+        <div className="flex-1 flex items-center justify-center">
+          <Loader2 className="w-8 h-8 text-cyan-400 animate-spin" />
+        </div>
+      ) : (
+      <div className="flex-1 overflow-auto p-3 md:p-4 space-y-3">
+        {newsItems.map((item: any, i: number) => (
           <motion.div
             key={i}
             initial={{ opacity: 0, x: -20 }}
             animate={{ opacity: 1, x: 0 }}
-            transition={{ delay: i * 0.1 }}
-            className="p-3 bg-white/5 rounded-lg border border-white/10 hover:border-cyan-500/30 transition-colors"
+            transition={{ delay: i * 0.05 }}
+            className="p-3 bg-white/5 rounded-lg border border-white/10 hover:border-cyan-500/30 active:border-cyan-500/50 transition-colors"
           >
             <div className="flex items-start gap-3">
-              <div className={`w-2 h-2 mt-2 rounded-full ${item.type === 'success' ? 'bg-green-500' : item.type === 'warning' ? 'bg-yellow-500' : 'bg-cyan-500'}`} />
-              <div className="flex-1">
-                <div className="text-white text-sm">{item.title}</div>
+              <div className={`w-2 h-2 mt-2 rounded-full shrink-0 ${item.type === 'success' ? 'bg-green-500' : item.type === 'warning' ? 'bg-yellow-500' : 'bg-cyan-500'}`} />
+              <div className="flex-1 min-w-0">
+                <div className="text-white text-sm line-clamp-2">{item.title}</div>
                 <div className="text-white/40 text-xs mt-1">{item.time}</div>
               </div>
             </div>
           </motion.div>
         ))}
       </div>
+      )}
     </div>
   );
 }
@@ -5579,15 +5631,15 @@ function ArcadeApp() {
   };
 
   return (
-    <div className="h-full bg-slate-950 p-4 flex flex-col items-center">
-      <div className="flex items-center gap-2 mb-4">
+    <div className="min-h-full bg-slate-950 p-3 md:p-4 flex flex-col items-center overflow-auto">
+      <div className="flex items-center gap-2 mb-3 md:mb-4">
         <Gamepad2 className="w-5 h-5 text-cyan-400" />
-        <h2 className="text-lg font-display text-white uppercase tracking-wider">Cyber Snake</h2>
+        <h2 className="text-base md:text-lg font-display text-white uppercase tracking-wider">Cyber Snake</h2>
       </div>
       
-      <div className="text-cyan-400 font-mono mb-2">Score: {score}</div>
+      <div className="text-cyan-400 font-mono text-sm md:text-base mb-2">Score: {score}</div>
       
-      <div className="grid gap-px bg-cyan-900/20 border border-cyan-500/30 rounded" style={{ gridTemplateColumns: 'repeat(20, 16px)' }}>
+      <div className="grid gap-px bg-cyan-900/20 border border-cyan-500/30 rounded" style={{ gridTemplateColumns: 'repeat(20, 12px)' }}>
         {Array.from({ length: 400 }).map((_, i) => {
           const x = i % 20;
           const y = Math.floor(i / 20);
@@ -5597,19 +5649,56 @@ function ArcadeApp() {
           return (
             <div
               key={i}
-              className={`w-4 h-4 ${isHead ? 'bg-cyan-400' : isSnake ? 'bg-green-500' : isFood ? 'bg-red-500' : 'bg-slate-900'}`}
+              className={`w-3 h-3 ${isHead ? 'bg-cyan-400' : isSnake ? 'bg-green-500' : isFood ? 'bg-red-500' : 'bg-slate-900'}`}
             />
           );
         })}
       </div>
 
       {!isPlaying && (
-        <button onClick={startGame} className="mt-4 px-6 py-2 bg-cyan-500/20 hover:bg-cyan-500/30 text-cyan-400 rounded-lg border border-cyan-500/50 transition-colors font-mono">
+        <button onClick={startGame} className="mt-3 md:mt-4 px-4 md:px-6 py-2 bg-cyan-500/20 hover:bg-cyan-500/30 text-cyan-400 rounded-lg border border-cyan-500/50 transition-colors font-mono text-sm md:text-base">
           {gameOver ? 'Play Again' : 'Start Game'}
         </button>
       )}
       
-      <div className="mt-2 text-white/40 text-xs">Use arrow keys to move</div>
+      {isPlaying && (
+        <div className="mt-3 md:mt-4 grid grid-cols-3 gap-2 md:hidden">
+          <div />
+          <button
+            onClick={() => direction.y !== 1 && setDirection({ x: 0, y: -1 })}
+            className="p-3 bg-cyan-500/20 active:bg-cyan-500/40 rounded border border-cyan-500/50 transition-colors"
+          >
+            <ChevronUp className="w-5 h-5 text-cyan-400 mx-auto" />
+          </button>
+          <div />
+          <button
+            onClick={() => direction.x !== 1 && setDirection({ x: -1, y: 0 })}
+            className="p-3 bg-cyan-500/20 active:bg-cyan-500/40 rounded border border-cyan-500/50 transition-colors"
+          >
+            <ChevronUp className="w-5 h-5 text-cyan-400 mx-auto rotate-[270deg]" />
+          </button>
+          <div />
+          <button
+            onClick={() => direction.x !== -1 && setDirection({ x: 1, y: 0 })}
+            className="p-3 bg-cyan-500/20 active:bg-cyan-500/40 rounded border border-cyan-500/50 transition-colors"
+          >
+            <ChevronUp className="w-5 h-5 text-cyan-400 mx-auto rotate-90" />
+          </button>
+          <div />
+          <button
+            onClick={() => direction.y !== -1 && setDirection({ x: 0, y: 1 })}
+            className="p-3 bg-cyan-500/20 active:bg-cyan-500/40 rounded border border-cyan-500/50 transition-colors"
+          >
+            <ChevronUp className="w-5 h-5 text-cyan-400 mx-auto rotate-180" />
+          </button>
+          <div />
+        </div>
+      )}
+      
+      <div className="mt-2 text-white/40 text-xs text-center">
+        <span className="md:inline hidden">Use arrow keys to move</span>
+        <span className="md:hidden">Tap buttons to move</span>
+      </div>
     </div>
   );
 }
@@ -5625,16 +5714,16 @@ function ProfilesApp() {
 
   if (isLoading) {
     return (
-      <div className="h-full bg-slate-950 flex flex-col">
-        <div className="flex items-center gap-2 p-4 border-b border-white/10">
+      <div className="min-h-full bg-slate-950 flex flex-col">
+        <div className="flex items-center gap-2 p-3 md:p-4 border-b border-white/10">
           <Users className="w-5 h-5 text-cyan-400" />
-          <Skeleton className="h-6 w-40" />
+          <Skeleton className="h-5 md:h-6 w-32 md:w-40" />
         </div>
-        <div className="flex-1 overflow-auto p-4 grid grid-cols-2 gap-4">
+        <div className="flex-1 overflow-auto p-3 md:p-4 grid grid-cols-1 sm:grid-cols-2 gap-3 md:gap-4">
           {[1,2,3,4].map(i => (
-            <div key={i} className="bg-slate-800/50 rounded-lg p-4 border border-white/10">
+            <div key={i} className="bg-slate-800/50 rounded-lg p-3 md:p-4 border border-white/10">
               <div className="flex items-center gap-3">
-                <Skeleton className="w-12 h-12 rounded-full" />
+                <Skeleton className="w-12 h-12 rounded-full shrink-0" />
                 <div className="flex-1 space-y-2">
                   <Skeleton className="h-4 w-24" />
                   <Skeleton className="h-3 w-16" />
@@ -5652,25 +5741,25 @@ function ProfilesApp() {
   }
 
   return (
-    <div className="h-full bg-slate-950 flex flex-col">
-      <div className="flex items-center gap-2 p-4 border-b border-white/10">
+    <div className="min-h-full bg-slate-950 flex flex-col">
+      <div className="flex items-center gap-2 p-3 md:p-4 border-b border-white/10">
         <Users className="w-5 h-5 text-cyan-400" />
-        <h2 className="text-lg font-display text-white uppercase tracking-wider">Architect Profiles</h2>
+        <h2 className="text-base md:text-lg font-display text-white uppercase tracking-wider">Architect Profiles</h2>
       </div>
-      <div className="flex-1 overflow-auto p-4 grid grid-cols-2 gap-4">
+      <div className="flex-1 overflow-auto p-3 md:p-4 grid grid-cols-1 sm:grid-cols-2 gap-3 md:gap-4">
         {profiles?.map((profile: any) => (
           <motion.div
             key={profile.id}
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
-            className="bg-gradient-to-br from-slate-800 to-slate-900 rounded-lg p-4 border border-white/10 hover:border-cyan-500/30 transition-colors"
+            className="bg-gradient-to-br from-slate-800 to-slate-900 rounded-lg p-4 border border-white/10 hover:border-cyan-500/30 active:border-cyan-500 transition-colors"
           >
             <div className="flex items-center gap-3">
-              <div className={`w-12 h-12 rounded-full flex items-center justify-center ${profile.verified ? 'bg-green-500/20 border-2 border-green-500' : 'bg-cyan-500/20 border border-cyan-500/50'}`}>
+              <div className={`w-12 h-12 rounded-full flex items-center justify-center shrink-0 ${profile.verified ? 'bg-green-500/20 border-2 border-green-500' : 'bg-cyan-500/20 border border-cyan-500/50'}`}>
                 <User className="w-6 h-6 text-white" />
               </div>
-              <div>
-                <div className="text-white font-mono">{profile.username || 'Anonymous'}</div>
+              <div className="min-w-0 flex-1">
+                <div className="text-white font-mono truncate">{profile.username || 'Anonymous'}</div>
                 <div className="text-cyan-400 text-xs">Level {profile.level}</div>
               </div>
             </div>
@@ -5714,10 +5803,10 @@ function NetworkNeighborhoodApp({ openIframeWindow }: { openIframeWindow?: (url:
 
   if (isLoading) {
     return (
-      <div className="h-full bg-black flex flex-col font-mono">
-        <div className="flex items-center gap-2 p-3 border-b border-cyan-500/30 bg-cyan-500/5">
+      <div className="min-h-full bg-black flex flex-col font-mono">
+        <div className="flex items-center gap-2 p-2.5 md:p-3 border-b border-cyan-500/30 bg-cyan-500/5">
           <Network className="w-4 h-4 text-cyan-400" />
-          <span className="text-cyan-400 text-sm uppercase tracking-wider">Network Neighborhood</span>
+          <span className="text-cyan-400 text-xs md:text-sm uppercase tracking-wider">Network Neighborhood</span>
         </div>
         <div className="flex-1 p-4 flex items-center justify-center">
           <Loader2 className="w-6 h-6 text-cyan-400 animate-spin" />
@@ -5727,10 +5816,10 @@ function NetworkNeighborhoodApp({ openIframeWindow }: { openIframeWindow?: (url:
   }
 
   return (
-    <div className="h-full bg-black flex flex-col font-mono">
-      <div className="flex items-center gap-2 p-3 border-b border-cyan-500/30 bg-cyan-500/5">
+    <div className="min-h-full bg-black flex flex-col font-mono">
+      <div className="flex items-center gap-2 p-2.5 md:p-3 border-b border-cyan-500/30 bg-cyan-500/5">
         <Network className="w-4 h-4 text-cyan-400" />
-        <span className="text-cyan-400 text-sm uppercase tracking-wider">Network Neighborhood</span>
+        <span className="text-cyan-400 text-xs md:text-sm uppercase tracking-wider">Network Neighborhood</span>
         <span className="text-cyan-500/40 text-xs ml-auto">{founders.length} nodes online</span>
       </div>
       <div className="flex-1 overflow-auto p-2 space-y-1">
@@ -5740,16 +5829,16 @@ function NetworkNeighborhoodApp({ openIframeWindow }: { openIframeWindow?: (url:
             initial={{ opacity: 0, x: -10 }}
             animate={{ opacity: 1, x: 0 }}
             transition={{ delay: idx * 0.05 }}
-            className="flex items-center justify-between py-2 px-3 border-l-2 border-cyan-500/40 bg-cyan-500/5 hover:bg-cyan-500/10 transition-colors cursor-pointer"
+            className="flex items-center justify-between py-2 px-2 md:px-3 border-l-2 border-cyan-500/40 bg-cyan-500/5 hover:bg-cyan-500/10 active:bg-cyan-500/15 transition-colors cursor-pointer"
           >
-            <div className="flex items-center gap-3">
-              <span className="text-cyan-500/60 text-xs">[{String(idx + 1).padStart(3, '0')}]</span>
-              <div>
-                <span className="text-white font-bold">{architect.name}</span>
-                <span className="text-cyan-500/50 text-sm ml-2">— {architect.role}</span>
+            <div className="flex items-center gap-2 md:gap-3 min-w-0 flex-1">
+              <span className="text-cyan-500/60 text-xs shrink-0">[{String(idx + 1).padStart(3, '0')}]</span>
+              <div className="min-w-0">
+                <span className="text-white font-bold text-xs md:text-sm truncate block">{architect.name}</span>
+                <span className="text-cyan-500/50 text-xs hidden sm:inline">— {architect.role}</span>
               </div>
             </div>
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-1.5 md:gap-2 shrink-0">
               <span className="text-xs text-cyan-500/40">Lv.{architect.level || 1}</span>
               <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
             </div>
@@ -5758,17 +5847,17 @@ function NetworkNeighborhoodApp({ openIframeWindow }: { openIframeWindow?: (url:
         {reservedSlots.map((slot: any, idx: number) => (
           <div
             key={slot.id}
-            className="flex items-center justify-between py-2 px-3 border-l-2 border-yellow-500/30 bg-yellow-500/5 hover:bg-yellow-500/10 transition-colors"
+            className="flex items-center justify-between py-2 px-2 md:px-3 border-l-2 border-yellow-500/30 bg-yellow-500/5 hover:bg-yellow-500/10 transition-colors"
           >
-            <div className="flex items-center gap-3">
-              <span className="text-yellow-500/50 text-xs">[{String(founders.length + idx + 1).padStart(3, '0')}]</span>
-              <span className="text-yellow-500/70">{slot.name}</span>
+            <div className="flex items-center gap-2 md:gap-3 min-w-0 flex-1">
+              <span className="text-yellow-500/50 text-xs shrink-0">[{String(founders.length + idx + 1).padStart(3, '0')}]</span>
+              <span className="text-yellow-500/70 text-xs md:text-sm truncate">{slot.name}</span>
             </div>
             <button 
               onClick={() => openIframeWindow?.('https://aethex.studio', 'The Foundry')}
-              className="text-xs text-yellow-500 hover:text-yellow-400 transition-colors uppercase tracking-wider flex items-center gap-1"
+              className="text-xs text-yellow-500 hover:text-yellow-400 transition-colors uppercase tracking-wider flex items-center gap-1 shrink-0"
             >
-              Join <ExternalLink className="w-3 h-3" />
+              <span className="hidden sm:inline">Join</span> <ExternalLink className="w-3 h-3" />
             </button>
           </div>
         ))}
@@ -5798,22 +5887,22 @@ function FoundryApp({ openIframeWindow }: { openIframeWindow?: (url: string, tit
   }, []);
   
   return (
-    <div className="h-full bg-gradient-to-br from-yellow-950 to-black flex flex-col font-mono">
-      <div className="flex items-center justify-between p-3 border-b border-yellow-500/30 bg-yellow-500/5">
+    <div className="min-h-full bg-gradient-to-br from-yellow-950 to-black flex flex-col font-mono">
+      <div className="flex items-center justify-between p-2.5 md:p-3 border-b border-yellow-500/30 bg-yellow-500/5">
         <div className="flex items-center gap-2">
           <Award className="w-4 h-4 text-yellow-400" />
-          <span className="text-yellow-400 text-sm uppercase tracking-wider">FOUNDRY.EXE</span>
+          <span className="text-yellow-400 text-xs md:text-sm uppercase tracking-wider">FOUNDRY.EXE</span>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-1 md:gap-2">
           <button 
             onClick={() => setViewMode('info')}
-            className={`px-2 py-1 text-xs uppercase ${viewMode === 'info' ? 'bg-yellow-500 text-black' : 'text-yellow-400 hover:bg-yellow-500/20'} transition-colors`}
+            className={`px-2 py-1 text-[10px] md:text-xs uppercase ${viewMode === 'info' ? 'bg-yellow-500 text-black' : 'text-yellow-400 hover:bg-yellow-500/20'} transition-colors`}
           >
             Info
           </button>
           <button 
             onClick={() => setViewMode('enroll')}
-            className={`px-2 py-1 text-xs uppercase ${viewMode === 'enroll' ? 'bg-yellow-500 text-black' : 'text-yellow-400 hover:bg-yellow-500/20'} transition-colors`}
+            className={`px-2 py-1 text-[10px] md:text-xs uppercase ${viewMode === 'enroll' ? 'bg-yellow-500 text-black' : 'text-yellow-400 hover:bg-yellow-500/20'} transition-colors`}
           >
             Enroll
           </button>
@@ -5821,26 +5910,26 @@ function FoundryApp({ openIframeWindow }: { openIframeWindow?: (url: string, tit
       </div>
       
       {viewMode === 'info' ? (
-        <div className="flex-1 flex flex-col items-center justify-center p-6 text-center">
-          <div className="w-20 h-20 rounded-full bg-yellow-500/20 border-2 border-yellow-500/50 flex items-center justify-center mb-6">
-            <Award className="w-10 h-10 text-yellow-400" />
+        <div className="flex-1 flex flex-col items-center justify-center p-4 md:p-6 text-center overflow-auto">
+          <div className="w-16 h-16 md:w-20 md:h-20 rounded-full bg-yellow-500/20 border-2 border-yellow-500/50 flex items-center justify-center mb-4 md:mb-6">
+            <Award className="w-8 h-8 md:w-10 md:h-10 text-yellow-400" />
           </div>
-          <h2 className="text-2xl font-bold text-yellow-400 mb-2">The Foundry</h2>
-          <p className="text-white/70 text-sm mb-6 max-w-xs">
+          <h2 className="text-xl md:text-2xl font-bold text-yellow-400 mb-2">The Foundry</h2>
+          <p className="text-white/70 text-xs md:text-sm mb-4 md:mb-6 max-w-xs px-4 md:px-0">
             Train to become a certified Metaverse Architect. Learn the protocols. Join the network.
           </p>
-          <div className="space-y-2 text-left text-sm text-white/60 mb-6">
-            <div className="flex items-center gap-2"><Zap className="w-4 h-4 text-yellow-400" /> 8-week intensive curriculum</div>
-            <div className="flex items-center gap-2"><Shield className="w-4 h-4 text-yellow-400" /> AeThex Passport certification</div>
-            <div className="flex items-center gap-2"><Users className="w-4 h-4 text-yellow-400" /> Join the architect network</div>
+          <div className="space-y-2 text-left text-xs md:text-sm text-white/60 mb-4 md:mb-6">
+            <div className="flex items-center gap-2"><Zap className="w-3 h-3 md:w-4 md:h-4 text-yellow-400" /> 8-week intensive curriculum</div>
+            <div className="flex items-center gap-2"><Shield className="w-3 h-3 md:w-4 md:h-4 text-yellow-400" /> AeThex Passport certification</div>
+            <div className="flex items-center gap-2"><Users className="w-3 h-3 md:w-4 md:h-4 text-yellow-400" /> Join the architect network</div>
           </div>
           <button 
             onClick={() => setViewMode('enroll')}
-            className="px-6 py-3 bg-yellow-500 hover:bg-yellow-400 text-black font-bold uppercase tracking-wider transition-colors flex items-center gap-2"
+            className="px-4 md:px-6 py-2.5 md:py-3 bg-yellow-500 hover:bg-yellow-400 text-black font-bold text-sm md:text-base uppercase tracking-wider transition-colors flex items-center gap-2"
           >
             Enroll Now <ChevronRight className="w-4 h-4" />
           </button>
-          <div className="mt-4 text-xs text-yellow-500/50">
+          <div className="mt-3 md:mt-4 text-xs text-yellow-500/50">
             Hint: Check the terminal for secret codes
           </div>
         </div>
@@ -5919,26 +6008,26 @@ function DevToolsApp({ openIframeWindow }: { openIframeWindow?: (url: string, ti
   ];
 
   return (
-    <div className="h-full bg-slate-950 flex flex-col font-mono">
-      <div className="flex items-center gap-2 p-3 border-b border-purple-500/30 bg-purple-500/5">
+    <div className="min-h-full bg-slate-950 flex flex-col font-mono">
+      <div className="flex items-center gap-2 p-2.5 md:p-3 border-b border-purple-500/30 bg-purple-500/5">
         <Code2 className="w-4 h-4 text-purple-400" />
-        <span className="text-purple-400 text-sm uppercase tracking-wider">Dev Tools</span>
+        <span className="text-purple-400 text-xs md:text-sm uppercase tracking-wider">Dev Tools</span>
       </div>
-      <div className="flex-1 overflow-auto p-4 space-y-3">
+      <div className="flex-1 overflow-auto p-3 md:p-4 space-y-2 md:space-y-3">
         {tools.map((tool, idx) => (
           <button
             key={idx}
             onClick={() => tool.url !== '#' && openIframeWindow?.(tool.url, tool.name)}
-            className="w-full flex items-center gap-4 p-4 border border-purple-500/20 bg-purple-500/5 hover:bg-purple-500/10 transition-colors rounded-lg text-left"
+            className="w-full flex items-center gap-3 md:gap-4 p-3 md:p-4 border border-purple-500/20 bg-purple-500/5 hover:bg-purple-500/10 active:bg-purple-500/15 transition-colors rounded-lg text-left"
           >
-            <div className="w-10 h-10 rounded-lg bg-purple-500/20 flex items-center justify-center text-purple-400">
+            <div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-purple-500/20 flex items-center justify-center text-purple-400 shrink-0">
               {tool.icon}
             </div>
-            <div className="flex-1">
-              <div className="text-white font-bold">{tool.name}</div>
-              <div className="text-purple-400/60 text-sm">{tool.desc}</div>
+            <div className="flex-1 min-w-0">
+              <div className="text-white font-bold text-sm md:text-base truncate">{tool.name}</div>
+              <div className="text-purple-400/60 text-xs md:text-sm truncate">{tool.desc}</div>
             </div>
-            <ExternalLink className="w-4 h-4 text-purple-400/40" />
+            <ExternalLink className="w-3 h-3 md:w-4 md:h-4 text-purple-400/40 shrink-0" />
           </button>
         ))}
       </div>
@@ -6037,15 +6126,15 @@ REVENUE MODEL
   ];
 
   return (
-    <div className="h-full bg-black flex flex-col font-mono">
-      <div className="flex items-center gap-2 p-3 border-b border-amber-500/30 bg-amber-500/5">
+    <div className="min-h-full bg-black flex flex-col font-mono">
+      <div className="flex items-center gap-2 p-2.5 md:p-3 border-b border-amber-500/30 bg-amber-500/5">
         <FolderSearch className="w-4 h-4 text-amber-400" />
-        <span className="text-amber-400 text-sm uppercase tracking-wider">INTEL</span>
+        <span className="text-amber-400 text-xs md:text-sm uppercase tracking-wider">INTEL</span>
         <span className="text-amber-500/40 text-xs ml-auto">CLASSIFIED</span>
       </div>
       
       {!selectedFile ? (
-        <div className="flex-1 overflow-auto p-3 space-y-2">
+        <div className="flex-1 overflow-auto p-2.5 md:p-3 space-y-2">
           <div className="text-amber-500/60 text-xs mb-3 border-b border-amber-500/20 pb-2">
             📁 /intel/market_data/
           </div>
@@ -6063,13 +6152,15 @@ REVENUE MODEL
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({ event_type: 'intel_open', source: 'intel-app', payload: { file: file.name }, timestamp: new Date().toISOString() })
                   });
-                } catch {}
+                } catch (err) {
+                  if (import.meta.env.DEV) console.debug('[IntelApp] Track event failed:', err);
+                }
               }}
-              className="w-full flex items-center gap-3 py-2 px-3 border-l-2 border-amber-500/40 bg-amber-500/5 hover:bg-amber-500/15 transition-colors text-left"
+              className="w-full flex items-center gap-2 md:gap-3 py-2 px-2.5 md:px-3 border-l-2 border-amber-500/40 bg-amber-500/5 hover:bg-amber-500/15 active:bg-amber-500/20 transition-colors text-left"
             >
-              <span className="text-amber-400">{file.icon}</span>
-              <span className="text-white">{file.name}</span>
-              <span className="text-amber-500/40 text-xs ml-auto">OPEN</span>
+              <span className="text-amber-400 shrink-0">{file.icon}</span>
+              <span className="text-white text-xs md:text-sm truncate">{file.name}</span>
+              <span className="text-amber-500/40 text-xs ml-auto shrink-0">OPEN</span>
             </motion.button>
           ))}
         </div>
@@ -6082,10 +6173,10 @@ REVENUE MODEL
             >
               ← Back
             </button>
-            <span className="text-white text-sm">{selectedFile}</span>
+            <span className="text-white text-xs md:text-sm truncate">{selectedFile}</span>
           </div>
-          <div className="flex-1 overflow-auto p-4">
-            <pre className="text-green-400 text-xs whitespace-pre-wrap leading-relaxed">
+          <div className="flex-1 overflow-auto p-3 md:p-4">
+            <pre className="text-green-400 text-[10px] md:text-xs whitespace-pre-wrap leading-relaxed">
               {files.find(f => f.name === selectedFile)?.content}
             </pre>
           </div>
@@ -6104,21 +6195,21 @@ function DrivesApp({ openIframeWindow }: { openIframeWindow?: (url: string, titl
   ];
 
   return (
-    <div className="h-full bg-slate-950 flex flex-col font-mono">
-      <div className="flex items-center gap-2 p-3 border-b border-cyan-500/30 bg-cyan-500/5">
+    <div className="min-h-full bg-slate-950 flex flex-col font-mono">
+      <div className="flex items-center gap-2 p-2.5 md:p-3 border-b border-cyan-500/30 bg-cyan-500/5">
         <HardDrive className="w-4 h-4 text-cyan-400" />
-        <span className="text-cyan-400 text-sm uppercase tracking-wider">My Computer</span>
+        <span className="text-cyan-400 text-xs md:text-sm uppercase tracking-wider">My Computer</span>
       </div>
       
-      <div className="flex-1 overflow-auto p-4">
-        <div className="text-white/50 text-xs mb-4 uppercase tracking-wider">Storage Devices</div>
-        <div className="space-y-3">
+      <div className="flex-1 overflow-auto p-3 md:p-4">
+        <div className="text-white/50 text-xs mb-3 md:mb-4 uppercase tracking-wider">Storage Devices</div>
+        <div className="space-y-2 md:space-y-3">
           {drives.map((drive) => (
             <motion.div
               key={drive.id}
               initial={{ opacity: 0, y: 10 }}
               animate={{ opacity: 1, y: 0 }}
-              className={`border rounded-lg p-4 cursor-pointer transition-all ${
+              className={`border rounded-lg p-3 md:p-4 cursor-pointer transition-all ${
                 drive.status === 'online' 
                   ? 'border-cyan-500/30 bg-cyan-500/5 hover:bg-cyan-500/10' 
                   : 'border-red-500/30 bg-red-500/5 hover:bg-red-500/10'
@@ -6134,16 +6225,16 @@ function DrivesApp({ openIframeWindow }: { openIframeWindow?: (url: string, titl
                 }
               }}
             >
-              <div className="flex items-center gap-4">
-                <div className={`w-12 h-12 rounded-lg flex items-center justify-center ${
+              <div className="flex items-center gap-3 md:gap-4">
+                <div className={`w-10 h-10 md:w-12 md:h-12 rounded-lg flex items-center justify-center shrink-0 ${
                   drive.status === 'online' ? 'bg-cyan-500/20 text-cyan-400' : 'bg-red-500/20 text-red-400'
                 }`}>
                   {drive.icon}
                 </div>
-                <div className="flex-1">
+                <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-2">
-                    <span className="text-white font-bold">({drive.id}:)</span>
-                    <span className="text-white/70">{drive.name}</span>
+                    <span className="text-white font-bold text-sm md:text-base">({drive.id}:)</span>
+                    <span className="text-white/70 text-sm md:text-base truncate">{drive.name}</span>
                   </div>
                   <div className="text-xs mt-1">
                     {drive.status === 'online' ? (
@@ -6169,21 +6260,21 @@ function DrivesApp({ openIframeWindow }: { openIframeWindow?: (url: string, titl
               initial={{ opacity: 0, y: 10 }}
               animate={{ opacity: 1, y: 0 }}
               exit={{ opacity: 0, y: -10 }}
-              className="mt-6 border border-red-500/30 bg-red-500/10 rounded-lg p-4"
+              className="mt-4 md:mt-6 border border-red-500/30 bg-red-500/10 rounded-lg p-3 md:p-4"
             >
-              <div className="flex items-start gap-3">
-                <AlertTriangle className="w-5 h-5 text-red-400 flex-shrink-0 mt-0.5" />
+              <div className="flex items-start gap-2 md:gap-3">
+                <AlertTriangle className="w-4 h-4 md:w-5 md:h-5 text-red-400 flex-shrink-0 mt-0.5" />
                 <div>
-                  <div className="text-red-400 font-bold mb-1">ERROR: Drive Not Mounted</div>
-                  <div className="text-white/70 text-sm mb-3">
+                  <div className="text-red-400 font-bold text-sm md:text-base mb-1">ERROR: Drive Not Mounted</div>
+                  <div className="text-white/70 text-xs md:text-sm mb-2 md:mb-3">
                     No .aethex domain detected for this identity.
                   </div>
-                  <div className="text-white/50 text-xs mb-4">
+                  <div className="text-white/50 text-xs mb-3 md:mb-4">
                     Join The Foundry to reserve your namespace in the AeThex ecosystem.
                   </div>
                   <button
                     onClick={() => openIframeWindow?.('https://aethex.studio', 'The Foundry')}
-                    className="inline-flex items-center gap-2 px-4 py-2 bg-yellow-500 hover:bg-yellow-400 text-black text-sm font-bold uppercase tracking-wider transition-colors"
+                    className="inline-flex items-center gap-2 px-3 md:px-4 py-2 bg-yellow-500 hover:bg-yellow-400 text-black text-xs md:text-sm font-bold uppercase tracking-wider transition-colors"
                   >
                     Join The Foundry <ExternalLink className="w-3 h-3" />
                   </button>
@@ -6196,10 +6287,10 @@ function DrivesApp({ openIframeWindow }: { openIframeWindow?: (url: string, titl
               initial={{ opacity: 0, y: 10 }}
               animate={{ opacity: 1, y: 0 }}
               exit={{ opacity: 0, y: -10 }}
-              className="mt-6 border border-cyan-500/30 bg-cyan-500/5 rounded-lg p-4"
+              className="mt-4 md:mt-6 border border-cyan-500/30 bg-cyan-500/5 rounded-lg p-3 md:p-4"
             >
-              <div className="text-cyan-400 font-bold mb-2">Local System Storage</div>
-              <div className="space-y-2 text-sm">
+              <div className="text-cyan-400 font-bold text-sm md:text-base mb-2">Local System Storage</div>
+              <div className="space-y-2 text-xs md:text-sm">
                 <div className="flex justify-between text-white/70">
                   <span>/system</span><span>32 GB</span>
                 </div>
@@ -6223,53 +6314,33 @@ function DrivesApp({ openIframeWindow }: { openIframeWindow?: (url: string, titl
 
 function MissionApp() {
   return (
-    <div className="h-full bg-black flex flex-col font-mono">
-      <div className="flex items-center gap-2 p-3 border-b border-cyan-500/30 bg-cyan-500/5">
-        <FileText className="w-4 h-4 text-cyan-400" />
-        <span className="text-cyan-400 text-sm">Mission.txt</span>
-      </div>
-      <div className="flex-1 overflow-auto p-4 text-sm leading-relaxed">
-        <pre className="text-green-400 whitespace-pre-wrap">
-{`// AETHEX MANIFESTO
-// Last Updated: 2025
-
-> "We are not building for the Metaverse.
-   We ARE the Metaverse."
-
-====================================
-THE VISION
-====================================
-
-AeThex is an Operating System for the 
-Metaverse. We are building the tools,
-protocols, and people that will power
-the next generation of digital reality.
-
-====================================
-THE TRINITY
-====================================
-
-AXIOM   - The foundational principles
-CODEX   - The certification system  
-AEGIS   - The security layer
-
-====================================
-THE MISSION
-====================================
-
-To transform talent into certified
-Metaverse Architects through rigorous
-training, real projects, and a network
-of like-minded builders.
-
-====================================
-JOIN THE FOUNDRY
-====================================
-
-Apply at: aethex.studio
-
-// END OF FILE`}
-        </pre>
+    <div className="min-h-full bg-gradient-to-br from-yellow-500 to-orange-500 p-3 md:p-6 flex items-center justify-center">
+      <div className="text-center max-w-2xl">
+        <motion.div
+          initial={{ scale: 0 }}
+          animate={{ scale: 1 }}
+          className="w-16 h-16 md:w-24 md:h-24 mx-auto mb-4 md:mb-6 bg-black rounded-full flex items-center justify-center"
+        >
+          <Target className="w-8 h-8 md:w-12 md:h-12 text-yellow-400" />
+        </motion.div>
+        <h1 className="text-2xl md:text-4xl font-display text-black uppercase tracking-wider mb-3 md:mb-4">THE MISSION</h1>
+        <p className="text-base md:text-lg text-black/80 mb-4 md:mb-6 leading-relaxed px-2 md:px-0">
+          Build the <strong>neutral identity layer</strong> for the next generation of digital creators.
+        </p>
+        <p className="text-sm md:text-base text-black/70 mb-4 md:mb-6 px-4 md:px-0">
+          No platform lock-in. No 30% cuts. Just architects, their work, and their audience.
+        </p>
+        <div className="flex flex-wrap gap-2 md:gap-4 justify-center text-black/60 text-xs md:text-sm">
+          <span className="flex items-center gap-1">
+            <Check className="w-3 h-3 md:w-4 md:h-4" /> Cross-Platform Identity
+          </span>
+          <span className="flex items-center gap-1">
+            <Check className="w-3 h-3 md:w-4 md:h-4" /> Direct-to-Consumer
+          </span>
+          <span className="flex items-center gap-1">
+            <Check className="w-3 h-3 md:w-4 md:h-4" /> Open Protocol
+          </span>
+        </div>
       </div>
     </div>
   );
@@ -6287,12 +6358,12 @@ function LeaderboardApp() {
 
   if (isLoading) {
     return (
-      <div className="h-full bg-slate-950 flex flex-col">
-        <div className="flex items-center gap-2 p-4 border-b border-white/10">
+      <div className="min-h-full bg-slate-950 flex flex-col">
+        <div className="flex items-center gap-2 p-3 md:p-4 border-b border-white/10">
           <Trophy className="w-5 h-5 text-yellow-400" />
-          <Skeleton className="h-6 w-32" />
+          <Skeleton className="h-5 md:h-6 w-28 md:w-32" />
         </div>
-        <div className="flex-1 overflow-auto p-4 space-y-2">
+        <div className="flex-1 overflow-auto p-3 md:p-4 space-y-2">
           {[1,2,3,4,5].map(i => (
             <div key={i} className="flex items-center gap-4 p-3 rounded-lg bg-white/5 border border-white/10">
               <Skeleton className="w-8 h-8 rounded" />
@@ -6310,12 +6381,12 @@ function LeaderboardApp() {
   }
 
   return (
-    <div className="h-full bg-slate-950 flex flex-col">
-      <div className="flex items-center gap-2 p-4 border-b border-white/10">
+    <div className="min-h-full bg-slate-950 flex flex-col">
+      <div className="flex items-center gap-2 p-3 md:p-4 border-b border-white/10">
         <Trophy className="w-5 h-5 text-yellow-400" />
-        <h2 className="text-lg font-display text-white uppercase tracking-wider">Leaderboard</h2>
+        <h2 className="text-base md:text-lg font-display text-white uppercase tracking-wider">Leaderboard</h2>
       </div>
-      <div className="flex-1 overflow-auto p-4">
+      <div className="flex-1 overflow-auto p-3 md:p-4">
         {architects?.map((architect: any, i: number) => {
           const medal = i === 0 ? '🥇' : i === 1 ? '🥈' : i === 2 ? '🥉' : null;
           return (
@@ -6324,20 +6395,20 @@ function LeaderboardApp() {
               initial={{ opacity: 0, x: -20 }}
               animate={{ opacity: 1, x: 0 }}
               transition={{ delay: i * 0.05 }}
-              className={`flex items-center gap-4 p-3 rounded-lg mb-2 ${i < 3 ? 'bg-gradient-to-r from-yellow-500/10 to-transparent border border-yellow-500/20' : 'bg-white/5 border border-white/10'}`}
+              className={`flex items-center gap-3 md:gap-4 p-2.5 md:p-3 rounded-lg mb-2 ${i < 3 ? 'bg-gradient-to-r from-yellow-500/10 to-transparent border border-yellow-500/20' : 'bg-white/5 border border-white/10'}`}
             >
-              <div className="w-8 text-center font-mono text-lg">
+              <div className="w-6 md:w-8 text-center font-mono text-base md:text-lg shrink-0">
                 {medal || <span className="text-white/40">{i + 1}</span>}
               </div>
-              <div className="w-10 h-10 rounded-full bg-cyan-500/20 flex items-center justify-center">
-                <User className="w-5 h-5 text-cyan-400" />
+              <div className="w-8 h-8 md:w-10 md:h-10 rounded-full bg-cyan-500/20 flex items-center justify-center shrink-0">
+                <User className="w-4 h-4 md:w-5 md:h-5 text-cyan-400" />
               </div>
-              <div className="flex-1">
-                <div className="text-white font-mono">{architect.username || 'Anonymous'}</div>
+              <div className="flex-1 min-w-0">
+                <div className="text-white font-mono text-sm md:text-base truncate">{architect.username || 'Anonymous'}</div>
                 <div className="text-white/50 text-xs">Level {architect.level}</div>
               </div>
-              <div className="text-right">
-                <div className="text-cyan-400 font-mono font-bold">{architect.xp || 0}</div>
+              <div className="text-right shrink-0">
+                <div className="text-cyan-400 font-mono font-bold text-sm md:text-base">{architect.xp || 0}</div>
                 <div className="text-white/40 text-xs">XP</div>
               </div>
             </motion.div>
@@ -6395,11 +6466,11 @@ function CalculatorApp() {
   const buttons = ['C', '±', '%', '÷', '7', '8', '9', '×', '4', '5', '6', '-', '1', '2', '3', '+', '0', '.', '='];
 
   return (
-    <div className="h-full bg-gradient-to-br from-blue-950 to-slate-950 p-6 flex flex-col">
-      <div className="bg-slate-800/80 backdrop-blur-sm rounded-2xl p-6 mb-6 border border-cyan-500/30 shadow-2xl">
-        <div className="text-right text-5xl font-mono text-cyan-400 min-h-[80px] flex items-center justify-end font-bold tracking-wider">{display}</div>
+    <div className="min-h-full bg-gradient-to-br from-blue-950 to-slate-950 p-3 md:p-6 flex flex-col">
+      <div className="bg-slate-800/80 backdrop-blur-sm rounded-2xl p-4 md:p-6 mb-4 md:mb-6 border border-cyan-500/30 shadow-2xl">
+        <div className="text-right text-3xl md:text-5xl font-mono text-cyan-400 min-h-[60px] md:min-h-[80px] flex items-center justify-end font-bold tracking-wider break-all">{display}</div>
       </div>
-      <div className="grid grid-cols-4 gap-4 flex-1">
+      <div className="grid grid-cols-4 gap-2 md:gap-4 flex-1">
         {buttons.map(btn => (
           <button
             key={btn}
@@ -6411,7 +6482,7 @@ function CalculatorApp() {
               else if (btn === '%') setDisplay(String(parseFloat(display) / 100));
               else handleNumber(btn);
             }}
-            className={`rounded-2xl font-mono text-2xl font-bold transition-all active:scale-95 shadow-lg ${
+            className={`rounded-xl md:rounded-2xl font-mono text-lg md:text-2xl font-bold transition-all active:scale-95 shadow-lg ${
               btn === '0' ? 'col-span-2' : ''
             } ${
               ['+', '-', '×', '÷', '='].includes(btn) 
@@ -6439,22 +6510,43 @@ function NotesApp() {
     localStorage.setItem('aethex-notes', notes);
   }, [notes]);
 
+  const wordCount = notes.trim().split(/\s+/).filter(w => w).length;
+  const charCount = notes.length;
+
+  const handleClear = () => {
+    if (confirm('Clear all notes?')) {
+      setNotes('');
+    }
+  };
+
   return (
-    <div className="h-full bg-gradient-to-br from-amber-50 to-yellow-100 flex flex-col">
-      <div className="flex items-center gap-2 p-4 bg-amber-200/50 border-b border-amber-300">
-        <StickyNote className="w-6 h-6 text-amber-700" />
-        <span className="text-amber-900 font-semibold text-base">notes.txt</span>
+    <div className="min-h-full bg-gradient-to-br from-amber-50 to-yellow-100 flex flex-col">
+      <div className="flex items-center gap-2 p-3 md:p-4 bg-amber-200/50 border-b border-amber-300">
+        <StickyNote className="w-5 h-5 md:w-6 md:h-6 text-amber-700" />
+        <span className="text-amber-900 font-semibold text-sm md:text-base">notes.txt</span>
+        <button
+          onClick={handleClear}
+          className="ml-auto px-2 py-1 text-xs bg-amber-300 hover:bg-amber-400 text-amber-900 rounded transition-colors"
+        >
+          Clear
+        </button>
       </div>
       <textarea
         value={notes}
         onChange={(e) => setNotes(e.target.value)}
-        className="flex-1 bg-transparent p-6 text-gray-900 text-base resize-none outline-none leading-relaxed"
+        className="flex-1 bg-transparent p-4 md:p-6 text-gray-900 text-sm md:text-base resize-none outline-none leading-relaxed"
         placeholder="Type your notes here..."
         style={{ fontFamily: 'system-ui' }}
       />
-      <div className="px-6 py-3 bg-amber-200/50 border-t border-amber-300 text-amber-700 text-sm flex items-center gap-2">
-        <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
-        Auto-saved locally
+      <div className="px-4 md:px-6 py-2 md:py-3 bg-amber-200/50 border-t border-amber-300 text-amber-700 text-xs md:text-sm flex items-center gap-3">
+        <div className="flex items-center gap-2">
+          <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
+          <span>Auto-saved</span>
+        </div>
+        <div className="ml-auto flex items-center gap-3 text-[10px] md:text-xs">
+          <span>{wordCount} words</span>
+          <span>{charCount} chars</span>
+        </div>
       </div>
     </div>
   );
@@ -6464,6 +6556,15 @@ function SystemMonitorApp() {
   const [cpu, setCpu] = useState(45);
   const [ram, setRam] = useState(62);
   const [network, setNetwork] = useState(78);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const handleRefresh = () => {
+    setIsRefreshing(true);
+    setCpu(Math.floor(Math.random() * 40) + 30);
+    setRam(Math.floor(Math.random() * 40) + 40);
+    setNetwork(Math.floor(Math.random() * 30) + 60);
+    setTimeout(() => setIsRefreshing(false), 800);
+  };
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -6497,21 +6598,28 @@ function SystemMonitorApp() {
   );
 
   return (
-    <div className="h-full bg-slate-950 p-4">
-      <div className="flex items-center gap-2 mb-6">
+    <div className="min-h-full bg-slate-950 p-3 md:p-4 overflow-auto">
+      <div className="flex items-center gap-2 mb-4 md:mb-6">
         <Cpu className="w-5 h-5 text-cyan-400" />
-        <h2 className="text-lg font-display text-white uppercase tracking-wider">System Monitor</h2>
+        <h2 className="text-base md:text-lg font-display text-white uppercase tracking-wider">System Monitor</h2>
+        <button
+          onClick={handleRefresh}
+          disabled={isRefreshing}
+          className="ml-auto p-1.5 hover:bg-white/10 rounded transition-colors disabled:opacity-50"
+        >
+          <RefreshCw className={`w-4 h-4 text-cyan-400 ${isRefreshing ? 'animate-spin' : ''}`} />
+        </button>
       </div>
       
-      <div className="flex justify-around mb-6">
+      <div className="flex flex-wrap justify-center md:justify-around gap-4 md:gap-0 mb-4 md:mb-6">
         <Gauge label="CPU" value={cpu} color="#22d3ee" />
         <Gauge label="RAM" value={ram} color="#a855f7" />
         <Gauge label="NET" value={network} color="#22c55e" />
       </div>
 
       <div className="space-y-3">
-        <div className="bg-white/5 rounded-lg p-3">
-          <div className="flex justify-between text-sm mb-2">
+        <div className="bg-white/5 rounded-lg p-2.5 md:p-3">
+          <div className="flex justify-between text-xs md:text-sm mb-2">
             <span className="text-white/60">Aegis Shield</span>
             <span className="text-green-400">ACTIVE</span>
           </div>
@@ -6519,8 +6627,8 @@ function SystemMonitorApp() {
             <div className="h-full bg-gradient-to-r from-green-500 to-cyan-500 w-full" />
           </div>
         </div>
-        <div className="bg-white/5 rounded-lg p-3">
-          <div className="flex justify-between text-sm mb-2">
+        <div className="bg-white/5 rounded-lg p-2.5 md:p-3">
+          <div className="flex justify-between text-xs md:text-sm mb-2">
             <span className="text-white/60">Network Nodes</span>
             <span className="text-cyan-400">24 Connected</span>
           </div>
@@ -6562,15 +6670,15 @@ function WebcamApp() {
   };
 
   return (
-    <div className="h-full bg-black flex flex-col">
-      <div className="flex items-center justify-between p-3 bg-slate-900 border-b border-red-500/30">
+    <div className="min-h-full bg-black flex flex-col">
+      <div className="flex items-center justify-between p-2.5 md:p-3 bg-slate-900 border-b border-red-500/30">
         <div className="flex items-center gap-2">
-          <Eye className="w-5 h-5 text-red-500" />
-          <span className="text-red-400 font-mono text-sm">AEGIS SURVEILLANCE</span>
+          <Eye className="w-4 h-4 md:w-5 md:h-5 text-red-500" />
+          <span className="text-red-400 font-mono text-xs md:text-sm">AEGIS SURVEILLANCE</span>
         </div>
-        <div className="flex items-center gap-2 text-red-400 text-xs">
+        <div className="flex items-center gap-1.5 md:gap-2 text-red-400 text-xs">
           <div className="w-2 h-2 bg-red-500 rounded-full animate-pulse" />
-          MONITORING
+          <span className="hidden sm:inline">MONITORING</span>
         </div>
       </div>
       
@@ -6612,9 +6720,9 @@ function WebcamApp() {
       </div>
       
       {hasPermission && (
-        <div className="p-3 bg-slate-900 border-t border-red-500/30 flex justify-center">
-          <button onClick={runScan} disabled={isScanning} className="px-4 py-2 bg-red-500/20 hover:bg-red-500/30 text-red-400 rounded border border-red-500/50 transition-colors text-sm flex items-center gap-2 disabled:opacity-50">
-            <Shield className="w-4 h-4" />
+        <div className="p-2.5 md:p-3 bg-slate-900 border-t border-red-500/30 flex justify-center">
+          <button onClick={runScan} disabled={isScanning} className="px-3 md:px-4 py-2 bg-red-500/20 hover:bg-red-500/30 text-red-400 rounded border border-red-500/50 transition-colors text-xs md:text-sm flex items-center gap-2 disabled:opacity-50">
+            <Shield className="w-3 h-3 md:w-4 md:h-4" />
             {isScanning ? 'Scanning...' : 'Run Biometric Scan'}
           </button>
         </div>
diff --git a/deploy-to-phone.ps1 b/deploy-to-phone.ps1
new file mode 100644
index 0000000..e984093
--- /dev/null
+++ b/deploy-to-phone.ps1
@@ -0,0 +1,52 @@
+# AeThex OS Mobile App Deployment Script
+# Deploys the app directly to your Samsung phone
+
+$adbPath = "$env:LOCALAPPDATA\Android\Sdk\platform-tools\adb.exe"
+$apkPath = "c:\Users\PCOEM\AeThexOS\AeThex-OS\android\app\build\outputs\apk\debug\app-debug.apk"
+
+Write-Host "🚀 AeThex OS Mobile Deployment" -ForegroundColor Cyan
+Write-Host "================================" -ForegroundColor Cyan
+Write-Host ""
+
+# Check if phone is connected
+Write-Host "📱 Checking for connected devices..."
+& $adbPath devices
+
+Write-Host ""
+Write-Host "📦 Building APK..."
+cd "c:\Users\PCOEM\AeThexOS\AeThex-OS\android"
+
+# Set Java home if needed
+$jdkPath = Get-ChildItem "C:\Program Files\Android\Android Studio\jre" -ErrorAction SilentlyContinue | Select-Object -First 1
+if ($jdkPath) {
+    $env:JAVA_HOME = $jdkPath.FullName
+    Write-Host "✓ Java found at: $env:JAVA_HOME"
+}
+
+# Build with gradlew
+Write-Host "⏳ This may take 2-5 minutes..."
+& ".\gradlew.bat" assembleDebug 2>&1 | Tee-Object -FilePath "build.log"
+
+if ($LASTEXITCODE -eq 0) {
+    Write-Host ""
+    Write-Host "✓ APK built successfully!" -ForegroundColor Green
+    Write-Host ""
+    Write-Host "📲 Installing on your phone..."
+    & $adbPath install -r $apkPath
+    
+    if ($LASTEXITCODE -eq 0) {
+        Write-Host ""
+        Write-Host "✓ App installed successfully!" -ForegroundColor Green
+        Write-Host ""
+        Write-Host "🎉 Launching AeThex OS..."
+        & $adbPath shell am start -n "com.aethex.os/com.aethex.os.MainActivity"
+        Write-Host ""
+        Write-Host "✓ App launched on your phone!" -ForegroundColor Green
+    } else {
+        Write-Host "❌ Installation failed" -ForegroundColor Red
+    }
+} else {
+    Write-Host ""
+    Write-Host "❌ Build failed. Check build.log for details" -ForegroundColor Red
+    Get-Content build.log -Tail 50
+}
diff --git a/docs/ISO_VERIFICATION.md b/docs/ISO_VERIFICATION.md
new file mode 100644
index 0000000..841a979
--- /dev/null
+++ b/docs/ISO_VERIFICATION.md
@@ -0,0 +1,48 @@
+# AeThex OS ISO Verification
+
+Use this guide to verify that a built ISO is real, intact, and contains the expected boot assets.
+
+## Quick Verify (Recommended)
+
+```bash
+./script/verify-iso.sh -i aethex-linux-build/AeThex-Linux-amd64.iso
+```
+
+What it checks:
+- File exists + size
+- SHA256 checksum (if `.sha256` or `.sha256.txt` file exists)
+- Key boot files inside the ISO
+
+## Enforce a Specific Checksum
+
+```bash
+./script/verify-iso.sh -i AeThex-OS-Full-amd64.iso -s <expected_sha256>
+```
+
+## Deep Verify (Mounted Contents)
+
+Mount the ISO to confirm file layout directly (requires sudo/root):
+
+```bash
+./script/verify-iso.sh -i AeThex-OS-Full-amd64.iso --mount
+```
+
+## Expected Success Output
+
+You should see:
+- A calculated SHA256
+- `SHA256 matches ...` if a checksum is provided or discovered
+- `[✓] Kernel`, `[✓] Initrd`, `[✓] SquashFS`, `[✓] GRUB config`, `[✓] ISOLINUX config`
+- Final line: `ISO verification complete.`
+
+## Troubleshooting
+
+- **Missing files:** Rebuild the ISO and check `script/build-linux-iso.sh` or `script/build-linux-iso-full.sh`.
+- **SHA mismatch:** Re-download the ISO artifact or copy the correct `.sha256` file next to the ISO.
+- **No inspection tool:** Install `xorriso` (preferred) or `isoinfo` and re-run.
+
+## Related Docs
+
+- `LINUX_QUICKSTART.md`
+- `ISO_BUILD_FIXED.md`
+- `docs/FLASH_USB.md`
diff --git a/package-lock.json b/package-lock.json
index bf88a69..cfdadab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -64,7 +64,6 @@
         "@tanstack/react-query": "^5.60.5",
         "@types/bcrypt": "^6.0.0",
         "bcrypt": "^6.0.0",
-        "bufferutil": "4.1.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
@@ -127,6 +126,7 @@
         "concurrently": "^9.2.1",
         "drizzle-kit": "^0.31.4",
         "esbuild": "^0.25.0",
+        "playwright-chromium": "^1.57.0",
         "postcss": "^8.5.6",
         "tailwindcss": "^4.1.14",
         "tsx": "^4.20.5",
@@ -7644,6 +7644,36 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/playwright-chromium": {
+      "version": "1.57.0",
+      "resolved": "https://registry.npmjs.org/playwright-chromium/-/playwright-chromium-1.57.0.tgz",
+      "integrity": "sha512-GCVVTbmIDrZuBxWYoQ70rehRXMb3Q7ccENe63a+rGTWwypeVAgh/DD5o5QQ898oer5pdIv3vGINUlEkHtOZQEw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.57.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.57.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.57.0.tgz",
+      "integrity": "sha512-agTcKlMw/mjBWOnD6kFZttAAGHgi/Nw0CZ2o6JqWSbMlI219lAFLZZCyqByTsvVAJq5XA5H8cA6PrvBRpBWEuQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/plist": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/plist/-/plist-3.1.0.tgz",
diff --git a/package.json b/package.json
index ba84b09..a07d9b9 100644
--- a/package.json
+++ b/package.json
@@ -137,6 +137,7 @@
     "concurrently": "^9.2.1",
     "drizzle-kit": "^0.31.4",
     "esbuild": "^0.25.0",
+    "playwright-chromium": "^1.57.0",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.14",
     "tsx": "^4.20.5",
diff --git a/script/build-linux-iso-full.sh b/script/build-linux-iso-full.sh
index 803cc3f..e6fc3d8 100644
--- a/script/build-linux-iso-full.sh
+++ b/script/build-linux-iso-full.sh
@@ -35,13 +35,13 @@ done
 
 echo ""
 echo "┌─────────────────────────────────────────────────────────────┐"
-echo "│ LAYER 1: Base OS (Ubuntu 24.04 LTS)                        │"
+echo "│ LAYER 1: Base OS (Ubuntu 22.04 LTS) - HP Compatible        │"
 echo "└─────────────────────────────────────────────────────────────┘"
 echo ""
 
-echo "[+] Bootstrapping Ubuntu 24.04 base system..."
+echo "[+] Bootstrapping Ubuntu 22.04 base system (older kernel 5.15)..."
 echo "    (debootstrap takes ~10-15 minutes...)"
-debootstrap --arch=amd64 --variant=minbase noble "$ROOTFS_DIR" http://archive.ubuntu.com/ubuntu/ 2>&1 | tail -20
+debootstrap --arch=amd64 --variant=minbase jammy "$ROOTFS_DIR" http://archive.ubuntu.com/ubuntu/ 2>&1 | tail -20
 
 echo "[+] Configuring base system..."
 echo "aethex-os" > "$ROOTFS_DIR/etc/hostname"
@@ -62,18 +62,19 @@ chroot "$ROOTFS_DIR" bash -c '
   export DEBIAN_FRONTEND=noninteractive
   
   # Add universe repository
-  echo "deb http://archive.ubuntu.com/ubuntu noble main restricted universe multiverse" > /etc/apt/sources.list
-  echo "deb http://archive.ubuntu.com/ubuntu noble-updates main restricted universe multiverse" >> /etc/apt/sources.list
-  echo "deb http://archive.ubuntu.com/ubuntu noble-security main restricted universe multiverse" >> /etc/apt/sources.list
+  echo "deb http://archive.ubuntu.com/ubuntu jammy main restricted universe multiverse" > /etc/apt/sources.list
+  echo "deb http://archive.ubuntu.com/ubuntu jammy-updates main restricted universe multiverse" >> /etc/apt/sources.list
+  echo "deb http://archive.ubuntu.com/ubuntu jammy-security main restricted universe multiverse" >> /etc/apt/sources.list
   
   apt-get update
   apt-get install -y \
     linux-image-generic linux-headers-generic \
+    casper \
     grub-pc-bin grub-efi-amd64-bin grub-common xorriso \
     systemd-sysv dbus \
     network-manager wpasupplicant \
     sudo curl wget git ca-certificates gnupg \
-    pipewire-audio wireplumber \
+    pipewire wireplumber \
     xorg xserver-xorg-video-all \
     xfce4 xfce4-goodies lightdm \
     firefox thunar xfce4-terminal \
@@ -149,7 +150,7 @@ chroot "$ROOTFS_DIR" bash -c '
   curl -fsSL https://download.docker.com/linux/ubuntu/gpg | gpg --dearmor -o /etc/apt/keyrings/docker.gpg
   chmod a+r /etc/apt/keyrings/docker.gpg
   
-  echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu noble stable" > /etc/apt/sources.list.d/docker.list
+  echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu jammy stable" > /etc/apt/sources.list.d/docker.list
   
   apt-get update
   apt-get install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
@@ -319,6 +320,14 @@ echo "│ ISO Packaging                                               │"
 echo "└─────────────────────────────────────────────────────────────┘"
 echo ""
 
+echo "[+] Regenerating initramfs with casper..."
+chroot "$ROOTFS_DIR" bash -c '
+  export DEBIAN_FRONTEND=noninteractive
+  KERNEL_VERSION=$(ls /boot/vmlinuz-* | sed "s|/boot/vmlinuz-||" | head -n 1)
+  echo "    Rebuilding initramfs for kernel $KERNEL_VERSION with casper..."
+  update-initramfs -u -k "$KERNEL_VERSION"
+' 2>&1 | tail -10
+
 echo "[+] Extracting kernel and initrd..."
 KERNEL="$(ls -1 $ROOTFS_DIR/boot/vmlinuz-* 2>/dev/null | head -n 1)"
 INITRD="$(ls -1 $ROOTFS_DIR/boot/initrd.img-* 2>/dev/null | head -n 1)"
@@ -334,6 +343,13 @@ cp "$INITRD" "$ISO_DIR/casper/initrd.img"
 echo "[✓] Kernel: $(basename "$KERNEL")"
 echo "[✓] Initrd: $(basename "$INITRD")"
 
+echo "[+] Verifying casper in initrd..."
+if lsinitramfs "$ISO_DIR/casper/initrd.img" | grep -q "scripts/casper"; then
+  echo "[✓] Casper scripts found in initrd"
+else
+  echo "[!] WARNING: Casper scripts NOT found in initrd!"
+fi
+
 # Unmount chroot filesystems
 echo "[+] Unmounting chroot..."
 umount -lf "$ROOTFS_DIR/dev/pts" 2>/dev/null || true
@@ -354,7 +370,12 @@ DEFAULT linux
 LABEL linux
   MENU LABEL AeThex OS - Full Stack
   KERNEL /casper/vmlinuz
-  APPEND initrd=/casper/initrd.img boot=casper quiet splash
+  APPEND initrd=/casper/initrd.img boot=casper quiet splash ---
+
+LABEL safe
+  MENU LABEL AeThex OS - Safe Mode (No ACPI)
+  KERNEL /casper/vmlinuz
+  APPEND initrd=/casper/initrd.img boot=casper acpi=off noapic nomodeset ---
 EOF
 
 cp /usr/lib/syslinux/isolinux.bin "$ISO_DIR/isolinux/" 2>/dev/null || \
@@ -368,12 +389,17 @@ set timeout=10
 set default=0
 
 menuentry "AeThex OS - Full Stack" {
-  linux /casper/vmlinuz boot=casper quiet splash
+  linux /casper/vmlinuz boot=casper quiet splash ---
   initrd /casper/initrd.img
 }
 
-menuentry "AeThex OS - Safe Mode" {
-  linux /casper/vmlinuz boot=casper nomodeset
+menuentry "AeThex OS - Safe Mode (No ACPI)" {
+  linux /casper/vmlinuz boot=casper acpi=off noapic nomodeset ---
+  initrd /casper/initrd.img
+}
+
+menuentry "AeThex OS - Debug Mode" {
+  linux /casper/vmlinuz boot=casper debug ignore_loglevel earlyprintk=vga ---
   initrd /casper/initrd.img
 }
 EOF
@@ -408,9 +434,10 @@ echo "┃  AeThex OS - Full Stack Edition                           ┃"
 echo "┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛"
 echo ""
 echo "ARCHITECTURE:"
-echo "  ├── Base OS: Ubuntu 24.04 LTS (5-year support)"
+echo "  ├── Base OS: Ubuntu 22.04 LTS (kernel 5.15 - better hardware compat)"
 echo "  ├── Runtime: Windows (Wine 9.0 + DXVK)"
 echo "  ├── Runtime: Linux Dev (Docker + VSCode + Node + Python + Rust)"
+echo "  ├── Live Boot: Casper (full live USB support)"
 echo "  └── Shell: Mode switching + file associations"
 echo ""
 echo "INSTALLED RUNTIMES:"
diff --git a/script/build-linux-iso.sh b/script/build-linux-iso.sh
index 4b3c777..a68a997 100644
--- a/script/build-linux-iso.sh
+++ b/script/build-linux-iso.sh
@@ -2,10 +2,12 @@
 set -e
 
 # AeThex Linux ISO Builder - Containerized Edition
-# Creates a bootable ISO using Ubuntu base image (no debootstrap/chroot needed)
+# Creates a bootable ISO using debootstrap + chroot
 
 WORK_DIR="${1:-.}"
 BUILD_DIR="$WORK_DIR/aethex-linux-build"
+ROOTFS_DIR="$BUILD_DIR/rootfs"
+ISO_DIR="$BUILD_DIR/iso"
 ISO_NAME="AeThex-Linux-amd64.iso"
 
 echo "[*] AeThex ISO Builder - Containerized Edition"
@@ -13,31 +15,40 @@ echo "[*] Build directory: $BUILD_DIR"
 echo "[*] This build method works in Docker without privileged mode"
 
 # Clean and prepare
-rm -rf "$BUILD_DIR"
-mkdir -p "$BUILD_DIR"/{iso,rootfs}
+if [ -d "$BUILD_DIR" ]; then
+  sudo rm -rf "$BUILD_DIR" 2>/dev/null || {
+    find "$BUILD_DIR" -type f -exec chmod 644 {} \; 2>/dev/null || true
+    find "$BUILD_DIR" -type d -exec chmod 755 {} \; 2>/dev/null || true
+    rm -rf "$BUILD_DIR"
+  }
+fi
+mkdir -p "$ROOTFS_DIR" "$ISO_DIR" "$ISO_DIR"/casper "$ISO_DIR"/isolinux "$ISO_DIR"/boot/grub
 
 # Check dependencies
 echo "[*] Checking dependencies..."
-for cmd in xorriso genisoimage mksquashfs; do
-  if ! command -v "$cmd" &> /dev/null; then
-    echo "[!] Missing: $cmd - installing..."
-    apt-get update -qq
-    apt-get install -y -qq "$cmd" 2>&1 | tail -5
-  fi
-done
+apt-get update -qq
+apt-get install -y -qq \
+  debootstrap squashfs-tools xorriso grub-common grub-pc-bin grub-efi-amd64-bin \
+  syslinux-common isolinux mtools dosfstools wget ca-certificates 2>&1 | tail -10
 
-echo "[+] Downloading Ubuntu Mini ISO base..."
-# Use Ubuntu mini.iso as base (much smaller, pre-built)
-if [ ! -f "$BUILD_DIR/ubuntu-mini.iso" ]; then
-  wget -q --show-progress -O "$BUILD_DIR/ubuntu-mini.iso" \
-    http://archive.ubuntu.com/ubuntu/dists/noble/main/installer-amd64/current/legacy-images/netboot/mini.iso \
-    || echo "[!] Download failed, creating minimal ISO instead"
-fi
+echo "[+] Bootstrapping Ubuntu base (noble)..."
+debootstrap --arch=amd64 noble "$ROOTFS_DIR" http://archive.ubuntu.com/ubuntu/
+cp /etc/resolv.conf "$ROOTFS_DIR/etc/resolv.conf"
+
+cleanup_mounts() {
+  umount -lf "$ROOTFS_DIR/proc" 2>/dev/null || true
+  umount -lf "$ROOTFS_DIR/sys" 2>/dev/null || true
+  umount -lf "$ROOTFS_DIR/dev/pts" 2>/dev/null || true
+  umount -lf "$ROOTFS_DIR/dev" 2>/dev/null || true
+}
+trap cleanup_mounts EXIT
 
 echo "[+] Building AeThex application layer..."
-mount -t proc /proc "$ROOTFS_DIR/proc" || true
-mount -t sysfs /sys "$ROOTFS_DIR/sys" || true
+mkdir -p "$ROOTFS_DIR/proc" "$ROOTFS_DIR/sys" "$ROOTFS_DIR/dev/pts"
+mount -t proc proc "$ROOTFS_DIR/proc" || true
+mount -t sysfs sys "$ROOTFS_DIR/sys" || true
 mount --bind /dev "$ROOTFS_DIR/dev" || true
+mount --bind /dev/pts "$ROOTFS_DIR/dev/pts" || true
 
 echo "[+] Installing Xfce desktop, Firefox, and system tools..."
 echo "    (packages installing, ~15-20 minutes...)"
@@ -53,6 +64,7 @@ chroot "$ROOTFS_DIR" bash -c '
   apt-get install -y \
     linux-image-generic \
     grub-pc-bin grub-efi-amd64-bin grub-common xorriso \
+    casper live-boot live-boot-initramfs-tools \
     xorg xfce4 xfce4-goodies lightdm \
     firefox network-manager \
     sudo curl wget git ca-certificates gnupg \
@@ -61,6 +73,12 @@ chroot "$ROOTFS_DIR" bash -c '
     xfce4-terminal mousepad ristretto \
     dbus-x11
   apt-get clean
+  
+  # Verify kernel was installed
+  if ! ls /boot/vmlinuz-* 2>/dev/null | grep -q .; then
+    echo "ERROR: linux-image-generic failed to install!"
+    exit 1
+  fi
 ' 2>&1 | tail -50
 
 echo "[+] Installing Node.js 20.x from NodeSource..."
@@ -203,27 +221,43 @@ echo "    - Firefox launches in kiosk mode"
 echo "    - Xfce desktop with auto-login"
 echo "    - Ingress-style mobile interface"
 
-echo "[+] Extracting kernel and initrd..."
+echo "[+] Extracting kernel and initrd from rootfs..."
 KERNEL="$(ls -1 $ROOTFS_DIR/boot/vmlinuz-* 2>/dev/null | head -n 1)"
 INITRD="$(ls -1 $ROOTFS_DIR/boot/initrd.img-* 2>/dev/null | head -n 1)"
 
 if [ -z "$KERNEL" ] || [ -z "$INITRD" ]; then
-  echo "[!] Kernel or initrd not found."
+  echo "[!] FATAL: Kernel or initrd not found in $ROOTFS_DIR/boot/"
+  echo "[!] Contents of $ROOTFS_DIR/boot/:"
   ls -la "$ROOTFS_DIR/boot/" || true
-  mkdir -p "$BUILD_DIR"
-  echo "No kernel found in rootfs" > "$BUILD_DIR/README.txt"
   exit 1
 fi
 
-cp "$KERNEL" "$ISO_DIR/casper/vmlinuz"
-cp "$INITRD" "$ISO_DIR/casper/initrd.img"
-echo "[✓] Kernel: $(basename "$KERNEL")"
-echo "[✓] Initrd: $(basename "$INITRD")"
+echo "[+] Copying kernel and initrd to $ISO_DIR/casper/..."
+cp -v "$KERNEL" "$ISO_DIR/casper/vmlinuz" || { echo "[!] Failed to copy kernel"; exit 1; }
+cp -v "$INITRD" "$ISO_DIR/casper/initrd.img" || { echo "[!] Failed to copy initrd"; exit 1; }
+
+# Verify files exist
+if [ ! -f "$ISO_DIR/casper/vmlinuz" ]; then
+  echo "[!] ERROR: vmlinuz not found after copy"
+  ls -la "$ISO_DIR/casper/" || true
+  exit 1
+fi
+if [ ! -f "$ISO_DIR/casper/initrd.img" ]; then
+  echo "[!] ERROR: initrd.img not found after copy"
+  ls -la "$ISO_DIR/casper/" || true
+  exit 1
+fi
+
+echo "[✓] Kernel: $(basename "$KERNEL") ($(du -h "$ISO_DIR/casper/vmlinuz" | cut -f1))"
+echo "[✓] Initrd: $(basename "$INITRD") ($(du -h "$ISO_DIR/casper/initrd.img" | cut -f1))"
+echo "[✓] Initrd -> $ISO_DIR/casper/initrd.img"
+echo "[✓] Files verified in ISO directory"
 
 # Unmount before squashfs
 echo "[+] Unmounting chroot filesystems..."
 umount -lf "$ROOTFS_DIR/proc" 2>/dev/null || true
 umount -lf "$ROOTFS_DIR/sys" 2>/dev/null || true
+umount -lf "$ROOTFS_DIR/dev/pts" 2>/dev/null || true
 umount -lf "$ROOTFS_DIR/dev" 2>/dev/null || true
 
 echo "[+] Creating SquashFS filesystem..."
@@ -237,36 +271,135 @@ else
   exit 1
 fi
 
-echo "[+] Setting up BIOS boot (isolinux)..."
-cat > "$ISO_DIR/isolinux/isolinux.cfg" << 'EOF'
-PROMPT 0
-TIMEOUT 50
-DEFAULT linux
+echo "[+] Final verification before ISO creation..."
+for file in "$ISO_DIR/casper/vmlinuz" "$ISO_DIR/casper/initrd.img" "$ISO_DIR/casper/filesystem.squashfs"; do
+  if [ ! -f "$file" ]; then
+    echo "[!] CRITICAL: Missing $file"
+    echo "[!] ISO directory contents:"
+    find "$ISO_DIR" -type f 2>/dev/null | head -20
+    exit 1
+  fi
+  echo "[✓] $(basename "$file") - $(du -h "$file" | cut -f1)"
+done
+echo "[+] Final verification before ISO creation..."
+for f in "$ISO_DIR/casper/vmlinuz" "$ISO_DIR/casper/initrd.img" "$ISO_DIR/casper/filesystem.squashfs"; do
+  if [ ! -f "$f" ]; then
+    echo "[!] CRITICAL: Missing $f"
+    ls -la "$ISO_DIR/casper/" || true
+    exit 1
+  fi
+  echo "[✓] $(basename "$f") $(du -h "$f" | awk '{print $1}')"
+done
 
-LABEL linux
-  MENU LABEL AeThex OS
+echo "[+] Creating live boot manifest..."
+printf $(du -sx --block-size=1 "$ROOTFS_DIR" | cut -f1) > "$ISO_DIR/casper/filesystem.size"
+cat > "$ISO_DIR/casper/filesystem.manifest" << 'MANIFEST'
+casper
+live-boot
+live-boot-initramfs-tools
+MANIFEST
+
+echo "[+] Setting up BIOS boot (isolinux)..."
+mkdir -p "$ISO_DIR/isolinux"
+cat > "$ISO_DIR/isolinux/isolinux.cfg" << 'EOF'
+DEFAULT vesamenu.c32
+PROMPT 0
+TIMEOUT 100
+
+LABEL live
+  MENU LABEL ^AeThex OS
   KERNEL /casper/vmlinuz
-  APPEND initrd=/casper/initrd.img boot=casper quiet splash
+  APPEND initrd=/casper/initrd.img root=/dev/sr0 ro live-media=/dev/sr0 boot=live config ip=dhcp live-config hostname=aethex
+
+LABEL safe
+  MENU LABEL AeThex OS (^Safe Mode)
+  KERNEL /casper/vmlinuz
+  APPEND initrd=/casper/initrd.img root=/dev/sr0 ro live-media=/dev/sr0 boot=live nomodeset config ip=dhcp live-config hostname=aethex
 EOF
 
-cp /usr/lib/syslinux/isolinux.bin "$ISO_DIR/isolinux/" 2>/dev/null || \
-cp /usr/share/syslinux/isolinux.bin "$ISO_DIR/isolinux/" 2>/dev/null || echo "[!] isolinux.bin missing"
-cp /usr/lib/syslinux/ldlinux.c32 "$ISO_DIR/isolinux/" 2>/dev/null || \
-cp /usr/share/syslinux/ldlinux.c32 "$ISO_DIR/isolinux/" 2>/dev/null || echo "[!] ldlinux.c32 missing"
+# Copy syslinux binaries
+for src in /usr/lib/syslinux/modules/bios /usr/lib/ISOLINUX /usr/share/syslinux; do
+  if [ -f "$src/isolinux.bin" ]; then
+    cp "$src/isolinux.bin" "$ISO_DIR/isolinux/" 2>/dev/null
+    cp "$src/ldlinux.c32" "$ISO_DIR/isolinux/" 2>/dev/null || true
+    cp "$src/vesamenu.c32" "$ISO_DIR/isolinux/" 2>/dev/null || true
+    cp "$src/libcom32.c32" "$ISO_DIR/isolinux/" 2>/dev/null || true
+    cp "$src/libutil.c32" "$ISO_DIR/isolinux/" 2>/dev/null || true
+  fi
+done
 
 echo "[+] Setting up UEFI boot (GRUB)..."
+mkdir -p "$ISO_DIR/boot/grub"
 cat > "$ISO_DIR/boot/grub/grub.cfg" << 'EOF'
 set timeout=10
 set default=0
 
 menuentry "AeThex OS" {
-  linux /casper/vmlinuz boot=casper quiet splash
+  linux /casper/vmlinuz root=/dev/sr0 ro live-media=/dev/sr0 boot=live config ip=dhcp live-config hostname=aethex
+  initrd /casper/initrd.img
+}
+
+menuentry "AeThex OS (safe mode)" {
+  linux /casper/vmlinuz root=/dev/sr0 ro live-media=/dev/sr0 boot=live nomodeset config ip=dhcp live-config hostname=aethex
   initrd /casper/initrd.img
 }
 EOF
 
-echo "[+] Creating hybrid ISO with grub-mkrescue..."
-grub-mkrescue -o "$BUILD_DIR/$ISO_NAME" "$ISO_DIR" --verbose 2>&1 | tail -20
+echo "[+] Verifying ISO structure before xorriso..."
+echo "[*] Checking ISO_DIR contents:"
+ls -lh "$ISO_DIR/" || echo "ISO_DIR missing!"
+echo "[*] Checking casper contents:"
+ls -lh "$ISO_DIR/casper/" || echo "casper dir missing!"
+echo "[*] Checking isolinux contents:"
+ls -lh "$ISO_DIR/isolinux/" || echo "isolinux dir missing!"
+
+if [ ! -f "$ISO_DIR/casper/vmlinuz" ]; then
+  echo "[!] CRITICAL: vmlinuz not in ISO_DIR/casper!"
+  find "$ISO_DIR" -name "vmlinuz*" 2>/dev/null || echo "vmlinuz not found anywhere in ISO_DIR"
+  exit 1
+fi
+
+if [ ! -f "$ISO_DIR/casper/initrd.img" ]; then
+  echo "[!] CRITICAL: initrd.img not in ISO_DIR/casper!"
+  exit 1
+fi
+
+echo "[✓] All casper files verified in place"
+
+echo "[+] Creating EFI boot image..."
+mkdir -p "$ISO_DIR/EFI/boot"
+grub-mkstandalone \
+  --format=x86_64-efi \
+  --output="$ISO_DIR/EFI/boot/bootx64.efi" \
+  --locales="" \
+  --fonts="" \
+  "boot/grub/grub.cfg=$ISO_DIR/boot/grub/grub.cfg" 2>&1 | tail -5
+
+# Create EFI image for ISO
+dd if=/dev/zero of="$ISO_DIR/boot/grub/efi.img" bs=1M count=10 2>/dev/null
+mkfs.vfat "$ISO_DIR/boot/grub/efi.img" >/dev/null 2>&1
+EFI_MOUNT=$(mktemp -d)
+mount -o loop "$ISO_DIR/boot/grub/efi.img" "$EFI_MOUNT"
+mkdir -p "$EFI_MOUNT/EFI/boot"
+cp "$ISO_DIR/EFI/boot/bootx64.efi" "$EFI_MOUNT/EFI/boot/"
+umount "$EFI_MOUNT"
+rmdir "$EFI_MOUNT"
+
+echo "[+] Creating hybrid ISO with xorriso (El Torito boot)..."
+xorriso -as mkisofs \
+  -iso-level 3 \
+  -full-iso9660-filenames \
+  -volid "AeThex-OS" \
+  -eltorito-boot isolinux/isolinux.bin \
+  -eltorito-catalog isolinux/boot.cat \
+  -no-emul-boot -boot-load-size 4 -boot-info-table \
+  -eltorito-alt-boot \
+  -e boot/grub/efi.img \
+  -no-emul-boot \
+  -isohybrid-mbr /usr/lib/ISOLINUX/isohdpfx.bin \
+  -isohybrid-gpt-basdat \
+  -output "$BUILD_DIR/$ISO_NAME" \
+  "$ISO_DIR" 2>&1 | tail -20
 
 echo "[+] Computing SHA256 checksum..."
 if [ -f "$BUILD_DIR/$ISO_NAME" ]; then
diff --git a/script/build.ts b/script/build.ts
index 2e92784..0daf290 100644
--- a/script/build.ts
+++ b/script/build.ts
@@ -35,8 +35,14 @@ const allowlist = [
 async function buildAll() {
   await rm("dist", { recursive: true, force: true });
 
+  const enableSourcemap = process.argv.includes("--sourcemap");
+
   console.log("building client...");
-  await viteBuild();
+  await viteBuild({
+    build: {
+      sourcemap: enableSourcemap,
+    },
+  });
 
   console.log("building server...");
   const pkg = JSON.parse(await readFile("package.json", "utf-8"));
@@ -56,6 +62,7 @@ async function buildAll() {
       "process.env.NODE_ENV": '"production"',
     },
     minify: true,
+    sourcemap: enableSourcemap,
     external: externals,
     logLevel: "info",
     banner: {
diff --git a/script/verify-iso.sh b/script/verify-iso.sh
new file mode 100644
index 0000000..e86e5d7
--- /dev/null
+++ b/script/verify-iso.sh
@@ -0,0 +1,160 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+usage() {
+  cat << 'USAGE'
+Usage: ./script/verify-iso.sh -i <path/to.iso> [options]
+
+Options:
+  -i <path>        Path to ISO file
+  -s <sha256>      Expected SHA256 hash (overrides .sha256 file lookup)
+  --mount          Mount ISO to verify contents (requires sudo/root)
+  -h, --help       Show this help
+
+Examples:
+  ./script/verify-iso.sh -i aethex-linux-build/AeThex-Linux-amd64.iso
+  ./script/verify-iso.sh -i AeThex-OS-Full-amd64.iso -s <sha256>
+  ./script/verify-iso.sh -i AeThex-Linux-amd64.iso --mount
+USAGE
+}
+
+ISO=""
+EXPECTED_SHA=""
+MOUNT_CHECK=0
+
+while [[ $# -gt 0 ]]; do
+  case "$1" in
+    -i)
+      ISO="${2:-}"
+      shift 2
+      ;;
+    -s)
+      EXPECTED_SHA="${2:-}"
+      shift 2
+      ;;
+    --mount)
+      MOUNT_CHECK=1
+      shift
+      ;;
+    -h|--help)
+      usage
+      exit 0
+      ;;
+    *)
+      echo "Unknown arg: $1" >&2
+      usage >&2
+      exit 1
+      ;;
+  esac
+done
+
+if [[ -z "$ISO" ]]; then
+  echo "Missing ISO path." >&2
+  usage >&2
+  exit 1
+fi
+
+if [[ ! -f "$ISO" ]]; then
+  echo "ISO not found: $ISO" >&2
+  exit 1
+fi
+
+ISO_DIR=$(cd "$(dirname "$ISO")" && pwd)
+ISO_BASE=$(basename "$ISO")
+
+printf "\n[+] Verifying ISO: %s\n" "$ISO"
+ls -lh "$ISO"
+
+SHA_CALC=$(sha256sum "$ISO" | awk '{print $1}')
+printf "SHA256 (calculated): %s\n" "$SHA_CALC"
+
+if [[ -n "$EXPECTED_SHA" ]]; then
+  if [[ "$SHA_CALC" == "$EXPECTED_SHA" ]]; then
+    echo "[✓] SHA256 matches provided value."
+  else
+    echo "[!] SHA256 mismatch. Expected: $EXPECTED_SHA" >&2
+    exit 1
+  fi
+else
+  if [[ -f "$ISO_DIR/$ISO_BASE.sha256" ]]; then
+    echo "[+] Found checksum file: $ISO_DIR/$ISO_BASE.sha256"
+    (cd "$ISO_DIR" && sha256sum -c "$ISO_BASE.sha256")
+  elif [[ -f "$ISO_DIR/$ISO_BASE.sha256.txt" ]]; then
+    echo "[+] Found checksum file: $ISO_DIR/$ISO_BASE.sha256.txt"
+    (cd "$ISO_DIR" && sha256sum -c "$ISO_BASE.sha256.txt")
+  else
+    echo "[!] No checksum file found; provide one with -s to enforce." >&2
+  fi
+fi
+
+check_path() {
+  local label="$1"
+  local needle="$2"
+
+  if command -v xorriso >/dev/null 2>&1; then
+    if xorriso -indev "$ISO" -find / -name "$(basename "$needle")" -print 2>/dev/null | grep -q "$needle"; then
+      echo "[✓] $label: $needle"
+    else
+      echo "[!] Missing $label: $needle" >&2
+      return 1
+    fi
+    return 0
+  fi
+
+  if command -v isoinfo >/dev/null 2>&1; then
+    if isoinfo -i "$ISO" -f 2>/dev/null | grep -q "^$needle$"; then
+      echo "[✓] $label: $needle"
+    else
+      echo "[!] Missing $label: $needle" >&2
+      return 1
+    fi
+    return 0
+  fi
+
+  echo "[!] No ISO inspection tool found (xorriso/isoinfo). Skipping: $label" >&2
+  return 0
+}
+
+FAIL=0
+check_path "Kernel" "/casper/vmlinuz" || FAIL=1
+check_path "Initrd" "/casper/initrd.img" || FAIL=1
+check_path "SquashFS" "/casper/filesystem.squashfs" || FAIL=1
+check_path "GRUB config" "/boot/grub/grub.cfg" || FAIL=1
+check_path "ISOLINUX config" "/isolinux/isolinux.cfg" || FAIL=1
+
+if [[ "$MOUNT_CHECK" -eq 1 ]]; then
+  MOUNT_DIR=$(mktemp -d)
+  cleanup() {
+    if mountpoint -q "$MOUNT_DIR"; then
+      sudo umount "$MOUNT_DIR" || true
+    fi
+    rmdir "$MOUNT_DIR" || true
+  }
+  trap cleanup EXIT
+
+  echo "[+] Mounting ISO to $MOUNT_DIR"
+  if [[ $EUID -eq 0 ]]; then
+    mount -o loop "$ISO" "$MOUNT_DIR"
+  else
+    sudo mount -o loop "$ISO" "$MOUNT_DIR"
+  fi
+
+  for path in \
+    "$MOUNT_DIR/boot/grub/grub.cfg" \
+    "$MOUNT_DIR/isolinux/isolinux.cfg" \
+    "$MOUNT_DIR/casper/filesystem.squashfs"; do
+    if [[ -f "$path" ]]; then
+      echo "[✓] Mounted file present: $path"
+    else
+      echo "[!] Missing mounted file: $path" >&2
+      FAIL=1
+    fi
+  done
+fi
+
+if [[ "$FAIL" -eq 1 ]]; then
+  echo "\n[!] ISO verification failed." >&2
+  exit 1
+fi
+
+echo "\n[✓] ISO verification complete."
diff --git a/wget-log b/wget-log
new file mode 100644
index 0000000..f708fb7
--- /dev/null
+++ b/wget-log
@@ -0,0 +1 @@
+2025-12-29 09:54:25 URL:http://archive.ubuntu.com/ubuntu/dists/jammy/InRelease [270087/270087] -> "/home/mrpiglr/aethex-build/aethex-linux-build/rootfs/var/lib/apt/lists/partial/archive.ubuntu.com_ubuntu_dists_jammy_InRelease" [1]
diff --git a/wget-log.1 b/wget-log.1
new file mode 100644
index 0000000..023ca74
--- /dev/null
+++ b/wget-log.1
@@ -0,0 +1 @@
+2025-12-29 09:54:27 URL:http://archive.ubuntu.com/ubuntu/dists/jammy/main/binary-amd64/by-hash/SHA256/37cb57f1554cbfa71c5a29ee9ffee18a9a8c1782bb0568e0874b7ff4ce8f9c11 [1394768/1394768] -> "/home/mrpiglr/aethex-build/aethex-linux-build/rootfs/var/lib/apt/lists/partial/archive.ubuntu.com_ubuntu_dists_jammy_main_binary-amd64_Packages.xz" [1]
diff --git a/wget-log.2 b/wget-log.2
new file mode 100644
index 0000000..bfa5d6f
--- /dev/null
+++ b/wget-log.2
@@ -0,0 +1 @@
+2025-12-30 03:11:32 URL:http://archive.ubuntu.com/ubuntu/dists/jammy/InRelease [270087/270087] -> "/home/mrpiglr/aethex-build/aethex-linux-build/rootfs/var/lib/apt/lists/partial/archive.ubuntu.com_ubuntu_dists_jammy_InRelease" [1]
diff --git a/wget-log.3 b/wget-log.3
new file mode 100644
index 0000000..59ec27b
--- /dev/null
+++ b/wget-log.3
@@ -0,0 +1 @@
+2025-12-30 03:11:34 URL:http://archive.ubuntu.com/ubuntu/dists/jammy/main/binary-amd64/by-hash/SHA256/37cb57f1554cbfa71c5a29ee9ffee18a9a8c1782bb0568e0874b7ff4ce8f9c11 [1394768/1394768] -> "/home/mrpiglr/aethex-build/aethex-linux-build/rootfs/var/lib/apt/lists/partial/archive.ubuntu.com_ubuntu_dists_jammy_main_binary-amd64_Packages.xz" [1]