diff --git a/images/chromium-headful/client/src/assets/styles/_variables.scss b/images/chromium-headful/client/src/assets/styles/_variables.scss
index f74ac679..d487a952 100644
--- a/images/chromium-headful/client/src/assets/styles/_variables.scss
+++ b/images/chromium-headful/client/src/assets/styles/_variables.scss
@@ -21,7 +21,7 @@ $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: #8b5cf6;
 $style-error: #d32f2f;
 
 $menu-height: 40px;
diff --git a/images/chromium-headful/client/src/components/about.vue b/images/chromium-headful/client/src/components/about.vue
index 96a710ec..32d4e80d 100644
--- a/images/chromium-headful/client/src/components/about.vue
+++ b/images/chromium-headful/client/src/components/about.vue
@@ -3,8 +3,7 @@
     <div class="window">
       <div class="loading" v-if="loading">
         <div class="loader">
-          <div class="bounce1"></div>
-          <div class="bounce2"></div>
+          <img src="../assets/images/logo.svg" alt="loading" aria-hidden="true" class="kernel-logo" />
         </div>
       </div>
 
@@ -85,25 +84,20 @@
           height: 90px;
           position: relative;
           margin: 0 auto 20px auto;
+          display: flex;
+          justify-content: center;
+          align-items: center;
 
-          .bounce1,
-          .bounce2 {
+          .kernel-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;
+            animation: kernel-logo-spin 1s linear infinite;
           }
 
-          .bounce2 {
-            -webkit-animation-delay: -1s;
-            animation-delay: -1s;
+          @media (prefers-reduced-motion: reduce) {
+            .kernel-logo {
+              animation: none;
+            }
           }
         }
       }
@@ -114,15 +108,12 @@
     }
   }
 
-  @keyframes bounce {
-    0%,
-    100% {
-      transform: scale(0);
-      -webkit-transform: scale(0);
+  @keyframes kernel-logo-spin {
+    from {
+      transform: rotate(0deg);
     }
-    50% {
-      transform: scale(1);
-      -webkit-transform: scale(1);
+    to {
+      transform: rotate(360deg);
     }
   }
 </style>
diff --git a/images/chromium-headful/client/src/components/connect.vue b/images/chromium-headful/client/src/components/connect.vue
index c850c642..ab3f3657 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="../assets/images/logo.svg" alt="loading" aria-hidden="true" class="kernel-logo" />
       </div>
     </div>
   </div>
@@ -105,39 +104,31 @@
         height: 90px;
         position: relative;
         margin: 0 auto;
+        display: flex;
+        justify-content: center;
+        align-items: center;
 
-        .bounce1,
-        .bounce2 {
+        .kernel-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;
+          animation: kernel-logo-spin 1s linear infinite;
         }
 
-        .bounce2 {
-          -webkit-animation-delay: -1s;
-          animation-delay: -1s;
+        @media (prefers-reduced-motion: reduce) {
+          .kernel-logo {
+            animation: none;
+          }
         }
       }
     }
+  }
 
-    @keyframes bounce {
-      0%,
-      100% {
-        transform: scale(0);
-        -webkit-transform: scale(0);
-      }
-      50% {
-        transform: scale(1);
-        -webkit-transform: scale(1);
-      }
+  @keyframes kernel-logo-spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
     }
   }
 </style>