From 5ebd68ab82abe8665f21477eccb09ad2908085f3 Mon Sep 17 00:00:00 2001
From: RFnexus <v6z777@protonmail.com>
Date: Sat, 7 Dec 2024 13:27:20 -0500
Subject: [PATCH 1/2] Full Micron markdown and field support, dark mode

---
 meshchat.py                                   |  34 +-
 src/frontend/components/App.vue               |  95 +-
 src/frontend/components/SidebarLink.vue       |  13 +-
 .../interfaces/AddInterfacePage.vue           |  36 +-
 .../network-visualiser/NetworkVisualiser.vue  |  31 +-
 .../nomadnetwork/NomadNetworkPage.vue         | 220 +++--
 .../nomadnetwork/NomadNetworkSidebar.vue      |  47 +-
 .../components/settings/SettingsPage.vue      | 163 ++--
 .../public/assets/js/micron-parser.js         | 840 ++++++++++++++----
 9 files changed, 1068 insertions(+), 411 deletions(-)

diff --git a/meshchat.py b/meshchat.py
index 130b4ea..2d77fe2 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -1600,6 +1600,23 @@ def convert_nomadnet_string_data_to_map(self, path_data: str | None):
                 else:
                     print(f"unhandled field: {field}")
         return data
+    def convert_nomadnet_field_data_to_map(self, field_data):
+        data = {}
+        if field_data is not None or "{}":
+            try:
+                json_data = field_data 
+                if isinstance(json_data, dict):
+                    # add the prefixed keys to the result dictionary
+                    data = {f"field_{key}": value for key, value in json_data.items()}
+                else:
+                    return None
+            except Exception as e:
+                print(f"skipping invalid field data: {e}")
+        
+        return data
+
+
+
 
     # handle data received from websocket client
     async def on_websocket_data_received(self, client, data):
@@ -1675,7 +1692,9 @@ def on_file_download_progress(progress):
             # get data from websocket client
             destination_hash = data["nomadnet_page_download"]["destination_hash"]
             page_path = data["nomadnet_page_download"]["page_path"]
-
+            field_data = data["nomadnet_page_download"]["field_data"]
+       
+            combined_data = {}
             # parse data from page path
             # example: hash:/page/index.mu`field1=123|field2=456
             page_data = None
@@ -1685,9 +1704,20 @@ def on_file_download_progress(progress):
                 page_path_to_download = page_path_parts[0]
                 page_data = self.convert_nomadnet_string_data_to_map(page_path_parts[1])
 
+            # Field data
+            field_data = self.convert_nomadnet_field_data_to_map(field_data)
+
+            # Combine page data and field data
+            if page_data is not None:
+                combined_data.update(page_data)
+            if field_data is not None:
+                combined_data.update(field_data)
+
+
             # convert destination hash to bytes
             destination_hash = bytes.fromhex(destination_hash)
 
+
             # handle successful page download
             def on_page_download_success(page_content):
                 asyncio.run(client.send_str(json.dumps({
@@ -1727,7 +1757,7 @@ def on_page_download_progress(progress):
             # todo: handle page download progress
 
             # download the page
-            downloader = NomadnetPageDownloader(destination_hash, page_path_to_download, page_data, on_page_download_success, on_page_download_failure, on_page_download_progress)
+            downloader = NomadnetPageDownloader(destination_hash, page_path_to_download, combined_data, on_page_download_success, on_page_download_failure, on_page_download_progress)
             await downloader.download()
 
         # unhandled type
diff --git a/src/frontend/components/App.vue b/src/frontend/components/App.vue
index 04f9616..70b74ae 100644
--- a/src/frontend/components/App.vue
+++ b/src/frontend/components/App.vue
@@ -1,21 +1,24 @@
 <template>
-    <div class="h-screen w-full flex flex-col">
+    <div :class="{'dark': config?.dark_mode}" class="h-screen w-full flex flex-col">
 
         <!-- header -->
-        <div class="flex bg-white p-2 border-gray-300 border-b">
+        <div class="flex bg-white dark:bg-zinc-950 p-2 border-gray-300 dark:border-zinc-900 border-b">
             <div class="flex w-full">
-                <div class="hidden sm:flex my-auto border border-gray-300 rounded-md w-10 h-10 mr-3 shadow bg-gray-50">
+                <div class="hidden sm:flex my-auto border border-gray-300 dark:border-zinc-900 rounded-md w-10 h-10 mr-3 shadow bg-gray-50 dark:bg-zinc-900">
                     <div class="flex mx-auto my-auto">
-                        <img class="w-9 h-9" src="/assets/images/logo.png "/>
+                        <img class="w-9 h-9" src="/assets/images/logo.png" />
                     </div>
                 </div>
                 <div class="my-auto">
-                    <div @click="onAppNameClick" class="font-bold cursor-pointer">Reticulum MeshChat</div>
-                    <div class="text-sm">Developed by <a target="_blank" href="https://liamcottle.com" class="text-blue-500">Liam Cottle</a></div>
+                    <div @click="onAppNameClick" class="font-bold cursor-pointer text-gray-900 dark:text-zinc-100">Reticulum MeshChat</div>
+                    <div class="text-sm text-gray-700 dark:text-white">
+                        Developed by
+                        <a target="_blank" href="https://liamcottle.com" class="text-blue-500 dark:text-blue-400">Liam Cottle</a>
+                    </div>
                 </div>
                 <div class="flex my-auto ml-auto mr-0 sm:mr-2 space-x-1 sm:space-x-2">
                     <button @click="syncPropagationNode" type="button" class="rounded-full">
-                        <span class="flex text-gray-700 bg-gray-100 hover:bg-gray-200 px-2 py-1 rounded-full">
+                        <span class="flex text-gray-700 dark:text-white bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-600 px-2 py-1 rounded-full">
                             <span :class="{ 'animate-spin': isSyncingPropagationNode }">
                                 <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="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" />
@@ -25,7 +28,7 @@
                         </span>
                     </button>
                     <button @click="composeNewMessage" type="button" class="rounded-full">
-                        <span class="flex text-gray-700 bg-gray-100 hover:bg-gray-200 px-2 py-1 rounded-full">
+                        <span class="flex text-gray-700 dark:text-white bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-600 px-2 py-1 rounded-full">
                             <span>
                                 <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.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
@@ -42,8 +45,8 @@
         <div ref="middle" class="flex h-full w-full overflow-auto">
 
             <!-- sidebar -->
-            <div class="bg-white flex w-72 min-w-72 flex-col">
-                <div class="flex grow flex-col overflow-y-auto border-r border-gray-200 bg-white">
+            <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">
 
                     <!-- navigation -->
                     <div class="flex-1">
@@ -53,7 +56,7 @@
                             <li>
                                 <SidebarLink :to="{ name: 'messages' }">
                                     <template v-slot:icon>
-                                        <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:texwhite">
                                             <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>
                                     </template>
@@ -131,53 +134,81 @@
                     <div>
 
                         <!-- my identity -->
-                        <div v-if="config" class="bg-white border-t">
+                        <div v-if="config" class="bg-white border-t dark:bg-zinc-950">
                             <div @click="isShowingMyIdentitySection = !isShowingMyIdentitySection" class="flex text-gray-700 p-2 cursor-pointer">
-                                <div class="my-auto mr-2">
+                                <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">
                                         <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                                     </svg>
                                 </div>
-                                <div class="my-auto">My Identity</div>
+                                <div class="my-auto dark:text-white">My Identity</div>
                                 <div class="ml-auto">
-                                    <button @click.stop="saveIdentitySettings" 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.stop="saveIdentitySettings" 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 
+           dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-500">
                                         Save
                                     </button>
                                 </div>
                             </div>
-                            <div v-if="isShowingMyIdentitySection" class="divide-y text-gray-900 border-t border-gray-300">
+                            <div v-if="isShowingMyIdentitySection" class="divide-y text-gray-900 border-t border-gray-300 dark:text-zinc-200 dark:border-zinc-700">
                                 <div class="p-1">
-                                    <input v-model="displayName" type="text" placeholder="Display Name" 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">
+                                    <input 
+                                        v-model="displayName" 
+                                        type="text" 
+                                        placeholder="Display Name" 
+                                        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-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>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>
                         </div>
 
                         <!-- auto announce -->
-                        <div v-if="config" class="bg-white border-t">
-                            <div @click="isShowingAnnounceSection = !isShowingAnnounceSection" class="flex text-gray-700 p-2 cursor-pointer">
+                        <div v-if="config" class="bg-white border-t dark:bg-zinc-950 dark:border-zinc-700">
+                            <div @click="isShowingAnnounceSection = !isShowingAnnounceSection" class="flex text-gray-700 p-2 cursor-pointer 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="size-6">
-                                        <path stroke-linecap="round" stroke-linejoin="round" d="M9.348 14.652a3.75 3.75 0 0 1 0-5.304m5.304 0a3.75 3.75 0 0 1 0 5.304m-7.425 2.121a6.75 6.75 0 0 1 0-9.546m9.546 0a6.75 6.75 0 0 1 0 9.546M5.106 18.894c-3.808-3.807-3.808-9.98 0-13.788m13.788 0c3.808 3.807 3.808 9.98 0 13.788M12 12h.008v.008H12V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
+                                    <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.348 14.652a3.75 3.75 0 0 1 0-5.304m5.304 0a3.75 3.75 0 0 1 0 5.304m-7.425 2.121a6.75 6.75 0 0 1 0-9.546m9.546 0a6.75 6.75 0 0 1 0 9.546M5.106 18.894c-3.808-3.807-3.808-9.98 0-13.788m13.788 0c3.808 3.807 3.808 9.98 0 13.788M12 12h.008v.008H12V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" 
+                                        />
                                     </svg>
                                 </div>
                                 <div class="my-auto">Announce</div>
                                 <div class="ml-auto">
-                                    <button @click.stop="sendAnnounce" 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.stop="sendAnnounce" 
+                                        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 
+                                               dark:bg-zinc-800 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-500"
+                                    >
                                         Announce Now
                                     </button>
                                 </div>
                             </div>
-                            <div v-if="isShowingAnnounceSection" class="divide-y text-gray-900 border-t border-gray-300">
+                            <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">
-                                    <select v-model="config.auto_announce_interval_seconds" @change="onAnnounceIntervalSecondsChange" 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">
+                                    <select 
+                                        v-model="config.auto_announce_interval_seconds" 
+                                        @change="onAnnounceIntervalSecondsChange" 
+                                        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-800 dark:border-zinc-600 dark:text-zinc-200 dark:focus:ring-blue-400 dark:focus:border-blue-400"
+                                    >
                                         <option value="0">Disabled</option>
                                         <option value="900">Every 15 Minutes</option>
                                         <option value="1800">Every 30 Minutes</option>
@@ -187,7 +218,7 @@
                                         <option value="43200">Every 12 Hours</option>
                                         <option value="86400">Every 24 Hours</option>
                                     </select>
-                                    <div class="text-sm text-gray-700">
+                                    <div class="text-sm text-gray-700 dark:text-zinc-100">
                                         <span v-if="config.last_announced_at">Last announced: {{ formatSecondsAgo(config.last_announced_at) }}</span>
                                         <span v-else>Last announced: Never</span>
                                     </div>
@@ -196,16 +227,18 @@
                         </div>
 
                         <!-- audio calls -->
-                        <div v-if="config" class="bg-white border-t">
+                        <div v-if="config" class="bg-white border-t dark:bg-zinc-950">
                             <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">
                                         <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">Calls</div>
+                                <div class="my-auto dark:text-white">Calls</div>
                                 <div class="ml-auto">
-                                    <a @click.stop href="../call.html" target="_blank" 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 @click.stop href="../call.html" target="_blank" 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 
+dark:bg-zinc-800 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-500
+">
                                         <span>Open Phone</span>
                                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
                                             <path fill-rule="evenodd" d="M4.25 5.5a.75.75 0 0 0-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 0 0 .75-.75v-4a.75.75 0 0 1 1.5 0v4A2.25 2.25 0 0 1 12.75 17h-8.5A2.25 2.25 0 0 1 2 14.75v-8.5A2.25 2.25 0 0 1 4.25 4h5a.75.75 0 0 1 0 1.5h-5Z" clip-rule="evenodd" />
@@ -256,10 +289,10 @@
             <RouterView/>
 
         </div>
-
     </div>
 </template>
 
+
 <script>
 import SidebarLink from "./SidebarLink.vue";
 import DialogUtils from "../js/DialogUtils";
diff --git a/src/frontend/components/SidebarLink.vue b/src/frontend/components/SidebarLink.vue
index 6d3019a..50e0dc8 100644
--- a/src/frontend/components/SidebarLink.vue
+++ b/src/frontend/components/SidebarLink.vue
@@ -1,6 +1,16 @@
 <template>
     <RouterLink :to="to" v-slot="{ href, route, navigate, isActive, isExactActive }" custom>
-        <a :href="href" @click="handleNavigate($event, navigate)" type="button" :class="[ isExactActive ? 'bg-blue-100 text-blue-800 group:text-blue-800' : 'hover:bg-gray-100']" class="w-full text-gray-800 group flex gap-x-3 rounded-r-full p-2 mr-2 text-sm leading-6 font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">
+        <a 
+            :href="href" 
+            @click="handleNavigate($event, navigate)" 
+            type="button" 
+            :class="[ 
+                isExactActive 
+                    ? 'bg-blue-100 text-blue-800 group:text-blue-800 dark:bg-zinc-800 dark:text-blue-300' 
+                    : 'hover:bg-gray-100 dark:hover:bg-zinc-700'
+            ]" 
+            class="w-full text-gray-800 dark:text-zinc-200 group flex gap-x-3 rounded-r-full p-2 mr-2 text-sm leading-6 font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:focus-visible:outline-zinc-500"
+        >
             <span class="my-auto">
                 <slot name="icon"></slot>
             </span>
@@ -11,6 +21,7 @@
     </RouterLink>
 </template>
 
+
 <script>
 export default {
     name: 'SidebarLink',
diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index 6130cfd..cbd1c9e 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -1,13 +1,13 @@
 <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">
 
             <!-- community interfaces -->
-            <div v-if="!isEditingInterface && config != null && config.show_suggested_community_interfaces" class="bg-white rounded shadow divide-y divide-gray-200">
+            <div v-if="!isEditingInterface && config != null && config.show_suggested_community_interfaces" class="bg-white rounded shadow divide-y divide-gray-200 dark:bg-zinc-900">
                 <div class="flex p-2">
                     <div class="my-auto mr-auto">
-                        <div class="font-bold">Community Interfaces</div>
-                        <div class="text-sm">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 class="font-bold dark:text-white">Community Interfaces</div>
+                        <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">
@@ -17,7 +17,7 @@
                         </button>
                     </div>
                 </div>
-                <div class="divide-y divide-gray-200">
+                <div class="divide-y divide-gray-200 dark:text-white">
 
                     <div class="flex px-2 py-1">
                         <div class="my-auto mr-auto">
@@ -64,7 +64,7 @@
                     <!-- interface type -->
                     <div class="mb-2">
                         <label class="block mb-2 text-sm font-medium text-gray-900">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">
+                        <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>
                             <option value="RNodeInterface">RNodeInterface</option>
@@ -80,43 +80,43 @@
                     <!-- 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">
+                        <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">
                     </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">
+                        <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">
                     </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">
+                        <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">
                     </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">
+                        <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">
                     </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">
+                        <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">
                     </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">
+                        <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">
                     </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">
+                        <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">
                             <option v-for="comport of comports" :value="comport.device">{{ comport.device }} (Product: {{ comport.product ?? '?' }}, Serial: {{ comport.serial ?? '?' }})</option>
                         </select>
                     </div>
@@ -124,14 +124,14 @@
                     <!-- 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">
+                        <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">
                         <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">
+                        <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">
                             <option v-for="bandwidth in RNodeInterfaceDefaults.bandwidths" :value="bandwidth">{{ bandwidth / 1000 }} KHz</option>
                         </select>
                     </div>
@@ -145,7 +145,7 @@
                     <!-- 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">
+                        <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">
                             <option v-for="spreadingfactor in RNodeInterfaceDefaults.spreadingfactors" :value="spreadingfactor">{{ spreadingfactor }}</option>
                         </select>
                     </div>
@@ -153,13 +153,13 @@
                     <!-- 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">
+                        <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">
                             <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">
+                    <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">
                         <span v-if="isEditingInterface">Save Interface</span>
                         <span v-else>Add Interface</span>
                     </button>
diff --git a/src/frontend/components/network-visualiser/NetworkVisualiser.vue b/src/frontend/components/network-visualiser/NetworkVisualiser.vue
index e6af05d..6c203f9 100644
--- a/src/frontend/components/network-visualiser/NetworkVisualiser.vue
+++ b/src/frontend/components/network-visualiser/NetworkVisualiser.vue
@@ -1,39 +1,44 @@
 <template>
     <div class="flex-1 h-full min-w-full sm:min-w-[500px] relative">
-
         <!-- network -->
         <div id="network" class="w-full h-full"></div>
-
         <!-- controls -->
-        <div class="absolute flex bottom-0 left-0 bg-gray-100 p-2">
-            <div class="bg-white rounded shadow min-w-52">
-                <div @click="isShowingControls = !isShowingControls" class="flex text-gray-700 p-2 cursor-pointer">
+        <div class="absolute flex bottom-0 left-0 bg-gray-100 dark:bg-zinc-900 p-2">
+            <div class="bg-white dark:bg-zinc-800 rounded shadow min-w-52">
+                <div @click="isShowingControls = !isShowingControls" class="flex text-gray-700 dark:text-gray-300 p-2 cursor-pointer">
                     <div class="my-auto">Reticulum Network</div>
                     <div class="flex ml-auto">
-                        <button @click.stop="update" type="button" class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-1 py-0.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">
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+                        <button 
+                            @click.stop="update" 
+                            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">
                                 <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>
                     </div>
                 </div>
-                <div v-if="isShowingControls" class="divide-y text-gray-900 border-t border-gray-300">
+                <div v-if="isShowingControls" class="divide-y dark:divide-zinc-700 text-gray-900 dark:text-white border-t border-gray-300 dark:border-zinc-700">
                     <div class="px-1 py-2">
                         <div class="flex items-start">
                             <div class="flex items-center h-5">
-                                <input v-model="autoReload" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300">
+                                <input 
+                                    v-model="autoReload" 
+                                    type="checkbox" 
+                                    class="w-4 h-4 border border-gray-300 dark:border-zinc-600 rounded bg-gray-50 dark:bg-zinc-900 focus:ring-3 focus:ring-blue-300 dark:focus:ring-blue-800"
+                                >
                             </div>
-                            <label class="ml-2 text-sm font-medium text-gray-900">Auto Update (5 sec)</label>
+                            <label class="ml-2 text-sm font-medium text-gray-900 dark:text-white">Auto Update (5 sec)</label>
                         </div>
                     </div>
                     <div class="p-1">
-                        <div>Interfaces</div>
-                        <div class="text-sm text-gray-700">{{ onlineInterfaces.length }} Online, {{ offlineInterfaces.length }} Offline</div>
+                        <div class="text-black dark:text-white">Interfaces</div>
+                        <div class="text-sm text-gray-700 dark:text-gray-300">{{ onlineInterfaces.length }} Online, {{ offlineInterfaces.length }} Offline</div>
                     </div>
                 </div>
             </div>
         </div>
-
     </div>
 </template>
 
diff --git a/src/frontend/components/nomadnetwork/NomadNetworkPage.vue b/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
index 771807d..397d5d0 100644
--- a/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
+++ b/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
@@ -6,101 +6,95 @@
         :selected-destination-hash="selectedNode?.destination_hash"
         @node-click="onNodeClick"/>
 
-    <div class="flex flex-col flex-1 overflow-hidden min-w-full sm:min-w-[500px]">
-
-        <!-- node -->
-        <div v-if="selectedNode" class="flex flex-col h-full bg-white overflow-hidden sm:m-2 sm:border sm:rounded-xl sm:shadow">
-
-            <!-- header -->
-            <div class="flex p-2 border-b border-gray-300">
-
-                <!-- node info -->
-                <div class="my-auto">
-                    <span class="font-semibold">{{ selectedNode.display_name }}</span>
-                    <span v-if="selectedNodePath" @click="onDestinationPathClick(selectedNodePath)" class="text-sm cursor-pointer"> - {{ selectedNodePath.hops }} {{ selectedNodePath.hops === 1 ? 'hop' : 'hops' }} away</span>
-                </div>
+   <div class="flex flex-col flex-1 overflow-hidden min-w-full sm:min-w-[500px] dark:bg-zinc-950">
+    <!-- node -->
+    <div v-if="selectedNode" class="flex flex-col h-full bg-white dark:bg-zinc-950 overflow-hidden sm:m-2 sm:border dark:border-zinc-800 sm:rounded-xl sm:shadow dark:shadow-zinc-900">
+        <!-- header -->
+        <div class="flex p-2 border-b border-gray-300 dark:border-zinc-800">
+            <!-- node info -->
+            <div class="my-auto dark:text-gray-100">
+                <span class="font-semibold">{{ selectedNode.display_name }}</span>
+                <span v-if="selectedNodePath" @click="onDestinationPathClick(selectedNodePath)" class="text-sm cursor-pointer"> - {{ selectedNodePath.hops }} {{ selectedNodePath.hops === 1 ? 'hop' : 'hops' }} away</span>
+            </div>
 
-                <!-- close button -->
-                <div class="my-auto ml-auto mr-2">
-                    <div @click="selectedNode = null" class="cursor-pointer">
-                        <div class="flex text-gray-700 bg-gray-100 hover:bg-gray-200 p-1 rounded-full">
-                            <div>
-                                <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>
-                            </div>
+            <!-- close button -->
+            <div class="my-auto ml-auto mr-2">
+                <div @click="selectedNode = null" class="cursor-pointer">
+                    <div class="flex text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 p-1 rounded-full">
+                        <div>
+                            <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>
                         </div>
                     </div>
                 </div>
-
-            </div>
-
-            <!-- browser navigation -->
-            <div class="flex w-full border-gray-300 border-b p-2">
-                <button @click="loadNodePage(selectedNode.destination_hash, '/page/index.mu')" type="button" class="my-auto text-gray-500 bg-gray-200 hover:bg-gray-300 rounded p-1 cursor-pointer">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
-                        <path fill-rule="evenodd" d="M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707l7-7Z" clip-rule="evenodd" />
-                    </svg>
-                </button>
-                <button @click="reloadNodePage" type="button" class="ml-1 my-auto text-gray-500 bg-gray-200 hover:bg-gray-300 rounded p-1 cursor-pointer">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
-                        <path fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z" clip-rule="evenodd" />
-                    </svg>
-                </button>
-                <button @click="loadPreviousNodePage" type="button" :disabled="nodePagePathHistory.length === 0" :class="[ nodePagePathHistory.length > 0 ? 'text-gray-500 bg-gray-200 hover:bg-gray-300' : 'text-gray-400 bg-gray-100']" class="ml-1 my-auto rounded p-1 cursor-pointer">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
-                        <path fill-rule="evenodd" d="M17 10a.75.75 0 0 1-.75.75H5.612l4.158 3.96a.75.75 0 1 1-1.04 1.08l-5.5-5.25a.75.75 0 0 1 0-1.08l5.5-5.25a.75.75 0 1 1 1.04 1.08L5.612 9.25H16.25A.75.75 0 0 1 17 10Z" clip-rule="evenodd" />
-                    </svg>
-                </button>
-                <div class="my-auto mx-2 w-full">
-                    <input v-model="nodePagePathUrlInput" @keyup.enter="onNodePageUrlClick(nodePagePathUrlInput)" type="text" placeholder="Enter Destination URL" 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 px-2.5 py-1.5">
-                </div>
-                <button @click="onNodePageUrlClick(nodePagePathUrlInput)" type="button" class="my-auto text-gray-500 bg-gray-200 hover:bg-gray-300 rounded p-1 cursor-pointer">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
-                        <path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd" />
-                    </svg>
-                </button>
             </div>
+        </div>
 
-            <!-- page content -->
-            <div class="h-full overflow-y-scroll p-3 bg-black text-white">
-                <div class="flex" v-if="isLoadingNodePage">
-                    <div class="my-auto">
-                        <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                        </svg>
-                    </div>
-                    <div class="my-auto">Loading {{ nodePageProgress }}%</div>
-                </div>
-                <pre v-else v-html="nodePageContent" class="h-full text-wrap"></pre>
+        <!-- browser navigation -->
+        <div class="flex w-full border-gray-300 dark:border-zinc-800 border-b p-2">
+            <button @click="loadNodePage(selectedNode.destination_hash, '/page/index.mu')" type="button" class="my-auto text-gray-500 dark:text-gray-300 bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded p-1 cursor-pointer">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+                    <path fill-rule="evenodd" d="M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707l7-7Z" clip-rule="evenodd" />
+                </svg>
+            </button>
+            <button @click="reloadNodePage" type="button" class="ml-1 my-auto text-gray-500 dark:text-gray-300 bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded p-1 cursor-pointer">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+                    <path fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z" clip-rule="evenodd" />
+                </svg>
+            </button>
+            <button @click="loadPreviousNodePage" type="button" :disabled="nodePagePathHistory.length === 0" :class="[ nodePagePathHistory.length > 0 ? 'text-gray-500 dark:text-gray-300 bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700' : 'text-gray-400 dark:text-gray-500 bg-gray-100 dark:bg-zinc-900']" class="ml-1 my-auto rounded p-1 cursor-pointer">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+                    <path fill-rule="evenodd" d="M17 10a.75.75 0 0 1-.75.75H5.612l4.158 3.96a.75.75 0 1 1-1.04 1.08l-5.5-5.25a.75.75 0 0 1 0-1.08l5.5-5.25a.75.75 0 1 1 1.04 1.08L5.612 9.25H16.25A.75.75 0 0 1 17 10Z" clip-rule="evenodd" />
+                </svg>
+            </button>
+            <div class="my-auto mx-2 w-full">
+                <input v-model="nodePagePathUrlInput" @keyup.enter="onNodePageUrlClick(nodePagePathUrlInput)" type="text" placeholder="Enter Destination URL" class="bg-gray-50 dark:bg-zinc-900 border border-gray-300 dark:border-zinc-700 text-gray-900 dark:text-gray-100 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full px-2.5 py-1.5 dark:placeholder-gray-400">
             </div>
+            <button @click="onNodePageUrlClick(nodePagePathUrlInput)" type="button" class="my-auto text-gray-500 dark:text-gray-300 bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded p-1 cursor-pointer">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+                    <path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd" />
+                </svg>
+            </button>
+        </div>
 
-            <!-- file download bottom bar -->
-            <div v-if="isDownloadingNodeFile" class="flex w-full border-gray-300 border-t p-2">
-                <div class="my-auto mr-2">
-                    <svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+        <!-- page content -->
+        <div class="h-full overflow-y-scroll p-3 bg-black text-white nodeContainer">
+            <div class="flex" v-if="isLoadingNodePage">
+                <div class="my-auto">
+                    <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                         <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                     </svg>
                 </div>
-                <div class="my-auto">Downloading: {{ nodeFilePath }} ({{ nodeFileProgress }}%)</div>
+                <div class="my-auto">Loading {{ nodePageProgress }}%</div>
             </div>
-
+            <pre v-else v-html="nodePageContent" class="h-full text-wrap"></pre>
         </div>
 
-        <!-- no node 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">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" />
+        <!-- file download bottom bar -->
+        <div v-if="isDownloadingNodeFile" class="flex w-full border-gray-300 dark:border-zinc-800 border-t p-2 dark:text-gray-100">
+            <div class="my-auto mr-2">
+                <svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                 </svg>
             </div>
-            <div class="font-semibold">No Active Node</div>
-            <div>Select a Node to start browsing!</div>
+            <div class="my-auto">Downloading: {{ nodeFilePath }} ({{ nodeFileProgress }}%)</div>
         </div>
+    </div>
 
+    <!-- no node selected -->
+    <div v-else class="flex flex-col mx-auto my-auto text-center leading-5 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 dark:text-gray-300">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" />
+            </svg>
+        </div>
+        <div class="font-semibold">No Active Node</div>
+        <div>Select a Node to start browsing!</div>
     </div>
+</div>
 
 </template>
 
@@ -132,6 +126,7 @@ export default {
             nodePagePathHistory: [],
             nodePageCache: {},
 
+
             isDownloadingNodeFile: false,
             nodeFilePath: null,
             nodeFileProgress: 0,
@@ -151,8 +146,8 @@ export default {
         WebSocketConnection.on("message", this.onWebsocketMessage);
 
         // fixme: this is called by the micron-parser.js
-        window.onNodePageUrlClick = (url) => {
-            this.onNodePageUrlClick(url);
+        window.onNodePageUrlClick = (url, options = null) => {
+            this.onNodePageUrlClick(url, options);
         };
 
         this.getNomadnetworkNodeAnnounces();
@@ -270,7 +265,7 @@ export default {
         updateNodeFromAnnounce: function(announce) {
             this.nodes[announce.destination_hash] = announce;
         },
-        async loadNodePage(destinationHash, pagePath, addToHistory = true, loadFromCache = true) {
+        async loadNodePage(destinationHash, pagePath, fieldData = null, addToHistory = true, loadFromCache = true) {
 
             // get new sequence for this page load
             const seq = ++this.nodePageRequestSequence;
@@ -311,8 +306,10 @@ export default {
 
             }
 
-            this.downloadNomadNetPage(destinationHash, pagePath, (pageContent) => {
+            this.downloadNomadNetPage(destinationHash, pagePath, fieldData, (pageContent) => {
 
+                const muParser = new MicronParser;
+                
                 // do nothing if callback is for a previous request
                 if(seq !== this.nodePageRequestSequence){
                     console.log("ignoring page content callback for previous page request")
@@ -326,7 +323,7 @@ export default {
                 // convert micron to html if page ends with .mu extension
                 // otherwise, we will just serve the content as is
                 if(pagePathWithoutData.endsWith(".mu")){
-                    this.nodePageContent = MicronParser.convertMicronToHtml(pageContent);
+                    this.nodePageContent = muParser.convertMicronToHtml(pageContent);
                 } else {
                     this.nodePageContent = pageContent;
                 }
@@ -372,7 +369,7 @@ export default {
         async reloadNodePage() {
 
             // reload current node page without adding to history and without using cache
-            this.onNodePageUrlClick(this.nodePagePath, false, false);
+            this.onNodePageUrlClick(this.nodePagePath, null, null, false, false);
 
         },
         async loadPreviousNodePage() {
@@ -384,7 +381,7 @@ export default {
             }
 
             // load the page
-            this.onNodePageUrlClick(previousNodePagePath, false);
+            this.onNodePageUrlClick(previousNodePagePath, null, null, false);
 
         },
         parseNomadnetworkUrl: function(url) {
@@ -435,7 +432,59 @@ export default {
             return null;
 
         },
-        async onNodePageUrlClick(url, addToHistory = true, useCache = true) {
+        async onNodePageUrlClick(url, options = null, addToHistory = true, useCache = true) {
+
+            let fieldData = [];
+
+            if (options === "*") {
+                useCache = false; // we want to send another request with the field data
+                const inputs = document.querySelectorAll('.nodeContainer input');
+
+                const inputValues = {};
+
+                inputs.forEach(input => {
+                    if (input.type === 'radio' || input.type === 'checkbox') {
+                        // Only add if the input is checked
+                        if (input.checked) {
+                            inputValues[input.name] = input.value;
+                        }
+                    } else {
+                        // For other input types, just get the value
+                        inputValues[input.name || input.id || input.type] = input.value;
+                    }
+                });
+
+                fieldData = inputValues;
+            } else if (options !== null && options !== "") {
+                useCache = false; 
+                // split options into an array of names
+                const validNames = options.split('|');
+
+                // Select inputs within the container
+                const inputs = document.querySelectorAll('.nodeContainer input');
+
+                const inputValues = {};
+
+                // Filter inputs by name and handle their values
+                inputs.forEach(input => {
+                    if (validNames.includes(input.name)) {
+                        if (input.type === 'radio' || input.type === 'checkbox') {
+                            // Only add if the input is checked
+                            if (input.checked) {
+                                inputValues[input.name] = input.value;
+                            }
+                        } else {
+                            // For other input types, just get the value
+                            inputValues[input.name] = input.value;
+                        }
+                    }
+                });
+
+                fieldData = inputValues;
+            }
+
+            console.log(fieldData);
+
 
             // open http urls in new tab
             if(url.startsWith("http://") || url.startsWith("https://")){
@@ -506,7 +555,7 @@ export default {
                 };
 
                 // navigate to node page
-                this.loadNodePage(destinationHash, parsedUrl.path, addToHistory, useCache);
+                this.loadNodePage(destinationHash, parsedUrl.path, fieldData, addToHistory, useCache);
                 return;
 
             }
@@ -597,7 +646,7 @@ export default {
                 console.error(e);
             }
         },
-        downloadNomadNetPage(destinationHash, pagePath, onSuccessCallback, onFailureCallback, onProgressCallback) {
+        downloadNomadNetPage(destinationHash, pagePath, fieldData, onSuccessCallback, onFailureCallback, onProgressCallback) {
             try {
 
                 // set callbacks for nomadnet page download
@@ -613,6 +662,7 @@ export default {
                     "nomadnet_page_download": {
                         "destination_hash": destinationHash,
                         "page_path": pagePath,
+                        "field_data": fieldData,
                     },
                 }));
 
diff --git a/src/frontend/components/nomadnetwork/NomadNetworkSidebar.vue b/src/frontend/components/nomadnetwork/NomadNetworkSidebar.vue
index a48400f..7276ed2 100644
--- a/src/frontend/components/nomadnetwork/NomadNetworkSidebar.vue
+++ b/src/frontend/components/nomadnetwork/NomadNetworkSidebar.vue
@@ -1,57 +1,64 @@
 <template>
     <div class="flex flex-col w-80 min-w-80">
-        <div class="flex-1 flex flex-col bg-white border-r overflow-hidden">
-
+        <div class="flex-1 flex flex-col bg-white dark:bg-zinc-950 border-r dark:border-zinc-800 overflow-hidden">
             <!-- search -->
-            <div v-if="nodesCount > 0" class="p-1 border-b border-gray-300">
-                <input v-model="nodesSearchTerm" type="text" :placeholder="`Search ${nodesCount} Nodes...`" 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="nodesCount > 0" class="p-1 border-b border-gray-300 dark:border-zinc-800">
+                <input 
+                    v-model="nodesSearchTerm" 
+                    type="text" 
+                    :placeholder="`Search ${nodesCount} Nodes...`" 
+                    class="bg-gray-50 dark:bg-zinc-900 border border-gray-300 dark:border-zinc-700 text-gray-900 dark:text-gray-100 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:placeholder-gray-400"
+                >
             </div>
-
             <!-- nodes -->
             <div class="flex h-full overflow-y-auto">
                 <div v-if="searchedNodes.length > 0" class="w-full">
-                    <div @click="onNodeClick(node)" v-for="node of searchedNodes" class="flex cursor-pointer p-2 border-l-2" :class="[ node.destination_hash === selectedDestinationHash ? 'bg-gray-100 border-blue-500' : 'bg-white border-transparent hover:bg-gray-50 hover:border-gray-200' ]">
+                    <div 
+                        @click="onNodeClick(node)" 
+                        v-for="node of searchedNodes" 
+                        class="flex cursor-pointer p-2 border-l-2" 
+                        :class="[ 
+                            node.destination_hash === selectedDestinationHash 
+                                ? 'bg-gray-100 dark:bg-zinc-800 border-blue-500' 
+                                : 'bg-white dark:bg-zinc-950 border-transparent hover:bg-gray-50 dark:hover:bg-zinc-900 hover:border-gray-200 dark:hover:border-zinc-700' 
+                        ]"
+                    >
                         <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-800 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="M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 0 6h13.5a3 3 0 1 0 0-6m-16.5-3a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3m-19.5 0a4.5 4.5 0 0 1 .9-2.7L5.737 5.1a3.375 3.375 0 0 1 2.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 0 1 .9 2.7m0 0a3 3 0 0 1-3 3m0 3h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Zm-3 6h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Z" />
                                 </svg>
                             </div>
                         </div>
                         <div>
-                            <div class="text-gray-900">{{ node.display_name }}</div>
-                            <div class="text-gray-500 text-sm">{{ formatTimeAgo(node.updated_at) }}</div>
+                            <div class="text-gray-900 dark:text-gray-100">{{ node.display_name }}</div>
+                            <div class="text-gray-500 dark:text-gray-400 text-sm">{{ formatTimeAgo(node.updated_at) }}</div>
                         </div>
                     </div>
                 </div>
                 <div v-else class="mx-auto my-auto text-center leading-5">
-
                     <!-- no nodes at all -->
                     <div v-if="nodesCount === 0" class="flex flex-col">
                         <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">
+                            <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 text-gray-500 dark:text-gray-400">
                                 <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" />
                             </svg>
                         </div>
-                        <div class="font-semibold">No Nodes Discovered</div>
-                        <div>Waiting for a node to announce!</div>
+                        <div class="font-semibold text-gray-900 dark:text-gray-100">No Nodes Discovered</div>
+                        <div class="text-gray-500 dark:text-gray-400">Waiting for a node to announce!</div>
                     </div>
-
                     <!-- is searching, but no results -->
                     <div v-if="nodesSearchTerm !== '' && nodesCount > 0" class="flex flex-col">
                         <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">
+                            <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 text-gray-500 dark:text-gray-400">
                                 <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" />
                             </svg>
                         </div>
-                        <div class="font-semibold">No Search Results</div>
-                        <div>Your search didn't match any Nodes!</div>
+                        <div class="font-semibold text-gray-900 dark:text-gray-100">No Search Results</div>
+                        <div class="text-gray-500 dark:text-gray-400">Your search didn't match any Nodes!</div>
                     </div>
-
-
                 </div>
             </div>
-
         </div>
     </div>
 </template>
diff --git a/src/frontend/components/settings/SettingsPage.vue b/src/frontend/components/settings/SettingsPage.vue
index 0864099..648d791 100644
--- a/src/frontend/components/settings/SettingsPage.vue
+++ b/src/frontend/components/settings/SettingsPage.vue
@@ -1,77 +1,118 @@
 <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">
 
-            <!-- interfaces -->
-            <div class="bg-white rounded shadow">
-                <div class="flex border-b border-gray-300 text-gray-700 p-2 font-semibold">Interfaces</div>
-                <div class="divide-y text-gray-900">
-
+            <!-- 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">
                     <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">
+                                <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"
+                                >
                             </div>
-                            <label class="ml-2 text-sm font-medium text-gray-900">Show Community Interfaces</label>
+                            <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
                         </div>
-                        <div class="text-sm text-gray-700">When enabled, community interfaces will be shown on the Add Interface page.</div>
                     </div>
-
                 </div>
             </div>
 
-            <!-- messages -->
-            <div class="bg-white rounded shadow">
-                <div class="flex border-b border-gray-300 text-gray-700 p-2 font-semibold">Messages</div>
-                <div class="divide-y text-gray-900">
-
+            <!-- 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">
                     <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">
+                                <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"
+                                >
                             </div>
-                            <label class="ml-2 text-sm font-medium text-gray-900">Auto resend</label>
+                            <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.
                         </div>
-                        <div class="text-sm text-gray-700">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.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">
+                                <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"
+                                >
                             </div>
-                            <label class="ml-2 text-sm font-medium text-gray-900">Allow resending with attachments</label>
+                            <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.
                         </div>
-                        <div class="text-sm text-gray-700">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.auto_send_failed_messages_to_propagation_node" @change="onAutoSendFailedMessagesToPropagationNodeChange" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300">
+                                <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"
+                                >
                             </div>
-                            <label class="ml-2 text-sm font-medium text-gray-900">Auto send to propagation node</label>
+                            <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.
                         </div>
-                        <div class="text-sm text-gray-700">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">
-                <div class="flex border-b border-gray-300 text-gray-700 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 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">
-                            Browse Nodes
-                        </RouterLink>
-                    </div>
+            <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>
-                <div class="divide-y text-gray-900">
-
+                <div class="divide-y text-gray-900 dark:divide-zinc-800 dark:text-zinc-200">
                     <div class="p-2">
-                        <div class="text-sm text-gray-700">
+                        <div class="text-sm text-gray-700 dark:text-zinc-400">
                             <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>
@@ -81,48 +122,6 @@
                             </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 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300">
-                            </div>
-                            <label class="ml-2 text-sm font-medium text-gray-900">Local Propagation Node</label>
-                        </div>
-                        <div class="text-sm text-gray-700">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 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>
-                    </div>
-
-                    <div class="p-2">
-                        <div class="text-sm font-medium text-gray-900">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 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>
-                        <div class="text-sm text-gray-700">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">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 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">
-                                <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">
-                            <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>
 
@@ -130,6 +129,7 @@
     </div>
 </template>
 
+
 <script>
 import Utils from "../../js/Utils";
 import WebSocketConnection from "../../js/WebSocketConnection";
@@ -210,6 +210,11 @@ 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 3fea037..71ab50b 100644
--- a/src/frontend/public/assets/js/micron-parser.js
+++ b/src/frontend/public/assets/js/micron-parser.js
@@ -1,196 +1,712 @@
+/*
+Micron Parser JavaScript implementation
+micron-parser.js is based on MicronParser.py from NomadNet:  https://raw.githubusercontent.com/markqvist/NomadNet/refs/heads/master/nomadnet/ui/textui/MicronParser.py
+Documentation for the Micron markdown format can be found here: https://raw.githubusercontent.com/markqvist/NomadNet/refs/heads/master/nomadnet/ui/textui/Guide.py
+*/
 class MicronParser {
+    constructor(darkTheme = true) {
+        this.darkTheme = darkTheme;
+        this.DEFAULT_FG_DARK  = "ddd";
+        this.DEFAULT_FG_LIGHT = "222";
+        this.DEFAULT_BG = "default";
 
-    /**
-     * Set a custom scheme for urls set on html links.
-     * This just makes the browser show a pretty url when hovering links, but in the future, I may implement url
-     * interception, rather than using an onclick script on the link element itself.
-     */
+        this.SELECTED_STYLES = null;
+
+        this.STYLES_DARK = {
+            "plain":    { fg: this.DEFAULT_FG_DARK, bg: this.DEFAULT_BG, bold: false, underline: false, italic: false },
+            "heading1": { fg: "222", bg: "bbb", bold: false, underline: false, italic: false },
+            "heading2": { fg: "111", bg: "999", bold: false, underline: false, italic: false },
+            "heading3": { fg: "000", bg: "777", bold: false, underline: false, italic: false }
+        };
+
+        this.STYLES_LIGHT = {
+            "plain":    { fg: this.DEFAULT_FG_LIGHT, bg: this.DEFAULT_BG, bold: false, underline: false, italic: false },
+            "heading1": { fg: "000", bg: "777", bold: false, underline: false, italic: false },
+            "heading2": { fg: "111", bg: "aaa", bold: false, underline: false, italic: false },
+            "heading3": { fg: "222", bg: "ccc", bold: false, underline: false, italic: false }
+        };
+
+        if (this.darkTheme) {
+            this.SELECTED_STYLES = this.STYLES_DARK;
+        } else {
+            this.SELECTED_STYLES = this.STYLES_LIGHT;
+        }
+    }
     static formatNomadnetworkUrl(url) {
         return `nomadnetwork://${url}`;
     }
+    /// String
+    convertMicronToHtml(markup) {
+        let html = ""; 
 
-    /**
-     * Converts micron markup to html.
-     * FIXME: make sure you can't inject javascript into Reticulum MeshChat browser from micron page content!
-     *
-     * Known URL Examples:
-     * - :
-     * - :/page/index.mu
-     * - :/page/somefolder/somefile.mu
-     * - :/file/somefile.ext
-     * - 00000000000000000000000000000000
-     * - 00000000000000000000000000000000:/page/index.mu
-     * - 00000000000000000000000000000000:/page/somefolder/somefile.mu
-     * - 00000000000000000000000000000000:/file/somefile.ext
-     * - lxmf@00000000000000000000000000000000
-     *
-     * References:
-     * - https://github.com/markqvist/NomadNet/blob/6a4f2026249b22a00f6ff98c12d06fd5b160a90d/nomadnet/ui/textui/MicronParser.py
-     */
-    static convertMicronToHtml(markup) {
-
-        console.log(markup);
-
-        // split by line
-        var lines = markup.split("\n");
-
-        // parse each line
-        lines = lines.map((line) => {
-
-            // skip comments
-            if(line.startsWith("#")){
-                return null;
+        let state = {
+            literal: false,
+            depth: 0,
+            fg_color: this.SELECTED_STYLES.plain.fg,
+            bg_color: this.DEFAULT_BG,
+            formatting: {
+                bold: false,
+                underline: false,
+                italic: false,
+                strikethrough: false
+            },
+            default_align: "left",
+            align: "left",
+            radio_groups: {}
+        };
+
+        const lines = markup.split("\n");
+
+        for (let line of lines) {
+            const lineOutput = this.parseLine(line, state);
+            if (lineOutput && lineOutput.length > 0) {
+                for (let el of lineOutput) {
+                    html += el.outerHTML; 
+                }
+            } else {
+                html += "<br>"; 
             }
+        }
+
+        return html; 
+    }
+    /// DOM Fragment
+    parseToHtml(markup) {
+        // Create a fragment to hold all the Micron output
+        const fragment = document.createDocumentFragment();
 
-            // skip section heading reset
-            // FIXME: implement
-            if(line === "<"){
+        let state = {
+            literal: false,
+            depth: 0,
+            fg_color: this.SELECTED_STYLES.plain.fg,
+            bg_color: this.DEFAULT_BG,
+            formatting: {
+                bold: false,
+                underline: false,
+                italic: false,
+                strikethrough: false
+            },
+            default_align: "left",
+            align: "left",
+            radio_groups: {}
+        };
+
+        const lines = markup.split("\n");
+
+        for (let line of lines) {
+            const lineOutput = this.parseLine(line, state);
+            if (lineOutput && lineOutput.length > 0) {
+                for (let el of lineOutput) {
+                    fragment.appendChild(el);
+                }
+            } else {
+                fragment.appendChild(document.createElement("br"));
+            }
+        }
+
+        return fragment;
+    }
+
+    parseLine(line, state) {
+        if (line.length > 0) {
+            // Check literals toggle
+            if (line === "`=") {
+                state.literal = !state.literal;
                 return null;
             }
 
-            // skip background colours
-            // FIXME: implement
-            line = line.replaceAll(/`B([0-9A-Fa-f]+)/g, function(match, colourCode) {
-                return "";
-            });
-
-            // skip default background colour
-            // FIXME: implement
-            line = line.replaceAll(/`b/g, function(match) {
-                return "";
-            });
-
-            // skip literal
-            // FIXME: implement
-            line = line.replaceAll(/`=/g, function(match) {
-                return "";
-            });
-
-            // skip reset formatting
-            // FIXME: implement
-            if(line.startsWith("``")){
-                line = line.replace("``", "");
+            if (!state.literal) {
+                // Comments
+                if (line[0] === "#") {
+                    return null;
+                }
+
+                // Reset section depth
+                if (line[0] === "<") {
+                    state.depth = 0;
+                    return this.parseLine(line.slice(1), state);
+                }
+
+                // Section headings
+                if (line[0] === ">") {
+                    let i = 0;
+                    while (i < line.length && line[i] === ">") {
+                        i++;
+                    }
+                    state.depth = i;
+                    let headingLine = line.slice(i);
+
+                    if (headingLine.length > 0) {
+                        // apply heading style if it exists
+                        let style = null;
+                        let wanted_style = "heading" + i;
+                        if (this.SELECTED_STYLES[wanted_style]) {
+                            style = this.SELECTED_STYLES[wanted_style];
+                        } else {
+                            style = this.SELECTED_STYLES.plain;
+                        }
+
+                        const latched_style = this.stateToStyle(state);
+                        this.styleToState(style, state);
+
+                        let outputParts = this.makeOutput(state, headingLine);
+                        this.styleToState(latched_style, state);
+
+                        // wrap in a heading container
+                        if (outputParts && outputParts.length > 0) {
+                            const div = document.createElement("div");
+                            this.applyAlignment(div, state);
+                            this.applySectionIndent(div, state);
+                            // merge text nodes
+                            this.appendOutput(div, outputParts, state);
+                            return [div];
+                        } else {
+                            return null;
+                        }
+                    } else {
+                        return null;
+                    }
+                }
+
+                // horizontal dividers
+                if (line[0] === "-") {
+                    let dividerChar = "\u2500";
+                    // if second char given
+                    if (line.length > 1) {
+                        dividerChar = line[1];
+                    }
+                    const hr = document.createElement("hr");
+                    this.applySectionIndent(hr, state);
+                    return [hr];
+                }
+
+            }
+
+            let outputParts = this.makeOutput(state, line);
+            if (outputParts) {
+                // outputParts can contain text (tuple) and special objects (fields/checkbox)
+                // construct a single line container
+                let container = document.createElement("div");
+                this.applyAlignment(container, state);
+                this.applySectionIndent(container, state);
+                this.appendOutput(container, outputParts, state);
+                return [container];
+            } else {
+                // Just empty line
+                return [document.createElement("br")];
             }
 
-            // parse micron links
-            // `[ ◈  The Future of RNode: A New Model`:/page/posts/2022_06_27.mu]
-            // `[Home`:/page/index.mu`page=Home]
-            // `[Games`:/page/index.mu`page=Games]
-            // `[Hangman`:/page/Games/Hangman.mu]`
-            // `[lxmf@7b746057a7294469799cd8d7d429676a]
-            // `[Liam`lxmf@7b746057a7294469799cd8d7d429676a]
-            line = line.replaceAll(/`\[(.*?)\]/g, function(match, linkContent) {
-                const linkParts = linkContent.split("`");
-                if(linkParts.length === 1){
-                    const url = linkParts[0];
-                    const formattedUrl = MicronParser.formatNomadnetworkUrl(url);
-                    return `<a href="${formattedUrl}" onclick="event.preventDefault(); onNodePageUrlClick('${url}')">${url}</a>`
-                } else if(linkParts.length === 2){
-                    const text = linkParts[0];
-                    const url = linkParts[1];
-                    const formattedUrl = MicronParser.formatNomadnetworkUrl(url);
-                    return `<a href="${formattedUrl}" onclick="event.preventDefault(); onNodePageUrlClick('${url}')">${text}</a>`
-                } else if(linkParts.length === 3){
-                    const text = linkParts[0];
-                    const url = linkParts[1] + "`" + linkParts[2]; // includes data
-                    const formattedUrl = MicronParser.formatNomadnetworkUrl(url);
-                    return `<a href="${formattedUrl}" onclick="event.preventDefault(); onNodePageUrlClick('${url}')">${text}</a>`
-                } else {
-                    return "";
+        } else {
+            // Empty line
+            return [document.createElement("br")];
+        }
+    }
+
+    applyAlignment(el, state) {
+        // use CSS text-align for alignment
+        el.style.textAlign = state.align || "left";
+    }
+
+    applySectionIndent(el, state) {
+        // indent by state.depth
+        let indent = (state.depth - 1) * 2;
+        if (indent > 0) {
+            el.style.marginLeft = (indent * 10) + "px";
+        }
+    }
+
+    // convert current state to a style object
+    stateToStyle(state) {
+        return {
+            fg: state.fg_color,
+            bg: state.bg_color,
+            bold: state.formatting.bold,
+            underline: state.formatting.underline,
+            italic: state.formatting.italic
+        };
+    }
+
+    styleToState(style, state) {
+        if (style.fg !== undefined && style.fg !== null) state.fg_color = style.fg;
+        if (style.bg !== undefined && style.bg !== null) state.bg_color = style.bg;
+        if (style.bold !== undefined && style.bold !== null) state.formatting.bold = style.bold;
+        if (style.underline !== undefined && style.underline !== null) state.formatting.underline = style.underline;
+        if (style.italic !== undefined && style.italic !== null) state.formatting.italic = style.italic;
+    }
+
+    appendOutput(container, parts, state) {
+
+        let currentSpan = null;
+        let currentStyle = null;
+
+        const flushSpan = () => {
+            if (currentSpan) {
+                container.appendChild(currentSpan);
+                currentSpan = null;
+                currentStyle = null;
+            }
+        };
+
+        for (let p of parts) {
+            if (typeof p === 'string') {
+                let span = document.createElement("span");
+                span.textContent = p;
+                container.appendChild(span);
+            } else if (Array.isArray(p) && p.length === 2) {
+                // tuple: [styleSpec, text]
+                let [styleSpec, text] = p;
+                // if different style, flush currentSpan
+                if (!this.stylesEqual(styleSpec, currentStyle)) {
+                    flushSpan();
+                    currentSpan = document.createElement("span");
+                    this.applyStyleToElement(currentSpan, styleSpec);
+                    currentStyle = styleSpec;
+                }
+                currentSpan.textContent += text;
+            } else if (p && typeof p === 'object') {
+                // field, checkbox, radio, link
+                flushSpan();
+                if (p.type === "field") {
+                    let input = document.createElement("input");
+                    input.type = p.masked ? "password" : "text";
+                    input.name = p.name;
+                    input.value = p.data;
+                    if (p.width) {
+                        input.size = p.width; 
+                    }
+                    this.applyStyleToElement(input, this.styleFromState(p.style));
+                    container.appendChild(input);
+                } else if (p.type === "checkbox") {
+                    let label = document.createElement("label");
+                    let cb = document.createElement("input");
+                    cb.type = "checkbox";
+                    cb.name = p.name;
+                    cb.value = p.value;
+                    if (p.prechecked) cb.checked = true;
+                    label.appendChild(cb);
+                    label.appendChild(document.createTextNode(" " + p.label));
+                    this.applyStyleToElement(label, this.styleFromState(p.style));
+                    container.appendChild(label);
+                } else if (p.type === "radio") {
+                    let label = document.createElement("label");
+                    let rb = document.createElement("input");
+                    rb.type = "radio";
+                    rb.name = p.name;
+                    rb.value = p.value;
+                    if (p.prechecked) rb.checked = true;
+                    label.appendChild(rb);
+                    label.appendChild(document.createTextNode(" " + p.label));
+                    this.applyStyleToElement(label, this.styleFromState(p.style));
+                    container.appendChild(label);
+                } else if (p.type === "link") {
+
+                    let directURL = p.url.replace('nomadnetwork://', '').replace('lxmf://', '');
+                    // use p.url as is for the href
+                    const formattedUrl = p.url;
+
+                    let a = document.createElement("a");
+                    a.href = formattedUrl;
+
+                    let fieldsToSubmit = [];
+                    let requestVars = {};
+                    let foundAll = false;
+
+                    if (p.fields && p.fields.length > 0) {
+                        for (const f of p.fields) {
+                            if (f === '*') {
+                                // submit all fields
+                                foundAll = true;
+                                break;
+                            } else if (f.includes('=')) {
+                                // this is a request variable (key=value)
+                                const [k, v] = f.split('=');
+                                requestVars[k] = v;
+                            } else {
+                                // this is a field name to submit
+                                fieldsToSubmit.push(f);
+                            }
+                        }
+
+                        let fieldStr = '';
+                        if (foundAll) {
+                            // if '*' was found, submit all fields
+                            fieldStr = '*';
+                        } else {
+                            fieldStr = fieldsToSubmit.join('|');
+                        }
+
+                        // 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('&');
+                   
+                            directURL += directURL.includes('`') ? `|${queryString}` : `\`${queryString}`;
+                        }
+
+                        a.setAttribute("onclick", `event.preventDefault(); onNodePageUrlClick('${directURL}', '${fieldStr}', false, false)`);
+                    } else {
+                        // no fields or request variables, just handle the direct URL
+                        a.setAttribute("onclick", `event.preventDefault(); onNodePageUrlClick('${directURL}', null, false, false)`);
+                    }
+
+                    a.textContent = p.label;
+                    this.applyStyleToElement(a, this.styleFromState(p.style));
+                    container.appendChild(a);
                 }
-            });
-
-            // parse markdown links
-            // [Reticulum](https://github.com/markqvist/Reticulum)
-            line = line.replaceAll(/\[(.*?)\]\((.*?)\)/g, function(match, linkText, linkUrl) {
-                const url = MicronParser.formatNomadnetworkUrl(linkUrl);
-                return `<a href="${url}" onclick="event.preventDefault(); onNodePageUrlClick('${linkUrl}')" style="text-decoration:underline;">${linkText}</a>`
-            });
-
-            // parse bold
-            // `!Bold Text
-            // `!Bold Text`!
-            line = line.replaceAll(/`!(.*?)(?:`!)?/g, function(match, text) {
-                return `<span style="font-weight:bold;">${text}</span>`
-            });
-
-            // parse italics
-            // `*Italic Text`*
-            line = line.replaceAll(/`\*(.*?)`\*/g, function(match, text) {
-                return `<span style="font-style:italic;">${text}</span>`
-            });
-
-            // parse underline
-            // `_Underlined Text`_
-            line = line.replaceAll(/`_(.*?)`_/g, function(match, text) {
-                return `<span style="text-decoration:underline;">${text}</span>`
-            });
-
-            // parse divider
-            // FIXME: use raw css, not tailwind classes for styling
-            if(line.trim() === "-"){
-                line = "<hr class='border-gray-500'/>"
+
             }
+        }
+
+        flushSpan();
+    }
+
+    stylesEqual(s1, s2) {
+        if (!s1 && !s2) return true;
+        if (!s1 || !s2) return false;
+        return (s1.fg === s2.fg && s1.bg === s2.bg && s1.bold === s2.bold && s1.underline === s2.underline && s1.italic === s2.italic);
+    }
+
+    styleFromState(stateStyle) {
+        // stateStyle is a name of a style or a style object
+        // in this code, p.style is actually a style name. j,ust return that
+        return stateStyle; 
+    }
+
+    applyStyleToElement(el, style) {
+        if (!style) return;
+        // convert style fg/bg to colors
+        let fgColor = this.colorToCss(style.fg);
+        let bgColor = this.colorToCss(style.bg);
 
-            // parse divider (custom character)
-            // FIXME: use raw css, not tailwind classes for styling
-            // FIXME: use custom divider character
-            if(line.startsWith("-") && line.length === 2){
-                line = "<hr class='border-gray-500'/>"
+        if (fgColor && fgColor !== "default") {
+            el.style.color = fgColor;
+        }
+        if (bgColor && bgColor !== "default") {
+            el.style.backgroundColor = bgColor;
+        }
+
+        if (style.bold) {
+            el.style.fontWeight = "bold";
+        }
+        if (style.underline) {
+            el.style.textDecoration = (el.style.textDecoration ? el.style.textDecoration + " underline" : "underline");
+        }
+        if (style.italic) {
+            el.style.fontStyle = "italic";
+        }
+    }
+
+    colorToCss(c) {
+        if (!c || c === "default") return null;
+        // if 3 hex chars (like '222') => expand to #222
+        if (c.length === 3 && /^[0-9a-fA-F]{3}$/.test(c)) {
+            return "#" + c;
+        }
+        // If 6 hex chars
+        if (c.length === 6 && /^[0-9a-fA-F]{6}$/.test(c)) {
+            return "#" + c;
+        }
+        // If grayscale 'gxx'
+        if (c.length === 3 && c[0] === 'g') {
+            // treat xx as a number and map to gray
+            let val = parseInt(c.slice(1),10);
+            if (isNaN(val)) val = 50;
+            // map 0-99 scale to a gray hex
+            let h = Math.floor(val*2.55).toString(16).padStart(2,'0');
+            return "#" + h + h + h;
+        }
+
+        // fallback: just return a known CSS color or tailwind class if not known
+        return null;
+    }
+
+    makeOutput(state, line) {
+        if (state.literal) {
+            // literal mode: output as is, except if `= line
+            if (line === "\\`=") {
+                line = "`=";
             }
+            return [[this.stateToStyle(state), line]];
+        }
 
-            // parse depth (should be full width)
-            // FIXME: use raw css, not tailwind classes for styling
-            if(line.startsWith(">>>")){
-                line = line.replace(">>>", "");
-                line = `<span class='inline-block w-full bg-gray-100 text-black pl-3'>${line}</span>`
-            } else if(line.startsWith(">>")){
-                line = line.replace(">>", "");
-                line = `<span class='inline-block w-full bg-gray-100 text-black pl-2'>${line}</span>`
-            } else if(line.startsWith(">")){
-                line = line.replace(">", "");
-                line = `<span class='inline-block w-full bg-gray-100 text-black pl-1'>${line}</span>`
+        let output = [];
+        let part = "";
+        let mode = "text";
+        let escape = false;
+        let skip = 0;
+        let i = 0;
+        while (i < line.length) {
+            let c = line[i];
+            if (skip > 0) {
+                skip--;
+                i++;
+                continue;
+            }
+
+            if (mode === "formatting") {
+                // Handle formatting commands
+                switch(c) {
+                    case '_':
+                        state.formatting.underline = !state.formatting.underline;
+                        break;
+                    case '!':
+                        state.formatting.bold = !state.formatting.bold;
+                        break;
+                    case '*':
+                        state.formatting.italic = !state.formatting.italic;
+                        break;
+                    case 'F':
+                        // next 3 chars = fg color
+                        if (line.length >= i+4) {
+                            let color = line.substr(i+1,3);
+                            state.fg_color = color;
+                            skip = 3;
+                        }
+                        break;
+                    case 'f':
+                        // reset fg
+                        state.fg_color = this.SELECTED_STYLES.plain.fg;
+                        break;
+                    case 'B':
+                        if (line.length >= i+4) {
+                            let color = line.substr(i+1,3);
+                            state.bg_color = color;
+                            skip = 3;
+                        }
+                        break;
+                    case 'b':
+                        // reset bg
+                        state.bg_color = this.DEFAULT_BG;
+                        break;
+                    case '`':
+                        // reset all formatting
+                        state.formatting.bold = false;
+                        state.formatting.underline = false;
+                        state.formatting.italic = false;
+                        state.fg_color = this.SELECTED_STYLES.plain.fg;
+                        state.bg_color = this.DEFAULT_BG;
+                        state.align = state.default_align;
+                        break;
+                    case 'c':
+                        state.align = (state.align === "center") ? state.default_align : "center";
+                        break;
+                    case 'l':
+                        state.align = (state.align === "left") ? state.default_align : "left";
+                        break;
+                    case 'r':
+                        state.align = (state.align === "right") ? state.default_align : "right";
+                        break;
+                    case 'a':
+                        state.align = state.default_align;
+                        break;
+                    case '<':
+                        // Flush current text first
+                        if (part.length > 0) {
+                            output.push([this.stateToStyle(state), part]);
+                            part = "";
+                        }
+                        let fieldData = this.parseField(line, i, state);
+                        if (fieldData) {
+                            output.push(fieldData.obj);
+                            i += fieldData.skip;
+                            continue; 
+                        }
+                        break;
+
+                      case '[':
+                          // flush current text first
+                          if (part.length > 0) {
+                              output.push([this.stateToStyle(state), part]);
+                              part = "";
+                          }
+                          let linkData = this.parseLink(line, i, state);
+                          if (linkData) {
+                              output.push(linkData.obj);
+                              // mode = "text"; 
+                              i += linkData.skip;
+                              continue;
+                          }
+                          break;
+
+                    default:
+                        // unknown formatting char, ignore
+                        break;
+                }
+                mode = "text";
+                if (part.length > 0) {
+                    // no flush needed, no text added
+                }
+            } else {
+                // mode === "text"
+                if (c === '\\') {
+                    if (escape) {
+                        // was escaped backslash
+                        part += c;
+                        escape = false;
+                    } else {
+                        escape = true;
+                    }
+                } else if (c === '`') {
+                    if (escape) {
+                        // just a literal backtick
+                        part += c;
+                        escape = false;
+                    } else {
+                        // switch to formatting mode
+                        if (part.length > 0) {
+                            output.push([this.stateToStyle(state), part]);
+                            part = "";
+                        }
+                        mode = "formatting";
+                    }
+                } else {
+                    if (escape) {
+                        part += '\\';
+                        escape = false;
+                    }
+                    part += c;
+                }
             }
 
-            // align (default: using left)
-            if(line.startsWith("`a")){
-                line = line.replace("`a", "");
-                line = `<span style="text-align:left;">${line}</span>`;
+            i++;
+        }
+
+        // end of line
+        if (part.length > 0) {
+            output.push([this.stateToStyle(state), part]);
+        }
+
+        return (output.length > 0) ? output : null;
+    }
+
+    parseField(line, startIndex, state) {
+        let field_start = startIndex + 1;
+        let backtick_pos = line.indexOf('`', field_start);
+        if (backtick_pos === -1) return null;
+
+        let field_content = line.substring(field_start, backtick_pos);
+        let field_masked = false;
+        let field_width = 24;
+        let field_type = "field";
+        let field_name = field_content;
+        let field_value = "";
+        let field_prechecked = false;
+
+        if (field_content.includes('|')) {
+            let f_components = field_content.split('|');
+            let field_flags = f_components[0];
+            field_name = f_components[1];
+
+            if (field_flags.includes('^')) {
+                field_type = "radio";
+                field_flags = field_flags.replace('^','');
+            } else if (field_flags.includes('?')) {
+                field_type = "checkbox";
+                field_flags = field_flags.replace('?','');
+            } else if (field_flags.includes('!')) {
+                field_masked = true;
+                field_flags = field_flags.replace('!','');
             }
 
-            // align center
-            if(line.startsWith("`c")){
-                line = line.replace("`c", "");
-                line = `<span style="text-align:center;">${line}</span>`;
+            if (field_flags.length > 0) {
+                let w = parseInt(field_flags,10);
+                if (!isNaN(w)) {
+                    field_width = Math.min(w,256);
+                }
             }
 
-            // align left
-            if(line.startsWith("`l")){
-                line = line.replace("`l", "");
-                line = `<span style="text-align:left;">${line}</span>`;
+            if (f_components.length > 2) {
+                field_value = f_components[2];
             }
 
-            // align right
-            if(line.startsWith("`r")){
-                line = line.replace("`r", "");
-                line = `<span style="text-align:right;">${line}</span>`;
+            if (f_components.length > 3) {
+                if (f_components[3] === '*') {
+                    field_prechecked = true;
+                }
             }
+        }
+
+        let field_end = line.indexOf('>', backtick_pos);
+        if (field_end === -1) return null;
 
-            // formatted content
-            // `Ff00 red content `f
-            line = line.replaceAll(/`F([0-9A-Fa-f]+)(.*?)`f/g, function(match, colourCode, content) {
-                return `<span style="color:#${colourCode}">${content}</span>`
-            });
+        let field_data = line.substring(backtick_pos+1, field_end);
+        let style = this.stateToStyle(state);
 
-            return line;
+        let obj = null;
+        if (field_type === "checkbox" || field_type === "radio") {
+            obj = {
+                type: field_type,
+                name: field_name,
+                value: field_value || field_data,
+                label: field_data,
+                prechecked: field_prechecked,
+                style: style
+            };
+        } else {
+            obj = {
+                type: "field",
+                name: field_name,
+                width: field_width,
+                masked: field_masked,
+                data: field_data,
+                style: style
+            };
+        }
 
-        });
+        let skip = (field_end - startIndex) + 2;
+        return { obj: obj, skip: skip };
+    }
 
-        // filter out null items, and join with line break
-        return lines.filter((line) => {
-            return line != null;
-        }).join("<br/>");
 
+
+
+    parseLink(line, startIndex, state) {
+        let endpos = line.indexOf(']', startIndex);
+        if (endpos === -1) return null;
+
+        let link_data = line.substring(startIndex+1, endpos);
+        let link_components = link_data.split('`');
+        let link_label = "";
+        let link_url = "";
+        let link_fields = "";
+
+        if (link_components.length === 1) {
+            link_label = "";
+            link_url = link_data;
+        } else if (link_components.length === 2) {
+            link_label = link_components[0];
+            link_url = link_components[1];
+        } else if (link_components.length === 3) {
+            link_label = link_components[0];
+            link_url = link_components[1];
+            link_fields = link_components[2];
+        }
+
+        if (link_url.length === 0) {
+            return null;
+        }
+
+        if (link_label === "") {
+            link_label = link_url;
+        }
+
+        // format the URL
+        link_url = MicronParser.formatNomadnetworkUrl(link_url);
+
+        let style = this.stateToStyle(state);
+        let obj = {
+            type: "link",
+            url: link_url,
+            label: link_label,
+            fields: (link_fields ? link_fields.split("|") : []),
+            style: style
+        };
+
+        let skip = (endpos - startIndex) + 2;
+        return { obj: obj, skip: skip };
     }
 
-}
\ No newline at end of file
+
+}
+
+

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 2/2] 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">