diff --git a/Backend/index.ts b/Backend/index.ts
index dbb3bca..499c238 100644
--- a/Backend/index.ts
+++ b/Backend/index.ts
@@ -31,6 +31,7 @@ app.use('/docs', swaggerUi.serve, swaggerUi.setup(openApiDocument));
 app.all('/api/auth/*splat', toNodeHandler(auth));
 
 app.use(express.json());
+app.use('/sim', express.static('public'));
 app.use('/videos', videosRoutes);
 app.use('/admin', adminRoutes);
 app.use('/devices', devicesRoutes);
diff --git a/Backend/public/mobile-sim.html b/Backend/public/mobile-sim.html
new file mode 100644
index 0000000..76676c8
--- /dev/null
+++ b/Backend/public/mobile-sim.html
@@ -0,0 +1,448 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Mobile Client Simulator</title>
+    <style>
+      :root {
+        --bg: #0f172a;
+        --panel: #111827;
+        --muted: #94a3b8;
+        --text: #e2e8f0;
+        --accent: #14b8a6;
+        --warn: #f59e0b;
+        --danger: #ef4444;
+      }
+
+      body {
+        margin: 0;
+        font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
+        background: radial-gradient(circle at 15% 15%, #1e293b 0%, var(--bg) 45%);
+        color: var(--text);
+      }
+
+      .page {
+        max-width: 1100px;
+        margin: 0 auto;
+        padding: 24px;
+      }
+
+      h1 {
+        margin-top: 0;
+      }
+
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+        gap: 16px;
+      }
+
+      .panel {
+        background: rgba(17, 24, 39, 0.82);
+        border: 1px solid #1f2937;
+        border-radius: 12px;
+        padding: 14px;
+      }
+
+      label,
+      small,
+      p {
+        color: var(--muted);
+      }
+
+      input,
+      select,
+      button,
+      textarea {
+        width: 100%;
+        border-radius: 8px;
+        border: 1px solid #334155;
+        background: #0b1220;
+        color: var(--text);
+        padding: 9px;
+        margin: 6px 0;
+        box-sizing: border-box;
+      }
+
+      button {
+        cursor: pointer;
+        background: #0d9488;
+        border-color: #0f766e;
+        font-weight: 700;
+      }
+
+      button.alt {
+        background: #334155;
+        border-color: #475569;
+      }
+
+      button.warn {
+        background: #b45309;
+        border-color: #92400e;
+      }
+
+      button.danger {
+        background: #b91c1c;
+        border-color: #991b1b;
+      }
+
+      .row {
+        display: flex;
+        gap: 8px;
+      }
+
+      .row > * {
+        flex: 1;
+      }
+
+      pre {
+        background: #020617;
+        color: #cbd5e1;
+        border-radius: 8px;
+        padding: 10px;
+        max-height: 250px;
+        overflow: auto;
+      }
+
+      .online {
+        color: #22c55e;
+      }
+
+      .offline {
+        color: #ef4444;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="page">
+      <h1>Mobile Client Simulator</h1>
+      <p>
+        Use this page like a phone app: register device role, connect socket with bearer device token, and run camera/client
+        actions. You must already be signed in via Better Auth in this browser session.
+      </p>
+
+      <div class="grid">
+        <section class="panel">
+          <h2>Device Bootstrap</h2>
+          <label>Device Name</label>
+          <input id="deviceName" placeholder="e.g. Hallway iPhone" />
+
+          <label>Role</label>
+          <select id="role">
+            <option value="client">client</option>
+            <option value="camera">camera</option>
+          </select>
+
+          <div class="row">
+            <button id="registerBtn">Register Device</button>
+            <button id="loadSavedBtn" class="alt">Load Saved</button>
+          </div>
+
+          <div class="row">
+            <button id="connectBtn">Connect Socket</button>
+            <button id="disconnectBtn" class="alt">Disconnect</button>
+          </div>
+
+          <small id="connectionState" class="offline">Socket disconnected</small>
+          <pre id="deviceState"></pre>
+        </section>
+
+        <section class="panel">
+          <h2>Client Actions</h2>
+          <label>Target Camera Device ID</label>
+          <input id="targetCameraId" placeholder="camera uuid" />
+          <div class="row">
+            <button id="refreshDevicesBtn" class="alt">Refresh Devices</button>
+            <button id="linkBtn" class="alt">Link Camera</button>
+          </div>
+          <button id="requestStreamBtn">Request On-Demand Stream</button>
+          <button id="fetchPlaybackBtn" class="alt">Fetch Playback Token (Latest)</button>
+          <pre id="clientState"></pre>
+        </section>
+
+        <section class="panel">
+          <h2>Camera Actions</h2>
+          <button id="startMotionBtn" class="warn">Start Motion Event</button>
+          <button id="endMotionBtn" class="danger">End Last Motion Event</button>
+          <pre id="cameraState"></pre>
+        </section>
+      </div>
+
+      <section class="panel" style="margin-top:16px">
+        <h2>Live Event Log</h2>
+        <pre id="log"></pre>
+      </section>
+    </div>
+
+    <script src="/socket.io/socket.io.js"></script>
+    <script>
+      const state = {
+        device: null,
+        deviceToken: null,
+        socket: null,
+        lastMotionEventId: null,
+        lastStreamSessionId: null,
+      };
+
+      const $ = (id) => document.getElementById(id);
+
+      const log = (message, payload) => {
+        const ts = new Date().toISOString();
+        const line = `[${ts}] ${message}`;
+        const current = $('log').textContent;
+        $('log').textContent = `${line}${payload ? `\n${JSON.stringify(payload, null, 2)}` : ''}\n\n${current}`;
+      };
+
+      const saveLocal = () => {
+        localStorage.setItem('mobileSimDevice', JSON.stringify({ device: state.device, deviceToken: state.deviceToken }));
+      };
+
+      const render = () => {
+        $('deviceState').textContent = JSON.stringify({ device: state.device, hasToken: Boolean(state.deviceToken) }, null, 2);
+        $('clientState').textContent = JSON.stringify({ lastStreamSessionId: state.lastStreamSessionId }, null, 2);
+        $('cameraState').textContent = JSON.stringify({ lastMotionEventId: state.lastMotionEventId }, null, 2);
+      };
+
+      const authFetch = async (url, options = {}) => {
+        const response = await fetch(url, {
+          credentials: 'include',
+          ...options,
+          headers: {
+            'Content-Type': 'application/json',
+            ...(options.headers || {}),
+          },
+        });
+
+        const payload = await response.json().catch(() => ({}));
+
+        if (!response.ok) {
+          throw new Error(payload.message || response.statusText);
+        }
+
+        return payload;
+      };
+
+      const deviceFetch = async (url, options = {}) => {
+        if (!state.deviceToken) {
+          throw new Error('No device token. Register device first.');
+        }
+
+        return authFetch(url, {
+          ...options,
+          headers: {
+            Authorization: `Bearer ${state.deviceToken}`,
+            ...(options.headers || {}),
+          },
+        });
+      };
+
+      const connectSocket = () => {
+        if (!state.deviceToken) {
+          throw new Error('No device token');
+        }
+
+        if (state.socket) {
+          state.socket.disconnect();
+        }
+
+        state.socket = io({ auth: { token: state.deviceToken } });
+
+        state.socket.on('connect', () => {
+          $('connectionState').textContent = 'Socket connected';
+          $('connectionState').className = 'online';
+          log('socket connected');
+        });
+
+        state.socket.on('disconnect', () => {
+          $('connectionState').textContent = 'Socket disconnected';
+          $('connectionState').className = 'offline';
+          log('socket disconnected');
+        });
+
+        state.socket.on('connected', (payload) => log('connected', payload));
+        state.socket.on('command:status', (payload) => log('command:status', payload));
+        state.socket.on('stream:requested', (payload) => {
+          state.lastStreamSessionId = payload.streamSessionId;
+          render();
+          log('stream:requested', payload);
+        });
+        state.socket.on('stream:started', (payload) => {
+          state.lastStreamSessionId = payload.streamSessionId;
+          render();
+          log('stream:started', payload);
+        });
+        state.socket.on('stream:ended', (payload) => log('stream:ended', payload));
+        state.socket.on('motion:detected', (payload) => log('motion:detected', payload));
+        state.socket.on('motion:ended', (payload) => log('motion:ended', payload));
+
+        // Mobile-camera behavior: accept start_stream commands and acknowledge.
+        state.socket.on('command:received', async (payload) => {
+          log('command:received', payload);
+
+          try {
+            if (payload.commandType === 'start_stream' && payload.payload?.streamSessionId) {
+              await deviceFetch(`/streams/${payload.payload.streamSessionId}/accept`, {
+                method: 'POST',
+                body: JSON.stringify({}),
+              });
+            }
+
+            if (payload.commandType === 'stop_stream' && payload.payload?.streamSessionId) {
+              await deviceFetch(`/streams/${payload.payload.streamSessionId}/end`, {
+                method: 'POST',
+                body: JSON.stringify({ reason: 'completed' }),
+              });
+            }
+
+            state.socket.emit('command:ack', { commandId: payload.commandId, status: 'acknowledged' });
+          } catch (error) {
+            state.socket.emit('command:ack', {
+              commandId: payload.commandId,
+              status: 'rejected',
+              error: error.message,
+            });
+          }
+        });
+      };
+
+      $('registerBtn').addEventListener('click', async () => {
+        try {
+          const role = $('role').value;
+          const name = $('deviceName').value.trim();
+          const payload = await authFetch('/devices/register', {
+            method: 'POST',
+            body: JSON.stringify({
+              role,
+              name: name || undefined,
+              platform: 'web',
+              appVersion: 'sim-1',
+            }),
+          });
+
+          state.device = payload.device;
+          state.deviceToken = payload.deviceToken;
+          saveLocal();
+          render();
+          log('device registered', payload);
+        } catch (error) {
+          log('register failed', { error: error.message });
+        }
+      });
+
+      $('loadSavedBtn').addEventListener('click', () => {
+        const raw = localStorage.getItem('mobileSimDevice');
+        if (!raw) return;
+        const parsed = JSON.parse(raw);
+        state.device = parsed.device;
+        state.deviceToken = parsed.deviceToken;
+        render();
+        log('loaded saved device', parsed);
+      });
+
+      $('connectBtn').addEventListener('click', () => {
+        try {
+          connectSocket();
+        } catch (error) {
+          log('connect failed', { error: error.message });
+        }
+      });
+
+      $('disconnectBtn').addEventListener('click', () => {
+        state.socket?.disconnect();
+      });
+
+      $('refreshDevicesBtn').addEventListener('click', async () => {
+        try {
+          const payload = await authFetch('/devices');
+          log('devices', payload);
+        } catch (error) {
+          log('fetch devices failed', { error: error.message });
+        }
+      });
+
+      $('linkBtn').addEventListener('click', async () => {
+        try {
+          if (!state.device?.id) throw new Error('Register/load a device first');
+          if (state.device.role !== 'client') throw new Error('This simulator device is not a client role');
+
+          const cameraDeviceId = $('targetCameraId').value.trim();
+          if (!cameraDeviceId) throw new Error('Enter target camera device id');
+
+          const payload = await authFetch('/device-links', {
+            method: 'POST',
+            body: JSON.stringify({
+              cameraDeviceId,
+              clientDeviceId: state.device.id,
+            }),
+          });
+
+          log('link created', payload);
+        } catch (error) {
+          log('link failed', { error: error.message });
+        }
+      });
+
+      $('requestStreamBtn').addEventListener('click', async () => {
+        try {
+          const cameraDeviceId = $('targetCameraId').value.trim();
+          if (!cameraDeviceId) throw new Error('Enter target camera device id');
+
+          const payload = await deviceFetch('/streams/request', {
+            method: 'POST',
+            body: JSON.stringify({ cameraDeviceId, reason: 'on_demand' }),
+          });
+
+          state.lastStreamSessionId = payload.streamSession.id;
+          render();
+          log('stream requested', payload);
+        } catch (error) {
+          log('stream request failed', { error: error.message });
+        }
+      });
+
+      $('fetchPlaybackBtn').addEventListener('click', async () => {
+        try {
+          if (!state.lastStreamSessionId) throw new Error('No known stream session');
+
+          const payload = await deviceFetch(`/streams/${state.lastStreamSessionId}/playback-token`);
+          log('playback token', payload);
+        } catch (error) {
+          log('playback token failed', { error: error.message });
+        }
+      });
+
+      $('startMotionBtn').addEventListener('click', async () => {
+        try {
+          const payload = await deviceFetch('/events/motion/start', {
+            method: 'POST',
+            body: JSON.stringify({ title: 'Motion from web simulator', triggeredBy: 'motion' }),
+          });
+
+          state.lastMotionEventId = payload.event.id;
+          render();
+          log('motion started', payload);
+        } catch (error) {
+          log('motion start failed', { error: error.message });
+        }
+      });
+
+      $('endMotionBtn').addEventListener('click', async () => {
+        try {
+          if (!state.lastMotionEventId) throw new Error('No motion event to end');
+
+          const payload = await deviceFetch(`/events/${state.lastMotionEventId}/motion/end`, {
+            method: 'POST',
+            body: JSON.stringify({ status: 'completed' }),
+          });
+
+          log('motion ended', payload);
+        } catch (error) {
+          log('motion end failed', { error: error.message });
+        }
+      });
+
+      render();
+    </script>
+  </body>
+</html>
