diff --git a/desktop-app/src/common/deviceList.ts b/desktop-app/src/common/deviceList.ts
index 3803023d..6b6d5a47 100644
--- a/desktop-app/src/common/deviceList.ts
+++ b/desktop-app/src/common/deviceList.ts
@@ -298,6 +298,45 @@ export const defaultDevices: Device[] = [
     isTouchCapable: true,
     isMobileCapable: true,
   },
+  {
+    id: '10022',
+    name: 'iPhone 16',
+    width: 393,
+    height: 852,
+    dpr: 3,
+    capabilities: ['touch', 'mobile'],
+    userAgent:
+      'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1',
+    type: 'phone',
+    isTouchCapable: true,
+    isMobileCapable: true,
+  },
+  {
+    id: '10023',
+    name: 'iPhone 16 Plus',
+    width: 430,
+    height: 932,
+    dpr: 3,
+    capabilities: ['touch', 'mobile'],
+    userAgent:
+      'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1',
+    type: 'phone',
+    isTouchCapable: true,
+    isMobileCapable: true,
+  },
+  {
+    id: '10024',
+    name: 'iPhone 16 Pro',
+    width: 393,
+    height: 852,
+    dpr: 3,
+    capabilities: ['touch', 'mobile'],
+    userAgent:
+      'Mozilla/5.0 (iPhone; CPU iPhone OS 18_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.0 Mobile/15E148 Safari/604.1',
+    type: 'phone',
+    isTouchCapable: true,
+    isMobileCapable: true,
+  },
   {
     id: '20001',
     name: 'Nexus 4',
diff --git a/desktop-app/src/main/main.ts b/desktop-app/src/main/main.ts
index 8408dcbe..32ba9774 100644
--- a/desktop-app/src/main/main.ts
+++ b/desktop-app/src/main/main.ts
@@ -141,37 +141,29 @@ const createWindow = async () => {
 
   // Add BROWSER_SYNC_HOST to the allowed Content-Security-Policy origins
   mainWindow.webContents.session.webRequest.onHeadersReceived(
-    async (details, callback) => {
-      if (details.responseHeaders?.['content-security-policy']) {
-        let cspHeader = details.responseHeaders['content-security-policy'][0];
-
-        cspHeader = cspHeader.replace(
-          'default-src',
-          `default-src ${BROWSER_SYNC_HOST}`
-        );
-        cspHeader = cspHeader.replace(
-          'script-src',
-          `script-src ${BROWSER_SYNC_HOST}`
-        );
-        cspHeader = cspHeader.replace(
-          'script-src-elem',
-          `script-src-elem ${BROWSER_SYNC_HOST}`
+    (details, callback) => {
+      const cspKey = 'content-security-policy';
+      // Ensure responseHeaders and cspKey exist
+      if (details.responseHeaders?.[cspKey]) {
+        const cspHeader = details.responseHeaders[cspKey]?.[0] || '';
+        // Define the rules to replace dynamically
+        const replacements: Record<string, string> = {
+          'default-src': `default-src ${BROWSER_SYNC_HOST}`,
+          'script-src': `script-src ${BROWSER_SYNC_HOST}`,
+          'script-src-elem': `script-src-elem ${BROWSER_SYNC_HOST}`,
+          'connect-src': `connect-src ${BROWSER_SYNC_HOST} wss://${BROWSER_SYNC_HOST} ws://${BROWSER_SYNC_HOST}`,
+          'child-src': `child-src ${BROWSER_SYNC_HOST}`,
+          'worker-src': `worker-src ${BROWSER_SYNC_HOST}`,
+        };
+        // Apply replacements dynamically
+        const updatedCSPHeader = Object.entries(replacements).reduce(
+          (header, [key, value]) => (header ? header.replace(key, value) : ''),
+          cspHeader
         );
-        cspHeader = cspHeader.replace(
-          'connect-src',
-          `connect-src ${BROWSER_SYNC_HOST} wss://${BROWSER_SYNC_HOST} ws://${BROWSER_SYNC_HOST}`
-        );
-        cspHeader = cspHeader.replace(
-          'child-src',
-          `child-src ${BROWSER_SYNC_HOST}`
-        );
-        cspHeader = cspHeader.replace(
-          'worker-src',
-          `worker-src ${BROWSER_SYNC_HOST}`
-        ); // Required when/if the browser-sync script is eventually relocated to a web worker
-
-        details.responseHeaders['content-security-policy'][0] = cspHeader;
+        // Update the response headers
+        details.responseHeaders[cspKey][0] = updatedCSPHeader;
       }
+      // Callback with updated headers
       callback({ responseHeaders: details.responseHeaders });
     }
   );