diff --git a/lang/english/css/base.css b/lang/english/css/base.css
index 238b0206..b5b04bf6 100644
--- a/lang/english/css/base.css
+++ b/lang/english/css/base.css
@@ -1,36 +1,43 @@
 html {
   var(font-ui): "Segoe UI";
-  var(color-ui-text-primary): #eff0f1;
-  var(color-ui-text-muted): #b0b6bc;
-  var(color-statusbar-background): #31363b;
-  var(color-statusbar-border): #434242;
-  var(color-statusbar-hover-border): #76797c;
-  var(color-pause-panel-background): #25282c;
-  var(color-main-background): #2d2d2d;
-  var(color-titlebar-background): #181818;
-  var(color-titlebar-background-inactive): #2d2d2d;
-  var(color-titlebar-text): #FFF;
-  var(color-titlebar-icon): #FFF;
-  var(color-titlebar-icon-hover): #0078d7;
-  var(color-titlebar-icon-inactive): #2f7bb0;
-  var(color-menubar-background): #181818;
-  var(color-menubar-background-hover): #2c2c2c;
-  var(color-menubar-background-active): #2c2c2c;
-  var(color-menuitem-background): #2c2c2c;
-  var(color-menuitem-background-hover): #383838;
-  var(color-menu-popup-background): #252526;
-  var(color-menu-popup-border): #454545;
-  var(color-menu-popup-shadow): rgba(0, 0, 0, 0.45);
-  var(color-menu-shortcut-text): #b8b8b8;
-  var(color-menu-separator): #3d3d3d;
-  var(color-context-menu-background): #2b2b2b;
-  var(color-context-menu-border): #3c3c3c;
-  var(color-context-menu-hover): #3a3a3a;
-  var(color-context-menu-text): #f3f3f3;
-  var(color-context-menu-muted): #a8a8a8;
-  var(color-context-menu-separator): #404040;
-  var(color-context-menu-shadow): rgba(0, 0, 0, 0.55);
-  var(color-window-border): #353535;
+  var(color-ui-text-primary): #e6ecf5;
+  var(color-ui-text-muted): #8d9bb3;
+  var(color-statusbar-background): #0a1222;
+  var(color-statusbar-border): #1a2840;
+  var(color-statusbar-hover-border): #2f80ff;
+  var(color-pause-panel-background): #0b1422;
+  var(color-main-background): #090f1a;
+  var(color-titlebar-background): #0a1222;
+  var(color-titlebar-background-inactive): #0a1222;
+  var(color-titlebar-text): #e6ecf5;
+  var(color-titlebar-icon): #c9d4e5;
+  var(color-titlebar-icon-hover): #18263f;
+  var(color-titlebar-icon-inactive): #5d6b82;
+  var(color-menubar-background): #0a1222;
+  var(color-menubar-background-hover): #18263f;
+  var(color-menubar-background-active): #1e3050;
+  var(color-menuitem-background): #16233a;
+  var(color-menuitem-background-hover): #1a2a44;
+  var(color-menu-popup-background): #0f1a2c;
+  var(color-menu-popup-border): #22324d;
+  var(color-menu-popup-shadow): rgba(0, 0, 0, 0.55);
+  var(color-menu-shortcut-text): #8d9bb3;
+  var(color-menu-separator): #1f2d45;
+  var(color-context-menu-background): #0f1a2c;
+  var(color-context-menu-border): #22324d;
+  var(color-context-menu-hover): #1a2a44;
+  var(color-context-menu-text): #e6ecf5;
+  var(color-context-menu-muted): #8d9bb3;
+  var(color-context-menu-separator): #1f2d45;
+  var(color-context-menu-shadow): rgba(0, 0, 0, 0.6);
+  var(color-window-border): #263856;
+  var(color-titlebar-version): #7d8aa3;
+  var(color-menubar-border): #1a2840;
+  var(color-accent): #2f80ff;
+  var(color-accent-soft): rgba(47, 128, 255, 0.16);
+  var(color-card-background): #111c2e;
+  var(color-card-border): #1b2a42;
+  var(color-card-border-hover): #2c4166;
 
   border: 1px solid color(color-window-border);
   background-color: color(color-main-background);
@@ -64,8 +71,8 @@ html > header > window-caption
   width: *;
   padding: 0 1em;
   font-family: var(font-ui), Arial, sans-serif;
-  font-size: 0.9em;
-  font-weight: 100;
+  font-size: 0.95em;
+  font-weight: 600;
 }
 
 html > header > window-caption span
@@ -73,6 +80,14 @@ html > header > window-caption span
   vertical-align: middle;
 }
 
+html > header > window-caption span.caption-version
+{
+  display: inline-block;
+  margin-left: 0.9em;
+  font-weight: 400;
+  color: color(color-titlebar-version);
+}
+
 html > header > window-caption img
 {
   vertical-align: middle;
diff --git a/lang/english/css/config.css b/lang/english/css/config.css
index 7ec3e240..22c217dc 100644
--- a/lang/english/css/config.css
+++ b/lang/english/css/config.css
@@ -1,6 +1,14 @@
 html {
-  var(color-config-page): #31363B;
-  var(color-config-page-border): #505050;
+  var(color-config-page): #0f1a2c;
+  var(color-config-page-border): #1f2e48;
+  var(color-control-background): #0b1424;
+  var(color-control-border): #26385a;
+  var(color-control-hover): #132138;
+  var(color-control-disabled): #0a101b;
+  var(color-control-disabled-text): #56637a;
+  var(color-tab-background): #111d31;
+  var(color-tooltip-background): #16233a;
+  var(color-tooltip-border): #2c4166;
 }
 
 div.ConfigPage
@@ -14,8 +22,9 @@ div.ConfigPage
 
 popup.tooltip
 {
-  background: #4f6459;
-  border: 1px solid #6a6a6a;
+  background: color(color-tooltip-background);
+  border: 1px solid color(color-tooltip-border);
+  border-radius: 6px;
   padding: 0.5rem;
   color: color(color-ui-text-primary);
   font-family: var(font-ui), Arial, sans-serif;
@@ -34,42 +43,42 @@ popup.tooltip
 }
 
 .tab-button {
-  background: #2b2f32;
-  border: 1px solid #55575a;
+  background: color(color-tab-background);
+  border: 1px solid color(color-config-page-border);
   border-bottom: 1px solid color(color-config-page-border);
-  border-radius: 2px 2px 0 0;
-  color: color(color-ui-text-primary);
+  border-top: 2px solid transparent;
+  border-radius: 6px 6px 0 0;
+  color: color(color-ui-text-muted);
   font-family: var(font-ui), Arial, sans-serif;
   font-size: 0.8rem;
-  padding: 0.2rem 1.3rem 0.2rem 1.3rem;
-  margin: 0;
+  padding: 0.25rem 1.1rem;
+  margin: 0 0.2rem -1px 0;
   position: relative;
-  z-index: 2; 
-  margin-bottom: -1px;
+  z-index: 2;
   min-width: 2rem;
 }
 
 .tab-button:hover {
-  border: 1px solid #55575a;
-  border-bottom: 1px solid color(color-config-page-border);
+  background: color(color-control-hover);
+  color: color(color-ui-text-primary);
 }
 
-.tab-button:active {
-  background: #2b2f32;
-}
-
-.tab-button.active {
+.tab-button.active,
+.tab-button:visited {
   background: color(color-config-page);
   border-color: color(color-config-page-border);
+  border-top: 2px solid color(color-accent);
   border-bottom: 1px solid color(color-config-page);
+  color: color(color-ui-text-primary);
 }
 
-.input-group 
+.input-group
 {
   position: relative;
   background-color: color(color-config-page);
-  border: 1px solid #55575a;
-  padding: 1.2rem 0.5rem 0.5rem 0.5rem;
+  border: 1px solid color(color-config-page-border);
+  border-radius: 6px;
+  padding: 1.2rem 0.6rem 0.5rem 0.6rem;
   margin: 0 0 1rem 0;
   flow: vertical;
 }
@@ -80,7 +89,7 @@ popup.tooltip
   padding: 0.5rem 0 0;
 }
 
-.group-title 
+.group-title
 {
   position: absolute;
   top: -0.5rem;
@@ -89,7 +98,8 @@ popup.tooltip
   background-color: color(color-config-page);
   padding: 0 6px;
   font-size: 0.8rem;
-  color: #f0f0f0;
+  font-weight: 600;
+  color: color(color-ui-text-primary);
 }
 
 .input-row
@@ -97,9 +107,9 @@ popup.tooltip
   display: inline-block;
   position: relative;
   background-color: color(color-config-page);
-  border: 1px solid #55575a;
+  border: 1px solid color(color-config-page-border);
   padding: 0.4em 0.2rem 0.2rem 0.2rem;
-  border-radius: 2px;
+  border-radius: 4px;
   margin: 0 * 0.9rem *;
   width: *;
 }
@@ -113,7 +123,7 @@ popup.tooltip
   background-color: color(color-config-page);
   padding: 0 6px;
   font-size: 0.8rem;
-  color: #f0f0f0;
+  color: color(color-ui-text-muted);
 }
 
 .input-row button
@@ -125,24 +135,24 @@ popup.tooltip
 #ConfigContents {
   width: *;
   height: *;
-  color: #ffffff;
+  color: color(color-ui-text-primary);
 }
 
   @set styled-select < std-select-dropdown {
     :root {
-      color: #FFF;
-      padding: 0.1em;
+      color: color(color-ui-text-primary);
+      padding: 0.2em 0.3em;
       margin: 0 0 0.3em 0;
       width: *;
-      border: 1px solid #54575b;
-      border-radius: .2em;
-      background: #2F2F31;
+      border: 1px solid color(color-control-border);
+      border-radius: 6px;
+      background: color(color-control-background);
     }
     :root:disabled,
     :root[disabled] {
-      background-color: #1a1a1a !important;
-      color: #666666 !important;
-      border-color: #333333 !important;
+      background-color: color(color-control-disabled) !important;
+      color: color(color-control-disabled-text) !important;
+      border-color: color(color-config-page-border) !important;
       cursor: not-allowed;
       opacity: 0.6;
     }
@@ -150,28 +160,36 @@ popup.tooltip
     :root:active,
     :root:hover
     {
-      border-color: #3daee9;
+      border-color: color(color-accent);
     }
     :root:hover {
-      background: #3C3C3C;
+      background: color(color-control-hover);
     }
     :root > popup.list {
-      background-color: #2B2B2B;
-      border-color: #1F1F1F;
-      color: #FFF;
+      background-color: color(color-config-page);
+      border: 1px solid color(color-control-border);
+      border-radius: 6px;
+      color: color(color-ui-text-primary);
     }
     :root option {
       vertical-align: middle;
-      padding: 0.3em;
+      padding: 0.3em 0.5em;
+    }
+    :root option:hover {
+      background: color(color-control-hover);
+    }
+    :root option:current {
+      background: color(color-accent);
+      color: #ffffff;
     }
     :root > button {
-      fill: #FFF;
+      fill: color(color-ui-text-muted);
     }
   }
   select:not([type]) {
     style-set: styled-select;
   }
-	
+
 ComboBox,
 ComboBox > select,
 ListBox,
@@ -185,40 +203,47 @@ input[type="checkbox"] {
   appearance:none;
   height: 1em;
   width: 1em;
-  border: 1px solid #818183;
-  background: none;
-  border-radius: 0.3em;
+  border: 1px solid #4a5b78;
+  background: color(color-control-background);
+  border-radius: 0.25em;
   margin: 0 0.3em 0 0;
 }
 
+input[type="checkbox"]:hover {
+  border-color: color(color-accent);
+}
+
 input[type="checkbox"]:disabled,
 input[type="checkbox"][disabled]
 {
-  background-color: #1a1a1a !important;
+  background-color: color(color-control-disabled) !important;
   opacity: 0.4;
 }
 
 input[type="checkbox"]:checked {
-   background: no-repeat 50% 50%;   
+   background: no-repeat 50% 50%;
+   background-color: color(color-accent);
    background-image: url(stock:checkmark);
    background-size: 0.7em;
+   border-color: color(color-accent);
+   fill: #ffffff;
 }
 
 input[type="text"] {
-  color: #FFF;
-  padding: 0.1em;
+  color: color(color-ui-text-primary);
+  padding: 0.2em 0.3em;
   margin: 0 0 0.3em 0;
   width: *;
-  border: 1px solid #54575b;
-  border-radius: .2em;
-  background: #2F2F31;
+  border: 1px solid color(color-control-border);
+  border-radius: 6px;
+  background: color(color-control-background);
 }
 
 input[type="text"]:disabled,
 input[type="text"][disabled] {
-  background-color: #1a1a1a !important;
-  color: #666666 !important;
-  border-color: #333333 !important;
+  background-color: color(color-control-disabled) !important;
+  color: color(color-control-disabled-text) !important;
+  border-color: color(color-config-page-border) !important;
   cursor: not-allowed;
   opacity: 0.6;
 }
@@ -226,20 +251,20 @@ input[type="text"][disabled] {
 input[type="text"]:focus,
 input[type="text"]:active
 {
-  border-color: #3daee9;
+  border-color: color(color-accent);
 }
 
 input[type="text"]:hover {
-  background: #3C3C3C;
+  background: color(color-control-hover);
 }
 
 input[type="text"]:disabled:hover,
 input[type="text"][disabled]:hover {
-  background-color: #1a1a1a !important;
+  background-color: color(color-control-disabled) !important;
 }
 
 label:disabled {
-  color: #666666 !important;
+  color: color(color-control-disabled-text) !important;
   opacity: 0.6;
 }
 
@@ -251,7 +276,7 @@ label:disabled {
 
 .hotkeys-hint
 {
-  color: #bdc3c7;
+  color: color(color-ui-text-muted);
   font-size: 0.85rem;
   margin-bottom: 0.75rem;
 }
@@ -274,9 +299,9 @@ label:disabled {
 .profile-grid
 {
   flow: horizontal-wrap;
-  border: 1px solid #55575a;
-  border-radius: 5px;
-  background: #1e1e1e;
+  border: 1px solid color(color-config-page-border);
+  border-radius: 6px;
+  background: color(color-control-background);
   padding: 0.5rem;
   width: *;
   height: *;
@@ -300,13 +325,13 @@ label:disabled {
 
 .profile-tile:hover
 {
-  background: rgba(255, 255, 255, 0.06);
+  background: color(color-control-hover);
 }
 
 .profile-tile.current
 {
-  background: rgba(61, 174, 233, 0.22);
-  border: 2px solid #3daee9;
+  background: color(color-accent-soft);
+  border: 2px solid color(color-accent);
 }
 
 .profile-tile.current > .profile-tile-name
@@ -320,7 +345,7 @@ label:disabled {
   width: 96px;
   height: 96px;
   border-radius: 4px;
-  background: #111111;
+  background: color(color-control-background);
   overflow: hidden;
   foreground-repeat: no-repeat;
   foreground-position: 50% 50%;
@@ -358,7 +383,7 @@ label:disabled {
   width: 24px;
   height: 24px;
   border-radius: 12px;
-  background: #2b2f32;
+  background: color(color-tab-background);
   border: none;
   color: #ffffff;
   padding: 0;
@@ -393,7 +418,7 @@ label:disabled {
 
 .profile-tile-edit:hover
 {
-  background: #3a4045;
+  background: color(color-control-hover);
 }
 
 .profile-tile-add
@@ -403,7 +428,7 @@ label:disabled {
   height: 118px;
   margin: 0.35rem;
   border-radius: 5px;
-  background: #2b2f32;
+  background: color(color-tab-background);
   cursor: pointer;
   behavior: clickable;
 }
@@ -416,8 +441,8 @@ label:disabled {
   width: 42px;
   height: 42px;
   border-radius: 21px;
-  background: #2b2f32;
-  border: 1px solid #55575a;
+  background: color(color-control-background);
+  border: 1px solid color(color-control-border);
   color: color(color-ui-text-primary);
   font-size: 1.6rem;
   font-family: var(font-ui), Arial, sans-serif;
@@ -431,8 +456,8 @@ label:disabled {
 
 .profile-tile-add-button:hover
 {
-  background: #3a4045;
-  border: 1px solid #3cafe9;
+  background: color(color-control-hover);
+  border: 1px solid color(color-accent);
 }
 
 .hotkeys-table
@@ -445,7 +470,7 @@ label:disabled {
 
 .hotkeys-table thead tr
 {
-  background: #2b2f32;
+  background: color(color-tab-background);
 }
 
 .hotkeys-table th,
@@ -478,5 +503,5 @@ label:disabled {
 
 .hotkey-binding:hover
 {
-  background: #3a3f44;
+  background: color(color-control-hover);
 }
diff --git a/lang/english/css/dialog.css b/lang/english/css/dialog.css
index 2d941687..0db1bfdf 100644
--- a/lang/english/css/dialog.css
+++ b/lang/english/css/dialog.css
@@ -1,24 +1,43 @@
 html {
-  var(color-dialog-background): #181818;
+  var(color-dialog-background): #0a1222;
+  var(color-button-background): #111d31;
+  var(color-button-border): #26385a;
+  var(color-button-hover): #16243d;
+  var(color-button-primary-hover): #4a91ff;
   background: color(color-dialog-background);
 }
 
 button {
   color: color(color-ui-text-primary);
-  background: #232728;
-  border: 1px solid #55575a;
+  background: color(color-button-background);
+  border: 1px solid color(color-button-border);
+  border-radius: 6px;
   font-family: var(font-ui), Arial, sans-serif;
   font-size: 0.8rem;
-  padding: 0.2rem;
+  padding: 0.25rem 0.6rem;
   min-width: 5rem;
 }
 
 button:hover {
-  border: 1px solid #3cafe9;
+  background: color(color-button-hover);
+  border: 1px solid color(color-accent);
 }
 
 button:active {
-  background: #3cafe9;
+  background: color(color-accent);
+  border-color: color(color-accent);
+  color: #ffffff;
+}
+
+button[role="window-ok"] {
+  background: color(color-accent);
+  border-color: color(color-accent);
+  color: #ffffff;
+}
+
+button[role="window-ok"]:hover {
+  background: color(color-button-primary-hover);
+  border-color: color(color-button-primary-hover);
 }
 
 .footer {
diff --git a/lang/english/css/main_window.css b/lang/english/css/main_window.css
index 2543bd7b..4bcc71a5 100644
--- a/lang/english/css/main_window.css
+++ b/lang/english/css/main_window.css
@@ -16,16 +16,17 @@
   border-top: 1px solid color(color-statusbar-border);
   font-family: var(font-ui), Arial, sans-serif;
   font-size: 0.8em;
-  font-weight: 100;
+  font-weight: 400;
   line-height: 1.2em;
-  height: 1.6rem;
+  height: 1.9rem;
 }
 
 #StatusText
 {
   width: *;
   text-align: right;
-  display: inline-block;
+  display: block;
+  vertical-align: middle;
   height: 1.2em;
   padding: 0.2em;
 }
@@ -37,7 +38,7 @@
   height: 1.2em;
   margin: 0 0.6em;
   vertical-align: middle;
-  background: rgba(239, 240, 241, 0.16);
+  background: color(color-statusbar-border);
 }
 
 #StatusBar #volumeAnchor
@@ -75,7 +76,8 @@
 #StatusBar #gpuCommandSynchronization
 {
   border: 1px solid transparent;
-  padding: 0.2em;
+  border-radius: 4dip;
+  padding: 0.2em 0.4em;
   display: block;
   height: 1.2em;
   vertical-align: middle;
@@ -88,6 +90,7 @@
 #StatusBar #gpuCommandSynchronization:hover
 {
   border: 1px solid color(color-statusbar-hover-border);
+  background: color(color-accent-soft);
 }
 
 #StatusBar #volume
@@ -173,8 +176,9 @@ rombrowser
   display: block;
   width: *;
   height: *;
-  padding: 0.5rem 1rem;
+  padding: 0.8rem 1.2rem 0.5rem;
   margin: 0;
+  background: color(color-main-background);
 }
 
 rombrowser .games-title
@@ -201,27 +205,30 @@ rombrowser .config-button .outline
 
 rombrowser .config-button:hover .outline
 {
-  fill: #232629;
+  fill: color(color-ui-text-primary);
 }
 
 rombrowser .config-button
 {
-  padding: 0.2rem;
+  padding: 0.3rem;
+  border: 1px solid color(color-card-border);
+  border-radius: 6px;
+  background-color: color(color-card-background);
 }
 
 rombrowser .config-button:hover
 {
-  background-color: #b3d9f6;
-  border-radius: 4px;
+  background-color: color(color-accent-soft);
+  border-color: color(color-accent);
 }
 
 rombrowser .games-title h1
 {
   font-family: var(font-ui), Arial, sans-serif;
-  font-size: 1.5rem;
-  font-weight: 400;
+  font-size: 1.9rem;
+  font-weight: 700;
   color: color(color-ui-text-primary);
-  padding: 0 0 0.6rem;
+  padding: 0 0 0.8rem;
   margin: 0;
   width:*
 }
@@ -259,14 +266,22 @@ rombrowser .rom-card-content
 rombrowser .rom-card
 {
   cursor: pointer;
-  border-radius: 8px;
-  border: 3px solid transparent;
+  border-radius: 10px;
+  border: 3px solid color(color-card-border);
+  background-color: color(color-card-background);
   context-menu: selector(menu#RomCardContextMenu);
+  transition: border-color linear 120ms;
+}
+
+rombrowser .rom-card:hover
+{
+  border-color: color(color-card-border-hover);
 }
 
 rombrowser .rom-card:visited
 {
-  border: 3px solid #76B9ED;
+  border: 3px solid color(color-accent);
+  box-shadow: 0 0 10px rgba(47, 128, 255, 0.45);
   cursor: pointer;
 }
 
@@ -417,18 +432,19 @@ rombrowser .games-grid[data-size="4"] .rom-card
 ul#menu-bar
 {
   margin: 0;
-  padding: 0 0.5em 0.3em 0.5em;
+  padding: 0.2em 0.5em;
   background: color(color-menubar-background);
   color: color(color-ui-text-primary);
+  border-bottom: 1px solid color(color-menubar-border);
   font-family: var(font-ui), Arial, sans-serif;
-  font-size: 0.9em;
-  font-weight: 100;
+  font-size: 0.95em;
+  font-weight: 400;
   flow: horizontal;
 }
 
 ul#menu-bar > li
 {
-  padding: 0.28em 0.55em;
+  padding: 0.2em 0.6em;
   margin: 0;
   white-space: nowrap;
   width: max-content;
@@ -446,7 +462,7 @@ ul#menu-bar > li:hover
 ul#menu-bar:focus > li:current,
 ul#menu-bar > li:owns-popup {
   background-color: color(color-menubar-background-active);
-  border-radius: 5px 5px 0;
+  border-radius: 5px;
 }
 
 ul#menu-bar caption u,
@@ -474,9 +490,9 @@ menu
   min-width: 14em;
   max-width:max-content;
   background: color(color-menu-popup-background);
-  color: #f0f0f0;
+  color: color(color-ui-text-primary);
   border: 1px solid color(color-menu-popup-border);
-  border-top: none;
+  border-radius: 6px;
   box-shadow: 0 0.25em 0.75em color(color-menu-popup-shadow);
 }
 
@@ -485,6 +501,7 @@ ul#menu-bar menu
   position: absolute;
   left: 0;
   top: 100%;
+  margin-top: 2px;
   z-index: 10000;
 }
 
@@ -520,7 +537,7 @@ menu li
   foreground-repeat: no-repeat;
   foreground-position: left 2px top 50%;
   padding: 0.4em 1.75em 0.4em 1.1em;
-  margin: 0;
+  margin: 0 0.3em;
 }
 
 menu li .menu-item-label
@@ -652,14 +669,14 @@ menu li .menu-accelerator:empty
 menu li:hover
 {
   background: color(color-menuitem-background-hover);
-  border-radius: 2px;
+  border-radius: 4px;
 }
 
 menu li:current,
 menu li:hover:owns-popup
 {
-  background-color: #094771;
-  border-radius: 2px;
+  background-color: color(color-accent);
+  border-radius: 4px;
 }
 
 menu li:current .menu-item-label,
diff --git a/lang/english/css/volume_slider.css b/lang/english/css/volume_slider.css
index ef84d998..007a3e69 100644
--- a/lang/english/css/volume_slider.css
+++ b/lang/english/css/volume_slider.css
@@ -5,14 +5,14 @@
     height: 4dip;
     padding: 5dip 6dip;
     border: none;
-    background: #505a64;
+    background: #24324a;
     background-clip: content-box;
     background-image: url(stock:block);
     background-repeat: no-repeat;
     background-position: 0 0;
     background-size: var(slider-position, 0px) 4dip;
     border-radius: 3dip;
-    fill: #0078d7;
+    fill: #2f80ff;
     foreground: none;
   }
 
diff --git a/lang/english/html/input_config.html b/lang/english/html/input_config.html
index 6b451f81..53bd9760 100644
--- a/lang/english/html/input_config.html
+++ b/lang/english/html/input_config.html
@@ -3,6 +3,7 @@
     <link href="base.css" rel="stylesheet" type="text/css" />
     <link href="dialog.css" rel="stylesheet" type="text/css" />
     <link href="config.css" rel="stylesheet" type="text/css" />
+    <link href="volume_slider.css" rel="stylesheet" type="text/css" />
     <title>Configure Input</title>
   </head>
   <header>
@@ -44,11 +45,7 @@ body {
    text-align: center;
    min-width: 2.5rem;
 }
-.tab-button:visited {
-  background: color(color-config-page);
-  border-color: color(color-config-page-border);
-  border-bottom: 1px solid color(color-config-page);
-}
+
 
 .connect {
   position: absolute;
@@ -86,11 +83,12 @@ div.button-column,
 {
   background: color(color-config-page);
   border: 1px solid color(color-config-page-border);
+  border-radius: 0 8px 8px 8px;
   width: max-content;
   height: max-content;
-  font-family: 'Segoe UI', Arial, sans-serif;
+  font-family: var(font-ui), Arial, sans-serif;
   font-size: 0.8rem;
-  color: #eff0f1;
+  color: color(color-ui-text-primary);
   padding: 1em;
 }
 
@@ -100,11 +98,12 @@ div.button-column,
   width: fit-content;
 }
 
-.controller-config .config-header .group 
+.controller-config .config-header .group
 {
   position: relative;
   background-color: color(color-config-page);
-  border: 1px solid #55575a;
+  border: 1px solid color(color-config-page-border);
+  border-radius: 6px;
   padding: 1.2rem 0.5rem 0.5rem 0.5rem;
   margin: 0 0 1rem 0;
 }
@@ -128,7 +127,8 @@ div.center-bottom-row
 {
   position: relative;
   background-color: color(color-config-page);
-  border: 1px solid #55575a;
+  border: 1px solid color(color-config-page-border);
+  border-radius: 6px;
   padding: 1.2rem 0.5rem 0.5rem 0.5rem;
   margin-right: 0.6rem;
   width: max-content;
@@ -201,7 +201,8 @@ div.center-bottom-row
 .controller-config .group.vibration #labelVibrationStrength:hover,
 .controller-config .group.vibration #vibrationStrengthPopupBtn:hover
 {
-  border: 1px solid #55575a;
+  border: 1px solid color(color-accent);
+  border-radius: 4px;
 }
 
 .controller-config .group.vibration #vibrationStrengthPopupBtn svg
@@ -221,7 +222,8 @@ div.center-bottom-row
 #VibrationStrengthPopup
 {
   background: color(color-config-page);
-  border: 1px solid #55575a;
+  border: 1px solid color(color-control-border);
+  border-radius: 6px;
   padding: 0.8em;
 }
 
@@ -338,16 +340,22 @@ button
 
 input[type=hslider]
 {
+  style-set: volume-slider-control;
   display: block;
   width: *;
 }
 
+.input-row > input[type=hslider]
+{
+  width: 4.6rem;
+}
+
 input[type=hslider] > button.slider 
 { 
   size:4dip; 
   foreground: none; 
-  background: #009CF6; 
-  border:2dip solid #009CF6;
+  background: color(color-accent);
+  border:2dip solid color(color-accent);
   border-radius:50%;
   padding: 0px;
   margin: 0px;
diff --git a/lang/english/html/system_config.html b/lang/english/html/system_config.html
index 2ca455a9..6a24adbd 100644
--- a/lang/english/html/system_config.html
+++ b/lang/english/html/system_config.html
@@ -24,28 +24,31 @@ body {
   #MainTabNav {
     width: 12em;
     height: *;
-    border: 1px solid #54575b;
-    border-radius: 0.5em;
+    border: 1px solid color(color-config-page-border);
+    border-radius: 8px;
     background-color: color(color-config-page);
-    margin: 0 0.4em 0 0;
-    color: #ffffff;
+    margin: 0 0.6em 0 0;
+    padding: 0.35em;
+    color: color(color-ui-text-primary);
     font-size: 0.9em;
   }
 
-  #MainTabNav > Page:first-child
-  {
-    border-radius: 0.5em 0.5em 0 0;
-  }
-
   #MainTabNav > Page
   {
-    padding: 0.2em 0.5em;
+    padding: 0.4em 0.7em;
+    margin: 0 0 0.15em 0;
+    border-radius: 6px;
+  }
+
+  #MainTabNav > Page:hover
+  {
+    background: color(color-control-hover);
   }
 
   #MainTabNav > Page:visited
   {
-    background: #b3d9f7;
-    color: #303030;
+    background: color(color-accent);
+    color: #ffffff;
   }
 
   .checkbox-row,
@@ -90,6 +93,11 @@ body {
     width: *;
   }
 
+  .page_content input[type="hslider"]:not(.volume-normal-marker)
+  {
+    style-set: volume-slider-control;
+  }
+
   .volume-slider
   {
     display: block;
@@ -119,51 +127,49 @@ PageNav.page_tabs {
 }
 
 PageNav.page_tabs page {
-  background: #2b2f32;
-  border: 1px solid #55575a;
+  background: color(color-tab-background);
+  border: 1px solid color(color-config-page-border);
   border-bottom: 1px solid color(color-config-page-border);
-  border-radius: 2px 2px 0 0;
-  color: #eff0f1;
-  font-family: 'Segoe UI', Arial, sans-serif;
-  font-size: 1rem;
-  padding: 0.2rem 1.3rem 0.2rem 1.3rem;
-  margin: 0;
+  border-top: 2px solid transparent;
+  border-radius: 6px 6px 0 0;
+  color: color(color-ui-text-muted);
+  font-family: var(font-ui), Arial, sans-serif;
+  font-size: 0.9rem;
+  padding: 0.25rem 1.1rem;
+  margin: 0 0.2rem -1px 0;
   position: relative;
-  z-index: 2; 
-  margin-bottom: -1px;
+  z-index: 2;
   min-width: 2rem;
   display: inline-block;
   width: max-content;
 }
 
 PageNav.page_tabs page:hover {
-  border: 1px solid #55575a;
-  border-bottom: 1px solid color(color-config-page-border);
-}
-
-PageNav.page_tabs page:visited {
-  background: color(color-config-page);
-  border-color: color(color-config-page-border);
-  border-bottom: 1px solid color(color-config-page);
+  background: color(color-control-hover);
+  color: color(color-ui-text-primary);
 }
 
+PageNav.page_tabs page:visited,
 PageNav.page_tabs page.active {
   background: color(color-config-page);
   border-color: color(color-config-page-border);
+  border-top: 2px solid color(color-accent);
   border-bottom: 1px solid color(color-config-page);
+  color: color(color-ui-text-primary);
 }
 
 .page_content
 {
   background: color(color-config-page);
   border: 1px solid color(color-config-page-border);
+  border-radius: 0 8px 8px 8px;
   width: *;
   height: *;
   flow: horizontal;
   padding: 1em 1em 0 1em;
   font-family: var(font-ui), Arial, sans-serif;
   font-size: 0.9rem;
-  color: #eff0f1;
+  color: color(color-ui-text-primary);
 }
 
 #gameDirectoryList,
@@ -174,9 +180,9 @@ PageNav.page_tabs page.active {
 
 #gameDirectoryList select,
 #addOnDirectoryList select {
-  background-color: #1e1e1e;
-  border: 1px solid #404040;
-  border-radius: 4px;
+  background-color: color(color-control-background);
+  border: 1px solid color(color-control-border);
+  border-radius: 6px;
   box-sizing: border-box;
   height: 8rem;
   max-height: 8rem;
@@ -191,14 +197,21 @@ PageNav.page_tabs page.active {
 {
   padding: 0.2rem 0.3rem;
   margin: 0.2rem 0.3rem;
-  border-radius: 3px;
-  color: white;
+  border-radius: 4px;
+  color: color(color-ui-text-primary);
+}
+
+#gameDirectoryList option:hover,
+#addOnDirectoryList option:hover
+{
+  background: color(color-control-hover);
 }
 
 #gameDirectoryList option:current,
 #addOnDirectoryList option:current
 {
-  color: #1e1e1e;
+  background: color(color-accent);
+  color: #ffffff;
 }
 
 body > .footer
diff --git a/src/nxemu/user_interface/sciter_main_window.cpp b/src/nxemu/user_interface/sciter_main_window.cpp
index 4b910da1..dab9a479 100644
--- a/src/nxemu/user_interface/sciter_main_window.cpp
+++ b/src/nxemu/user_interface/sciter_main_window.cpp
@@ -1075,7 +1075,15 @@ void SciterMainWindow::SetCaption(const std::string & caption)
     SciterElement captionElement(m_rootElement.FindFirst("[role='window-caption'] > span"));
     if (captionElement.IsValid())
     {
-        captionElement.SetHTML((uint8_t *)caption.data(), caption.size());
+        std::string captionHtml = caption;
+        size_t versionSep = m_windowTitle.find(' ');
+        if (versionSep != std::string::npos && caption.size() >= m_windowTitle.size() &&
+            caption.compare(caption.size() - m_windowTitle.size(), m_windowTitle.size(), m_windowTitle) == 0)
+        {
+            size_t versionStart = caption.size() - m_windowTitle.size() + versionSep + 1;
+            captionHtml = caption.substr(0, versionStart - 1) + "<span class=\"caption-version\">" + caption.substr(versionStart) + "</span>";
+        }
+        captionElement.SetHTML((uint8_t *)captionHtml.data(), captionHtml.size());
     }
 }