diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml
index 1f154de..2097187 100644
--- a/.github/workflows/static.yml
+++ b/.github/workflows/static.yml
@@ -28,7 +28,7 @@ jobs:
       - name: Make dist directory
         run: |
           mkdir dist
-          rsync -R index.html meshmon.js meshmon.css protobufs/meshtastic/*.proto dist/
+          rsync -R index.html meshmon.js meshmon.css protobufs/meshtastic/*.proto assets dist/
       - name: Setup Pages
         uses: actions/configure-pages@v5
       - name: Upload artifact
diff --git a/.gitmodules b/.gitmodules
index 8614dd2..e6f376a 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -1,4 +1,3 @@
 [submodule "protobufs"]
 	path = protobufs
 	url = https://github.com/meshtastic/protobufs.git
-	branch = v2.3.5
diff --git a/assets/github-mark-white.svg b/assets/github-mark-white.svg
new file mode 100644
index 0000000..d5e6491
--- /dev/null
+++ b/assets/github-mark-white.svg
@@ -0,0 +1 @@
+<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/assets/github-mark.svg b/assets/github-mark.svg
new file mode 100644
index 0000000..37fa923
--- /dev/null
+++ b/assets/github-mark.svg
@@ -0,0 +1 @@
+<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></svg>
\ No newline at end of file
diff --git a/assets/meshtastic.svg b/assets/meshtastic.svg
new file mode 100644
index 0000000..e6863f6
--- /dev/null
+++ b/assets/meshtastic.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="512" height="512" viewBox="0 0 512 512" xml:space="preserve">
+<desc>Created with Fabric.js 4.6.0</desc>
+<defs>
+</defs>
+<g transform="matrix(1 0 0 1 256 256)" id="xYQ9Gk9Jwpgj_HMOXB3F_"  >
+<path style="stroke: rgb(213,130,139); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(103,234,148); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-256, -256)" d="M 0 0 L 512 0 L 512 512 L 0 512 z" stroke-linecap="round" />
+</g>
+<g transform="matrix(1.79 0 0 1.79 313.74 258.36)" id="1xBsk2n9FZp60Rz1O-ceJ"  >
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: round; stroke-miterlimit: 2; fill: rgb(44,45,60); fill-rule: evenodd; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-250.97, -362.41)" d="M 250.908 330.267 L 193.126 415.005 L 180.938 406.694 L 244.802 313.037 C 246.174 311.024 248.453 309.819 250.889 309.816 C 253.326 309.814 255.606 311.015 256.982 313.026 L 320.994 406.536 L 308.821 414.869 L 250.908 330.267 Z" stroke-linecap="round" />
+</g>
+<g transform="matrix(1.81 0 0 1.81 145 256.15)" id="KxN7E9YpbyPgz0S4z4Cl6"  >
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: round; stroke-miterlimit: 2; fill: rgb(44,45,60); fill-rule: evenodd; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-115.14, -528.06)" d="M 87.642 581.398 L 154.757 482.977 L 142.638 474.713 L 75.523 573.134 L 87.642 581.398 Z" stroke-linecap="round" />
+</g>
+</svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index eca4b38..dd3dff2 100644
--- a/index.html
+++ b/index.html
@@ -3,9 +3,8 @@
     <head>
         <meta charset="UTF-8"/>
         <title>Meshtastic MQTT Monitor</title>
-        <link rel="icon" type="image/x-icon" href="https://meshtastic.org/design/web/favicon.ico">
+        <link rel="icon" type="image/svg+xml" href="assets/meshtastic.svg">
         <link rel="stylesheet" href="meshmon.css">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mqtt/5.5.2/mqtt.min.js"></script>
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/protobufjs/7.2.6/protobuf.min.js"></script>
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js"></script>
@@ -16,7 +15,7 @@
             <thead>
                 <tr id="filter-row">
                     <th id="filter-cell">
-                        <table class="table-foot">
+                        <table class="table-head">
                             <tr>
                                 <td>
                                     <input id="filter-expr-input" type="text"/>
@@ -33,11 +32,11 @@
                         </table>
                     </th>
                 </tr>
-                <tr id="thead-row"></tr>
+                <tr id="thead-row" class="verbatim"></tr>
             </thead>
             <tbody id="tbody"></tbody>
             <tfoot>
-                <tr id="fit-row"></tr>
+                <tr id="fit-row" class="packet-header-row"></tr>
                 <tr id="status-row" class="status-disconnected">
                     <td id="status-cell"></td>
                 </tr>
@@ -56,7 +55,8 @@
                                 </td>
                                 <td class="right">
                                     <a href="https://github.com/mskvortsov/meshmon" target="_blank">
-                                        <span class="fa-brands fa-github-alt"></span>
+                                        <img src="assets/github-mark.svg" class="logo logo-light"/>
+                                        <img src="assets/github-mark-white.svg" class="logo logo-dark"/>
                                     </a>
                                 </td>
                             </tr>
diff --git a/meshmon.css b/meshmon.css
index 6a3ccc7..2e8b8aa 100644
--- a/meshmon.css
+++ b/meshmon.css
@@ -1,12 +1,17 @@
 :root {
+    --font-family-main: Arial, sans-serif;
+    --font-family-verbatim: Monaco, monospace;
+
     color-scheme: light;
     --font-color: #424242;
     --bg-color: white;
     --td-border: 1px solid #cbcbcb;
-    --packet-header-outbound-bg-color: #96f988;
+    --packet-header-outbound-bg-color: #a6dba2;
     --packet-header-bg-color: #dddddd;
     --filter-ok-bg-color: #8caeff;
     --filter-error-bg-color: #d5899c;
+    --logo-light-mode: block;
+    --logo-dark-mode: none;
 }
 
 [data-theme="dark"] {
@@ -18,33 +23,35 @@
     --packet-header-bg-color: #333333;
     --filter-ok-bg-color: #005596;
     --filter-error-bg-color: #4b2f36;
+    --logo-light-mode: none;
+    --logo-dark-mode: block;
 }
 
 body {
-    font-family: Verdana, sans-serif;
+    font-family: var(--font-family-main);
+    font-size: 14px;
     background-color: var(--bg-color);
     color: var(--font-color);
 }
+.verbatim {
+    font-family: var(--font-family-verbatim);
+    font-size: 12px;
+}
 
+.table-main {
+    border-collapse: collapse;
+    border: none;
+}
 .table-main td {
     white-space: nowrap;
     padding-left: 8px;
     padding-right: 8px;
+    border: var(--td-border);
 }
 .table-main thead {
     position: sticky;
     top: 0;
 }
-.table-main thead, tbody {
-    font-family: monospace;
-}
-.table-main {
-    border-collapse: collapse;
-    border: none;
-}
-.table-main td {
-    border: var(--td-border);
-}
 .table-main tr:first-child td {
     border-top: none;
 }
@@ -71,12 +78,11 @@ body {
 .packet-header-row-outbound {
     background: var(--packet-header-outbound-bg-color);
 }
-.decoded td {
+.packet-decoded {
     text-align: left;
-    font-size: 80%;
 }
 #filter-expr-input {
-    width: 99%;
+    width: 100%;
 }
 .status-disconnected {
     background-color: #ea7a6c;
@@ -93,37 +99,39 @@ body {
 
 #fit-row {
     visibility: collapse;
-    font-family: monospace;
 }
 .right {
     text-align: right;
-    margin-right: 1em;
 }
 .left {
     text-align: left;
-    margin-left: 1em;
 }
-#connect-cell {
-    padding: 0;
+.table-head, .table-foot {
+    width: 100%;
 }
-.table-foot {
+.table-head td, .table-foot td {
     padding: 0;
     width: 100%;
+    border: 0;
 }
-.table-foot label, button, input, span {
-    font-family: Verdana, sans-serif;
+
+/* Source code link logo */
+
+.logo {
+    height: 22px;
 }
-.table-foot td {
-    padding: 0;
-    border: 0;
+.logo-light {
+    display: var(--logo-light-mode);
 }
-.table-foot a {
-    color: var(--font-color);
+.logo-dark {
+    display: var(--logo-dark-mode);
 }
 
+/* Theme switcher */
+
 .theme-switch-wrapper {
-    width: 6px;
-    align-items: right;
+    width: 40px;
+    padding-left: 10px;
 }
 
 .theme-switch {
@@ -175,3 +183,9 @@ input:checked+.theme-slider:before {
 .theme-slider.round:before {
     border-radius: 50%;
 }
+
+/* For Safari */
+input, button {
+    font-family: var(--font-family-main);
+    font-size: 14px;
+}
diff --git a/meshmon.js b/meshmon.js
index 01d364a..ef8edce 100644
--- a/meshmon.js
+++ b/meshmon.js
@@ -273,9 +273,9 @@ function render(se) {
 
     var headerRow = tbody.insertRow();
     if (se.packet.rxRssi == 0) {
-        headerRow.className = 'packet-header-row-outbound';
+        headerRow.className = 'packet-header-row-outbound verbatim';
     } else {
-        headerRow.className = 'packet-header-row';
+        headerRow.className = 'packet-header-row verbatim';
     }
 
     fields.forEach((field) => {
@@ -306,12 +306,12 @@ function render(se) {
     }
 
     var row = tbody.insertRow();
-    row.className = 'decoded';
     var cell = row.insertCell();
+    cell.className = 'packet-decoded verbatim';
     cell.colSpan = fields.length;
     var decoded = document.createElement('pre');
-    cell.appendChild(decoded);
     decoded.textContent = decodedText;
+    cell.appendChild(decoded);
 }
 
 function mqttOnMessage(topic, message) {