diff --git a/desktoputil.js b/desktoputil.js
new file mode 100644
index 0000000..2b02b1b
--- /dev/null
+++ b/desktoputil.js
@@ -0,0 +1,27 @@
+window.desktopUtil = class desktopUtil {
+
+    static async authFetch(url, options = {}) {
+        const token = localStorage.getItem('auth_token');
+        
+        return fetch(url, {
+            ...options,
+            headers: {
+                ...options.headers,
+                'Authorization': `Bearer ${token}`,
+                'X-Client': 'desktop'
+            }
+        });
+    }
+
+    static async removeAuthToken() {
+        localStorage.removeItem('auth_token');
+    }
+
+    static async setAuthToken(token) {
+        localStorage.setItem('auth_token', token);
+    }
+
+    static async getAuthToken() {
+        return localStorage.getItem('auth_token');
+    }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index a176ae7..92d2d53 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,10 @@
     <title>Parchment</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" href="cave/_/icons/logo.png">
+    <link href="http://localhost:10002/_/code/gridjs/min.css" rel="stylesheet"/>
+    <script src="http://localhost:10002/_/code/gridjs/min.js"></script>
+    <link href="http://localhost:10002/_/code/gridstack/min.css" rel="stylesheet"/>
+    <script src="http://localhost:10002/_/code/gridstack/min.js"></script>
     <style>
         body {
             margin: 0;
@@ -34,6 +38,121 @@
             background: var(--main);
         }
     </style>
+    <script>window.config = { UI: 'http://localhost:10002', SERVER: 'https://frm.so' }</script>
+    <script type="module">
+        await import('./desktoputil.js')
+
+        function appendScript(src, isModule = false) {
+            return new Promise((resolve, reject) => {
+                const s = document.createElement('script')
+                s.src = src
+                s.crossOrigin = "anonymous"
+                if (isModule) s.type = 'module'
+                s.onload = resolve
+                s.onerror = reject
+                document.head.appendChild(s)
+            })
+        }
+
+        function appendStylesheet(href, { replaceExisting = false } = {}) {
+            return new Promise((resolve, reject) => {
+                    if (replaceExisting) {
+                    document.querySelector('link[rel="stylesheet"]')?.remove();
+                }
+                const link = document.createElement('link');
+                link.rel = 'stylesheet';
+                link.href = href;
+                link.onload = resolve;
+                link.onerror = reject;
+                document.head.appendChild(link);
+            });
+        }
+
+      try {
+        await appendStylesheet(`${config.UI}/_/code/shared.css`, { replaceExisting: true });
+        await appendScript(window.config.UI + '/_/code/quill.js')
+        await appendScript(window.config.UI + '/47382915/app.js', true)
+      } catch (e) {
+        document.body.innerHTML = `
+          <style>
+            #ptr-screen {
+              position: fixed; inset: 0;
+              display: flex; flex-direction: column;
+              align-items: center; justify-content: center;
+              font-family: sans-serif; text-align: center;
+              padding: 2rem; touch-action: none;
+              transition: transform 0.2s ease;
+              color: var(--text);
+            }
+            #ptr-icon {
+              font-size: 2rem; margin-bottom: 1rem;
+              transition: transform 0.2s ease, opacity 0.2s ease;
+              opacity: 0.4;
+            }
+            #ptr-label {
+              font-size: 0.9rem; opacity: 0.5;
+              margin-top: 0.5rem;
+            }
+            #ptr-indicator {
+              color: var(--text);
+              position: fixed; top: 5vh; left: 0; right: 0;
+              display: flex; align-items: center; justify-content: center;
+              padding-top: env(safe-area-inset-top);
+              height: 0; overflow: hidden;
+              transition: height 0.1s ease;
+              font-size: 0.8rem; opacity: 0.6; gap: 0.4rem;
+            }
+            @keyframes spin { to { transform: rotate(360deg) } }
+            .spinning { animation: spin 0.6s linear infinite }
+          </style>
+          <div id="ptr-indicator">
+            <span id="ptr-arrow">↓</span>
+            <span id="ptr-hint">Pull to retry</span>
+          </div>
+          <div id="ptr-screen">
+            <div id="ptr-icon">⚠️</div>
+            <p style="margin:0;font-size:1.1rem;font-weight:600">No connection</p>
+            <p id="ptr-label">Could not reach the server.<br>Pull down to try again.</p>
+          </div>
+        `
+
+        const THRESHOLD = 90
+        let startY = 0, dragging = false
+
+        document.addEventListener('touchstart', e => {
+          startY = e.touches[0].clientY
+          dragging = true
+        })
+
+        document.addEventListener('touchmove', e => {
+          if (!dragging) return
+          const dy = Math.max(0, e.touches[0].clientY - startY)
+          const pull = Math.min(dy, THRESHOLD * 1.5)
+          const progress = Math.min(pull / THRESHOLD, 1)
+
+          document.getElementById('ptr-screen').style.transform = `translateY(${pull * 0.4}px)`
+          document.getElementById('ptr-indicator').style.height = (pull * 0.6) + 'px'
+          document.getElementById('ptr-arrow').style.transform = `rotate(${progress * 180}deg)`
+          document.getElementById('ptr-hint').textContent = progress >= 1 ? 'Release to retry' : 'Pull to retry'
+          document.getElementById('ptr-icon').style.opacity = 0.4 + progress * 0.6
+        })
+
+        document.addEventListener('touchend', e => {
+          if (!dragging) return
+          dragging = false
+          const dy = e.changedTouches[0].clientY - startY
+          if (dy >= THRESHOLD) {
+            document.getElementById('ptr-arrow').textContent = '↻'
+            document.getElementById('ptr-arrow').classList.add('spinning')
+            document.getElementById('ptr-hint').textContent = 'Retrying…'
+            setTimeout(() => location.reload(), 400)
+          } else {
+            document.getElementById('ptr-screen').style.transform = ''
+            document.getElementById('ptr-indicator').style.height = '0'
+          }
+        })
+      }
+    </script>
 </head>
 <body>
     <div class="draggable"></div>
diff --git a/index.js b/index.js
index 635906e..e9321fa 100644
--- a/index.js
+++ b/index.js
@@ -1,4 +1,9 @@
-import { app, BrowserWindow, globalShortcut } from 'electron';
+import { app, BrowserWindow, globalShortcut, ipcMain, protocol, net } from 'electron';
+import path from 'path'
+import fs from 'fs'
+import { fileURLToPath } from "url";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 const WINDOW_SHORTCUTS = [
     process.platform === "darwin" ? "Command+R" : "Control+R",
@@ -9,6 +14,7 @@ class App {
     devToolsOpened = false;
 
     createWindow({onTop = false}) {
+        
         const win = new BrowserWindow({
             width: 1200,
             height: 800,
@@ -16,6 +22,7 @@ class App {
             show: false,
             titleBarStyle: "customButtonsOnHover",
             webPreferences: {
+                preload: path.join(__dirname, 'preload.js'),
                 contextIsolation: true,
                 nodeIntegration: false,
                 webviewTag: true,
@@ -27,7 +34,22 @@ class App {
             win.setAlwaysOnTop(true, 'screen-saver', 1); // necessary so it doesn't bring you back out of full screen when spawned
         }
 
-        win.loadFile('index.html');
+        protocol.handle('app', (request) => {
+            const url = new URL(request.url);
+            let filePath = path.join(__dirname, url.pathname);
+            
+            // if file doesn't exist, fall back to index.html
+            if(filePath.includes("desktoputil")) {
+                filePath = path.join(__dirname, 'desktoputil.js');
+            }
+            else if (!fs.existsSync(filePath) || fs.statSync(filePath).isDirectory()) {
+                filePath = path.join(__dirname, 'index.html');
+            }
+            
+            return net.fetch(`file://${filePath}`);
+        });
+
+        win.loadURL('app://local/');
 
         win.on("focus", () => {
             win.setVibrancy("appearance-based"); // full colors
@@ -92,10 +114,9 @@ class App {
             }    
         });
     }
+    
 
     constructor() {
-        console.log("command line: ", app.commandLine.getSwitchValue('disable-gpu')); // or check flags
-
         app.on("activate", () => {
             if (BrowserWindow.getAllWindows().length === 0) {
                 this.createWindow({onTop: false});
@@ -110,6 +131,20 @@ class App {
             this.createWindow({onTop: false});
             this.registerShortcuts()
         });
+
+        ipcMain.on('focus-window', () => {
+            const win = BrowserWindow.getAllWindows()[0];
+            win?.show();
+            win?.focus();
+        });
+
+        ipcMain.on('set-badge', (e, count) => {
+            app.setBadgeCount(count);
+        });
+
+        protocol.registerSchemesAsPrivileged([
+            { scheme: 'app', privileges: { standard: true, secure: true, supportFetchAPI: true, corsEnabled: true } }
+        ]);
     }
 }
 
diff --git a/preload.js b/preload.js
new file mode 100644
index 0000000..ce2a64f
--- /dev/null
+++ b/preload.js
@@ -0,0 +1,6 @@
+const { contextBridge, ipcRenderer } = require('electron');
+
+contextBridge.exposeInMainWorld('electron', {
+    focusWindow: () => ipcRenderer.send('focus-window'),
+    setBadge: (count) => ipcRenderer.send('set-badge', count),
+});
\ No newline at end of file