From 81eff5c3201181c4421dc731cb43483c8081bedb Mon Sep 17 00:00:00 2001
From: RFnexus <v6z777@protonmail.com>
Date: Tue, 10 Dec 2024 01:27:19 -0500
Subject: [PATCH] Full Micron support, dark mode

---
 src/frontend/components/App.vue               |  26 +--
 src/frontend/components/about/AboutPage.vue   |  63 ++++---
 .../interfaces/AddInterfacePage.vue           |  62 +++----
 .../components/interfaces/Interface.vue       |  28 +--
 .../components/interfaces/InterfacesPage.vue  |  16 +-
 .../components/messages/AddAudioButton.vue    |   4 +-
 .../messages/ConversationViewer.vue           |  36 ++--
 .../components/messages/MessagesPage.vue      |   2 +-
 .../components/messages/MessagesSidebar.vue   |  53 +++---
 .../components/messages/SendMessageButton.vue |  20 +--
 .../network-visualiser/NetworkVisualiser.vue  |   4 +-
 .../PropagationNodesPage.vue                  |  28 +--
 .../components/settings/SettingsPage.vue      | 161 +++++++++---------
 .../public/assets/js/micron-parser.js         |   2 +-
 src/frontend/public/call.html                 |  26 +--
 15 files changed, 262 insertions(+), 269 deletions(-)

diff --git a/src/frontend/components/App.vue b/src/frontend/components/App.vue
index 70b74ae..a57b8eb 100644
--- a/src/frontend/components/App.vue
+++ b/src/frontend/components/App.vue
@@ -46,7 +46,7 @@
 
             <!-- sidebar -->
             <div class="bg-white flex w-72 min-w-72 flex-col dark:bg-zinc-950">
-                <div class="flex grow flex-col overflow-y-auto border-r border-gray-200 bg-white dark:bg-zinc-950">
+                <div class="flex grow flex-col overflow-y-auto border-r border-gray-200 bg-white dark:border-zinc-900 dark:bg-zinc-950">
 
                     <!-- navigation -->
                     <div class="flex-1">
@@ -134,7 +134,7 @@
                     <div>
 
                         <!-- my identity -->
-                        <div v-if="config" class="bg-white border-t dark:bg-zinc-950">
+                        <div v-if="config" class="bg-white border-t dark:border-zinc-900 dark:bg-zinc-950">
                             <div @click="isShowingMyIdentitySection = !isShowingMyIdentitySection" class="flex text-gray-700 p-2 cursor-pointer">
                                 <div class="my-auto mr-2 dark:text-white">
                                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
@@ -149,7 +149,7 @@
                                     </button>
                                 </div>
                             </div>
-                            <div v-if="isShowingMyIdentitySection" class="divide-y text-gray-900 border-t border-gray-300 dark:text-zinc-200 dark:border-zinc-700">
+                            <div v-if="isShowingMyIdentitySection" class="divide-y text-gray-900 border-t border-gray-300 dark:text-zinc-200 dark:border-zinc-900">
                                 <div class="p-1">
                                     <input 
                                         v-model="displayName" 
@@ -159,11 +159,11 @@
                                                dark:bg-zinc-800 dark:border-zinc-600 dark:text-zinc-200 dark:focus:ring-blue-400 dark:focus:border-blue-400"
                                     >
                                 </div>
-                                <div class="p-1">
+                                <div class="p-1 dark:border-zinc-900">
                                     <div>Identity Hash</div>
                                     <div class="text-sm text-gray-700 dark:text-zinc-400">{{ config.identity_hash }}</div>
                                 </div>
-                                <div class="p-1">
+                                <div class="p-1 dark:border-zinc-900">
                                     <div>LXMF Address</div>
                                     <div class="text-sm text-gray-700 dark:text-zinc-400">{{ config.lxmf_address_hash }}</div>
                                 </div>
@@ -171,7 +171,7 @@
                         </div>
 
                         <!-- auto announce -->
-                        <div v-if="config" class="bg-white border-t dark:bg-zinc-950 dark:border-zinc-700">
+                        <div v-if="config" class="bg-white border-t dark:bg-zinc-950 dark:border-zinc-900">
                             <div @click="isShowingAnnounceSection = !isShowingAnnounceSection" class="flex text-gray-700 p-2 cursor-pointer dark:text-white">
                                 <div class="my-auto mr-2">
                                     <svg 
@@ -201,8 +201,8 @@
                                     </button>
                                 </div>
                             </div>
-                            <div v-if="isShowingAnnounceSection" class="divide-y text-gray-900 border-t border-gray-300 dark:text-zinc-200 dark:border-zinc-700">
-                                <div class="p-1">
+                            <div v-if="isShowingAnnounceSection" class="divide-y text-gray-900 border-t border-gray-300 dark:text-zinc-200 dark:border-zinc-900">
+                                <div class="p-1 dark:border-zinc-900">
                                     <select 
                                         v-model="config.auto_announce_interval_seconds" 
                                         @change="onAnnounceIntervalSecondsChange" 
@@ -227,10 +227,10 @@
                         </div>
 
                         <!-- audio calls -->
-                        <div v-if="config" class="bg-white border-t dark:bg-zinc-950">
+                        <div v-if="config" class="bg-white border-t dark:bg-zinc-950 dark:border-zinc-900">
                             <div @click="isShowingCallsSection = !isShowingCallsSection" class="flex text-gray-700 p-2 cursor-pointer">
                                 <div class="my-auto mr-2">
-                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="dark:text-white w-6 h-6">
                                         <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" />
                                     </svg>
                                 </div>
@@ -247,11 +247,11 @@ dark:bg-zinc-800 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outli
                                     </a>
                                 </div>
                             </div>
-                            <div v-if="isShowingCallsSection" class="divide-y text-gray-900 border-t border-gray-300">
-                                <div class="p-1 flex">
+                            <div v-if="isShowingCallsSection" class="divide-y text-gray-900 border-t border-gray-300 dark:border-zinc-900">
+                                <div class="p-1 flex dark:border-zinc-900 dark:text-white">
                                     <div>
                                         <div>Status</div>
-                                        <div class="text-sm text-gray-700">
+                                        <div class="text-sm text-gray-700 dark:text-white">
                                             <div v-if="activeAudioCalls.length > 0" class="flex space-x-2">
                                                 <span v-if="activeInboundAudioCalls.length > 0">{{ activeInboundAudioCalls.length }} Incoming {{ activeInboundAudioCalls.length === 1 ? 'Call' : 'Calls' }}</span>
                                                 <span v-else>{{ activeOutboundAudioCalls.length }} Outgoing {{ activeOutboundAudioCalls.length === 1 ? 'Call' : 'Calls' }}</span>
diff --git a/src/frontend/components/about/AboutPage.vue b/src/frontend/components/about/AboutPage.vue
index 36e6e62..d12c96d 100644
--- a/src/frontend/components/about/AboutPage.vue
+++ b/src/frontend/components/about/AboutPage.vue
@@ -1,20 +1,25 @@
 <template>
-    <div class="flex flex-col flex-1 overflow-hidden min-w-full sm:min-w-[500px]">
+    <div class="flex flex-col flex-1 overflow-hidden min-w-full sm:min-w-[500px] dark:bg-zinc-950">
         <div class="overflow-y-auto space-y-2 p-2">
 
             <!-- app info -->
-            <div v-if="appInfo" class="bg-white rounded shadow">
-                <div class="flex border-b border-gray-300 text-gray-700 p-2 font-semibold">App Info</div>
-                <div class="divide-y text-gray-900">
+            <div v-if="appInfo" class="bg-white dark:bg-zinc-900 rounded shadow">
+                <div class="flex border-b border-gray-300 dark:border-zinc-700 text-gray-700 dark:text-zinc-200 p-2 font-semibold">App Info</div>
+                <div class="divide-y divide-gray-200 dark:divide-zinc-800 text-gray-900 dark:text-zinc-200">
 
                     <!-- version -->
                     <div class="flex p-1">
                         <div class="mr-auto">
                             <div>Versions</div>
-                            <div class="text-sm text-gray-700">MeshChat v{{ appInfo.version }} • RNS v{{ appInfo.rns_version }} • LXMF v{{ appInfo.lxmf_version }}</div>
+                            <div class="text-sm text-gray-700 dark:text-zinc-400">
+                                MeshChat v{{ appInfo.version }} • RNS v{{ appInfo.rns_version }} • LXMF v{{ appInfo.lxmf_version }}
+                            </div>
                         </div>
                         <div class="hidden sm:block mx-2 my-auto">
-                            <a target="_blank" href="https://github.com/liamcottle/reticulum-meshchat/releases" type="button" class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
+                            <a target="_blank" 
+                                href="https://github.com/liamcottle/reticulum-meshchat/releases" 
+                                type="button" 
+                                class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 dark:bg-zinc-700 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 dark:hover:bg-zinc-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500 dark:focus-visible:outline-zinc-600">
                                 Check for Updates
                             </a>
                         </div>
@@ -24,10 +29,12 @@
                     <div class="flex p-1">
                         <div class="mr-auto">
                             <div>Reticulum Config Path</div>
-                            <div class="text-sm text-gray-700 break-all">{{ appInfo.reticulum_config_path }}</div>
+                            <div class="text-sm text-gray-700 dark:text-zinc-400 break-all">{{ appInfo.reticulum_config_path }}</div>
                         </div>
                         <div v-if="isElectron" class="mx-2 my-auto">
-                            <button @click="showReticulumConfigFile" type="button" class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
+                            <button @click="showReticulumConfigFile" 
+                                type="button" 
+                                class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 dark:bg-zinc-700 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 dark:hover:bg-zinc-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500 dark:focus-visible:outline-zinc-600">
                                 Show in Folder
                             </button>
                         </div>
@@ -37,10 +44,12 @@
                     <div class="flex p-1">
                         <div class="mr-auto">
                             <div>Database Path</div>
-                            <div class="text-sm text-gray-700 break-all">{{ appInfo.database_path }}</div>
+                            <div class="text-sm text-gray-700 dark:text-zinc-400 break-all">{{ appInfo.database_path }}</div>
                         </div>
                         <div v-if="isElectron" class="mx-2 my-auto">
-                            <button @click="showDatabaseFile" type="button" class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
+                            <button @click="showDatabaseFile" 
+                                type="button" 
+                                class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 dark:bg-zinc-700 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 dark:hover:bg-zinc-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500 dark:focus-visible:outline-zinc-600">
                                 Show in Folder
                             </button>
                         </div>
@@ -49,32 +58,32 @@
                     <!-- database file size -->
                     <div class="p-1">
                         <div>Database File Size</div>
-                        <div class="text-sm text-gray-700">{{ formatBytes(appInfo.database_file_size) }}</div>
+                        <div class="text-sm text-gray-700 dark:text-zinc-400">{{ formatBytes(appInfo.database_file_size) }}</div>
                     </div>
 
                 </div>
             </div>
 
             <!-- reticulum status -->
-            <div v-if="appInfo" class="bg-white rounded shadow">
-                <div class="flex border-b border-gray-300 text-gray-700 p-2 font-semibold">Reticulum Status</div>
-                <div class="divide-y text-gray-900">
+            <div v-if="appInfo" class="bg-white dark:bg-zinc-900 rounded shadow">
+                <div class="flex border-b border-gray-300 dark:border-zinc-700 text-gray-700 dark:text-zinc-200 p-2 font-semibold">Reticulum Status</div>
+                <div class="divide-y divide-gray-200 dark:divide-zinc-800 text-gray-900 dark:text-zinc-200">
 
                     <!-- instance mode -->
                     <div class="p-1">
                         <div>Instance Mode</div>
-                        <div class="text-sm text-gray-700">
-                            <span v-if="appInfo.is_connected_to_shared_instance" class="text-orange-600">Connected to Shared Instance</span>
-                            <span v-else class="text-green-600">Running as Standalone Instance</span>
+                        <div class="text-sm text-gray-700 dark:text-zinc-400">
+                            <span v-if="appInfo.is_connected_to_shared_instance" class="text-orange-600 dark:text-orange-400">Connected to Shared Instance</span>
+                            <span v-else class="text-green-600 dark:text-green-400">Running as Standalone Instance</span>
                         </div>
                     </div>
 
                     <!-- transport mode -->
                     <div class="p-1">
                         <div>Transport Mode</div>
-                        <div class="text-sm text-gray-700">
-                            <span v-if="appInfo.is_transport_enabled" class="text-green-600">Transport Enabled</span>
-                            <span v-else class="text-orange-600">Transport Disabled</span>
+                        <div class="text-sm text-gray-700 dark:text-zinc-400">
+                            <span v-if="appInfo.is_transport_enabled" class="text-green-600 dark:text-green-400">Transport Enabled</span>
+                            <span v-else class="text-orange-600 dark:text-orange-400">Transport Disabled</span>
                         </div>
                     </div>
 
@@ -82,24 +91,24 @@
             </div>
 
             <!-- my addresses -->
-            <div v-if="config" class="bg-white rounded shadow">
-                <div class="flex border-b border-gray-300 text-gray-700 p-2 font-semibold">My Addresses</div>
-                <div class="divide-y text-gray-900">
+            <div v-if="config" class="bg-white dark:bg-zinc-900 rounded shadow">
+                <div class="flex border-b border-gray-300 dark:border-zinc-700 text-gray-700 dark:text-zinc-200 p-2 font-semibold">My Addresses</div>
+                <div class="divide-y divide-gray-200 dark:divide-zinc-800 text-gray-900 dark:text-zinc-200">
                     <div class="p-1">
                         <div>Identity Hash</div>
-                        <div class="text-sm text-gray-700">{{ config.identity_hash }}</div>
+                        <div class="text-sm text-gray-700 dark:text-zinc-400">{{ config.identity_hash }}</div>
                     </div>
                     <div class="p-1">
                         <div>LXMF Address</div>
-                        <div class="text-sm text-gray-700">{{ config.lxmf_address_hash }}</div>
+                        <div class="text-sm text-gray-700 dark:text-zinc-400">{{ config.lxmf_address_hash }}</div>
                     </div>
                     <div class="p-1">
                         <div>LXMF Propagation Node Address</div>
-                        <div class="text-sm text-gray-700">{{ config.lxmf_local_propagation_node_address_hash }}</div>
+                        <div class="text-sm text-gray-700 dark:text-zinc-400">{{ config.lxmf_local_propagation_node_address_hash }}</div>
                     </div>
                     <div class="p-1">
                         <div>Audio Call Address</div>
-                        <div class="text-sm text-gray-700">{{ config.audio_call_address_hash }}</div>
+                        <div class="text-sm text-gray-700 dark:text-zinc-400">{{ config.audio_call_address_hash }}</div>
                     </div>
                 </div>
             </div>
diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index cbd1c9e..51afc03 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -10,7 +10,7 @@
                         <div class="text-sm  dark:text-gray-100">These TCP interfaces serve as a quick way to test Reticulum. We suggest running your own as these may not always be available.</div>
                     </div>
                     <div class="my-auto ml-2">
-                        <button @click="updateConfig({'show_suggested_community_interfaces': false})" type="button" class="text-gray-700 bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
+                        <button @click="updateConfig({'show_suggested_community_interfaces': false})" type="button" class="text-gray-700 bg-gray-100 hover:bg-gray-200 p-2 rounded-full dark:bg-zinc-600 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-500">
                             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
                                 <path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
                             </svg>
@@ -47,8 +47,8 @@
             </div>
 
             <!-- add interface form -->
-            <div class="bg-white rounded shadow divide-y divide-gray-200">
-                <div class="p-2 font-bold">
+            <div class="bg-white rounded shadow divide-y divide-gray-200 dark:bg-zinc-950">
+                <div class="p-2 font-bold dark:text-white">
                     <span v-if="isEditingInterface">Edit Interface</span>
                     <span v-else>Add Interface</span>
                 </div>
@@ -56,14 +56,14 @@
 
                     <!-- interface name -->
                     <div>
-                        <label class="block mb-2 text-sm font-medium text-gray-900">Name</label>
-                        <input type="text" :disabled="isEditingInterface" placeholder="New Interface Name" v-model="newInterfaceName" class="border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" :class="[ isEditingInterface ? 'cursor-not-allowed bg-gray-200' : 'bg-gray-50' ]">
+                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Name</label>
+                        <input type="text" :disabled="isEditingInterface" placeholder="New Interface Name" v-model="newInterfaceName" class="border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white" :class="[ isEditingInterface ? 'cursor-not-allowed bg-gray-200' : 'bg-gray-50' ]">
                         <div class="text-xs text-gray-600">Interface names must be unique.</div>
                     </div>
 
                     <!-- interface type -->
                     <div class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900">Type</label>
+                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Type</label>
                         <select v-model="newInterfaceType" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
                             <option disabled selected>--</option>
                             <option value="AutoInterface">AutoInterface</option>
@@ -79,87 +79,87 @@
 
                     <!-- interface target host -->
                     <div v-if="newInterfaceType === 'TCPClientInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900">Target Host</label>
-                        <input type="text" placeholder="example.com" v-model="newInterfaceTargetHost" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900dark:border-zinc-600dark:text-whitedark:focus:ring-blue-600 dark:focus:border-blue-600">
+                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Target Host</label>
+                        <input type="text" placeholder="example.com" v-model="newInterfaceTargetHost" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 bg-zinc-950 dark:focus:border-blue-600 dark:text-zinc-100">
                     </div>
 
                     <!-- interface target port -->
                     <div v-if="newInterfaceType === 'TCPClientInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900">Target Port</label>
-                        <input type="text" placeholder="1234" v-model="newInterfaceTargetPort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900dark:border-zinc-600dark:text-whitedark:focus:ring-blue-600 dark:focus:border-blue-600">
+                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Target Port</label>
+                        <input type="text" placeholder="1234" v-model="newInterfaceTargetPort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                     </div>
 
                     <!-- interface listen ip -->
                     <div v-if="newInterfaceType === 'TCPServerInterface' || newInterfaceType === 'UDPInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900">Listen IP</label>
-                        <input type="text" placeholder="0.0.0.0" v-model="newInterfaceListenIp" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900dark:border-zinc-600dark:text-whitedark:focus:ring-blue-600 dark:focus:border-blue-600">
+                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Listen IP</label>
+                        <input type="text" placeholder="0.0.0.0" v-model="newInterfaceListenIp" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                     </div>
 
                     <!-- interface listen port -->
                     <div v-if="newInterfaceType === 'TCPServerInterface' || newInterfaceType === 'UDPInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900">Listen Port</label>
-                        <input type="text" placeholder="1234" v-model="newInterfaceListenPort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900dark:border-zinc-600dark:text-whitedark:focus:ring-blue-600 dark:focus:border-blue-600">
+                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Listen Port</label>
+                        <input type="text" placeholder="1234" v-model="newInterfaceListenPort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                     </div>
 
                     <!-- interface forward ip -->
                     <div v-if="newInterfaceType === 'UDPInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900">Forward IP</label>
-                        <input type="text" placeholder="255.255.255.255" v-model="newInterfaceForwardIp" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900dark:border-zinc-600dark:text-whitedark:focus:ring-blue-600 dark:focus:border-blue-600">
+                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Forward IP</label>
+                        <input type="text" placeholder="255.255.255.255" v-model="newInterfaceForwardIp" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                     </div>
 
                     <!-- interface listen port -->
                     <div v-if="newInterfaceType === 'UDPInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900">Forward Port</label>
-                        <input type="text" placeholder="1234" v-model="newInterfaceForwardPort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900dark:border-zinc-600dark:text-whitedark:focus:ring-blue-600 dark:focus:border-blue-600">
+                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Forward Port</label>
+                        <input type="text" placeholder="1234" v-model="newInterfaceForwardPort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                     </div>
 
                     <!-- interface port -->
                     <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900">Port</label>
-                        <select v-model="newInterfacePort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900dark:border-zinc-600dark:text-whitedark:focus:ring-blue-600 dark:focus:border-blue-600">
+                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Port</label>
+                        <select v-model="newInterfacePort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                             <option v-for="comport of comports" :value="comport.device">{{ comport.device }} (Product: {{ comport.product ?? '?' }}, Serial: {{ comport.serial ?? '?' }})</option>
                         </select>
                     </div>
 
                     <!-- interface frequency -->
                     <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900">Frequency (Hz)</label>
-                        <input type="number" v-model="newInterfaceFrequency" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900dark:border-zinc-600dark:text-whitedark:focus:ring-blue-600 dark:focus:border-blue-600">
+                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Frequency (Hz)</label>
+                        <input type="number" v-model="newInterfaceFrequency" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                         <div class="text-xs text-gray-600">{{ formatFrequency(newInterfaceFrequency) }}</div>
                     </div>
 
                     <!-- interface bandwidth -->
                     <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900">Bandwidth</label>
-                        <select v-model="newInterfaceBandwidth" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900dark:border-zinc-600dark:text-whitedark:focus:ring-blue-600 dark:focus:border-blue-600">
+                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Bandwidth</label>
+                        <select v-model="newInterfaceBandwidth" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                             <option v-for="bandwidth in RNodeInterfaceDefaults.bandwidths" :value="bandwidth">{{ bandwidth / 1000 }} KHz</option>
                         </select>
                     </div>
 
                     <!-- interface txpower -->
                     <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900">Transmit Power (dBm)</label>
-                        <input v-model="newInterfaceTxpower" type="number" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Transmit Power (dBm)</label>
+                        <input v-model="newInterfaceTxpower" type="number" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
                     </div>
 
                     <!-- interface spreading factor -->
                     <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900">Spreading Factor</label>
-                        <select v-model="newInterfaceSpreadingFactor" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5  dark:bg-zinc-900dark:border-zinc-600dark:text-whitedark:focus:ring-blue-600 dark:focus:border-blue-600">
+                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Spreading Factor</label>
+                        <select v-model="newInterfaceSpreadingFactor" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5  dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                             <option v-for="spreadingfactor in RNodeInterfaceDefaults.spreadingfactors" :value="spreadingfactor">{{ spreadingfactor }}</option>
                         </select>
                     </div>
 
                     <!-- interface coding rate -->
                     <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900">Coding Rate</label>
-                        <select v-model="newInterfaceCodingRate" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900dark:border-zinc-600dark:text-whitedark:focus:ring-blue-600 dark:focus:border-blue-600">
+                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Coding Rate</label>
+                        <select v-model="newInterfaceCodingRate" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                             <option v-for="codingrate in RNodeInterfaceDefaults.codingrates" :value="codingrate">4:{{ codingrate }}</option>
                         </select>
                     </div>
 
                     <!-- add button -->
-                    <button @click="addInterface" type="button" class="bg-green-500 hover:bg-green-400 focus-visible:outline-green-500 my-auto inline-flex items-center gap-x-1 rounded-md p-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:bg-zinc-900dark:border-zinc-600dark:text-whitedark:focus:ring-blue-600 dark:focus:border-blue-600">
+                    <button @click="addInterface" type="button" class="bg-green-500 hover:bg-green-400 focus-visible:outline-green-500 my-auto inline-flex items-center gap-x-1 rounded-md p-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                         <span v-if="isEditingInterface">Save Interface</span>
                         <span v-else>Add Interface</span>
                     </button>
diff --git a/src/frontend/components/interfaces/Interface.vue b/src/frontend/components/interfaces/Interface.vue
index b5311cf..ade4350 100644
--- a/src/frontend/components/interfaces/Interface.vue
+++ b/src/frontend/components/interfaces/Interface.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="border rounded bg-white shadow overflow-hidden">
+    <div class="border rounded bg-white shadow overflow-hidden dark:bg-zinc-800 dark:border-zinc-700">
 
         <!-- IFAC info -->
-        <div v-if="iface._stats?.ifac_signature != null" class="bg-gray-50 p-1 text-sm text-gray-500 space-x-1 border-b">
+        <div v-if="iface._stats?.ifac_signature != null" class="bg-gray-50 p-1 text-sm text-gray-500 space-x-1 border-b dark:bg-zinc-800  dark:border-zinc-700">
             <div class="flex text-sm">
                 <div class="my-auto">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4 text-green-500">
@@ -20,23 +20,23 @@
             <!-- icon -->
             <div class="my-auto mx-2">
 
-                <svg v-if="iface.type === 'AutoInterface'" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="size-6">
+                <svg v-if="iface.type === 'AutoInterface'" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="size-6 dark:text-white">
                     <path d="M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V160h32v56a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68ZM208,208H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48V120l80-80,80,80Z"></path>
                 </svg>
 
-                <svg v-else-if="iface.type === 'RNodeInterface'" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="size-6">
+                <svg v-else-if="iface.type === 'RNodeInterface'" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="size-6 dark:text-white">
                     <path d="M128,88a40,40,0,1,0,40,40A40,40,0,0,0,128,88Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,152Zm73.71,7.14a80,80,0,0,1-14.08,22.2,8,8,0,0,1-11.92-10.67,63.95,63.95,0,0,0,0-85.33,8,8,0,1,1,11.92-10.67,80.08,80.08,0,0,1,14.08,84.47ZM69,103.09a64,64,0,0,0,11.26,67.58,8,8,0,0,1-11.92,10.67,79.93,79.93,0,0,1,0-106.67A8,8,0,1,1,80.29,85.34,63.77,63.77,0,0,0,69,103.09ZM248,128a119.58,119.58,0,0,1-34.29,84,8,8,0,1,1-11.42-11.2,103.9,103.9,0,0,0,0-145.56A8,8,0,1,1,213.71,44,119.58,119.58,0,0,1,248,128ZM53.71,200.78A8,8,0,1,1,42.29,212a119.87,119.87,0,0,1,0-168,8,8,0,1,1,11.42,11.2,103.9,103.9,0,0,0,0,145.56Z"></path>
                 </svg>
 
-                <svg v-else-if="iface.type === 'TCPClientInterface' || iface.type === 'TCPServerInterface' || iface.type === 'UDPInterface'" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="size-6">
+                <svg v-else-if="iface.type === 'TCPClientInterface' || iface.type === 'TCPServerInterface' || iface.type === 'UDPInterface'" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="size-6 dark:text-white">
                     <path d="M128,24h0A104,104,0,1,0,232,128,104.12,104.12,0,0,0,128,24Zm88,104a87.61,87.61,0,0,1-3.33,24H174.16a157.44,157.44,0,0,0,0-48h38.51A87.61,87.61,0,0,1,216,128ZM102,168H154a115.11,115.11,0,0,1-26,45A115.27,115.27,0,0,1,102,168Zm-3.9-16a140.84,140.84,0,0,1,0-48h59.88a140.84,140.84,0,0,1,0,48ZM40,128a87.61,87.61,0,0,1,3.33-24H81.84a157.44,157.44,0,0,0,0,48H43.33A87.61,87.61,0,0,1,40,128ZM154,88H102a115.11,115.11,0,0,1,26-45A115.27,115.27,0,0,1,154,88Zm52.33,0H170.71a135.28,135.28,0,0,0-22.3-45.6A88.29,88.29,0,0,1,206.37,88ZM107.59,42.4A135.28,135.28,0,0,0,85.29,88H49.63A88.29,88.29,0,0,1,107.59,42.4ZM49.63,168H85.29a135.28,135.28,0,0,0,22.3,45.6A88.29,88.29,0,0,1,49.63,168Zm98.78,45.6a135.28,135.28,0,0,0,22.3-45.6h35.66A88.29,88.29,0,0,1,148.41,213.6Z"></path>
                 </svg>
 
-                <svg v-else-if="iface.type === 'SerialInterface'" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="size-6">
+                <svg v-else-if="iface.type === 'SerialInterface'" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="size-6 dark:text-white">
                     <path d="M252.44,121.34l-48-32A8,8,0,0,0,192,96v24H72V72h33a32,32,0,1,0,0-16H72A16,16,0,0,0,56,72v48H8a8,8,0,0,0,0,16H56v48a16,16,0,0,0,16,16h32v8a16,16,0,0,0,16,16h32a16,16,0,0,0,16-16V176a16,16,0,0,0-16-16H120a16,16,0,0,0-16,16v8H72V136H192v24a8,8,0,0,0,12.44,6.66l48-32a8,8,0,0,0,0-13.32ZM136,48a16,16,0,1,1-16,16A16,16,0,0,1,136,48ZM120,176h32v32H120Zm88-30.95V111l25.58,17Z"></path>
                 </svg>
 
-                <svg v-else xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="size-6">
+                <svg v-else xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="size-6 dark:text-white">
                     <path d="M140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180ZM128,72c-22.06,0-40,16.15-40,36v4a8,8,0,0,0,16,0v-4c0-11,10.77-20,24-20s24,9,24,20-10.77,20-24,20a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-.72c18.24-3.35,32-17.9,32-35.28C168,88.15,150.06,72,128,72Zm104,56A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path>
                 </svg>
 
@@ -44,8 +44,8 @@
 
             <!-- interface details -->
             <div>
-                <div class="font-semibold leading-5">{{ iface._name }}</div>
-                <div class="text-sm flex space-x-1">
+                <div class="font-semibold leading-5 dark:text-white">{{ iface._name }}</div>
+                <div class="text-sm flex space-x-1 dark:text-zinc-100">
 
                     <!-- auto interface -->
                     <span v-if="iface.type === 'AutoInterface'">
@@ -89,14 +89,14 @@
             <!-- enable/disable interface button -->
             <div class="my-auto mr-1">
                 <button v-if="isInterfaceEnabled(iface)" @click="disableInterface" type="button" class="cursor-pointer">
-                    <span class="flex text-gray-700 bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
+                    <span class="flex text-gray-700 bg-gray-100 dark:bg-zinc-600 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-500 hover:bg-gray-200 p-2 rounded-full">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9" />
                         </svg>
                     </span>
                 </button>
                 <button v-else @click="enableInterface" type="button" class="cursor-pointer">
-                    <span class="flex text-gray-700 bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
+                    <span class="flex text-gray-700 bg-gray-100 dark:bg-zinc-600 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-500 hover:bg-gray-200 p-2 dark:bg-zinc-600 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-500 rounded-full">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9" />
                         </svg>
@@ -107,7 +107,7 @@
             <!-- edit interface button -->
             <div class="my-auto mr-1">
                 <button @click="editInterface" type="button" class="cursor-pointer">
-                    <span class="flex text-gray-700 bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
+                    <span class="flex text-gray-700 bg-gray-100 hover:bg-gray-200 p-2 dark:bg-zinc-600 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-500 rounded-full ">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
                             <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" />
                         </svg>
@@ -118,7 +118,7 @@
             <!-- delete interface button -->
             <div class="my-auto mr-2">
                 <button @click="deleteInterface" type="button" class="cursor-pointer">
-                    <span class="flex text-gray-700 bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
+                    <span class="flex text-gray-700 bg-gray-100 hover:bg-gray-200 p-2 dark:bg-zinc-600 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-500 rounded-full">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                             <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
                         </svg>
@@ -128,7 +128,7 @@
 
         </div>
 
-        <div class="flex bg-gray-50 p-1 text-sm text-gray-500 space-x-1 border-t">
+        <div class="flex bg-gray-50 p-1 text-sm text-gray-500 space-x-1 border-t dark:bg-zinc-800 dark:text-white dark:border-zinc-700">
 
             <!-- status -->
             <div v-if="iface._stats?.status === true" class="text-sm text-green-500">Connected</div>
diff --git a/src/frontend/components/interfaces/InterfacesPage.vue b/src/frontend/components/interfaces/InterfacesPage.vue
index 61a61ed..8cdd1f9 100644
--- a/src/frontend/components/interfaces/InterfacesPage.vue
+++ b/src/frontend/components/interfaces/InterfacesPage.vue
@@ -1,8 +1,7 @@
 <template>
-    <div class="flex flex-col flex-1 overflow-hidden min-w-full sm:min-w-[500px]">
+    <div class="flex flex-col flex-1 overflow-hidden min-w-full sm:min-w-[500px] dark:bg-zinc-950">
         <div class="overflow-y-auto p-2 space-y-2">
-
-            <!-- warning -->
+            <!-- warning - keeping orange-500 for warning visibility in both modes -->
             <div class="flex bg-orange-500 p-2 text-sm font-semibold leading-6 text-white rounded shadow">
                 <div class="my-auto">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
@@ -10,14 +9,18 @@
                     </svg>
                 </div>
                 <div class="ml-2 my-auto">Reticulum MeshChat must be restarted for any interface changes to take effect.</div>
-                <button v-if="isElectron" @click="relaunch" type="button" class="ml-auto my-auto inline-flex items-center gap-x-1 rounded-md bg-white px-2 py-1 text-sm font-semibold text-black shadow-sm hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">
+                <button v-if="isElectron" 
+                    @click="relaunch" 
+                    type="button" 
+                    class="ml-auto my-auto inline-flex items-center gap-x-1 rounded-md bg-white dark:bg-zinc-800 px-2 py-1 text-sm font-semibold text-black dark:text-zinc-200 shadow-sm hover:bg-gray-50 dark:hover:bg-zinc-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white dark:focus-visible:outline-zinc-700">
                     <span>Restart Now</span>
                 </button>
             </div>
 
             <div>
                 <RouterLink :to="{ name: 'interfaces.add' }">
-                    <button type="button" class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
+                    <button type="button" 
+                        class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 dark:bg-zinc-700 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 dark:hover:bg-zinc-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500 dark:focus-visible:outline-zinc-700">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                         </svg>
@@ -36,7 +39,7 @@
                 @delete="deleteInterface(iface._name)"/>
 
             <!-- disabled interfaces -->
-            <div v-if="disabledInterfaces.length > 0" class="font-semibold">Disabled Interfaces</div>
+            <div v-if="disabledInterfaces.length > 0" class="font-semibold dark:text-zinc-200">Disabled Interfaces</div>
             <Interface
                 v-for="iface of disabledInterfaces"
                 :iface="iface"
@@ -44,7 +47,6 @@
                 @disable="disableInterface(iface._name)"
                 @edit="editInterface(iface._name)"
                 @delete="deleteInterface(iface._name)"/>
-
         </div>
     </div>
 </template>
diff --git a/src/frontend/components/messages/AddAudioButton.vue b/src/frontend/components/messages/AddAudioButton.vue
index 3e89c89..55237ed 100644
--- a/src/frontend/components/messages/AddAudioButton.vue
+++ b/src/frontend/components/messages/AddAudioButton.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="inline-flex rounded-md shadow-sm">
 
-        <button v-if="isRecordingAudioAttachment" @click="stopRecordingAudioAttachment" type="button" class="my-auto mr-1 inline-flex items-center gap-x-1 rounded-md bg-red-500 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-red-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500">
+        <button v-if="isRecordingAudioAttachment" @click="stopRecordingAudioAttachment" type="button" class="my-auto mr-1 inline-flex items-center gap-x-1 rounded-md bg-red-500 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-red-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:bg-zinc-800 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-500">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
                 <path d="M7 4a3 3 0 0 1 6 0v6a3 3 0 1 1-6 0V4Z" />
                 <path d="M5.5 9.643a.75.75 0 0 0-1.5 0V10c0 3.06 2.29 5.585 5.25 5.954V17.5h-1.5a.75.75 0 0 0 0 1.5h4.5a.75.75 0 0 0 0-1.5h-1.5v-1.546A6.001 6.001 0 0 0 16 10v-.357a.75.75 0 0 0-1.5 0V10a4.5 4.5 0 0 1-9 0v-.357Z" />
@@ -11,7 +11,7 @@
             </span>
         </button>
 
-        <button v-else @click="showMenu" type="button" class="my-auto mr-1 inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
+        <button v-else @click="showMenu" type="button" class="my-auto mr-1 inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500 dark:bg-zinc-800 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-500">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
                 <path d="M7 4a3 3 0 0 1 6 0v6a3 3 0 1 1-6 0V4Z" />
                 <path d="M5.5 9.643a.75.75 0 0 0-1.5 0V10c0 3.06 2.29 5.585 5.25 5.954V17.5h-1.5a.75.75 0 0 0 0 1.5h4.5a.75.75 0 0 0 0-1.5h-1.5v-1.546A6.001 6.001 0 0 0 16 10v-.357a.75.75 0 0 0-1.5 0V10a4.5 4.5 0 0 1-9 0v-.357Z" />
diff --git a/src/frontend/components/messages/ConversationViewer.vue b/src/frontend/components/messages/ConversationViewer.vue
index a07ca57..b823aa4 100644
--- a/src/frontend/components/messages/ConversationViewer.vue
+++ b/src/frontend/components/messages/ConversationViewer.vue
@@ -1,23 +1,23 @@
 <template>
 
     <!-- peer selected -->
-    <div v-if="selectedPeer" class="flex flex-col h-full bg-white overflow-hidden sm:m-2 sm:border sm:rounded-xl sm:shadow">
+    <div v-if="selectedPeer" class="flex flex-col h-full bg-white overflow-hidden sm:m-2 sm:border sm:rounded-xl sm:shadow dark:bg-zinc-950 dark:border-zinc-800">
 
         <!-- header -->
-        <div class="flex p-2 border-b border-gray-300">
+        <div class="flex p-2 border-b border-gray-300 dark:border-zinc-800">
 
             <!-- peer info -->
             <div>
                 <div @click="updateCustomDisplayName" class="flex cursor-pointer">
-                    <div v-if="selectedPeer.custom_display_name != null" class="my-auto mr-1" title="Custom Display Name">
+                    <div v-if="selectedPeer.custom_display_name != null" class="my-auto mr-1 dark:text-white" title="Custom Display Name">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" />
                             <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z" />
                         </svg>
                     </div>
-                    <div class="my-auto font-semibold" :title="selectedPeer.display_name">{{ selectedPeer.custom_display_name ?? selectedPeer.display_name }}</div>
+                    <div class="my-auto font-semibold dark:text-white" :title="selectedPeer.display_name">{{ selectedPeer.custom_display_name ?? selectedPeer.display_name }}</div>
                 </div>
-                <div class="text-sm">
+                <div class="text-sm dark:text-zinc-300">
                     <{{ selectedPeer.destination_hash }}>
                     <span v-if="selectedPeerPath" @click="onDestinationPathClick(selectedPeerPath)" class="cursor-pointer">{{ selectedPeerPath.hops }} {{ selectedPeerPath.hops === 1 ? 'hop' : 'hops' }} away</span>
                     <span v-if="selectedPeerLxmfStampInfo && selectedPeerLxmfStampInfo.stamp_cost"> • <span @click="onStampInfoClick(selectedPeerLxmfStampInfo)" class="cursor-pointer">Stamp Cost {{ selectedPeerLxmfStampInfo.stamp_cost }}</span></span>
@@ -73,7 +73,7 @@
                 <div v-for="chatItem of selectedPeerChatItemsReversed" :key="chatItem.lxmf_message.hash" class="flex flex-col max-w-xl mt-3" :class="{ 'ml-auto pl-4 md:pl-16 items-end': chatItem.is_outbound, 'mr-auto pr-4 md:pr-16 items-start': !chatItem.is_outbound }">
 
                     <!-- message content -->
-                    <div @click="onChatItemClick(chatItem)" class="border border-gray-300 rounded-xl shadow overflow-hidden" :class="[ chatItem.lxmf_message.state === 'failed' ? 'bg-red-500 text-white' : chatItem.is_outbound ? 'bg-[#3b82f6] text-white' : 'bg-[#efefef]' ]">
+                    <div @click="onChatItemClick(chatItem)" class="border border-gray-300 dark:border-zinc-800 rounded-xl shadow overflow-hidden" :class="[ chatItem.lxmf_message.state === 'failed' ? 'bg-red-500 text-white' : chatItem.is_outbound ? 'bg-[#3b82f6] text-white' : 'bg-[#efefef]' ]">
 
                         <div class="w-full space-y-0.5 px-2.5 py-1">
 
@@ -96,7 +96,7 @@
                                 <!-- audio is not yet loaded -->
                                 <!-- min height to make sure audio player doesn't cause height increase after loading -->
                                 <div v-else style="min-height:54px;" class="flex">
-                                    <button @click="downloadFileFromBase64('audio.bin', chatItem.lxmf_message.fields.audio.audio_bytes)" type="button" class="my-auto flex border border-gray-300 hover:bg-gray-100 rounded px-2 py-1 text-sm text-gray-700 font-semibold cursor-pointer space-x-2 bg-[#efefef]">
+                                    <button @click="downloadFileFromBase64('audio.bin', chatItem.lxmf_message.fields.audio.audio_bytes)" type="button" class="my-auto flex border border-gray-300 dark:border-zinc-800 hover:bg-gray-100 rounded px-2 py-1 text-sm text-gray-700 font-semibold cursor-pointer space-x-2 bg-[#efefef]">
                                         <span class="my-auto">
                                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                                               <path stroke-linecap="round" stroke-linejoin="round" d="m9 9 10.5-3m0 6.553v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 1 1-.99-3.467l2.31-.66a2.25 2.25 0 0 0 1.632-2.163Zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 0 1-.99-3.467l2.31-.66A2.25 2.25 0 0 0 9 15.553Z" />
@@ -117,7 +117,7 @@
 
                             <!-- file attachment fields -->
                             <div v-if="chatItem.lxmf_message.fields?.file_attachments" class="space-y-1">
-                                <a @click.stop target="_blank" :download="file_attachment.file_name" :href="`data:application/octet-stream;base64,${file_attachment.file_bytes}`" v-for="file_attachment of chatItem.lxmf_message.fields?.file_attachments ?? []" class="flex border border-gray-300 hover:bg-gray-100 rounded px-2 py-1 text-sm text-gray-700 font-semibold cursor-pointer space-x-2 bg-[#efefef]">
+                                <a @click.stop target="_blank" :download="file_attachment.file_name" :href="`data:application/octet-stream;base64,${file_attachment.file_bytes}`" v-for="file_attachment of chatItem.lxmf_message.fields?.file_attachments ?? []" class="flex border border-gray-300 dark:border-zinc-800 hover:bg-gray-100 rounded px-2 py-1 text-sm text-gray-700 font-semibold cursor-pointer space-x-2 bg-[#efefef]">
                                     <div class="my-auto">
                                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                             <path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13"></path>
@@ -209,7 +209,7 @@
         </div>
 
         <!-- send message -->
-        <div class="w-full border-gray-300 border-t p-2">
+        <div class="w-full border-gray-300 dark:border-zinc-800 border-t p-2">
             <div class="mx-auto">
 
                 <!-- message composer -->
@@ -244,7 +244,7 @@
                     <!-- audio attachment -->
                     <div v-if="newMessageAudio" class="mb-2">
                         <div class="flex flex-wrap gap-1">
-                            <div class="flex border border-gray-300 rounded text-gray-700 divide-x divide-gray-300 overflow-hidden">
+                            <div class="flex border border-gray-300 dark:border-zinc-800 rounded text-gray-700 divide-x divide-gray-300 overflow-hidden">
 
                                 <div class="flex p-1">
 
@@ -276,7 +276,7 @@
                     <!-- file attachments -->
                     <div v-if="newMessageFiles.length > 0" class="mb-2">
                         <div class="flex flex-wrap gap-1">
-                            <div v-for="file in newMessageFiles" class="flex border border-gray-300 rounded text-gray-700 divide-x divide-gray-300 overflow-hidden">
+                            <div v-for="file in newMessageFiles" class="flex border border-gray-300 dark:border-zinc-800 rounded text-gray-700 divide-x divide-gray-300 overflow-hidden dark:border-zinc-800">
                                 <div class="my-auto px-1">
                                     <span class="mr-1">{{ file.name }}</span>
                                     <span class="my-auto text-sm text-gray-500">{{ formatBytes(file.size) }}</span>
@@ -297,7 +297,7 @@
                         v-model="newMessageText"
                         @keydown.enter.exact.native.prevent="onEnterPressed"
                         @keydown.enter.shift.exact.native.prevent="onShiftEnterPressed"
-                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+                        class="bg-gray-50 border border-gray-300 dark:border-zinc-800 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-800 dark:text-zinc-100 dark:border-zinc-900"
                         rows="3"
                         placeholder="Send a message..."></textarea>
 
@@ -305,7 +305,7 @@
                     <div class="flex mt-2">
 
                         <!-- add files -->
-                        <button @click="addFilesToMessage" type="button" class="my-auto mr-1 inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
+                        <button @click="addFilesToMessage" type="button" class="my-auto mr-1 inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500 dark:bg-zinc-800 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-500">
                             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
                                 <path fill-rule="evenodd" d="M5.625 1.5H9a3.75 3.75 0 0 1 3.75 3.75v1.875c0 1.036.84 1.875 1.875 1.875H16.5a3.75 3.75 0 0 1 3.75 3.75v7.875c0 1.035-.84 1.875-1.875 1.875H5.625a1.875 1.875 0 0 1-1.875-1.875V3.375c0-1.036.84-1.875 1.875-1.875ZM12.75 12a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25V18a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25V12Z" clip-rule="evenodd" />
                                 <path d="M14.25 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 16.5 7.5h-1.875a.375.375 0 0 1-.375-.375V5.25Z" />
@@ -314,7 +314,7 @@
                         </button>
 
                         <!-- add image -->
-                        <button @click="addImageToMessage" type="button" class="my-auto mr-1 inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
+                        <button @click="addImageToMessage" type="button" class="my-auto mr-1 inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500 dark:bg-zinc-800 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-500">
                             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
                                 <path fill-rule="evenodd" d="M1.5 6a2.25 2.25 0 0 1 2.25-2.25h16.5A2.25 2.25 0 0 1 22.5 6v12a2.25 2.25 0 0 1-2.25 2.25H3.75A2.25 2.25 0 0 1 1.5 18V6ZM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0 0 21 18v-1.94l-2.69-2.689a1.5 1.5 0 0 0-2.12 0l-.88.879.97.97a.75.75 0 1 1-1.06 1.06l-5.16-5.159a1.5 1.5 0 0 0-2.12 0L3 16.061Zm10.125-7.81a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Z" clip-rule="evenodd" />
                             </svg>
@@ -356,13 +356,13 @@
 
     <!-- no peer selected -->
     <div v-else class="flex flex-col mx-auto my-auto text-center leading-5">
-        <div class="mx-auto mb-1">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+        <div class="mx-auto mb-1 ">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 dark:text-white">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
             </svg>
         </div>
-        <div class="font-semibold">No Active Chat</div>
-        <div>Select a Peer to start chatting!</div>
+        <div class="font-semibold dark:text-white">No Active Chat</div>
+        <div class='dark:text-zinc-300'>Select a Peer to start chatting!</div>
     </div>
 
 </template>
diff --git a/src/frontend/components/messages/MessagesPage.vue b/src/frontend/components/messages/MessagesPage.vue
index 92c18c9..42cba71 100644
--- a/src/frontend/components/messages/MessagesPage.vue
+++ b/src/frontend/components/messages/MessagesPage.vue
@@ -7,7 +7,7 @@
         @conversation-click="onConversationClick"
         @peer-click="onPeerClick"/>
 
-    <div class="flex flex-col flex-1 overflow-hidden min-w-full sm:min-w-[500px]">
+    <div class="flex flex-col flex-1 overflow-hidden min-w-full sm:min-w-[500px] dark:bg-zinc-950">
 
         <!-- messages tab -->
         <ConversationViewer
diff --git a/src/frontend/components/messages/MessagesSidebar.vue b/src/frontend/components/messages/MessagesSidebar.vue
index 5e6d222..f5b2122 100644
--- a/src/frontend/components/messages/MessagesSidebar.vue
+++ b/src/frontend/components/messages/MessagesSidebar.vue
@@ -2,51 +2,51 @@
     <div class="flex flex-col w-80 min-w-80">
 
         <!-- tabs -->
-        <div class="bg-white border-b border-r border-gray-200">
+        <div class="bg-white dark:bg-zinc-950 border-b border-r border-gray-200 dark:border-zinc-700">
             <div class="-mb-px flex">
-                <div @click="tab = 'conversations'" class="w-full border-b-2 py-3 px-1 text-center text-sm font-medium cursor-pointer" :class="[ tab === 'conversations' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700']">Conversations</div>
-                <div @click="tab = 'announces'" class="w-full border-b-2 py-3 px-1 text-center text-sm font-medium cursor-pointer" :class="[ tab === 'announces' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700']">Announces</div>
+                <div @click="tab = 'conversations'" class="w-full border-b-2 py-3 px-1 text-center text-sm font-medium cursor-pointer" :class="[ tab === 'conversations' ? 'border-blue-500 text-blue-600 dark:border-blue-400 dark:text-blue-400' : 'border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 dark:hover:border-zinc-600 hover:text-gray-700 dark:hover:text-gray-300']">Conversations</div>
+                <div @click="tab = 'announces'" class="w-full border-b-2 py-3 px-1 text-center text-sm font-medium cursor-pointer" :class="[ tab === 'announces' ? 'border-blue-500 text-blue-600 dark:border-blue-400 dark:text-blue-400' : 'border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 dark:hover:border-zinc-600 hover:text-gray-700 dark:hover:text-gray-300']">Announces</div>
             </div>
         </div>
 
         <!-- conversations -->
-        <div v-if="tab === 'conversations'" class="flex-1 flex flex-col bg-white border-r overflow-hidden">
+        <div v-if="tab === 'conversations'" class="flex-1 flex flex-col bg-white dark:bg-zinc-950 border-r border-gray-200 dark:border-zinc-700 overflow-hidden">
 
             <!-- search -->
-            <div v-if="conversations.length > 0" class="p-1 border-b border-gray-300">
-                <input v-model="conversationsSearchTerm" type="text" :placeholder="`Search ${conversations.length} Conversations...`" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+            <div v-if="conversations.length > 0" class="p-1 border-b border-gray-300 dark:border-zinc-700">
+                <input v-model="conversationsSearchTerm" type="text" :placeholder="`Search ${conversations.length} Conversations...`" class="bg-gray-50 dark:bg-zinc-700 border border-gray-300 dark:border-zinc-600 text-gray-900 dark:text-gray-100 text-sm rounded-lg focus:ring-blue-500 dark:focus:ring-blue-600 focus:border-blue-500 dark:focus:border-blue-600 block w-full p-2.5">
             </div>
 
             <!-- peers -->
             <div class="flex h-full overflow-y-auto">
                 <div v-if="searchedConversations.length > 0" class="w-full">
-                    <div @click="onConversationClick(conversation)" v-for="conversation of searchedConversations" class="flex cursor-pointer p-2 border-l-2" :class="[ conversation.destination_hash === selectedDestinationHash ? 'bg-gray-100 border-blue-500' : 'bg-white border-transparent hover:bg-gray-50 hover:border-gray-200' ]">
+                    <div @click="onConversationClick(conversation)" v-for="conversation of searchedConversations" class="flex cursor-pointer p-2 border-l-2" :class="[ conversation.destination_hash === selectedDestinationHash ? 'bg-gray-100 dark:bg-zinc-700 border-blue-500 dark:border-blue-400' : 'bg-white dark:bg-zinc-950 border-transparent hover:bg-gray-50 dark:hover:bg-zinc-700 hover:border-gray-200 dark:hover:border-zinc-600' ]">
                         <div class="my-auto mr-2">
                             <div v-if="conversation.lxmf_user_icon" class="p-2 rounded" :style="{ 'color': conversation.lxmf_user_icon.foreground_colour, 'background-color': conversation.lxmf_user_icon.background_colour }">
                                 <MaterialDesignIcon :icon-name="conversation.lxmf_user_icon.icon_name" class="w-6 h-6"/>
                             </div>
-                            <div v-else class="bg-gray-200 text-gray-500 p-2 rounded">
+                            <div v-else class="bg-gray-200 dark:bg-zinc-700 text-gray-500 dark:text-gray-400 p-2 rounded">
                                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                     <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
                                 </svg>
                             </div>
                         </div>
                         <div class="mr-auto">
-                            <div class="text-gray-900" :class="{ 'font-semibold': conversation.is_unread || conversation.failed_messages_count > 0 }">{{ conversation.custom_display_name ?? conversation.display_name }}</div>
-                            <div class="text-gray-500 text-sm">{{ formatTimeAgo(conversation.updated_at) }}</div>
+                            <div class="text-gray-900 dark:text-gray-100" :class="{ 'font-semibold': conversation.is_unread || conversation.failed_messages_count > 0 }">{{ conversation.custom_display_name ?? conversation.display_name }}</div>
+                            <div class="text-gray-500 dark:text-gray-400 text-sm">{{ formatTimeAgo(conversation.updated_at) }}</div>
                         </div>
                         <div v-if="conversation.is_unread" class="my-auto ml-2 mr-2">
-                            <div class="bg-blue-500 rounded-full p-1"></div>
+                            <div class="bg-blue-500 dark:bg-blue-400 rounded-full p-1"></div>
                         </div>
                         <div v-else-if="conversation.failed_messages_count" class="my-auto ml-2 mr-2">
-                            <div class="bg-red-500 rounded-full p-1"></div>
+                            <div class="bg-red-500 dark:bg-red-400 rounded-full p-1"></div>
                         </div>
                     </div>
                 </div>
                 <div v-else class="mx-auto my-auto text-center leading-5">
 
                     <!-- no conversations at all -->
-                    <div v-if="conversations.length === 0" class="flex flex-col">
+                    <div v-if="conversations.length === 0" class="flex flex-col text-gray-900 dark:text-gray-100">
                         <div class="mx-auto mb-1">
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                                 <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h3.218a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859m-19.5.338V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 0 0-2.15-1.588H6.911a2.25 2.25 0 0 0-2.15 1.588L2.35 13.177a2.25 2.25 0 0 0-.1.661Z" />
@@ -57,7 +57,7 @@
                     </div>
 
                     <!-- is searching, but no results -->
-                    <div v-if="conversationsSearchTerm !== '' && conversations.length > 0" class="flex flex-col">
+                    <div v-if="conversationsSearchTerm !== '' && conversations.length > 0" class="flex flex-col text-gray-900 dark:text-gray-100">
                         <div class="mx-auto mb-1">
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                 <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
@@ -66,42 +66,39 @@
                         <div class="font-semibold">No Search Results</div>
                         <div>Your search didn't match any Conversations!</div>
                     </div>
-
-
                 </div>
             </div>
-
         </div>
 
         <!-- discover -->
-        <div v-if="tab === 'announces'" class="flex-1 flex flex-col bg-white border-r overflow-hidden">
+        <div v-if="tab === 'announces'" class="flex-1 flex flex-col bg-white dark:bg-zinc-950 border-r border-gray-200 dark:border-zinc-700 overflow-hidden">
 
             <!-- search -->
-            <div v-if="peersCount > 0" class="p-1 border-b border-gray-300">
-                <input v-model="peersSearchTerm" type="text" :placeholder="`Search ${peersCount} recent announces...`" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+            <div v-if="peersCount > 0" class="p-1 border-b border-gray-300 dark:border-zinc-700">
+                <input v-model="peersSearchTerm" type="text" :placeholder="`Search ${peersCount} recent announces...`" class="bg-gray-50 dark:bg-zinc-700 border border-gray-300 dark:border-zinc-600 text-gray-900 dark:text-gray-100 text-sm rounded-lg focus:ring-blue-500 dark:focus:ring-blue-600 focus:border-blue-500 dark:focus:border-blue-600 block w-full p-2.5">
             </div>
 
             <!-- peers -->
             <div class="flex h-full overflow-y-auto">
                 <div v-if="searchedPeers.length > 0" class="w-full">
-                    <div @click="onPeerClick(peer)" v-for="peer of searchedPeers" class="flex cursor-pointer p-2 border-l-2" :class="[ peer.destination_hash === selectedDestinationHash ? 'bg-gray-100 border-blue-500' : 'bg-white border-transparent hover:bg-gray-50 hover:border-gray-200' ]">
+                    <div @click="onPeerClick(peer)" v-for="peer of searchedPeers" class="flex cursor-pointer p-2 border-l-2" :class="[ peer.destination_hash === selectedDestinationHash ? 'bg-gray-100 dark:bg-zinc-700 border-blue-500 dark:border-blue-400' : 'bg-white dark:bg-zinc-950 border-transparent hover:bg-gray-50 dark:hover:bg-zinc-700 hover:border-gray-200 dark:hover:border-zinc-600' ]">
                         <div class="my-auto mr-2">
-                            <div class="bg-gray-200 text-gray-500 p-2 rounded">
+                            <div class="bg-gray-200 dark:bg-zinc-700 text-gray-500 dark:text-gray-400 p-2 rounded">
                                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                     <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
                                 </svg>
                             </div>
                         </div>
                         <div>
-                            <div class="text-gray-900">{{ peer.custom_display_name ?? peer.display_name }}</div>
-                            <div class="text-gray-500 text-sm">{{ formatTimeAgo(peer.updated_at) }}</div>
+                            <div class="text-gray-900 dark:text-gray-100">{{ peer.custom_display_name ?? peer.display_name }}</div>
+                            <div class="text-gray-500 dark:text-gray-400 text-sm">{{ formatTimeAgo(peer.updated_at) }}</div>
                         </div>
                     </div>
                 </div>
                 <div v-else class="mx-auto my-auto text-center leading-5">
 
                     <!-- no peers at all -->
-                    <div v-if="peersCount === 0" class="flex flex-col">
+                    <div v-if="peersCount === 0" class="flex flex-col text-gray-900 dark:text-gray-100">
                         <div class="mx-auto mb-1">
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                 <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
@@ -112,7 +109,7 @@
                     </div>
 
                     <!-- is searching, but no results -->
-                    <div v-if="peersSearchTerm !== '' && peersCount > 0" class="flex flex-col">
+                    <div v-if="peersSearchTerm !== '' && peersCount > 0" class="flex flex-col text-gray-900 dark:text-gray-100">
                         <div class="mx-auto mb-1">
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                 <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
@@ -121,13 +118,9 @@
                         <div class="font-semibold">No Search Results</div>
                         <div>Your search didn't match any Peers!</div>
                     </div>
-
-
                 </div>
             </div>
-
         </div>
-
     </div>
 </template>
 
diff --git a/src/frontend/components/messages/SendMessageButton.vue b/src/frontend/components/messages/SendMessageButton.vue
index fa82bac..6563660 100644
--- a/src/frontend/components/messages/SendMessageButton.vue
+++ b/src/frontend/components/messages/SendMessageButton.vue
@@ -1,8 +1,7 @@
 <template>
     <div class="inline-flex rounded-md shadow-sm">
-
         <!-- send button -->
-        <button @click="send" :disabled="!canSendMessage" type="button" class="my-auto inline-flex items-center rounded-l-md px-2.5 py-1.5 text-sm font-semibold text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2" :class="[ canSendMessage ? 'bg-blue-500 hover:bg-blue-400 focus-visible:outline-blue-500' : 'bg-gray-400 focus-visible:outline-gray-500 cursor-not-allowed']">
+        <button @click="send" :disabled="!canSendMessage" type="button" class="my-auto inline-flex items-center rounded-l-md px-2.5 py-1.5 text-sm font-semibold text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2" :class="[ canSendMessage ? 'bg-blue-500 dark:bg-blue-600 hover:bg-blue-400 dark:hover:bg-blue-500 focus-visible:outline-blue-500 dark:focus-visible:outline-blue-600' : 'bg-gray-400 dark:bg-zinc-500 focus-visible:outline-gray-500 dark:focus-visible:outline-zinc-500 cursor-not-allowed']">
             <span v-if="isSendingMessage">Sending...</span>
             <span v-else class="space-x-1">
                 <span>Send</span>
@@ -11,16 +10,13 @@
                 <span v-if="deliveryMethod === 'propagated'">(Propagated)</span>
             </span>
         </button>
-
         <div class="relative">
-
             <!-- dropdown button -->
-            <button @click="showMenu" :disabled="!canSendMessage" type="button" class="my-auto border-l relative inline-flex items-center rounded-r-md bg-gray-500 focus-visible:outline-gray-400 px-2 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2" :class="[ canSendMessage ? 'bg-blue-500 hover:bg-blue-400 focus-visible:outline-blue-500' : 'bg-gray-400 focus-visible:outline-gray-500 cursor-not-allowed']">
+            <button @click="showMenu" :disabled="!canSendMessage" type="button" class="my-auto border-l border-blue-600 dark:border-blue-700 relative inline-flex items-center rounded-r-md px-2 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2" :class="[ canSendMessage ? 'bg-blue-500 dark:bg-blue-600 hover:bg-blue-400 dark:hover:bg-blue-500 focus-visible:outline-blue-500 dark:focus-visible:outline-blue-600' : 'bg-gray-400 dark:bg-zinc-500 focus-visible:outline-gray-500 dark:focus-visible:outline-zinc-500 cursor-not-allowed']">
                 <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
                     <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
                 </svg>
             </button>
-
             <!-- dropdown menu -->
             <Transition
                 enter-active-class="transition ease-out duration-100"
@@ -29,18 +25,16 @@
                 leave-active-class="transition ease-in duration-75"
                 leave-from-class="transform opacity-100 scale-100"
                 leave-to-class="transform opacity-0 scale-95">
-                <div v-if="isShowingMenu" v-click-outside="hideMenu" class="absolute bottom-0 -ml-11 right-0 ml-0 z-10 mb-10 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                <div v-if="isShowingMenu" v-click-outside="hideMenu" class="absolute bottom-0 -ml-11 right-0 ml-0 z-10 mb-10 rounded-md bg-white dark:bg-zinc-800 shadow-lg ring-1 ring-black dark:ring-zinc-700 ring-opacity-5 focus:outline-none">
                     <div class="py-1">
-                        <button @click="setDeliveryMethod(null)" type="button" class="w-full block text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 whitespace-nowrap border-b">Send Automatically</button>
-                        <button @click="setDeliveryMethod('direct')" type="button" class="w-full block text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 whitespace-nowrap">Send over Direct Link</button>
-                        <button @click="setDeliveryMethod('opportunistic')" type="button" class="w-full block text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 whitespace-nowrap">Send Opportunistically</button>
-                        <button @click="setDeliveryMethod('propagated')" type="button" class="w-full block text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 whitespace-nowrap">Send to Propagation Node</button>
+                        <button @click="setDeliveryMethod(null)" type="button" class="w-full block text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-700 whitespace-nowrap border-b border-gray-200 dark:border-zinc-700">Send Automatically</button>
+                        <button @click="setDeliveryMethod('direct')" type="button" class="w-full block text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-700 whitespace-nowrap">Send over Direct Link</button>
+                        <button @click="setDeliveryMethod('opportunistic')" type="button" class="w-full block text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-700 whitespace-nowrap">Send Opportunistically</button>
+                        <button @click="setDeliveryMethod('propagated')" type="button" class="w-full block text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-700 whitespace-nowrap">Send to Propagation Node</button>
                     </div>
                 </div>
             </Transition>
-
         </div>
-
     </div>
 </template>
 
diff --git a/src/frontend/components/network-visualiser/NetworkVisualiser.vue b/src/frontend/components/network-visualiser/NetworkVisualiser.vue
index 6c203f9..9f3f971 100644
--- a/src/frontend/components/network-visualiser/NetworkVisualiser.vue
+++ b/src/frontend/components/network-visualiser/NetworkVisualiser.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="flex-1 h-full min-w-full sm:min-w-[500px] relative">
+    <div class="flex-1 h-full min-w-full sm:min-w-[500px] relative dark:bg-zinc-950">
         <!-- network -->
         <div id="network" class="w-full h-full"></div>
         <!-- controls -->
@@ -13,7 +13,7 @@
                             type="button" 
                             class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 dark:bg-zinc-700 px-1 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 dark:hover:bg-zinc-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500 dark:focus-visible:outline-zinc-600"
                         >
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 text-white dark:text-white">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 text-white">
                                 <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
                             </svg>
                         </button>
diff --git a/src/frontend/components/propagation-nodes/PropagationNodesPage.vue b/src/frontend/components/propagation-nodes/PropagationNodesPage.vue
index 5aceccd..e025abf 100644
--- a/src/frontend/components/propagation-nodes/PropagationNodesPage.vue
+++ b/src/frontend/components/propagation-nodes/PropagationNodesPage.vue
@@ -1,44 +1,44 @@
 <template>
-    <div class="flex flex-col flex-1 overflow-hidden min-w-full sm:min-w-[500px]">
+    <div class="flex flex-col flex-1 overflow-hidden min-w-full sm:min-w-[500px] dark:bg-zinc-950">
 
         <!-- search -->
-        <div v-if="propagationNodes.length > 0" class="flex bg-white p-1 border-b border-gray-300">
-            <input v-model="searchTerm" type="text" :placeholder="`Search ${propagationNodes.length} Propagation Nodes...`" class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+        <div v-if="propagationNodes.length > 0" class="flex bg-white dark:bg-zinc-800 p-1 border-b border-gray-300 dark:border-zinc-700">
+            <input v-model="searchTerm" type="text" :placeholder="`Search ${propagationNodes.length} Propagation Nodes...`" class="w-full bg-gray-50 dark:bg-zinc-700 border border-gray-300 dark:border-zinc-600 text-gray-900 dark:text-gray-100 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-600 block w-full p-2.5">
         </div>
 
         <!-- propagation nodes -->
         <div class="h-full overflow-y-auto">
             <div v-if="searchedPropagationNodes.length > 0" class="p-2 space-y-2 w-full">
-                <div v-for="propagationNode of searchedPropagationNodes" class="border rounded bg-white shadow">
+                <div v-for="propagationNode of searchedPropagationNodes" class="border dark:border-zinc-700 rounded bg-white dark:bg-zinc-800 shadow">
                     <div class="p-1 flex">
                         <div class="my-auto">
-                            <div class="font-semibold">{{ propagationNode.operator_display_name ?? "Unknown Operator" }}</div>
-                            <div class="text-sm"><{{ propagationNode.destination_hash }}></div>
+                            <div class="font-semibold text-gray-900 dark:text-gray-100">{{ propagationNode.operator_display_name ?? "Unknown Operator" }}</div>
+                            <div class="text-sm text-gray-700 dark:text-gray-300"><{{ propagationNode.destination_hash }}></div>
                         </div>
                         <div class="ml-auto my-auto">
-                            <button v-if="config.lxmf_preferred_propagation_node_destination_hash === propagationNode.destination_hash" @click="stopUsingPropagationNode" type="button" class="my-auto inline-flex items-center gap-x-1 rounded-md bg-red-500 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-red-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500">
+                            <button v-if="config.lxmf_preferred_propagation_node_destination_hash === propagationNode.destination_hash" @click="stopUsingPropagationNode" type="button" class="my-auto inline-flex items-center gap-x-1 rounded-md bg-red-500 dark:bg-red-600 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-red-400 dark:hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-600">
                                 Stop Using Node
                             </button>
-                            <button v-else @click="usePropagationNode(propagationNode.destination_hash)" type="button" class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
+                            <button v-else @click="usePropagationNode(propagationNode.destination_hash)" type="button" class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 dark:bg-zinc-600 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 dark:hover:bg-zinc-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500 dark:focus-visible:outline-zinc-600">
                                 Set as Preferred
                             </button>
                         </div>
                     </div>
-                    <div class="bg-gray-50 p-1">
-                        <div class="text-gray-500 text-sm">
+                    <div class="bg-gray-50 dark:bg-zinc-900 p-1">
+                        <div class="text-gray-500 dark:text-gray-400 text-sm">
                             <span>Announced {{ formatTimeAgo(propagationNode.updated_at) }}</span>
                             <span v-if="propagationNode.is_propagation_enabled === false">
-                                <span> • <span class="text-red-500">Disabled by Operator</span></span>
+                                <span> • <span class="text-red-500 dark:text-red-400">Disabled by Operator</span></span>
                             </span>
                             <span v-if="config.lxmf_preferred_propagation_node_destination_hash === propagationNode.destination_hash">
-                                <span> • <span class="text-green-500">Preferred</span></span>
+                                <span> • <span class="text-green-500 dark:text-green-400">Preferred</span></span>
                             </span>
                         </div>
                     </div>
                 </div>
             </div>
             <div v-else class="flex h-full">
-                <div class="mx-auto my-auto text-center leading-5">
+                <div class="mx-auto my-auto text-center leading-5 text-gray-900 dark:text-gray-100">
 
                     <!-- no propagation nodes at all -->
                     <div v-if="propagationNodes.length === 0" class="flex flex-col">
@@ -50,7 +50,7 @@
                         <div class="font-semibold">No Propagation Nodes</div>
                         <div>Check back later, once someone has announced.</div>
                         <div class="mt-2">
-                            <button @click="loadPropagationNodes" type="button" class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
+                            <button @click="loadPropagationNodes" type="button" class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 dark:bg-zinc-600 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 dark:hover:bg-zinc-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500 dark:focus-visible:outline-zinc-600">
                                 Reload
                             </button>
                         </div>
diff --git a/src/frontend/components/settings/SettingsPage.vue b/src/frontend/components/settings/SettingsPage.vue
index 648d791..3b0e43f 100644
--- a/src/frontend/components/settings/SettingsPage.vue
+++ b/src/frontend/components/settings/SettingsPage.vue
@@ -2,117 +2,76 @@
     <div class="flex flex-col flex-1 overflow-hidden min-w-full sm:min-w-[500px] dark:bg-zinc-950">
         <div class="overflow-y-auto space-y-2 p-2">
 
-            <!-- appearance -->
-            <div class="bg-white rounded shadow dark:bg-zinc-950">
-                <div class="flex border-b border-gray-300 text-gray-700 p-2 font-semibold dark:border-zinc-700 dark:text-zinc-200">
-                    Appearance
-                </div>
-                <div class="divide-y text-gray-900 dark:divide-zinc-800 dark:text-zinc-200">
+            <!-- interfaces -->
+            <div class="bg-white dark:bg-zinc-800 rounded shadow">
+                <div class="flex border-b border-gray-300 dark:border-zinc-700 text-gray-700 dark:text-gray-200 p-2 font-semibold">Interfaces</div>
+                <div class="divide-y divide-gray-300 dark:divide-zinc-700 text-gray-900 dark:text-gray-100">
+
                     <div class="p-2">
                         <div class="flex items-start">
                             <div class="flex items-center h-5">
-                                <input 
-                                    v-model="config.dark_mode" 
-                                    @change="onDarkModeChange" 
-                                    type="checkbox" 
-                                    class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 
-                                           dark:border-zinc-700 dark:bg-zinc-900 dark:focus:ring-blue-500"
-                                >
+                                <input v-model="config.show_suggested_community_interfaces" @change="onShowSuggestedCommunityInterfacesChange" type="checkbox" class="w-4 h-4 border border-gray-300 dark:border-zinc-600 rounded bg-gray-50 dark:bg-zinc-700 focus:ring-3 focus:ring-blue-300 dark:focus:ring-blue-600">
                             </div>
-                            <label class="ml-2 text-sm font-medium text-gray-900 dark:text-zinc-200">
-                                Enable Dark Mode
-                            </label>
-                        </div>
-                        <div class="text-sm text-gray-700 dark:text-zinc-400">
-                            Enables dark mode for the application
+                            <label class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">Show Community Interfaces</label>
                         </div>
+                        <div class="text-sm text-gray-700 dark:text-gray-300">When enabled, community interfaces will be shown on the Add Interface page.</div>
                     </div>
+
                 </div>
             </div>
 
-            <!-- interfaces -->
-            <div class="bg-white rounded shadow dark:bg-zinc-950">
-                <div class="flex border-b border-gray-300 text-gray-700 p-2 font-semibold dark:border-zinc-700 dark:text-zinc-200">
-                    Interfaces
-                </div>
-                <div class="divide-y text-gray-900 dark:divide-zinc-800 dark:text-zinc-200">
+            <!-- messages -->
+            <div class="bg-white dark:bg-zinc-800 rounded shadow">
+                <div class="flex border-b border-gray-300 dark:border-zinc-700 text-gray-700 dark:text-gray-200 p-2 font-semibold">Messages</div>
+                <div class="divide-y divide-gray-300 dark:divide-zinc-700 text-gray-900 dark:text-gray-100">
+
                     <div class="p-2">
                         <div class="flex items-start">
                             <div class="flex items-center h-5">
-                                <input 
-                                    v-model="config.show_suggested_community_interfaces" 
-                                    @change="onShowSuggestedCommunityInterfacesChange" 
-                                    type="checkbox" 
-                                    class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 
-                                           dark:border-zinc-700 dark:bg-zinc-900 dark:focus:ring-blue-500"
-                                >
+                                <input v-model="config.auto_resend_failed_messages_when_announce_received" @change="onAutoResendFailedMessagesWhenAnnounceReceivedChange" type="checkbox" class="w-4 h-4 border border-gray-300 dark:border-zinc-600 rounded bg-gray-50 dark:bg-zinc-700 focus:ring-3 focus:ring-blue-300 dark:focus:ring-blue-600">
                             </div>
-                            <label class="ml-2 text-sm font-medium text-gray-900 dark:text-zinc-200">
-                                Show Community Interfaces
-                            </label>
-                        </div>
-                        <div class="text-sm text-gray-700 dark:text-zinc-400">
-                            When enabled, community interfaces will be shown on the Add Interface page.
+                            <label class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">Auto resend</label>
                         </div>
+                        <div class="text-sm text-gray-700 dark:text-gray-300">When enabled, failed messages will auto resend when an announce is received from the intended destination.</div>
                     </div>
-                </div>
-            </div>
 
-            <!-- messages -->
-            <div class="bg-white rounded shadow dark:bg-zinc-950">
-                <div class="flex border-b border-gray-300 text-gray-700 p-2 font-semibold dark:border-zinc-700 dark:text-zinc-200">
-                    Messages
-                </div>
-                <div class="divide-y text-gray-900 dark:divide-zinc-800 dark:text-zinc-200">
                     <div class="p-2">
                         <div class="flex items-start">
                             <div class="flex items-center h-5">
-                                <input 
-                                    v-model="config.auto_resend_failed_messages_when_announce_received" 
-                                    @change="onAutoResendFailedMessagesWhenAnnounceReceivedChange" 
-                                    type="checkbox" 
-                                    class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 
-                                           dark:border-zinc-700 dark:bg-zinc-900 dark:focus:ring-blue-500"
-                                >
+                                <input v-model="config.allow_auto_resending_failed_messages_with_attachments" @change="onAllowAutoResendingFailedMessagesWithAttachmentsChange" type="checkbox" class="w-4 h-4 border border-gray-300 dark:border-zinc-600 rounded bg-gray-50 dark:bg-zinc-700 focus:ring-3 focus:ring-blue-300 dark:focus:ring-blue-600">
                             </div>
-                            <label class="ml-2 text-sm font-medium text-gray-900 dark:text-zinc-200">
-                                Auto resend
-                            </label>
-                        </div>
-                        <div class="text-sm text-gray-700 dark:text-zinc-400">
-                            When enabled, failed messages will auto resend when an announce is received from the intended destination.
+                            <label class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">Allow resending with attachments</label>
                         </div>
+                        <div class="text-sm text-gray-700 dark:text-gray-300">When enabled, failed messages that have attachments are allowed to auto resend.</div>
                     </div>
+
                     <div class="p-2">
                         <div class="flex items-start">
                             <div class="flex items-center h-5">
-                                <input 
-                                    v-model="config.allow_auto_resending_failed_messages_with_attachments" 
-                                    @change="onAllowAutoResendingFailedMessagesWithAttachmentsChange" 
-                                    type="checkbox" 
-                                    class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 
-                                           dark:border-zinc-700 dark:bg-zinc-900 dark:focus:ring-blue-500"
-                                >
+                                <input v-model="config.auto_send_failed_messages_to_propagation_node" @change="onAutoSendFailedMessagesToPropagationNodeChange" type="checkbox" class="w-4 h-4 border border-gray-300 dark:border-zinc-600 rounded bg-gray-50 dark:bg-zinc-700 focus:ring-3 focus:ring-blue-300 dark:focus:ring-blue-600">
                             </div>
-                            <label class="ml-2 text-sm font-medium text-gray-900 dark:text-zinc-200">
-                                Allow resending with attachments
-                            </label>
-                        </div>
-                        <div class="text-sm text-gray-700 dark:text-zinc-400">
-                            When enabled, failed messages that have attachments are allowed to auto resend.
+                            <label class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">Auto send to propagation node</label>
                         </div>
+                        <div class="text-sm text-gray-700 dark:text-gray-300">When enabled, messages that fail to send will be sent to the configured propagation node.</div>
                     </div>
+
                 </div>
             </div>
 
             <!-- propagation nodes -->
-            <div class="bg-white rounded shadow dark:bg-zinc-950">
-                <div class="flex border-b border-gray-300 text-gray-700 p-2 font-semibold dark:border-zinc-700 dark:text-zinc-200">
-                    Propagation Nodes
+            <div class="bg-white dark:bg-zinc-800 rounded shadow">
+                <div class="flex border-b border-gray-300 dark:border-zinc-700 text-gray-700 dark:text-gray-200 p-2 font-semibold">
+                    <div class="my-auto mr-auto">Propagation Nodes</div>
+                    <div class="my-auto">
+                        <RouterLink :to="{ name: 'propagation-nodes' }" class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 dark:bg-zinc-600 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 dark:hover:bg-zinc-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500 dark:focus-visible:outline-zinc-500">
+                            Browse Nodes
+                        </RouterLink>
+                    </div>
                 </div>
-                <div class="divide-y text-gray-900 dark:divide-zinc-800 dark:text-zinc-200">
+                <div class="divide-y divide-gray-300 dark:divide-zinc-700 text-gray-900 dark:text-gray-100">
+
                     <div class="p-2">
-                        <div class="text-sm text-gray-700 dark:text-zinc-400">
+                        <div class="text-sm text-gray-700 dark:text-gray-300">
                             <ul class="list-disc list-inside">
                                 <li>When you send a message, the intended recipient may be offline and your message will fail to send.</li>
                                 <li>Instead, messages can be sent to propagation nodes, which store the messages and allow recipients to retrieve them when they're next online.</li>
@@ -122,6 +81,48 @@
                             </ul>
                         </div>
                     </div>
+
+                    <div class="p-2">
+                        <div class="flex items-start">
+                            <div class="flex items-center h-5">
+                                <input v-model="config.lxmf_local_propagation_node_enabled" @change="onLxmfLocalPropagationNodeEnabledChange" type="checkbox" class="w-4 h-4 border border-gray-300 dark:border-zinc-600 rounded bg-gray-50 dark:bg-zinc-700 focus:ring-3 focus:ring-blue-300 dark:focus:ring-blue-600">
+                            </div>
+                            <label class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">Local Propagation Node</label>
+                        </div>
+                        <div class="text-sm text-gray-700 dark:text-gray-300">When enabled, MeshChat will run a Propagation Node and announce it with the following address for other clients to use.</div>
+                        <div class="flex">
+                            <input disabled v-model="config.lxmf_local_propagation_node_address_hash" type="text" class="bg-gray-200 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 text-gray-900 dark:text-gray-100 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-600 block w-full p-2.5">
+                        </div>
+                    </div>
+
+                    <div class="p-2">
+                        <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Preferred Propagation Node</div>
+                        <div class="flex">
+                            <input v-model="config.lxmf_preferred_propagation_node_destination_hash" @input="onLxmfPreferredPropagationNodeDestinationHashChange" type="text" placeholder="Destination Hash. e.g: a39610c89d18bb48c73e429582423c24" class="bg-gray-50 dark:bg-zinc-700 border border-gray-300 dark:border-zinc-600 text-gray-900 dark:text-gray-100 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-600 block w-full p-2.5">
+                        </div>
+                        <div class="text-sm text-gray-700 dark:text-gray-300">This is the propagation node your messages will be sent to and retrieved from.</div>
+                    </div>
+
+                    <div class="p-2">
+                        <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Auto Sync Interval</div>
+                        <div class="flex">
+                            <select v-model="config.lxmf_preferred_propagation_node_auto_sync_interval_seconds" @change="onLxmfPreferredPropagationNodeAutoSyncIntervalSecondsChange" class="bg-gray-50 dark:bg-zinc-700 border border-gray-300 dark:border-zinc-600 text-gray-900 dark:text-gray-100 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-600 block w-full p-2.5">
+                                <option value="0">Disabled</option>
+                                <option value="900">Every 15 Minutes</option>
+                                <option value="1800">Every 30 Minutes</option>
+                                <option value="3600">Every 1 Hour</option>
+                                <option value="10800">Every 3 Hours</option>
+                                <option value="21600">Every 6 Hours</option>
+                                <option value="43200">Every 12 Hours</option>
+                                <option value="86400">Every 24 Hours</option>
+                            </select>
+                        </div>
+                        <div class="text-sm text-gray-700 dark:text-gray-300">
+                            <span v-if="config.lxmf_preferred_propagation_node_last_synced_at">Last Synced: {{ formatSecondsAgo(config.lxmf_preferred_propagation_node_last_synced_at) }}</span>
+                            <span v-else>Last Synced: Never</span>
+                        </div>
+                    </div>
+
                 </div>
             </div>
 
@@ -129,7 +130,6 @@
     </div>
 </template>
 
-
 <script>
 import Utils from "../../js/Utils";
 import WebSocketConnection from "../../js/WebSocketConnection";
@@ -210,11 +210,6 @@ export default {
                 "show_suggested_community_interfaces": this.config.show_suggested_community_interfaces,
             });
         },
-        async onDarkModeChange() {
-            await this.updateConfig({
-                "dark_mode": this.config.dark_mode,
-            });
-        },
         async onLxmfPreferredPropagationNodeDestinationHashChange() {
             await this.updateConfig({
                 "lxmf_preferred_propagation_node_destination_hash": this.config.lxmf_preferred_propagation_node_destination_hash,
diff --git a/src/frontend/public/assets/js/micron-parser.js b/src/frontend/public/assets/js/micron-parser.js
index 71ab50b..3f3b1a4 100644
--- a/src/frontend/public/assets/js/micron-parser.js
+++ b/src/frontend/public/assets/js/micron-parser.js
@@ -338,7 +338,7 @@ class MicronParser {
                         // append request variables directly to the directURL as query parameters
                         const varEntries = Object.entries(requestVars);
                         if (varEntries.length > 0) {
-                            const queryString = varEntries.map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`).join('&');
+                            const queryString = varEntries.map(([k, v]) => `${k}=${v}`).join('|');
                    
                             directURL += directURL.includes('`') ? `|${queryString}` : `\`${queryString}`;
                         }
diff --git a/src/frontend/public/call.html b/src/frontend/public/call.html
index 1d2df2b..74eb1f7 100644
--- a/src/frontend/public/call.html
+++ b/src/frontend/public/call.html
@@ -21,7 +21,7 @@
     <script src="assets/js/codec2-emscripten/codec2-lib.js"></script>
 
 </head>
-<body class="bg-gray-100">
+<body class="bg-gray-100 dark:bg-zinc-950">
 <div id="app" class="flex h-full">
 
     <div class="mx-auto my-auto w-full max-w-xl p-4">
@@ -140,18 +140,18 @@
         <div v-else class="w-full space-y-2">
 
             <!-- dialer -->
-            <div class="border rounded-xl bg-white shadow w-full overflow-hidden">
-                <div class="flex border-b border-gray-300 text-gray-700 p-2">
+            <div class="border rounded-xl bg-white shadow w-full overflow-hidden dark:border-zinc-900">
+                <div class="flex border-b border-gray-300 text-gray-700 p-2 dark:bg-zinc-800 dark:text-white">
                     <div class="my-auto mr-2">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 dark:text-white">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" />
                         </svg>
                     </div>
                     <div class="my-auto">Start a new Call</div>
                 </div>
-                <div class="flex border-b border-gray-300 text-gray-900 p-2 space-x-2">
+                <div class="flex border-b border-gray-300 text-gray-900 p-2 space-x-2 dark:bg-zinc-700 dark:text-zinc-100 dark:border-zinc-800">
                     <div class="flex-1">
-                        <input v-model="destinationHash" type="text" placeholder="Enter Destination Hash" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2">
+                        <input v-model="destinationHash" type="text" placeholder="Enter Destination Hash" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2 dark:bg-zinc-800 dark:border-zinc-700 dark:text-zinc-100">
                     </div>
                     <button @click="initiateCall(destinationHash)" :disabled="isInitiatingCall" type="button" :class="[ isInitiatingCall ? 'bg-gray-400 focus-visible:outline-gray-500' : 'bg-green-500 hover:bg-green-400 focus-visible:outline-green-500' ]" class="my-auto inline-flex items-center gap-x-1 rounded-md p-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">
                         <span v-if="isInitiatingCall">
@@ -160,10 +160,10 @@
                         <span v-else>Initiate Call</span>
                     </button>
                 </div>
-                <div class="flex p-1">
+                <div class="flex p-1 dark:bg-zinc-700 dark:border-zinc-600">
                     <div>
-                        <div>My Destination Hash</div>
-                        <div class="text-sm text-gray-700">{{ myAudioCallAddressHash || "Unknown" }}</div>
+                        <div class='dark:text-white'>My Destination Hash</div>
+                        <div class="text-sm text-gray-700 dark:text-zinc-100">{{ myAudioCallAddressHash || "Unknown" }}</div>
                     </div>
                     <div class="ml-auto my-auto mr-1">
                         <a @click="announce" href="javascript:void(0)" class="rounded-full">
@@ -181,8 +181,8 @@
             </div>
 
             <!-- active calls -->
-            <div v-if="activeAudioCalls.length > 0" class="border rounded-xl bg-white shadow w-full overflow-hidden">
-                <div class="flex border-b border-gray-300 text-gray-700 p-2">
+            <div v-if="activeAudioCalls.length > 0" class="border rounded-xl bg-white shadow w-full overflow-hidden  dark:bg-zinc-800 dark:border-zinc-700 dark:text-zinc-100">
+                <div class="flex border-b border-gray-300 text-gray-700 p-2 dark:text-zinc-100">
                     <div class="my-auto mr-2">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
@@ -204,7 +204,7 @@
                         </div>
                         <div>
                             <div>{{ audioCall.remote_destination_hash || "Unknown" }}</div>
-                            <div class="text-sm text-gray-500">
+                            <div class="text-sm text-gray-500 dark:text-zinc-100">
                                 <span v-if="audioCall.is_outbound">Outgoing Call...</span>
                                 <span v-else>Incoming Call...</span>
                             </div>
@@ -231,7 +231,7 @@
             </div>
 
             <!-- call history -->
-            <div v-if="inactiveAudioCalls.length > 0" class="border rounded-xl bg-white shadow w-full overflow-hidden">
+            <div v-if="inactiveAudioCalls.length > 0" class="border rounded-xl bg-white shadow w-full overflow-hidden dark:bg-zinc-800 dark:border-zinc-700 dark:text-zinc-100">
                 <div class="flex border-b border-gray-300 text-gray-700 p-2">
                     <div class="my-auto mr-2">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">