diff --git a/electron/src/main/index.ts b/electron/src/main/index.ts
index 32cdf11..64a4712 100644
--- a/electron/src/main/index.ts
+++ b/electron/src/main/index.ts
@@ -35,7 +35,9 @@ function createWindow(): void {
     height: 900,
     show: false,
     autoHideMenuBar: true,
+    titleBarStyle: 'hidden',
     ...(process.platform === 'linux' ? { icon } : {}),
+    ...(process.platform !== "darwin" ? { titleBarOverlay: true } : {}),
     webPreferences: {
       preload: join(__dirname, '../preload/index.js'),
       sandbox: false
diff --git a/ui/src/App.svelte b/ui/src/App.svelte
index 8f746b8..62f373a 100644
--- a/ui/src/App.svelte
+++ b/ui/src/App.svelte
@@ -12,8 +12,11 @@
   import { allowRemoteMessaging, connectionStatus, version } from 'api/src/vars'
   import UpdateStatus from './lib/UpdateStatus.svelte'
   import SettingsModal from './SettingsModal.svelte'
-  import { hasAccess } from './lib/util'
+  import { isElectron, hasAccess } from './lib/util'
   import News, { newsVisible } from './News.svelte'
+  import CustomTitleBar from './lib/CustomTitleBar.svelte'
+  import ButtonBar from './lib/ButtonBar.svelte'
+  import Welcome from './Welcome.svelte'
 
   export const ws = new WebSocketClient(`${import.meta.env.VITE_PATH || ''}/ws`)
   axios.defaults.baseURL = import.meta.env.VITE_PATH
@@ -44,7 +47,11 @@
 <UpdateStatus />
 <SettingsModal />
 
-<main class="w-full grid grid-cols-[auto_1fr] gap-2 p-2 overflow-auto h-full">
+{#if isElectron}
+  <CustomTitleBar title="MeshSense" />
+{/if}
+
+<main class="w-full grid grid-cols-[auto_1fr] gap-2 p-2 {isElectron && 'pt-10'} overflow-auto h-full">
   <News />
   <div class="flex flex-col gap-2 content-start h-full overflow-auto">
     {#if $hasAccess}
@@ -61,27 +68,7 @@
     {#if $connectionStatus == 'connected'}
       <Map class={$expandedMap ? 'row-span-full col-span-full' : ''} bind:ol />
     {:else}
-      <div class="grid items-center px-5 m-auto">
-        <div class="text-3xl font-bold text-white">Welcome to MeshSense!</div>
-        <div class="max-w-md mt-5 flex flex-col gap-4">
-          <div>Available bluetooth devices will appear on the left</div>
-          <div>If your device is on the network, enter it's IP address in the Device IP field and click Connect.</div>
-
-          {#if !$hasAccess}
-            <div>If you do not see the option to connect, you can get access by connecting via localhost or by setting your Access and User key.</div>
-          {/if}
-
-          <div>
-            For additional information, take a look at our <a target="_blank" href="https://affirmatech.com/meshsense/faq">FAQ</a> and
-            <a target="_blank" href="https://affirmatech.com/meshsense/bluetooth">Bluetooth Tips</a>
-          </div>
-        </div>
-        <div class="font-normal absolute m-2 top-0 right-0 flex gap-2 items-center">
-          <div class="text-xs text-white/50 pr-2 font-bold">MeshSense {$version}</div>
-          <button class="btn btn-sm h-6 grid place-content-center" on:click={() => newsVisible.set(true)}>📰</button>
-          <button class="btn btn-sm h-6 grid place-content-center" on:click={() => showPage('Settings')}>⚙</button>
-        </div>
-      </div>
+      <Welcome />
     {/if}
     {#if !$expandedMap}
       <Log {ol} />
diff --git a/ui/src/Map.svelte b/ui/src/Map.svelte
index 05979d5..4dfb313 100644
--- a/ui/src/Map.svelte
+++ b/ui/src/Map.svelte
@@ -7,7 +7,7 @@
   export function getSvgUri(name: string) {
     const hexId = parseInt(name).toString(16).padStart(8, '0')
     const colorId = hexId.slice(-6)
-    return 'data:image/svg+xml;utf8,' + encodeURIComponent(generateHexer({ 
+    return 'data:image/svg+xml;utf8,' + encodeURIComponent(generateHexer({
       name,
       borderColor: `#${colorId}`
     }))
@@ -25,13 +25,14 @@
 </script>
 
 <script lang="ts">
-  import { connectionStatus, myNodeNum, version, type NodeInfo } from 'api/src/vars'
+  import { connectionStatus, myNodeNum, type NodeInfo } from 'api/src/vars'
   import { filteredNodes, isInactive, nodeVisibilityMode } from './Nodes.svelte'
   import Card from './lib/Card.svelte'
   import OpenLayersMap from './lib/OpenLayersMap.svelte'
-  import { getCoordinates, getNodeById, getNodeName, getNodeNameById, setPosition } from './lib/util'
+  import { isElectron, getCoordinates, getNodeById, getNodeName, getNodeNameById, setPosition } from './lib/util'
   import { showConfigModal, showPage } from './SettingsModal.svelte'
   import { newsVisible } from './News.svelte'
+  import ButtonBar from './lib/ButtonBar.svelte'
 
   export let ol: OpenLayersMap = undefined
 
@@ -76,20 +77,13 @@
 </script>
 
 <Card title="Map" {...$$restProps}>
-  <h2 slot="title" class="rounded-t flex items-center gap-1">
+  <h2 slot="title" class="rounded-t flex items-center">
     <div class="mr-2">Map</div>
-
-    <div class="grow">
-      <button on:click={() => ($expandedMap = !$expandedMap)} class="btn font-normal text-xs">{$expandedMap ? 'Collapse' : 'Expand'}</button>
+    <div class="flex-1 flex justify-end">
+      {#if !isElectron}
+        <ButtonBar />
+      {/if}
     </div>
-    <div class="text-xs text-white/50 pr-2">MeshSense {$version}</div>
-    <a href="https://affirmatech.com" target="_blank" rel="noopener" class="text-xs text-white/50 pr-2 font-normal">by Affirmatech</a>
-    <a title="Support MeshSense" target="_blank" rel="noopener" class="!text-rose-400 font-bold btn text-sm hover:brightness-110" href="https://purchase.affirmatech.com/?productId=MeshSenseDonation"
-      >♥</a
-    >
-    <button title="What's New?" class="btn btn-sm h-6 grid place-content-center" on:click={() => newsVisible.set(true)}>📰</button>
-    <a title="MeshSense Global Map" target="_blank" rel="noopener" class="font-bold btn text-sm hover:brightness-110" href="https://meshsense.affirmatech.com/">🌎</a>
-    <button title="Settings" class="btn btn-sm h-6 font-normal grid place-content-center" on:click={() => showPage('Settings')}>⚙</button>
   </h2>
   <OpenLayersMap
     bind:this={ol}
diff --git a/ui/src/Welcome.svelte b/ui/src/Welcome.svelte
new file mode 100644
index 0000000..f1f00a0
--- /dev/null
+++ b/ui/src/Welcome.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { hasAccess } from './lib/util'
+  import Card from './lib/Card.svelte'
+  import ButtonBar from './lib/ButtonBar.svelte'
+  import { isElectron } from './lib/util'
+</script>
+
+<Card title="Welcome" {...$$restProps}>
+  <h2 slot="title" class="rounded-t flex items-center">
+    <div class="mr-2">Welcome</div>
+    <div class="flex-1 flex justify-end">
+      {#if !isElectron}
+        <ButtonBar />
+      {/if}
+    </div>
+  </h2>
+
+  <div class="flex items-center justify-center h-full px-5">
+
+    <div class="max-w-md mt-5 flex flex-col gap-4">
+      <div class="text-3xl font-bold text-white">Welcome to MeshSense!</div>
+      <div>Available bluetooth devices will appear on the left</div>
+      <div>If your device is on the network, enter it's IP address in the Device IP field and click Connect.</div>
+
+      {#if !$hasAccess}
+        <div>If you do not see the option to connect, you can get access by connecting via localhost or by setting your Access and User key.</div>
+      {/if}
+
+      <div>
+        For additional information, take a look at our <a target="_blank" href="https://affirmatech.com/meshsense/faq">FAQ</a> and
+        <a target="_blank" href="https://affirmatech.com/meshsense/bluetooth">Bluetooth Tips</a>
+      </div>
+    </div>
+  </div>
+</Card>
diff --git a/ui/src/app.css b/ui/src/app.css
index 5a957be..b553e44 100644
--- a/ui/src/app.css
+++ b/ui/src/app.css
@@ -48,6 +48,11 @@ h2 {
   @apply select-none bg-gradient-to-br from-black to-blue-950 p-1 px-3 font-bold text-white;
 }
 
+.titlebar {
+  @apply fixed flex top-0 left-0 right-0 z-0 select-none justify-center text-center p-2 px-3 font-bold text-white;
+  -webkit-app-region: drag;
+}
+
 .header-t {
   @apply select-none bg-gradient-to-br from-black to-blue-950 p-1 px-3 font-bold text-white rounded-t;
 }
diff --git a/ui/src/lib/ButtonBar.svelte b/ui/src/lib/ButtonBar.svelte
new file mode 100644
index 0000000..faf78b3
--- /dev/null
+++ b/ui/src/lib/ButtonBar.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+import { version } from "api/src/vars"
+import { newsVisible } from "../News.svelte"
+import { showPage } from "../SettingsModal.svelte"
+</script>
+
+<div class="flex items-center gap-1 text-xs" style="-webkit-app-region: no-drag;">
+  <div class="text-white/50 pr-2">MeshSense {$version}</div>
+  <a href="https://affirmatech.com" target="_blank" rel="noopener" class="text-white/50 pr-2 font-normal">by Affirmatech</a>
+  <a title="Support MeshSense" target="_blank" rel="noopener" class="text-rose-400! font-bold btn text-sm hover:brightness-110" href="https://purchase.affirmatech.com/?productId=MeshSenseDonation"
+    >♥</a
+  >
+  <button title="What's New?" class="btn btn-sm h-6 grid place-content-center" onclick={() => newsVisible.set(true)}>📰</button>
+  <a title="MeshSense Global Map" target="_blank" rel="noopener" class="font-bold btn text-sm hover:brightness-110" href="https://meshsense.affirmatech.com/">🌎</a>
+  <button title="Settings" class="btn btn-sm h-6 font-normal grid place-content-center" onclick={() => showPage('Settings')}>⚙</button>
+</div>
\ No newline at end of file
diff --git a/ui/src/lib/CustomTitleBar.svelte b/ui/src/lib/CustomTitleBar.svelte
new file mode 100644
index 0000000..88c0ef6
--- /dev/null
+++ b/ui/src/lib/CustomTitleBar.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+import ButtonBar from "./ButtonBar.svelte"
+import { isElectron } from "./util"
+</script>
+
+<div class="titlebar relative">
+  <div class="w-full text-center">{$$restProps.title}</div>
+  {#if isElectron}
+    <div class="absolute right-0 top-0 h-full flex items-center pr-2">
+      <ButtonBar />
+    </div>
+  {/if}
+</div>
diff --git a/ui/src/lib/util.ts b/ui/src/lib/util.ts
index 37a3d78..38d0824 100644
--- a/ui/src/lib/util.ts
+++ b/ui/src/lib/util.ts
@@ -6,7 +6,7 @@ import axios from 'axios'
 
 export let blockUserKey = writable(false)
 export const userKey = writable(localStorage.getItem('userKey') || '')
-
+export const isElectron = window?.api != null
 export const hasAccess = derived([accessKey, userKey], ([$accessKey, $userKey]) => window.location.hostname == 'localhost' || ($accessKey != '' && $accessKey == $userKey))
 
 let failedUserKeyAttempts = 0