diff --git a/zero.Web.UI/App/components/tables/table.scss b/zero.Web.UI/App/components/tables/table.scss
index e6ae0fbd..d201626c 100644
--- a/zero.Web.UI/App/components/tables/table.scss
+++ b/zero.Web.UI/App/components/tables/table.scss
@@ -140,7 +140,7 @@ a.ui-table-row:hover, button.ui-table-row:hover
   &.is-name .ui-icon
   {
     margin-left: .6em;
-    color: var(--color-synchronized);
+    color: var(--color-text-dim); //var(--color-synchronized);
   }
 }
 
diff --git a/zero.Web.UI/App/renderers/lists/countries.js b/zero.Web.UI/App/renderers/lists/countries.js
index dc04b434..fff4c889 100644
--- a/zero.Web.UI/App/renderers/lists/countries.js
+++ b/zero.Web.UI/App/renderers/lists/countries.js
@@ -12,8 +12,8 @@ list.onFetch(filter => CountriesApi.getByQuery(filter));
 
 list.column('flag', { width: 62, canSort: false, hideLabel: true }).custom((value, model) => `<i class="ui-icon" data-symbol="flag-${model.code.toLowerCase()}"></i>`, true, 'flag');
 list.column('name').name();
-list.column('code').text();
-list.column('isPreferred', { width: 200 }).boolean();
+list.column('code').custom(val => val.toUpperCase());
+list.column('isPreferred').boolean();
 list.column('isActive').active();
 
 export default list;
\ No newline at end of file
diff --git a/zero.Web.UI/Sass/Modules/_button.scss b/zero.Web.UI/Sass/Modules/_button.scss
index 51a2e39a..afc27da1 100644
--- a/zero.Web.UI/Sass/Modules/_button.scss
+++ b/zero.Web.UI/Sass/Modules/_button.scss
@@ -343,6 +343,8 @@ button::-moz-focus-inner
     padding: 5px;
     font-size: 0;
     color: transparent;
+    background: var(--color-image-bg);
+    border-radius: var(--radius);
     
     img
     {
diff --git a/zero.Web.UI/Sass/Settings/_accent.scss b/zero.Web.UI/Sass/Settings/_accent.scss
index b93c45e6..012551d6 100644
--- a/zero.Web.UI/Sass/Settings/_accent.scss
+++ b/zero.Web.UI/Sass/Settings/_accent.scss
@@ -4,6 +4,7 @@
 :root
 {
   --color-negative: rgb(216, 40, 83);
+  --color-image-bg: rgb(255, 255, 255);
   
   // message colors
   --color-accent-info: rgb(44, 162, 212);
diff --git a/zero.Web.UI/Sass/Settings/_theme-dark.scss b/zero.Web.UI/Sass/Settings/_theme-dark.scss
index 74a1dbed..87e45343 100644
--- a/zero.Web.UI/Sass/Settings/_theme-dark.scss
+++ b/zero.Web.UI/Sass/Settings/_theme-dark.scss
@@ -2,9 +2,9 @@
 .theme-dark
 {
   // accent colors
-  $color-primary: #0d83f0; //#f9c202; //#0d83f0; #22272e
+  $color-primary: #16c6a5; //#f9c202; //#0d83f0; #22272e
   $color-primary-fg: #fff;
-  $color-primary-low: #{rgba(#0d83f0, 0.2)};
+  $color-primary-low: #{rgba(#ff8900, 0.2)};
   $color-secondary: #94c4bb;
   $color-secondary-fg: #fff;
   $color-tertiary: #c4e4de;
@@ -12,7 +12,7 @@
 
   // foreground colors
   $color-fg: #fafafa;
-  $color-fg-shade-1: #81878a; // dim
+  $color-fg-shade-1: #aaacaf; // dim
   $color-fg-shade-2: #8c9094; // dim-two
   
   // background colors  
@@ -99,8 +99,8 @@
   --color-checked-fg: #{$color-primary-fg};
   --color-toggle: #{$color-bg-shade-3};
   --color-toggle-fg: #{$color-fg};
-  --color-toggled: #{$color-fg};
-  --color-toggled-fg: #{$color-bg-shade-3};
+  --color-toggled: #{$color-primary};
+  --color-toggled-fg: #{$color-primary-fg};
   --color-input-focus-bg: #{$color-bg-shade-1};
   --color-input-focus-border: 1px solid #{$color-bg-shade-5}; 
   --color-input-focus-shadow: 0 0 0 4px #{$color-bg-shade-2};
@@ -133,6 +133,7 @@
   --color-table-line-vertical: transparent;
   --color-table-head: #{$color-bg-shade-1};
   --color-table-hover: #{$color-bg-shade-2};
+  --color-table-highlight: #{$color-bg-shade-3};
 
   // misc
   --color-required-marker: #{$color-fg-shade-1};
diff --git a/zero.Web.UI/Sass/Settings/_theme-light.scss b/zero.Web.UI/Sass/Settings/_theme-light.scss
index cf6760a6..7c78f8bd 100644
--- a/zero.Web.UI/Sass/Settings/_theme-light.scss
+++ b/zero.Web.UI/Sass/Settings/_theme-light.scss
@@ -2,9 +2,9 @@
 :root, .theme-light
 {
   // accent colors
-  $color-primary: #0d83f0;// #22272e
+  $color-primary: #ff8900;// #22272e
   $color-primary-fg: #fff; 
-  $color-primary-low: #{rgba(#0d83f0, 0.2)};
+  $color-primary-low: #{rgba(#ff8900, 0.2)};
   $color-secondary: #0d83f0;
   $color-secondary-fg: #fff;
   $color-tertiary: #c4e4de;
@@ -113,6 +113,7 @@
   --color-table-line-vertical: transparent; //#{$color-bg-shade-3};
   --color-table-head: #{$color-bg-shade-2};
   --color-table-hover: #{$color-bg-shade-2};
+  --color-table-highlight: #{$color-bg-shade-3};
 
   // misc
   --color-required-marker: #{$color-primary};
diff --git a/zero.Web.UI/app/core/list-column.ts b/zero.Web.UI/app/core/list-column.ts
index 5dfca38d..3292d9ab 100644
--- a/zero.Web.UI/app/core/list-column.ts
+++ b/zero.Web.UI/app/core/list-column.ts
@@ -213,6 +213,11 @@ class ListColumn
     {
       let html = '<b>' + value + '</b>';
 
+      if (model.isActive === false)
+      {
+        html = value;
+      }
+
       if (model.blueprint && model.blueprint.id)
       {
         html += ` <svg class="ui-icon" width="15" height="15" stroke-width="2" :data-symbol="fth-cloud" title="Synchronized"><use xlink:href="#fth-cloud" /></svg>`;
diff --git a/zero.Web/Views/Zero/Index.cshtml b/zero.Web/Views/Zero/Index.cshtml
index 4b6534a8..6a38a11e 100644
--- a/zero.Web/Views/Zero/Index.cshtml
+++ b/zero.Web/Views/Zero/Index.cshtml
@@ -22,7 +22,7 @@
   </environment>
   <title>zero</title>
 </head>
-<body class="theme-light theme-roundedx">
+<body class="theme-dark theme-roundedx">
   <div id="app"></div>
   <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
     @Html.Raw(Model.Vue.GetIconSvg())