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/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/static/scripts/audio.js b/neon_iris/static/scripts/audio.js
index d573217..4b71ee3 100644
--- a/neon_iris/static/scripts/audio.js
+++ b/neon_iris/static/scripts/audio.js
@@ -102,8 +102,10 @@ startButton.addEventListener("click", function () {
   // Update the button's text and class based on the recording state
   if (AudioHandler.isRecording()) {
     startButton.classList.add("listening");
+    startButton.classList.toggle("bg-blue-500");
     startButton.textContent = "Listening...";
   } else {
+    startButton.classList.toggle("bg-blue-500");
     startButton.classList.remove("listening");
     startButton.textContent = "Start Listening";
   }
diff --git a/neon_iris/static/styles.css b/neon_iris/static/styles.css
index a048b26..802a215 100644
--- a/neon_iris/static/styles.css
+++ b/neon_iris/static/styles.css
@@ -1,135 +1,5 @@
-body,
-html {
-  text-align: center;
-  font-family: "Roboto", sans-serif;
-  background-color: #f4f4f4;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-}
-img.logo {
-  width: 40px;
-  height: 40px;
-}
-a {
-  text-decoration: none;
-}
-a:link {
-  color: #fff;
-  border-bottom: 1px solid #ff0000;
-}
-a:visited {
-  color: #e600e6;
-  border-bottom: 1px solid #b3b3b3;
-}
-a:hover {
-  color: black;
-  border-bottom: 1px solid #000099;
-}
-.button-container {
-  display: flex;
-  justify-content: center; /* This centers the button in the container */
-  padding: 20px;
-  background-color: #333; /* Match the header background */
-}
-#startButton {
-  padding: 15px 30px;
-  font-size: 18px;
-  border: none;
-  border-radius: 4px;
-  color: white;
-  cursor: pointer;
-  outline: none;
-  margin-bottom: 10px;
-  margin-top: 10px;
-  transition: background-color 0.3s;
-  background-color: #4caf50;
-  max-width: 50%;
-  align-content: center;
-  align-self: center;
-}
 #startButton.listening {
-  background-color: #03a9f4;
-}
-.content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px;
-  background-color: #333;
-  margin: 0;
-}
-.chat-header {
-  padding: 20px;
-  background-color: #333;
-  color: #fff;
-  text-align: center;
-  font-size: 2em;
-  text-shadow: 2px 2px 4px #000000;
-  transition: transform 0.3s ease;
-}
-.chat-header:hover {
-  transform: scale(
-    1.05
-  ); /* Slight increase in size on hover for dynamic effect */
-}
-.chat-window {
-  display: flex;
-  flex-direction: column;
-  padding: 20px;
-  overflow: auto;
-}
-#chatHistory {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start; /* Align items to the start by default */
-  height: 100%;
-  overflow-y: auto; /* Allows scrolling if content overflows */
-  background-color: #1a1a1a; /* Dark background for the chat container */
-}
-.input-area {
-  display: flex;
-  padding: 20px;
-}
-.input-area input {
-  flex: 1;
-  padding: 10px;
-  margin-right: 10px;
-  font-size: 16px;
-}
-.input-area button {
-  padding: 10px 20px;
-  background-color: #f90;
-  border: none;
-  font-size: 16px;
-  cursor: pointer;
-}
-.input-area button:hover {
-  background-color: #e80;
-}
-.input-field {
-  flex-grow: 1;
-  padding: 10px;
-  font-size: 16px;
-  margin-right: 10px; /* Spacing between input field and submit button */
-}
-#download-area {
-  padding: 20px;
-  background-color: #333;
-  color: #fff;
-  text-align: center;
-  font-size: 1.5em;
-}
-.download-button {
-  display: inline-block;
-  padding: 10px 20px;
-  margin: 10px 0;
-  background-color: #03a9f4;
-  color: #ffffff;
-  text-align: center;
-  text-decoration: none;
-  border-radius: 5px;
-  transition: background-color 0.3s;
+  background-color: var(--color-neon-green);
 }
 
 /* Style for user messages */
@@ -161,36 +31,6 @@ a:hover {
   flex-direction: column;
   height: 100%;
   background-color: #1a1a1a;
-}
-
-/* Responsive design adjustments */
-@media (max-width: 768px) {
-  .content {
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .button-container,
-  .input-area {
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .input-field,
-  .submit-button,
-  #startButton {
-    width: 100%; /* Full width on smaller screens */
-    margin: 10px 0; /* Add vertical spacing */
-  }
-
-  .chat-header {
-    font-size: 1.5em; /* Smaller text size for smaller screens */
-  }
-}
-
-/* Further responsive adjustments for even smaller screens */
-@media (max-width: 480px) {
-  .chat-header {
-    font-size: 1.2em;
-  }
+  overflow: auto;
+  max-height: calc(100vh - 20vh);
 }
diff --git a/neon_iris/templates/index.html b/neon_iris/templates/index.html
index 3d008f7..de9fee5 100644
--- a/neon_iris/templates/index.html
+++ b/neon_iris/templates/index.html
@@ -1,42 +1,84 @@
 <!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/styles.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-blue-700 bg-blue-500"
+      >
+        Start Recording
+      </button>
+      <div
+        class="chat-window flex flex-col flex-grow max-h-full overflow-hidden md:max-h-3/4"
+      >
+        <div
+          id="chatHistory"
+          class="flex flex-col items-start space-y-2 overflow-y-auto p-4"
+        >
           <!-- 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 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 class="sprite" />
       </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>
diff --git a/neon_iris/version.py b/neon_iris/version.py
index d495d3e..f67d04b 100644
--- a/neon_iris/version.py
+++ b/neon_iris/version.py
@@ -27,4 +27,4 @@
 # NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 # SOFTWARE,  EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
-__version__ = "0.1.1a2"
+__version__ = "0.1.1a3"