diff --git a/app/src/lib/utilities/device.ts b/app/src/lib/utilities/device.ts
new file mode 100644
index 0000000000..044c8aa8c7
--- /dev/null
+++ b/app/src/lib/utilities/device.ts
@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const deviceWidth = writable<number>()
\ No newline at end of file
diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
index a92387f68c..c51c6a30f8 100644
--- a/app/src/routes/+layout.svelte
+++ b/app/src/routes/+layout.svelte
@@ -15,6 +15,7 @@ import LoadingBar from "$lib/components/loading-bar.svelte"
 import { SvelteQueryDevtools } from "@tanstack/svelte-query-devtools"
 import { PersistQueryClientProvider } from "@tanstack/svelte-query-persist-client"
 import { disablePinchToZoom } from "$lib/utilities/disable-pinch-to-zoom.ts"
+import { deviceWidth } from "$lib/utilities/device.ts";
 
 const { queryClient, localStoragePersister } = createQueryClient()
 if (browser) notifyManager.setScheduler(window.requestAnimationFrame)
@@ -40,6 +41,7 @@ if (browser) notifyManager.setScheduler(window.requestAnimationFrame)
 </svelte:head>
 
 <svelte:window
+  bind:innerWidth={$deviceWidth}
   use:shortcut={{
     trigger: [
       // easily hide tanstack devtools with ctrl + h