diff --git a/.gitignore b/.gitignore
index b6e4761..7f6b817 100644
--- a/.gitignore
+++ b/.gitignore
@@ -127,3 +127,5 @@ dmypy.json
 
 # Pyre type checker
 .pyre/
+
+.DS_Store
diff --git a/README.md b/README.md
index 90182f5..cb687d2 100644
--- a/README.md
+++ b/README.md
@@ -141,7 +141,7 @@ The websat web UI reads in the following items from `neon_iris/static/custom`:
 - `error.mp3` - Used for error responses
 - `wake.mp3` - Used for wake word responses
 - `favicon.ico` - The favicon for the web UI
-- `logo.webp` - The logo for the web UI
+- `logo.svg` - The logo for the web UI
 
 To customize these items, you can replace them in the `neon_iris/static/custom` folder and rebuild the image.
 
diff --git a/neon_iris/index.html b/neon_iris/index.html
new file mode 100644
index 0000000..5fa2102
--- /dev/null
+++ b/neon_iris/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+
+<head>
+  <link rel="icon" href="static/custom/favicon.ico" type="image/x-icon" />
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>{{ title }}</title>
+  <link rel="stylesheet" href="static/sprite.css" />
+  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
+  <style>
+    :root {
+      --color-neon-green: #2b7b2b;
+      --color-neon-orange: #ffa764;
+      --color-neon-beige: #ebd4b3;
+      --color-neon-gray: #fefefe;
+    }
+  </style>
+</head>
+
+<body class="font-roboto text-center bg-gray-900 text-white">
+  <div class="chat-container flex flex-col min-h-screen">
+    <div class="chat-header text-4xl font-bold p-6 bg-gray-800 shadow-md">
+      {{ description }}
+      <img src="static/custom/logo.svg" class="logo w-10 h-10 ml-2 inline-block" />
+    </div>
+    <button id="startButton"
+      class="btn mx-auto my-6 px-6 py-3 rounded shadow-lg text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-green-700 dark:bg-neon-green"
+      style="background-color: var(--color-neon-green)">
+      Start Recording
+    </button>
+    <div class="chat-window flex-grow p-4 overflow-auto">
+      <div id="chatHistory" class="flex flex-col items-start space-y-2 overflow-y-auto">
+        <!-- Chat messages will appear here -->
+      </div>
+    </div>
+    <div id="download-area" class="p-4 bg-gray-800 hidden">
+      <!-- Downloadable content or hidden if not needed -->
+    </div>
+    <div class="input-area flex justify-between items-center p-4 space-x-4 bg-gray-800">
+      <input type="text" id="chatInput" placeholder="{{ placeholder }}"
+        class="flex-grow px-4 py-3 rounded bg-gray-600 text-white focus:outline-none focus:ring-2 focus:ring-green-700" />
+      <button onclick="submitMessage()"
+        class="px-6 py-3 rounded shadow-lg text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-orange-700 dark:bg-neon-orange"
+        style="background-color: var(--color-neon-orange);">Submit</button>
+    </div>
+  </div>
+  <!-- Silero VAD -->
+  <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@ricky0123/vad-web@0.0.7/dist/bundle.min.js"></script>
+  <!-- Config -->
+  <script>
+    const WS_URL = "{{ ws_url }}";
+  </script>
+  <!-- AI Code -->
+  <script src="static/scripts/websocket.js"></script>
+  <script src="static/scripts/audio.js"></script>
+  <script src="static/scripts/ui.js"></script>
+  <script src="static/scripts/sprite.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/neon_iris/static/custom/favicon.ico b/neon_iris/static/custom/favicon.ico
index 844ecce..b49b0fb 100644
Binary files a/neon_iris/static/custom/favicon.ico and b/neon_iris/static/custom/favicon.ico differ
diff --git a/neon_iris/static/custom/logo.svg b/neon_iris/static/custom/logo.svg
new file mode 100644
index 0000000..1b21556
--- /dev/null
+++ b/neon_iris/static/custom/logo.svg
@@ -0,0 +1,5 @@
+<?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" version="1.1" viewBox="0 0 81 77" width="81.0pt" height="77.0pt">
+<path d="M 36.33 4.65 C 38.92 5.65 39.55 9.16 42.14 9.97 C 46.85 11.74 50.44 14.40 53.94 17.94 C 56.74 18.04 59.16 17.67 61.55 19.44 C 65.43 21.79 67.01 27.11 65.26 31.23 C 64.52 33.03 62.51 34.08 61.00 35.19 C 60.96 39.51 60.43 43.14 59.09 47.23 C 65.23 49.98 71.62 51.82 77.48 55.20 C 68.70 53.14 60.34 49.75 52.28 45.73 C 49.59 44.21 45.89 42.41 44.40 39.59 C 43.38 37.80 44.91 36.16 46.51 35.51 C 51.18 33.46 56.74 34.20 61.16 33.11 C 64.99 31.80 64.93 26.56 63.44 23.54 C 61.86 20.71 57.17 18.03 54.19 20.16 C 50.13 23.59 46.15 29.87 40.79 31.75 C 38.86 32.50 37.27 30.78 36.97 29.02 C 35.99 22.26 38.24 16.37 38.53 9.97 C 38.14 3.06 24.61 4.54 24.82 10.97 C 26.03 16.58 29.95 23.52 29.70 29.87 C 29.39 31.62 28.14 32.64 26.46 31.55 C 21.32 28.34 17.95 21.38 14.00 17.02 C 11.57 14.75 8.51 16.69 6.64 18.65 C 4.37 21.22 3.04 25.32 6.23 27.79 C 10.96 30.75 18.54 32.13 22.81 36.27 C 24.12 37.71 24.12 39.29 22.52 40.49 C 18.18 43.42 11.39 43.22 6.51 44.65 C 3.75 45.88 3.98 49.59 5.03 51.93 C 6.03 54.48 8.97 57.63 11.94 56.14 C 16.07 53.39 19.25 48.37 24.17 46.11 C 25.74 45.42 27.97 45.54 28.45 47.48 C 30.18 53.41 25.42 60.21 26.20 65.75 C 28.44 69.41 36.20 68.67 37.50 64.51 C 37.37 60.24 34.47 55.00 36.08 50.17 C 37.17 48.37 39.15 48.26 40.95 49.03 C 45.08 50.73 48.70 54.05 51.93 57.08 C 57.21 62.34 62.40 66.87 65.85 73.61 C 60.69 68.91 56.50 63.31 51.30 58.64 C 48.00 61.18 44.95 62.88 41.05 64.32 C 38.16 65.36 37.44 68.50 34.21 69.20 C 29.56 70.39 26.03 69.29 24.01 64.74 C 19.80 63.06 16.11 61.10 12.62 58.18 C 10.06 57.96 7.84 58.07 5.96 56.03 C 2.49 52.54 2.06 48.22 4.08 43.81 C 3.40 39.51 3.10 35.44 4.06 31.14 C 4.90 28.06 2.56 26.05 2.89 22.98 C 3.81 17.78 8.24 13.81 13.72 14.66 C 16.63 12.70 19.56 11.03 22.80 9.65 C 25.68 4.59 30.82 2.71 36.33 4.65 Z" fill="#ff8600" />
+</svg>
\ No newline at end of file
diff --git a/neon_iris/static/custom/logo.webp b/neon_iris/static/custom/logo.webp
deleted file mode 100644
index 844ecce..0000000
Binary files a/neon_iris/static/custom/logo.webp and /dev/null differ
diff --git a/neon_iris/templates/index.html b/neon_iris/templates/index.html
index 3d008f7..f64b273 100644
--- a/neon_iris/templates/index.html
+++ b/neon_iris/templates/index.html
@@ -1,42 +1,81 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="dark">
   <head>
-    <link rel="icon" href="/static/custom/favicon.ico" type="image/x-icon" />
+    <link rel="icon" href="static/custom/favicon.ico" type="image/x-icon" />
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{{ title }}</title>
-    <link rel="stylesheet" href="/static/styles.css" />
-    <link rel="stylesheet" href="/static/sprite.css" />
+    <link rel="stylesheet" href="static/sprite.css" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
+      rel="stylesheet"
+    />
+    <style>
+      :root {
+        --color-neon-green: #2b7b2b;
+        --color-neon-orange: #ffa764;
+        --color-neon-beige: #ebd4b3;
+        --color-neon-gray: #fefefe;
+      }
+    </style>
   </head>
-  <body>
-    <div class="chat-container">
-      <div class="chat-header">
-        {{ description }} <img src="/static/custom/logo.webp" class="logo" />
+
+  <body class="font-roboto text-center bg-gray-900 text-white">
+    <div class="chat-container flex flex-col min-h-screen">
+      <div class="chat-header text-4xl font-bold p-6 bg-gray-800 shadow-md">
+        {{ description }}
+        <img
+          src="static/custom/logo.svg"
+          class="logo w-10 h-10 ml-2 inline-block"
+        />
       </div>
-      <button id="startButton">Start Recording</button>
-      <div class="chat-window" id="chatWindow">
-        <div id="chatHistory">
+      <button
+        id="startButton"
+        class="btn mx-auto my-6 px-6 py-3 rounded shadow-lg text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-green-700 dark:bg-neon-green"
+        style="background-color: var(--color-neon-green)"
+      >
+        Start Recording
+      </button>
+      <div class="chat-window flex-grow p-4 overflow-auto">
+        <div
+          id="chatHistory"
+          class="flex flex-col items-start space-y-2 overflow-y-auto"
+        >
           <!-- Chat messages will appear here -->
         </div>
       </div>
-      <div id="download-area"></div>
-      <div class="input-area">
-        <input type="text" id="chatInput" placeholder="{{ placeholder }}" />
-        <button onclick="submitMessage()">Submit</button>
-        <div class="sprite" />
+      <div id="download-area" class="p-4 bg-gray-800 hidden">
+        <!-- Downloadable content or hidden if not needed -->
+      </div>
+      <div
+        class="input-area flex justify-between items-center p-4 space-x-4 bg-gray-800"
+      >
+        <input
+          type="text"
+          id="chatInput"
+          placeholder="{{ placeholder }}"
+          class="flex-grow px-4 py-3 rounded bg-gray-600 text-white focus:outline-none focus:ring-2 focus:ring-green-700"
+        />
+        <button
+          onclick="submitMessage()"
+          class="px-6 py-3 rounded shadow-lg text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-orange-700 dark:bg-neon-orange"
+          style="background-color: var(--color-neon-orange)"
+        >
+          Submit
+        </button>
       </div>
     </div>
+    <!-- Silero VAD -->
+    <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@ricky0123/vad-web@0.0.7/dist/bundle.min.js"></script>
+    <!-- Config -->
+    <script>
+      const WS_URL = "{{ ws_url }}";
+    </script>
+    <!-- AI Code -->
+    <script src="static/scripts/websocket.js"></script>
+    <script src="static/scripts/audio.js"></script>
+    <script src="static/scripts/ui.js"></script>
+    <script src="static/scripts/sprite.js"></script>
   </body>
-  <!-- Silero VAD -->
-  <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/@ricky0123/vad-web@0.0.7/dist/bundle.min.js"></script>
-  <!-- Config -->
-  <script>
-    const WS_URL = "{{ ws_url }}";
-  </script>
-  <!-- AI Code -->
-  <script src="/static/scripts/websocket.js"></script>
-  <script src="/static/scripts/audio.js"></script>
-  <script src="/static/scripts/ui.js"></script>
-  <script src="/static/scripts/sprite.js"></script>
 </html>
