diff --git a/Backend/index.ts b/Backend/index.ts
index e085974..62528f2 100644
--- a/Backend/index.ts
+++ b/Backend/index.ts
@@ -31,6 +31,32 @@ const trustedOrigins = process.env.BETTER_AUTH_TRUSTED_ORIGINS
   ? process.env.BETTER_AUTH_TRUSTED_ORIGINS.split(',').map((origin) => origin.trim()).filter(Boolean)
   : [];
 
+const buildMinioConnectOrigin = (): string | null => {
+  const endpoint = process.env.MINIO_ENDPOINT?.trim();
+  if (!endpoint) {
+    return null;
+  }
+
+  if (endpoint.startsWith('http://') || endpoint.startsWith('https://')) {
+    try {
+      return new URL(endpoint).origin;
+    } catch {
+      return null;
+    }
+  }
+
+  const useSSL = (process.env.MINIO_USE_SSL ?? 'false').toLowerCase() === 'true';
+  const port = Number(process.env.MINIO_PORT ?? (useSSL ? 443 : 80));
+  const scheme = useSSL ? 'https' : 'http';
+  const includePort = !(useSSL && port === 443) && !(!useSSL && port === 80);
+
+  return `${scheme}://${endpoint}${includePort ? `:${port}` : ''}`;
+};
+
+const minioConnectOrigin = buildMinioConnectOrigin();
+const connectSrcDirectives = ["'self'", 'cdn.jsdelivr.net', ...(minioConnectOrigin ? [minioConnectOrigin] : [])];
+const mediaSrcDirectives = ["'self'", 'blob:', 'data:', ...(minioConnectOrigin ? [minioConnectOrigin] : [])];
+
 app.get('/', (_req, res) => {
   res.send('API is running');
 });
@@ -55,7 +81,8 @@ app.use(
         "script-src": ["'self'", "'unsafe-inline'", "cdn.jsdelivr.net", "cdn.tailwindcss.com"],
         "style-src": ["'self'", "'unsafe-inline'", "cdn.jsdelivr.net", "fonts.googleapis.com"],
         "font-src": ["'self'", "fonts.gstatic.com"],
-        "connect-src": ["'self'", "cdn.jsdelivr.net"],
+        "connect-src": connectSrcDirectives,
+        "media-src": mediaSrcDirectives,
         "img-src": ["'self'", "data:", "blob:"],
       },
     },
diff --git a/Backend/public/mobile-sim.html b/Backend/public/mobile-sim.html
index 07a1cff..1226772 100644
--- a/Backend/public/mobile-sim.html
+++ b/Backend/public/mobile-sim.html
@@ -208,17 +208,6 @@
 
             <!-- CLIENT DASHBOARD -->
             <section id="screen-home-client" class="hidden space-y-5">
-               <div class="relative overflow-hidden rounded-2xl bg-gray-900 border border-white/5 aspect-video">
-                  <video id="clientStreamVideo" class="absolute inset-0 w-full h-full object-cover hidden" autoplay playsinline></video>
-                  <img id="clientStreamImage" class="absolute inset-0 w-full h-full object-cover hidden" alt="Live stream preview" />
-                  <div id="clientStreamPlaceholder" class="absolute inset-0 flex flex-col items-center justify-center gap-2 text-gray-500">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
-                   </svg>
-                   <p class="text-xs">No active live stream</p>
-                 </div>
-               </div>
-
                <!-- Quick Actions -->
                <div class="flex gap-2 overflow-x-auto pb-1 scrollbar-hide">
                   <button id="linkCameraBtn" class="btn btn-sm btn-outline border-white/10 text-gray-300 gap-2 shrink-0">
@@ -233,7 +222,7 @@
                <!-- Live Feeds Section -->
                <div class="space-y-3">
                   <h3 class="text-xs font-bold text-gray-500 uppercase tracking-wider pl-1">Linked Cameras</h3>
-                  <div id="linkedCamerasList" class="space-y-3">
+                  <div id="linkedCamerasList" class="flex gap-3 overflow-x-auto pb-2 scrollbar-hide">
                      <!-- Populated by JS -->
                      <div class="text-center py-8 bg-gray-900/30 rounded-xl border border-dashed border-gray-800">
                         <p class="text-gray-600 text-xs">No cameras linked yet</p>
@@ -309,5 +298,15 @@
     
     <script src="/socket.io/socket.io.js"></script>
     <script src="/sim/mobile-sim.js" defer></script>
+
+    <div id="recordingModal" class="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 hidden items-center justify-center p-4">
+      <div class="w-full max-w-lg bg-gray-900 border border-white/10 rounded-2xl p-4 space-y-3 shadow-2xl">
+        <div class="flex items-center justify-between">
+          <h3 id="recordingModalTitle" class="text-sm font-semibold text-white">Recording Playback</h3>
+          <button id="recordingModalCloseBtn" class="btn btn-xs btn-ghost text-gray-400">Close</button>
+        </div>
+        <video id="recordingModalVideo" class="w-full rounded-lg bg-black max-h-[60vh]" controls playsinline></video>
+      </div>
+    </div>
   </body>
 </html>
diff --git a/Backend/public/mobile-sim.js b/Backend/public/mobile-sim.js
index d25352d..198c274 100644
--- a/Backend/public/mobile-sim.js
+++ b/Backend/public/mobile-sim.js
@@ -39,6 +39,9 @@ const store = new Store({
   cameraStatus: 'idle', // idle, recording, streaming
   linkedCameras: [],
   recordings: [],
+  motionNotifications: [],
+  activeCameraDeviceId: null,
+  activeStreamSessionId: null,
   activityFeed: [],
   loading: false, // global loading spinner state if needed
 });
@@ -131,7 +134,7 @@ const API = {
   events: {
     startMotion: () => API.request('/events/motion/start', { method: 'POST', body: JSON.stringify({ title: 'Simulated Motion', triggeredBy: 'motion' }) }),
     endMotion: (id) => API.request(`/events/${id}/motion/end`, { method: 'POST', body: JSON.stringify({ status: 'completed' }) }),
-    finalizeRecording: (id, objectKey) => API.request(`/recordings/${id}/finalize`, { method: 'POST', body: JSON.stringify({ objectKey, bucket: 'videos', durationSeconds: 15, sizeBytes: 5000000 }) }),
+    finalizeRecording: (id, payload) => API.request(`/recordings/${id}/finalize`, { method: 'POST', body: JSON.stringify(payload) }),
   },
 
   ops: {
@@ -154,6 +157,10 @@ let remoteStreamWaitTimer = null;
 let frameRelayTimer = null;
 let frameCanvas = null;
 let frameContext = null;
+let activeMediaRecorder = null;
+let activeRecordingChunks = [];
+let activeRecordingStartedAt = null;
+let recordingModalUrl = null;
 const rtcConfig = {
   iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
 };
@@ -269,6 +276,70 @@ const clearClientStream = () => {
   setClientStreamVisibility(false);
 };
 
+const getCameraLabel = (cameraDeviceId) => `Camera ${cameraDeviceId?.substring(0, 6) ?? 'Unknown'}`;
+
+const pushMotionNotification = (cameraDeviceId) => {
+  if (!cameraDeviceId) return;
+
+  const notification = {
+    id: crypto.randomUUID(),
+    cameraDeviceId,
+    message: `${getCameraLabel(cameraDeviceId)} has detected movement`,
+    createdAt: new Date().toISOString(),
+    isRead: false,
+  };
+
+  store.update({
+    motionNotifications: [notification, ...store.get().motionNotifications].slice(0, 50),
+  });
+};
+
+const markMotionNotificationRead = (notificationId) => {
+  store.update({
+    motionNotifications: store
+      .get()
+      .motionNotifications.map((notification) =>
+        notification.id === notificationId ? { ...notification, isRead: true } : notification,
+      ),
+  });
+};
+
+const markAllNotificationsRead = () => {
+  store.update({
+    motionNotifications: store
+      .get()
+      .motionNotifications.map((notification) => (notification.isRead ? notification : { ...notification, isRead: true })),
+  });
+};
+
+const openRecordingModal = (downloadUrl, title) => {
+  const modal = $('recordingModal');
+  const videoEl = $('recordingModalVideo');
+  const titleEl = $('recordingModalTitle');
+
+  if (!modal || !videoEl || !titleEl) return;
+
+  recordingModalUrl = downloadUrl;
+  titleEl.textContent = title || 'Recording Playback';
+  videoEl.src = downloadUrl;
+  modal.classList.remove('hidden');
+  modal.classList.add('flex');
+  void videoEl.play().catch(() => {});
+};
+
+const closeRecordingModal = () => {
+  const modal = $('recordingModal');
+  const videoEl = $('recordingModalVideo');
+  if (!modal || !videoEl) return;
+
+  modal.classList.add('hidden');
+  modal.classList.remove('flex');
+  videoEl.pause();
+  videoEl.removeAttribute('src');
+  videoEl.load();
+  recordingModalUrl = null;
+};
+
 const stopFrameRelay = () => {
   if (frameRelayTimer) {
     clearInterval(frameRelayTimer);
@@ -311,6 +382,82 @@ const startFrameRelay = async (streamSessionId, toDeviceId) => {
   }, 300);
 };
 
+const getPreferredRecordingMimeType = () => {
+  if (typeof MediaRecorder === 'undefined') return '';
+  const preferredTypes = [
+    'video/webm;codecs=vp9',
+    'video/webm;codecs=vp8',
+    'video/webm',
+  ];
+  return preferredTypes.find((type) => MediaRecorder.isTypeSupported(type)) ?? '';
+};
+
+const startLocalRecording = async () => {
+  if (!localCameraStream || typeof MediaRecorder === 'undefined') {
+    addActivity('Recording', 'MediaRecorder unavailable');
+    return false;
+  }
+
+  if (activeMediaRecorder?.state === 'recording') {
+    return true;
+  }
+
+  activeRecordingChunks = [];
+  activeRecordingStartedAt = Date.now();
+
+  try {
+    const mimeType = getPreferredRecordingMimeType();
+    activeMediaRecorder = mimeType ? new MediaRecorder(localCameraStream, { mimeType }) : new MediaRecorder(localCameraStream);
+  } catch (error) {
+    console.error('Failed to create MediaRecorder', error);
+    addActivity('Recording', 'Failed to start recorder');
+    activeMediaRecorder = null;
+    return false;
+  }
+
+  activeMediaRecorder.ondataavailable = (event) => {
+    if (event.data && event.data.size > 0) {
+      activeRecordingChunks.push(event.data);
+    }
+  };
+
+  activeMediaRecorder.start(1000);
+  addActivity('Recording', 'Local recording started');
+  return true;
+};
+
+const stopLocalRecording = async () => {
+  if (!activeMediaRecorder || activeMediaRecorder.state === 'inactive') {
+    return null;
+  }
+
+  return await new Promise((resolve) => {
+    const recorder = activeMediaRecorder;
+    const startedAt = activeRecordingStartedAt ?? Date.now();
+
+    recorder.onstop = () => {
+      const mimeType = recorder.mimeType || 'video/webm';
+      const blob = activeRecordingChunks.length > 0 ? new Blob(activeRecordingChunks, { type: mimeType }) : null;
+      const durationSeconds = Math.max(1, Math.round((Date.now() - startedAt) / 1000));
+
+      activeMediaRecorder = null;
+      activeRecordingChunks = [];
+      activeRecordingStartedAt = null;
+
+      resolve(blob ? { blob, durationSeconds } : null);
+    };
+
+    recorder.onerror = () => {
+      activeMediaRecorder = null;
+      activeRecordingChunks = [];
+      activeRecordingStartedAt = null;
+      resolve(null);
+    };
+
+    recorder.stop();
+  });
+};
+
 const teardownPeerConnection = () => {
   if (peerConnection) {
     peerConnection.onicecandidate = null;
@@ -408,6 +555,73 @@ const startOfferToClient = async (streamSessionId, requesterDeviceId) => {
   });
 };
 
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+const finalizeRecordingForStream = async (streamSessionId, captureResult) => {
+  const currentDevice = store.get().device;
+  if (!currentDevice?.id) {
+    addActivity('Recording', 'No device identity for finalize');
+    return false;
+  }
+
+  for (let attempt = 0; attempt < 8; attempt += 1) {
+    const recs = await API.ops.listRecordings().catch(() => ({ recordings: [] }));
+    const recording = (recs.recordings || []).find((rec) => rec.streamSessionId === streamSessionId && rec.status === 'awaiting_upload');
+
+    if (recording?.id) {
+      try {
+        if (!captureResult?.blob || captureResult.blob.size === 0) {
+          throw new Error('No captured video blob to upload');
+        }
+
+        const uploadMeta = await API.request('/videos/upload-url', {
+          method: 'POST',
+          body: JSON.stringify({
+            fileName: `stream-${streamSessionId}.webm`,
+            deviceId: currentDevice.id,
+            prefix: 'recordings',
+          }),
+        });
+
+        const uploadResponse = await fetch(uploadMeta.uploadUrl, {
+          method: 'PUT',
+          headers: { 'Content-Type': captureResult.blob.type || 'video/webm' },
+          body: captureResult.blob,
+        });
+
+        if (!uploadResponse.ok) {
+          throw new Error(`Upload failed with status ${uploadResponse.status}`);
+        }
+
+        await API.events.finalizeRecording(recording.id, {
+          objectKey: uploadMeta.objectKey,
+          bucket: uploadMeta.bucket,
+          durationSeconds: captureResult.durationSeconds,
+          sizeBytes: captureResult.blob.size,
+        });
+
+        addActivity('Recording', 'Recording uploaded and finalized');
+        return true;
+      } catch (error) {
+        console.error('Recording upload failed, falling back to simulated key', error);
+        const fallbackObjectKey = `sim/${streamSessionId}/${Date.now()}.webm`;
+        await API.events.finalizeRecording(recording.id, {
+          objectKey: fallbackObjectKey,
+          durationSeconds: captureResult?.durationSeconds ?? 15,
+          sizeBytes: captureResult?.blob?.size ?? 5000000,
+        });
+        addActivity('Recording', 'Upload failed; finalized with simulator fallback');
+        return true;
+      }
+    }
+
+    await sleep(350);
+  }
+
+  addActivity('Recording', 'No recording row found to finalize');
+  return false;
+};
+
 const connectSocket = () => {
   const { deviceToken } = store.get();
   if (!deviceToken) return;
@@ -427,7 +641,9 @@ const connectSocket = () => {
   socket.on('disconnect', () => {
     store.update({ socketConnected: false });
     stopFrameRelay();
+    void stopLocalRecording();
     teardownPeerConnection();
+    store.update({ activeCameraDeviceId: null, activeStreamSessionId: null });
   });
 
   // Handle commands (as Camera)
@@ -443,6 +659,7 @@ const connectSocket = () => {
         }
         await API.streams.accept(streamId);
         await API.streams.getPublishCreds(streamId);
+        await startLocalRecording();
         if (payload.sourceDeviceId) {
           await startOfferToClient(streamId, payload.sourceDeviceId);
           await startFrameRelay(streamId, payload.sourceDeviceId);
@@ -450,7 +667,9 @@ const connectSocket = () => {
         addActivity('Stream', 'Accepted & Published');
         // Auto-stop after 15s for simulation
         setTimeout(async () => {
+          const captureResult = await stopLocalRecording();
           await API.streams.end(streamId);
+          await finalizeRecordingForStream(streamId, captureResult);
           stopFrameRelay();
           if (socket && payload.sourceDeviceId) {
             socket.emit('webrtc:signal', {
@@ -460,6 +679,7 @@ const connectSocket = () => {
             });
           }
           teardownPeerConnection();
+          store.update({ activeCameraDeviceId: null, activeStreamSessionId: null });
           addActivity('Stream', 'Ended auto-simulation');
         }, 15000);
       }
@@ -472,14 +692,19 @@ const connectSocket = () => {
 
   // Handle Events (as Client)
   socket.on('motion:detected', (payload) => {
-    addActivity('Motion', `Detected on camera ${payload.deviceId?.split('-')[0]}...`);
+    const cameraDeviceId = payload.cameraDeviceId || payload.deviceId;
+    addActivity('Motion', `${getCameraLabel(cameraDeviceId)} has detected movement`);
     Toast.show('Motion Detected!', 'info');
-    updateNotificationDot(true);
+    pushMotionNotification(cameraDeviceId);
   });
 
   socket.on('stream:started', async (payload) => {
     addActivity('Stream', 'Stream is live, connecting...');
     clearClientStream();
+    store.update({
+      activeCameraDeviceId: payload.cameraDeviceId ?? store.get().activeCameraDeviceId,
+      activeStreamSessionId: payload.streamSessionId ?? null,
+    });
     try {
       await API.streams.getSubscribeCreds(payload.streamSessionId);
       Toast.show('Connected to Stream', 'success');
@@ -511,6 +736,13 @@ const connectSocket = () => {
     setClientStreamVisibility(true);
   });
 
+  socket.on('stream:ended', (payload) => {
+    if (payload?.streamSessionId && payload.streamSessionId === store.get().activeStreamSessionId) {
+      clearClientStream();
+      store.update({ activeCameraDeviceId: null, activeStreamSessionId: null });
+    }
+  });
+
   socket.on('webrtc:signal', async (payload) => {
     const device = store.get().device;
     if (!device || !payload?.streamSessionId || !payload?.signalType || !payload?.fromDeviceId) return;
@@ -553,6 +785,7 @@ const connectSocket = () => {
 
       if (payload.signalType === 'hangup') {
         teardownPeerConnection();
+        store.update({ activeCameraDeviceId: null, activeStreamSessionId: null });
         addActivity('Stream', 'Remote stream ended');
       }
     } catch (error) {
@@ -688,6 +921,7 @@ const Actions = {
     store.update({ session: null, screen: 'auth', device: null, deviceToken: null, socketConnected: false });
     if (socket) socket.disconnect();
     stopFrameRelay();
+    await stopLocalRecording();
     teardownPeerConnection();
     stopCameraPreview();
     localStorage.removeItem('mobileSimDevice');
@@ -728,6 +962,7 @@ const Actions = {
 
   requestStream: async (camId) => {
     try {
+      store.update({ activeCameraDeviceId: camId });
       Toast.show('Requesting Stream...', 'info');
       await API.streams.request(camId);
       // Socket will handle the rest ('stream:started')
@@ -741,11 +976,35 @@ const Actions = {
         Toast.show('Recording URL unavailable', 'error');
         return;
       }
-      window.open(result.downloadUrl, '_blank', 'noopener,noreferrer');
+      const recording = store.get().recordings.find((entry) => entry.id === recordingId);
+      const title = recording ? `${new Date(recording.createdAt).toLocaleString()} recording` : 'Recording Playback';
+      openRecordingModal(result.downloadUrl, title);
     } catch (e) {
       // handled by API wrapper
     }
   },
+
+  closeRecordingModal: () => {
+    closeRecordingModal();
+  },
+
+  openMotionNotificationTarget: async (notificationId, cameraDeviceId) => {
+    markMotionNotificationRead(notificationId);
+    if (!cameraDeviceId) return;
+
+    const recs = await API.ops.listRecordings().catch(() => ({ recordings: [] }));
+    const readyRecording = (recs.recordings || [])
+      .filter((recording) => recording.cameraDeviceId === cameraDeviceId && recording.status === 'ready')
+      .sort((left, right) => new Date(right.createdAt).getTime() - new Date(left.createdAt).getTime())[0];
+
+    if (readyRecording?.id) {
+      await Actions.openRecording(readyRecording.id);
+      return;
+    }
+
+    store.update({ screen: 'home' });
+    await Actions.requestStream(cameraDeviceId);
+  },
 };
 
 // --- 5. Rendering ---
@@ -783,6 +1042,9 @@ const render = (state) => {
 
   // 3. Bottom Nav Visibility & State
   const nav = $('bottomNav');
+  const unreadNotifications = state.motionNotifications.filter((notification) => !notification.isRead).length;
+  updateNotificationDot(unreadNotifications > 0);
+
   if (state.session && state.device) {
     nav.classList.remove('hidden');
     $$('.nav-btn').forEach(btn => {
@@ -820,24 +1082,56 @@ const render = (state) => {
 
   // 5. Client Mode Lists
   if (state.device?.role === 'client' && state.screen === 'home') {
+    if (!state.activeCameraDeviceId && state.linkedCameras.length > 0) {
+      void Actions.requestStream(state.linkedCameras[0].cameraDeviceId);
+    }
+
     const list = $('linkedCamerasList');
     if (state.linkedCameras.length === 0) {
-      list.innerHTML = `<div class="text-center py-8 bg-gray-900/30 rounded-xl border border-dashed border-gray-800"><p class="text-gray-600 text-xs">No cameras linked yet</p></div>`;
+      list.innerHTML = `<div class="min-w-full text-center py-8 bg-gray-900/30 rounded-xl border border-dashed border-gray-800"><p class="text-gray-600 text-xs">No cameras linked yet</p></div>`;
     } else {
       list.innerHTML = state.linkedCameras.map(link => `
-                <div class="flex items-center justify-between p-3 bg-gray-900/60 rounded-xl border border-white/5">
-                    <div class="flex items-center gap-3">
-                        <div class="w-8 h-8 rounded-full bg-blue-900/30 flex items-center justify-center text-blue-500">
-                             <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
-                        </div>
-                        <div>
-                            <p class="text-xs font-bold text-gray-300">Camera ${link.cameraDeviceId.substring(0, 6)}</p>
-                            <p class="text-[10px] text-gray-500">${link.status}</p>
-                        </div>
+                <div class="min-w-[240px] max-w-[240px] bg-gray-900/60 rounded-xl border border-white/5 overflow-hidden">
+                    <div class="relative overflow-hidden bg-black/40 border-b border-white/5 aspect-video">
+                      ${
+                        state.activeCameraDeviceId === link.cameraDeviceId
+                          ? `
+                            <video id="clientStreamVideo" class="absolute inset-0 w-full h-full object-cover hidden" autoplay playsinline></video>
+                            <img id="clientStreamImage" class="absolute inset-0 w-full h-full object-cover hidden" alt="Live stream preview" />
+                            <div id="clientStreamPlaceholder" class="absolute inset-0 flex flex-col items-center justify-center gap-2 text-gray-500">
+                              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                              </svg>
+                              <p class="text-[10px]">${state.activeStreamSessionId ? 'Connecting stream...' : 'Waiting for stream'}</p>
+                            </div>
+                          `
+                          : `
+                            <div class="absolute inset-0 flex flex-col items-center justify-center gap-2 text-gray-500">
+                              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                              </svg>
+                              <p class="text-[10px]">Stand by</p>
+                            </div>
+                          `
+                      }
+                    </div>
+                    <div class="px-3 py-2">
+                      <div>
+                          <p class="text-xs font-bold text-gray-300">${getCameraLabel(link.cameraDeviceId)}</p>
+                          <p class="text-[10px] text-gray-500">${link.status}</p>
+                      </div>
                     </div>
-                    <button class="btn btn-xs btn-primary request-stream-btn" data-camera-device-id="${link.cameraDeviceId}">Live</button>
                 </div>
             `).join('');
+
+      if (state.activeCameraDeviceId && remoteClientStream) {
+        const videoEl = $('clientStreamVideo');
+        if (videoEl && videoEl.srcObject !== remoteClientStream) {
+          videoEl.srcObject = remoteClientStream;
+          setClientStreamVisibility(true);
+          void videoEl.play().catch(() => {});
+        }
+      }
     }
 
     const recList = $('recordingsList');
@@ -858,6 +1152,27 @@ const render = (state) => {
     }
   }
 
+  if (state.screen === 'activity') {
+    const activityFeed = $('activityFeedList');
+    if (state.motionNotifications.length === 0) {
+      activityFeed.innerHTML = `
+        <div class="text-center py-10 opacity-50">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 mx-auto mb-2 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+          </svg>
+          <p class="text-sm text-gray-500">No notifications yet</p>
+        </div>
+      `;
+    } else {
+      activityFeed.innerHTML = state.motionNotifications.map((notification) => `
+        <button class="w-full text-left p-3 rounded-lg border border-white/5 ${notification.isRead ? 'bg-gray-900/30' : 'bg-blue-900/20'} motion-notification-btn" data-notification-id="${notification.id}" data-camera-device-id="${notification.cameraDeviceId}">
+          <p class="text-xs font-medium text-gray-200">${notification.message}</p>
+          <p class="text-[10px] text-gray-500 mt-1">${new Date(notification.createdAt).toLocaleString()}</p>
+        </button>
+      `).join('');
+    }
+  }
+
   // 6. Settings Screen
   if (state.session?.user && state.screen === 'settings') {
     $('profileName').textContent = state.session.user.name;
@@ -902,13 +1217,6 @@ $('loadSavedBtn').addEventListener('click', () => { /* Handle legacy loading if
 $$('#screen-onboarding [data-role]').forEach((btn) => {
   btn.addEventListener('click', () => Actions.selectRole(btn.dataset.role));
 });
-$('linkedCamerasList').addEventListener('click', (event) => {
-  const target = event.target.closest('.request-stream-btn');
-  if (!target) return;
-  const cameraDeviceId = target.dataset.cameraDeviceId;
-  if (!cameraDeviceId) return;
-  Actions.requestStream(cameraDeviceId);
-});
 $('recordingsList').addEventListener('click', (event) => {
   const target = event.target.closest('.download-recording-btn');
   if (!target || target.disabled) return;
@@ -916,12 +1224,22 @@ $('recordingsList').addEventListener('click', (event) => {
   if (!recordingId) return;
   Actions.openRecording(recordingId);
 });
+$('activityFeedList').addEventListener('click', (event) => {
+  const target = event.target.closest('.motion-notification-btn');
+  if (!target) return;
+  const notificationId = target.dataset.notificationId;
+  const cameraDeviceId = target.dataset.cameraDeviceId;
+  if (!notificationId || !cameraDeviceId) return;
+  Actions.openMotionNotificationTarget(notificationId, cameraDeviceId);
+});
 
 // Navbar
 $$('.nav-btn').forEach(btn => {
   btn.addEventListener('click', () => {
+    if (btn.dataset.target === 'activity') {
+      markAllNotificationsRead();
+    }
     store.update({ screen: btn.dataset.target });
-    if (btn.dataset.target === 'activity') updateNotificationDot(false);
   });
 });
 
@@ -941,6 +1259,15 @@ $('refreshClientBtn').addEventListener('click', startPolling);
 
 // Settings
 $('signOutBtn').addEventListener('click', Actions.signOut);
+$('clearActivityBtn').addEventListener('click', () => {
+  store.update({ motionNotifications: [] });
+});
+$('recordingModalCloseBtn').addEventListener('click', Actions.closeRecordingModal);
+$('recordingModal').addEventListener('click', (event) => {
+  if (event.target === $('recordingModal')) {
+    Actions.closeRecordingModal();
+  }
+});
 
 // Init
 store.subscribe(render);
@@ -948,6 +1275,7 @@ init();
 
 window.addEventListener('beforeunload', () => {
   stopFrameRelay();
+  void stopLocalRecording();
   teardownPeerConnection();
   stopCameraPreview();
 });
diff --git a/Backend/routes/recordings.ts b/Backend/routes/recordings.ts
index e3b9d59..d32cab6 100644
--- a/Backend/routes/recordings.ts
+++ b/Backend/routes/recordings.ts
@@ -6,7 +6,7 @@ import { db } from '../db/client';
 import { recordings, streamSessions } from '../db/schema';
 import { requireDeviceAuth } from '../middleware/device-auth';
 import { writeAuditLog } from '../services/audit';
-import { minioBucket, minioClient, minioPresignedExpirySeconds } from '../utils/minio';
+import { ensureMinioBucket, minioBucket, minioClient, minioPresignedExpirySeconds } from '../utils/minio';
 
 const router = Router();
 
@@ -26,6 +26,15 @@ const recordingParamSchema = z.object({
   recordingId: z.string().uuid(),
 });
 
+const isMissingStorageObjectError = (error: unknown): boolean => {
+  if (!error || typeof error !== 'object') {
+    return false;
+  }
+
+  const code = 'code' in error ? String((error as { code?: unknown }).code) : '';
+  return code === 'NoSuchKey' || code === 'NotFound';
+};
+
 router.get('/me/list', requireDeviceAuth, async (req, res) => {
   const parsed = listSchema.safeParse(req.query);
 
@@ -89,12 +98,41 @@ router.post('/:recordingId/finalize', requireDeviceAuth, async (req, res) => {
   }
 
   const now = new Date();
+  const bucket = parsed.data.bucket;
+  const objectKey = parsed.data.objectKey;
+
+  await ensureMinioBucket();
+
+  try {
+    await minioClient.statObject(bucket, objectKey);
+  } catch (error) {
+    if (objectKey.startsWith('sim/')) {
+      const placeholder = Buffer.from(
+        JSON.stringify({
+          message: 'simulated recording placeholder',
+          recordingId: recording.id,
+          streamSessionId: recording.streamSessionId,
+          createdAt: now.toISOString(),
+        }),
+        'utf8',
+      );
+
+      await minioClient.putObject(bucket, objectKey, placeholder, placeholder.byteLength, {
+        'Content-Type': 'application/json',
+      });
+    } else if (isMissingStorageObjectError(error)) {
+      res.status(409).json({ message: 'Recording object does not exist in storage yet' });
+      return;
+    } else {
+      throw error;
+    }
+  }
 
   const [updated] = await db
     .update(recordings)
     .set({
-      objectKey: parsed.data.objectKey,
-      bucket: parsed.data.bucket,
+      objectKey,
+      bucket,
       durationSeconds: parsed.data.durationSeconds,
       sizeBytes: parsed.data.sizeBytes,
       status: 'ready',
@@ -154,6 +192,17 @@ router.get('/:recordingId/download-url', requireDeviceAuth, async (req, res) =>
     return;
   }
 
+  try {
+    await minioClient.statObject(recording.bucket, recording.objectKey);
+  } catch (error) {
+    if (isMissingStorageObjectError(error)) {
+      res.status(409).json({ message: 'Recording file is missing from storage' });
+      return;
+    }
+
+    throw error;
+  }
+
   const downloadUrl = await minioClient.presignedGetObject(
     recording.bucket,
     recording.objectKey,