diff --git a/images/chromium-headful/client/public/browserconfig.xml b/images/chromium-headful/client/public/browserconfig.xml
index ededce1..0fd3ece 100644
--- a/images/chromium-headful/client/public/browserconfig.xml
+++ b/images/chromium-headful/client/public/browserconfig.xml
@@ -3,7 +3,7 @@
     <msapplication>
         <tile>
             <square150x150logo src="/mstile-150x150.png"/>
-            <TileColor>#19bd9c</TileColor>
+            <TileColor>#7B42F6</TileColor>
         </tile>
     </msapplication>
 </browserconfig>
diff --git a/images/chromium-headful/client/public/index.html b/images/chromium-headful/client/public/index.html
index b954679..9ffe2c3 100644
--- a/images/chromium-headful/client/public/index.html
+++ b/images/chromium-headful/client/public/index.html
@@ -9,9 +9,9 @@
     <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
     <link rel="manifest" href="site.webmanifest">
-    <link rel="mask-icon" href="safari-pinned-tab.svg" color="#19bd9c">
-    <meta name="msapplication-TileColor" content="#19bd9c">
-    <meta name="theme-color" content="#19bd9c">
+    <link rel="mask-icon" href="safari-pinned-tab.svg" color="#7B42F6">
+    <meta name="msapplication-TileColor" content="#7B42F6">
+    <meta name="theme-color" content="#7B42F6">
     <style> /* weird iOS bug, if this is not set right here, video just does not start */ .video-container { width: 100%; height: 100%; } </style>
   </head>
   <body>
diff --git a/images/chromium-headful/client/public/kernel.svg b/images/chromium-headful/client/public/kernel.svg
new file mode 100644
index 0000000..b9a86da
--- /dev/null
+++ b/images/chromium-headful/client/public/kernel.svg
@@ -0,0 +1,4 @@
+<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M84.7905 13.2211L74.9468 13.2435C64.1463 13.268 55.4105 22.0579 55.435 32.8763L55.4574 42.736C55.4617 44.6402 51.9834 47.1903 50.1741 46.606L40.8053 43.5805C30.5258 40.2608 19.5058 45.9165 16.1916 56.2129L13.171 65.5971C9.85673 75.8935 15.5032 86.9316 25.7827 90.2513L35.1515 93.2768C36.9612 93.8613 38.3148 97.954 37.2007 99.4974L31.4328 107.487C25.1042 116.254 27.069 128.499 35.8212 134.838L43.798 140.616C52.5503 146.955 64.7757 144.987 71.1043 136.22L76.8722 128.23C83.2008 119.464 81.236 107.218 72.4838 100.879L64.507 95.1018C61.7862 93.1312 58.7349 83.8452 59.7652 80.6443L62.7858 71.2602C63.8149 68.0632 71.7043 62.2875 75.0579 62.2799C75.0579 62.2799 81.1699 61.3326 84.9015 62.2575C90.661 63.6851 96.1677 67.9771 97.2129 71.1746L100.276 80.5449C103.637 90.8262 114.682 96.4318 124.947 93.0654L134.302 89.9973C144.566 86.6309 150.162 75.5673 146.802 65.286L143.739 55.9157C140.378 45.6345 129.332 40.0289 119.068 43.3953L109.713 46.4634C107.904 47.0566 104.418 44.5311 104.413 42.6248L104.391 32.765C104.367 21.9467 95.591 13.1966 84.7905 13.2211Z" fill="#AC86F9"/>
+<path d="M94.4445 115.668C94.4445 110.759 98.4241 106.779 103.333 106.779H125.556C130.465 106.779 134.444 110.759 134.444 115.668V137.89C134.444 142.799 130.465 146.779 125.556 146.779H103.333C98.4241 146.779 94.4445 142.799 94.4445 137.89V115.668Z" fill="#AC86F9"/>
+</svg>
diff --git a/images/chromium-headful/client/public/site.webmanifest b/images/chromium-headful/client/public/site.webmanifest
index 03c2b31..4d1b792 100644
--- a/images/chromium-headful/client/public/site.webmanifest
+++ b/images/chromium-headful/client/public/site.webmanifest
@@ -13,7 +13,7 @@
             "type": "image/png"
         }
     ],
-    "theme_color": "#19bd9c",
-    "background_color": "#19bd9c",
+    "theme_color": "#7B42F6",
+    "background_color": "#7B42F6",
     "display": "standalone"
 }
diff --git a/images/chromium-headful/client/src/assets/styles/_variables.scss b/images/chromium-headful/client/src/assets/styles/_variables.scss
index f74ac67..2f1fb4b 100644
--- a/images/chromium-headful/client/src/assets/styles/_variables.scss
+++ b/images/chromium-headful/client/src/assets/styles/_variables.scss
@@ -21,10 +21,9 @@ $background-modifier-accent: hsla(0, 0%, 100%, 0.06);
 $elevation-low: 0 1px 0 rgba(4, 4, 5, 0.2), 0 1.5px 0 rgba(6, 6, 7, 0.05), 0 2px 0 rgba(4, 4, 5, 0.05);
 $elevation-high: 0 8px 16px rgba(0, 0, 0, 0.24);
 
-$style-primary: #19bd9c;
+$style-primary: #7B42F6;
 $style-error: #d32f2f;
 
 $menu-height: 40px;
 $controls-height: 125px;
 $side-width: 400px;
-
diff --git a/images/chromium-headful/client/src/components/connect.vue b/images/chromium-headful/client/src/components/connect.vue
index c850c64..2d17524 100644
--- a/images/chromium-headful/client/src/components/connect.vue
+++ b/images/chromium-headful/client/src/components/connect.vue
@@ -11,8 +11,7 @@
         </button>
       </form>
       <div class="loader" v-if="connecting">
-        <div class="bounce1"></div>
-        <div class="bounce2"></div>
+        <img src="/kernel.svg" class="spinning-logo" alt="Loading..." />
       </div>
     </div>
   </div>
@@ -103,40 +102,25 @@
       .loader {
         width: 90px;
         height: 90px;
-        position: relative;
         margin: 0 auto;
+        display: flex;
+        justify-content: center;
+        align-items: center;
 
-        .bounce1,
-        .bounce2 {
+        .spinning-logo {
           width: 100%;
           height: 100%;
-          border-radius: 50%;
-          background-color: $style-primary;
-          opacity: 0.6;
-          position: absolute;
-          top: 0;
-          left: 0;
-
-          -webkit-animation: bounce 2s infinite ease-in-out;
-          animation: bounce 2s infinite ease-in-out;
-        }
-
-        .bounce2 {
-          -webkit-animation-delay: -1s;
-          animation-delay: -1s;
+          animation: spin 2s linear infinite;
         }
       }
     }
 
-    @keyframes bounce {
-      0%,
-      100% {
-        transform: scale(0);
-        -webkit-transform: scale(0);
+    @keyframes spin {
+      from {
+        transform: rotate(0deg);
       }
-      50% {
-        transform: scale(1);
-        -webkit-transform: scale(1);
+      to {
+        transform: rotate(360deg);
       }
     }
   }
diff --git a/images/chromium-headful/client/src/components/video.vue b/images/chromium-headful/client/src/components/video.vue
index 4c4fe0f..ecbcb26 100644
--- a/images/chromium-headful/client/src/components/video.vue
+++ b/images/chromium-headful/client/src/components/video.vue
@@ -1,6 +1,6 @@
 <template>
   <div ref="component" class="video">
-    <div ref="player" class="player">
+    <div ref="player" class="player" :class="{ 'is-muted': muted }">
       <div ref="container" class="player-container">
         <video ref="video" playsinline />
         <div class="emotes">
@@ -85,6 +85,19 @@
 </template>
 
 <style lang="scss" scoped>
+  /* KERNEL MODIFICATION: Keyframes for the mute indicator pulse effect */
+  @keyframes mute-pulse {
+    0% {
+      box-shadow: inset 0 0 0 2px rgba(255, 80, 80, 0.2);
+    }
+    50% {
+      box-shadow: inset 0 0 0 2px rgba(255, 80, 80, 0.4);
+    }
+    100% {
+      box-shadow: inset 0 0 0 2px rgba(255, 80, 80, 0.2);
+    }
+  }
+
   .video {
     width: 100%;
     height: 100%;
@@ -96,6 +109,11 @@
       align-items: center;
       background: #000;
 
+      /* KERNEL MODIFICATION: Style for the mute indicator */
+      &.is-muted {
+        animation: mute-pulse 2s infinite;
+      }
+
       .video-menu {
         position: absolute;
         right: 20px;
@@ -259,6 +277,10 @@
     private fullscreen = false
     private mutedOverlay = true
 
+    /* KERNEL MODIFICATION: State flag to ensure unmute happens only once. */
+    private hasInteracted = false
+    private unmuteHandler: (() => void) | null = null
+
     get admin() {
       return this.$accessor.user.admin
     }
@@ -470,6 +492,23 @@
       }
     }
 
+    /* KERNEL MODIFICATION: Centralized one-time unmute logic. */
+    _unmuteOnFirstInteraction() {
+      if (this.hasInteracted || !this.muted) {
+        return
+      }
+
+      this.hasInteracted = true
+      this.unmute()
+      this.$accessor.video.setVolume(100)
+
+      // Clean up global listeners if they were set
+      if (this.unmuteHandler) {
+        document.documentElement.removeEventListener('mousedown', this.unmuteHandler)
+        document.documentElement.removeEventListener('keydown', this.unmuteHandler)
+      }
+    }
+
     mounted() {
       this._container.addEventListener('resize', this.onResize)
       this.onVolumeChanged(this.volume)
@@ -533,12 +572,23 @@
         this.$client.sendData('keyup', { key: this.keyMap(key) })
       }
       this.keyboard.listenTo(this._overlay)
+
+      /* KERNEL MODIFICATION: Set up listeners for the first interaction. */
+      this.unmuteHandler = this._unmuteOnFirstInteraction.bind(this)
+      document.documentElement.addEventListener('mousedown', this.unmuteHandler, { once: true })
+      document.documentElement.addEventListener('keydown', this.unmuteHandler, { once: true })
     }
 
     beforeDestroy() {
       this.observer.disconnect()
       this.$accessor.video.setPlayable(false)
       /* Guacamole Keyboard does not provide destroy functions */
+
+      /* KERNEL MODIFICATION: Clean up listeners on component destruction. */
+      if (this.unmuteHandler) {
+        document.documentElement.removeEventListener('mousedown', this.unmuteHandler)
+        document.documentElement.removeEventListener('keydown', this.unmuteHandler)
+      }
     }
 
     get hasMacOSKbd() {
@@ -761,6 +811,9 @@
     }
 
     onMouseDown(e: MouseEvent) {
+      /* KERNEL MODIFICATION: Trigger unmute on first video click. */
+      this._unmuteOnFirstInteraction()
+
       if (!this.hosting) {
         this.$emit('control-attempt', e)
       }
@@ -846,4 +899,4 @@
       this._overlay.focus()
     }
   }
-</script>
+</script>
\ No newline at end of file
