diff --git a/zero.Web.UI/App/components/buttons/state-button.vue b/zero.Web.UI/App/components/buttons/state-button.vue
index f9083ca3..259b9601 100644
--- a/zero.Web.UI/App/components/buttons/state-button.vue
+++ b/zero.Web.UI/App/components/buttons/state-button.vue
@@ -81,8 +81,8 @@
     &.is-active
     {
       background: var(--color-bg-mid);
-      /*background: var(--color-primary);
-      border-color: var(--color-primary);*/
+      /*background: var(--color-secondary);
+      border-color: var(--color-secondary);*/
       color: var(--color-fg);
       font-weight: bold;
     }
diff --git a/zero.Web.UI/App/components/forms/media-old.vue b/zero.Web.UI/App/components/forms/media-old.vue
index c72c94d8..1b0de00f 100644
--- a/zero.Web.UI/App/components/forms/media-old.vue
+++ b/zero.Web.UI/App/components/forms/media-old.vue
@@ -444,7 +444,7 @@
     line-height: 26px;
     border-radius: 20px;
     background: var(--color-negative);
-    color: var(--color-primary-fg);
+    color: var(--color-secondary-fg);
     z-index: 2;
     text-align: center;
     font-size: 13px;
diff --git a/zero.Web.UI/App/components/forms/property.vue b/zero.Web.UI/App/components/forms/property.vue
index 5ca0e9cf..b60dfbdd 100644
--- a/zero.Web.UI/App/components/forms/property.vue
+++ b/zero.Web.UI/App/components/forms/property.vue
@@ -142,7 +142,7 @@
     {
       content: "\e87f";
       @extend %font-icon;
-      color: var(--color-primary);
+      color: var(--color-secondary);
       font-size: var(--font-size-l);
       float: left;
       position: relative;
diff --git a/zero.Web.UI/App/components/forms/rte.vue b/zero.Web.UI/App/components/forms/rte.vue
index b2fd86e6..514ad277 100644
--- a/zero.Web.UI/App/components/forms/rte.vue
+++ b/zero.Web.UI/App/components/forms/rte.vue
@@ -227,7 +227,7 @@
     .pell-button-selected
     {
       background-color: var(--color-highlight);
-      color: var(--color-primary);
+      color: var(--color-secondary);
     }
   }
 </style>
\ No newline at end of file
diff --git a/zero.Web.UI/App/components/forms/toggle.vue b/zero.Web.UI/App/components/forms/toggle.vue
index d3cd9464..de33efd6 100644
--- a/zero.Web.UI/App/components/forms/toggle.vue
+++ b/zero.Web.UI/App/components/forms/toggle.vue
@@ -88,21 +88,21 @@
 
     &.is-active
     {
-      /*background: var(--color-primary);
+      /*background: var(--color-secondary);
       transform: translateX(18px);*/
-      background: var(--color-primary);
+      background: var(--color-secondary);
       border-color: transparent;
 
       i
       {
-        background: var(--color-primary-fg);
+        background: var(--color-secondary-fg);
         transform: translateX(18px);
       }
 
       .is-primary &
       {
-        background: var(--color-accent-info);
-        box-shadow: 0 0 0 4px var(--color-accent-info-bg);
+        background: var(--color-primary);
+        box-shadow: 0 0 0 4px var(--color-primary-low);
       }
     }
   }
diff --git a/zero.Web.UI/App/components/pickers/iconPicker/overlay.vue b/zero.Web.UI/App/components/pickers/iconPicker/overlay.vue
index 9d9ce818..bb98700b 100644
--- a/zero.Web.UI/App/components/pickers/iconPicker/overlay.vue
+++ b/zero.Web.UI/App/components/pickers/iconPicker/overlay.vue
@@ -157,7 +157,7 @@
 
     &.is-active
     {
-      //color: var(--color-primary);
+      //color: var(--color-secondary);
     }
   }
 
diff --git a/zero.Web.UI/App/components/pickers/mediaPicker/mediapicker.vue b/zero.Web.UI/App/components/pickers/mediaPicker/mediapicker.vue
index 9ebfd794..c94c9ea2 100644
--- a/zero.Web.UI/App/components/pickers/mediaPicker/mediapicker.vue
+++ b/zero.Web.UI/App/components/pickers/mediaPicker/mediapicker.vue
@@ -373,7 +373,7 @@
     line-height: 26px;
     border-radius: 20px;
     background: var(--color-negative);
-    color: var(--color-primary-fg);
+    color: var(--color-secondary-fg);
     z-index: 2;
     text-align: center;
     font-size: 13px;
diff --git a/zero.Web.UI/App/components/pickers/mediaPicker/overlay.vue b/zero.Web.UI/App/components/pickers/mediaPicker/overlay.vue
index f4fc8687..4783bed8 100644
--- a/zero.Web.UI/App/components/pickers/mediaPicker/overlay.vue
+++ b/zero.Web.UI/App/components/pickers/mediaPicker/overlay.vue
@@ -297,8 +297,8 @@
 
     /*&.is-upload .-preview
     {
-      background: var(--color-primary);
-      color: var(--color-primary-fg);
+      background: var(--color-secondary);
+      color: var(--color-secondary-fg);
     }*/
 
     &.is-upload
diff --git a/zero.Web.UI/App/components/pickers/pick.vue b/zero.Web.UI/App/components/pickers/pick.vue
index 48423c4a..eb989a9f 100644
--- a/zero.Web.UI/App/components/pickers/pick.vue
+++ b/zero.Web.UI/App/components/pickers/pick.vue
@@ -655,7 +655,7 @@
       font-family: "Feather";
       content: "\e83e";
       font-size: 16px;
-      color: var(--color-primary);
+      color: var(--color-secondary);
       position: absolute;
       right: 20px;
     }
diff --git a/zero.Web.UI/App/components/tables/table.vue b/zero.Web.UI/App/components/tables/table.vue
index aa87b0b0..86cce32d 100644
--- a/zero.Web.UI/App/components/tables/table.vue
+++ b/zero.Web.UI/App/components/tables/table.vue
@@ -433,7 +433,7 @@
     &:hover
     {
       //text-decoration: underline;
-      color: var(--color-primary);
+      color: var(--color-secondary);
       background: var(--color-bg-xxlight);
     }
   }
@@ -538,7 +538,7 @@
   .ui-table-field-shared
   {
     font-size: 16px;
-    color: var(--color-primary-two);
+    color: var(--color-primary);
 
     &.is-inline
     {
diff --git a/zero.Web.UI/App/components/tabs/tabs.vue b/zero.Web.UI/App/components/tabs/tabs.vue
index 13a523d3..8248a020 100644
--- a/zero.Web.UI/App/components/tabs/tabs.vue
+++ b/zero.Web.UI/App/components/tabs/tabs.vue
@@ -179,7 +179,7 @@
 
       &:before
       {
-        background: var(--color-primary);
+        background: var(--color-secondary);
       }
 
       &:after
diff --git a/zero.Web.UI/App/components/tree/tree-item.vue b/zero.Web.UI/App/components/tree/tree-item.vue
index 789fadd6..4f2bb819 100644
--- a/zero.Web.UI/App/components/tree/tree-item.vue
+++ b/zero.Web.UI/App/components/tree/tree-item.vue
@@ -152,7 +152,7 @@
     {
       color: var(--color-fg);
       font-weight: bold;
-      //color: var(--color-primary);
+      //color: var(--color-secondary);
     }
   }
 
diff --git a/zero.Web.UI/App/pages/media/upload-status.vue b/zero.Web.UI/App/pages/media/upload-status.vue
index 3f646980..875ce848 100644
--- a/zero.Web.UI/App/pages/media/upload-status.vue
+++ b/zero.Web.UI/App/pages/media/upload-status.vue
@@ -163,8 +163,8 @@
 
     /*&.is-upload .-preview
     {
-      background: var(--color-primary);
-      color: var(--color-primary-fg);
+      background: var(--color-secondary);
+      color: var(--color-secondary-fg);
     }*/
 
     .-extension
@@ -198,7 +198,7 @@
       top: 0;
       height: 100%;
       border-radius: 2px;
-      background: var(--color-primary);
+      background: var(--color-secondary);
     }
   }
 </style>
\ No newline at end of file
diff --git a/zero.Web.UI/App/pages/pages/create.vue b/zero.Web.UI/App/pages/pages/create.vue
index 77a5e4f2..d1111c14 100644
--- a/zero.Web.UI/App/pages/pages/create.vue
+++ b/zero.Web.UI/App/pages/pages/create.vue
@@ -150,7 +150,7 @@
     &.is-active
     {
       font-weight: bold;
-      color: var(--color-primary);
+      color: var(--color-secondary);
 
       .page-create-item-text span
       {
diff --git a/zero.Web.UI/App/pages/spaces/spaces.vue b/zero.Web.UI/App/pages/spaces/spaces.vue
index b395718b..5e36015d 100644
--- a/zero.Web.UI/App/pages/spaces/spaces.vue
+++ b/zero.Web.UI/App/pages/spaces/spaces.vue
@@ -240,7 +240,7 @@
     &.is-active
     {
       font-weight: bold;
-      color: var(--color-primary);
+      color: var(--color-secondary);
 
       .spaces-tree-item-text span
       {
diff --git a/zero.Web.UI/Sass/Canvas/_navigation.scss b/zero.Web.UI/Sass/Canvas/_navigation.scss
index 17725e5c..15642ba6 100644
--- a/zero.Web.UI/Sass/Canvas/_navigation.scss
+++ b/zero.Web.UI/Sass/Canvas/_navigation.scss
@@ -34,7 +34,7 @@
   height: var(--height-top);
   margin: 0;
   color: var(--color-fg);
-  background: var(--color-primary);
+  background: var(--color-secondary);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 
diff --git a/zero.Web.UI/Sass/Core/_icons.scss b/zero.Web.UI/Sass/Core/_icons.scss
index 2667b087..1d3a1f08 100644
--- a/zero.Web.UI/Sass/Core/_icons.scss
+++ b/zero.Web.UI/Sass/Core/_icons.scss
@@ -557,7 +557,7 @@
   font-size: 0;
   line-height: 0;
   border: 4px solid transparent;
-  border-top-color: var(--color-primary);
+  border-top-color: var(--color-secondary);
   position: relative;
   top: 2px;
 }
@@ -565,7 +565,7 @@
 .arrow-up
 {
   border-top-color: transparent;
-  border-bottom-color: var(--color-primary);
+  border-bottom-color: var(--color-secondary);
   position: relative;
   top: -2px;
 }
diff --git a/zero.Web.UI/Sass/Core/_settings.scss b/zero.Web.UI/Sass/Core/_settings.scss
index b4967f42..1a248421 100644
--- a/zero.Web.UI/Sass/Core/_settings.scss
+++ b/zero.Web.UI/Sass/Core/_settings.scss
@@ -2,9 +2,11 @@
 :root, .theme-light
 {
   // accent colors
-  --color-primary: #282c3b; //linear-gradient(75deg, #48da9c, #3eb8ad); //#484c5b; // #292b2c; // #00aea2
+  --color-primary: rgb(44, 162, 212); //linear-gradient(75deg, #48da9c, #3eb8ad); //#484c5b; // #292b2c; // #00aea2
   --color-primary-fg: #fff;
-  --color-secondary: #1f3053;
+  --color-primary-low: rgba(44, 162, 212, 0.15);
+  --color-secondary: #282c3b;
+  --color-secondary-fg: #fff;
   --color-primary-two: #3d72c4;
   --color-negative: #d82853; 
 
@@ -63,9 +65,10 @@
 .theme-dark
 {
   // accent colors
-  --color-primary: #229b79;
+  --color-primary: rgb(44, 162, 212);
   --color-primary-fg: #fff;
-  --color-secondary: #292b2c;
+  --color-secondary: #fff;
+  --color-secondary-fg: #222;
   --color-negative: #d82853; 
   --color-primary-button: linear-gradient(75deg, #48da9c, #3eb8ad);
 
diff --git a/zero.Web.UI/Sass/Modules/Buttons/_button.scss b/zero.Web.UI/Sass/Modules/Buttons/_button.scss
index fc4db000..3deeb181 100644
--- a/zero.Web.UI/Sass/Modules/Buttons/_button.scss
+++ b/zero.Web.UI/Sass/Modules/Buttons/_button.scss
@@ -36,8 +36,8 @@ button::-moz-focus-inner
   display: inline-flex;
   justify-content: space-between;
   align-items: center;
-  color: var(--color-primary-fg);
-  background: var(--color-primary);
+  color: var(--color-secondary-fg);
+  background: var(--color-secondary);
   padding: 0 20px;
   height: 42px;
   border-radius: 3px;
diff --git a/zero.Web.UI/Sass/Modules/_flatpickr.scss b/zero.Web.UI/Sass/Modules/_flatpickr.scss
index c43f89c1..9738fc30 100644
--- a/zero.Web.UI/Sass/Modules/_flatpickr.scss
+++ b/zero.Web.UI/Sass/Modules/_flatpickr.scss
@@ -140,11 +140,11 @@
   &.selected
   {
     font-weight: 700;
-    color: var(--color-primary-fg);
+    color: var(--color-secondary-fg);
 
     &:after
     {
-      background: var(--color-primary);
+      background: var(--color-secondary);
     }
   }
 
diff --git a/zero.Web.UI/Sass/Modules/_link.scss b/zero.Web.UI/Sass/Modules/_link.scss
index 9a75fb3f..5dda4c09 100644
--- a/zero.Web.UI/Sass/Modules/_link.scss
+++ b/zero.Web.UI/Sass/Modules/_link.scss
@@ -2,6 +2,6 @@
 
 .ui-link
 {
-  color: var(--color-primary);
+  color: var(--color-secondary);
   text-decoration: underline dotted;
 }
\ No newline at end of file
diff --git a/zero.Web.UI/Setup/Steps/step-install.vue b/zero.Web.UI/Setup/Steps/step-install.vue
index 318c76d4..caa63028 100644
--- a/zero.Web.UI/Setup/Steps/step-install.vue
+++ b/zero.Web.UI/Setup/Steps/step-install.vue
@@ -131,7 +131,7 @@
 
     i
     {
-      background: var(--color-primary);
+      background: var(--color-secondary);
       transition: width 0.1s ease;
       display: block;
       height: 100%;