diff --git a/desktop/local-app/src/App.svelte b/desktop/local-app/src/App.svelte
index f5045791..b0f9ca46 100644
--- a/desktop/local-app/src/App.svelte
+++ b/desktop/local-app/src/App.svelte
@@ -10,7 +10,7 @@
     const Settings = () => import("~/views/Settings.svelte");
     const Server = () => import("~/views/Server.svelte");
 
-    let insideElectron = api.desktop;
+    let insideElectron = api?.desktop;
 </script>
 
 {#if insideElectron}
diff --git a/desktop/local-app/src/lib/Sidebar.svelte b/desktop/local-app/src/lib/Sidebar.svelte
index 5b0f6f3c..9ffa2914 100644
--- a/desktop/local-app/src/lib/Sidebar.svelte
+++ b/desktop/local-app/src/lib/Sidebar.svelte
@@ -25,6 +25,8 @@
         console.log("selected server changed", e);
     });
 
+    $: serverWithSelection = $servers.map((s) => ({ ...s, isSelected: $selectedServer === s._id }))
+
     onMount(async () => {
         await loadServers();
         isDevelopment = await api.isDevelopment();
@@ -33,11 +35,11 @@
 
 <aside class="flex flex-col bg-gray-700 items-center">
     <div class="flex flex-col mt-4 space-y-4 overflow-y-auto pb-4">
-        {#each $servers as server, i}
+        {#each serverWithSelection as server, i}
             <Link to="/server/{server._id}" class="flex flex-col items-center justify-center ">
                 <div
                     class={`w-16 h-16 p-1 rounded-md flex cursor-pointer text-light-50 border-4 border-transparent text-gray-200 hover:text-gray-500`}
-                    class:border-gray-400={$selectedServer === server._id}
+                    class:bg-gray-400={server.isSelected}
                 >
                     <div class={`flex w-full h-full text-center items-center justify-center rounded-md ${getServerColor(i)}`}>
                         {server.name.slice(0,2).toLocaleUpperCase()}