diff --git a/gbajs3/src/components/controls/__snapshots__/control-panel.spec.tsx.snap b/gbajs3/src/components/controls/__snapshots__/control-panel.spec.tsx.snap
index 3cd39c16..d7529d8b 100644
--- a/gbajs3/src/components/controls/__snapshots__/control-panel.spec.tsx.snap
+++ b/gbajs3/src/components/controls/__snapshots__/control-panel.spec.tsx.snap
@@ -54,7 +54,7 @@ exports[`<ControlPanel /> > renders with default desktop position and size 1`] =
 }
 
 .c3:active {
-  color: #0d6efd;
+  color: #1c76fd;
 }
 
 .c5 {
@@ -247,7 +247,7 @@ exports[`<ControlPanel /> > renders with default desktop position and size 1`] =
         >
           <button
             aria-label="Mute Volume"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1928est-MuiButtonBase-root-MuiIconButton-root"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-62e45k-MuiButtonBase-root-MuiIconButton-root"
             tabindex="0"
             type="button"
           >
@@ -368,7 +368,7 @@ exports[`<ControlPanel /> > renders with default desktop position and size 1`] =
           </span>
           <button
             aria-label="Max Volume"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1928est-MuiButtonBase-root-MuiIconButton-root"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-62e45k-MuiButtonBase-root-MuiIconButton-root"
             tabindex="0"
             type="button"
           >
@@ -405,7 +405,7 @@ exports[`<ControlPanel /> > renders with default desktop position and size 1`] =
         >
           <button
             aria-label="Regular Speed"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1928est-MuiButtonBase-root-MuiIconButton-root"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-62e45k-MuiButtonBase-root-MuiIconButton-root"
             tabindex="0"
             type="button"
           >
@@ -496,7 +496,7 @@ exports[`<ControlPanel /> > renders with default desktop position and size 1`] =
           </span>
           <button
             aria-label="Max Fast Forward"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1928est-MuiButtonBase-root-MuiIconButton-root"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-62e45k-MuiButtonBase-root-MuiIconButton-root"
             tabindex="0"
             type="button"
           >
@@ -572,7 +572,7 @@ exports[`<ControlPanel /> > renders with default mobile position and size 1`] =
 }
 
 .c3:active {
-  color: #0d6efd;
+  color: #1c76fd;
 }
 
 .c5 {
@@ -765,7 +765,7 @@ exports[`<ControlPanel /> > renders with default mobile position and size 1`] =
         >
           <button
             aria-label="Mute Volume"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1928est-MuiButtonBase-root-MuiIconButton-root"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-62e45k-MuiButtonBase-root-MuiIconButton-root"
             tabindex="0"
             type="button"
           >
@@ -886,7 +886,7 @@ exports[`<ControlPanel /> > renders with default mobile position and size 1`] =
           </span>
           <button
             aria-label="Max Volume"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1928est-MuiButtonBase-root-MuiIconButton-root"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-62e45k-MuiButtonBase-root-MuiIconButton-root"
             tabindex="0"
             type="button"
           >
@@ -923,7 +923,7 @@ exports[`<ControlPanel /> > renders with default mobile position and size 1`] =
         >
           <button
             aria-label="Regular Speed"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1928est-MuiButtonBase-root-MuiIconButton-root"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-62e45k-MuiButtonBase-root-MuiIconButton-root"
             tabindex="0"
             type="button"
           >
@@ -1014,7 +1014,7 @@ exports[`<ControlPanel /> > renders with default mobile position and size 1`] =
           </span>
           <button
             aria-label="Max Fast Forward"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1928est-MuiButtonBase-root-MuiIconButton-root"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-62e45k-MuiButtonBase-root-MuiIconButton-root"
             tabindex="0"
             type="button"
           >
diff --git a/gbajs3/src/components/shared/__snapshots__/loading-indicator.spec.tsx.snap b/gbajs3/src/components/shared/__snapshots__/loading-indicator.spec.tsx.snap
index dac81c3f..6785b257 100644
--- a/gbajs3/src/components/shared/__snapshots__/loading-indicator.spec.tsx.snap
+++ b/gbajs3/src/components/shared/__snapshots__/loading-indicator.spec.tsx.snap
@@ -6,22 +6,22 @@ exports[`<PacmanIndicator /> > renders pacman indicator with additional props 1`
   style="display: inherit; position: relative; font-size: 0px; height: 100px; width: 100px; margin: 0px auto;"
 >
   <span
-    style="width: 0px; height: 0px; border-right: 50px solid transparent; border-top: 50px solid transparent; border-left: 50px solid #0d6efd; border-bottom: 50px solid #0d6efd; border-radius: 50px; position: absolute; animation: react-spinners-PacmanLoader-pacman-1 0.8s infinite ease-in-out; animation-fill-mode: both;"
+    style="width: 0px; height: 0px; border-right: 50px solid transparent; border-top: 50px solid transparent; border-left: 50px solid #1c76fd; border-bottom: 50px solid #1c76fd; border-radius: 50px; position: absolute; animation: react-spinners-PacmanLoader-pacman-1 0.8s infinite ease-in-out; animation-fill-mode: both;"
   />
   <span
-    style="width: 0px; height: 0px; border-right: 50px solid transparent; border-top: 50px solid #0d6efd; border-left: 50px solid #0d6efd; border-bottom: 50px solid transparent; border-radius: 50px; position: absolute; animation: react-spinners-PacmanLoader-pacman-2 0.8s infinite ease-in-out; animation-fill-mode: both;"
+    style="width: 0px; height: 0px; border-right: 50px solid transparent; border-top: 50px solid #1c76fd; border-left: 50px solid #1c76fd; border-bottom: 50px solid transparent; border-radius: 50px; position: absolute; animation: react-spinners-PacmanLoader-pacman-2 0.8s infinite ease-in-out; animation-fill-mode: both;"
   />
   <span
-    style="width: 16.666666666666668px; height: 16.666666666666668px; background-color: rgb(13, 110, 253); margin: 2px; border-radius: 100%; transform: translate(0, -12.5px); position: absolute; top: 50px; left: 200px; animation: react-spinners-PacmanLoader-ball 1s 0.5s infinite linear; animation-fill-mode: both;"
+    style="width: 16.666666666666668px; height: 16.666666666666668px; background-color: rgb(28, 118, 253); margin: 2px; border-radius: 100%; transform: translate(0, -12.5px); position: absolute; top: 50px; left: 200px; animation: react-spinners-PacmanLoader-ball 1s 0.5s infinite linear; animation-fill-mode: both;"
   />
   <span
-    style="width: 16.666666666666668px; height: 16.666666666666668px; background-color: rgb(13, 110, 253); margin: 2px; border-radius: 100%; transform: translate(0, -12.5px); position: absolute; top: 50px; left: 200px; animation: react-spinners-PacmanLoader-ball 1s 0.75s infinite linear; animation-fill-mode: both;"
+    style="width: 16.666666666666668px; height: 16.666666666666668px; background-color: rgb(28, 118, 253); margin: 2px; border-radius: 100%; transform: translate(0, -12.5px); position: absolute; top: 50px; left: 200px; animation: react-spinners-PacmanLoader-ball 1s 0.75s infinite linear; animation-fill-mode: both;"
   />
   <span
-    style="width: 16.666666666666668px; height: 16.666666666666668px; background-color: rgb(13, 110, 253); margin: 2px; border-radius: 100%; transform: translate(0, -12.5px); position: absolute; top: 50px; left: 200px; animation: react-spinners-PacmanLoader-ball 1s 1s infinite linear; animation-fill-mode: both;"
+    style="width: 16.666666666666668px; height: 16.666666666666668px; background-color: rgb(28, 118, 253); margin: 2px; border-radius: 100%; transform: translate(0, -12.5px); position: absolute; top: 50px; left: 200px; animation: react-spinners-PacmanLoader-ball 1s 1s infinite linear; animation-fill-mode: both;"
   />
   <span
-    style="width: 16.666666666666668px; height: 16.666666666666668px; background-color: rgb(13, 110, 253); margin: 2px; border-radius: 100%; transform: translate(0, -12.5px); position: absolute; top: 50px; left: 200px; animation: react-spinners-PacmanLoader-ball 1s 1.25s infinite linear; animation-fill-mode: both;"
+    style="width: 16.666666666666668px; height: 16.666666666666668px; background-color: rgb(28, 118, 253); margin: 2px; border-radius: 100%; transform: translate(0, -12.5px); position: absolute; top: 50px; left: 200px; animation: react-spinners-PacmanLoader-ball 1s 1.25s infinite linear; animation-fill-mode: both;"
   />
 </span>
 `;
diff --git a/gbajs3/src/context/theme/theme.tsx b/gbajs3/src/context/theme/theme.tsx
index 11a1616d..838b7a3f 100644
--- a/gbajs3/src/context/theme/theme.tsx
+++ b/gbajs3/src/context/theme/theme.tsx
@@ -20,7 +20,7 @@ export const GbaDarkTheme: DefaultTheme = {
   darkGrayBlue: '#495057',
   disabledGray: '#6c757d',
   errorRed: '#d32f2f',
-  gbaThemeBlue: '#0d6efd',
+  gbaThemeBlue: '#1c76fd',
   mediumBlack: '#100901',
   menuHighlight: '#ffffff26',
   menuHover: '#0a58ca',