diff --git a/zero.Debug/wwwroot/Assets/zero-2.png b/zero.Debug/wwwroot/Assets/zero-2.png
new file mode 100644
index 00000000..4c0b0125
Binary files /dev/null and b/zero.Debug/wwwroot/Assets/zero-2.png differ
diff --git a/zero.Debug/wwwroot/Assets/zero-dark.png b/zero.Debug/wwwroot/Assets/zero-dark.png
index f234ec88..d8447c3e 100644
Binary files a/zero.Debug/wwwroot/Assets/zero-dark.png and b/zero.Debug/wwwroot/Assets/zero-dark.png differ
diff --git a/zero.Web.UI/App/components/header-bar.vue b/zero.Web.UI/App/components/header-bar.vue
index 482eeac8..c39cb4ae 100644
--- a/zero.Web.UI/App/components/header-bar.vue
+++ b/zero.Web.UI/App/components/header-bar.vue
@@ -124,8 +124,10 @@
     font-family: var(--font);
     color: var(--color-fg);
     margin: 0;
-    font-size: var(--font-size-l);
+    font-size: var(--font-size);
+    letter-spacing: 1px;
     font-weight: 700;
+    text-transform: uppercase;
 
     &.is-empty, .-minor
     {
diff --git a/zero.Web.UI/App/components/overlays/dropdown-button.vue b/zero.Web.UI/App/components/overlays/dropdown-button.vue
index f1ccd1a7..d2b7fdde 100644
--- a/zero.Web.UI/App/components/overlays/dropdown-button.vue
+++ b/zero.Web.UI/App/components/overlays/dropdown-button.vue
@@ -131,7 +131,7 @@
 
     &:not([disabled]):hover, &.is-active, &:focus
     {
-      background: var(--color-bg-xlight);
+      background: var(--color-bg-bright-three);
       color: var(--color-fg);
       //font-weight: 700;
 
@@ -148,15 +148,20 @@
 
     &[disabled]
     {
-      color: var(--color-fg-light);
+      color: var(--color-fg-dim);
       cursor: default;
       pointer-events: none;
 
       .ui-dropdown-list-item-icon
       {
-        color: var(--color-fg-light);
+        color: var(--color-fg-dim);
       }
     }
+
+    & + .ui-dropdown-button
+    {
+      margin-top: 4px;
+    }
   }
 
   .ui-dropdown-button-icon
diff --git a/zero.Web.UI/App/components/overlays/dropdown-separator.vue b/zero.Web.UI/App/components/overlays/dropdown-separator.vue
index baf6a390..774ec2a8 100644
--- a/zero.Web.UI/App/components/overlays/dropdown-separator.vue
+++ b/zero.Web.UI/App/components/overlays/dropdown-separator.vue
@@ -13,7 +13,8 @@
 <style lang="scss">
   .ui-dropdown-separator
   {
-    border-bottom-color: var(--color-highlight);
+    border: none;
+    border-bottom: 1px solid var(--color-bg-bright-three);
     margin: 5px 0;
   }
 </style>
\ No newline at end of file
diff --git a/zero.Web.UI/App/components/overlays/dropdown.vue b/zero.Web.UI/App/components/overlays/dropdown.vue
index a8da2f28..98843ebd 100644
--- a/zero.Web.UI/App/components/overlays/dropdown.vue
+++ b/zero.Web.UI/App/components/overlays/dropdown.vue
@@ -99,10 +99,10 @@
     position: absolute;
     min-width: 300px;
     min-height: 20px;
-    background: var(--color-bg-light);
+    background: var(--color-bg-bright-two);
     border-radius: var(--radius);
     border: 1px solid var(--color-line-light);
-    box-shadow: 0 0 20px var(--color-shadow);
+    box-shadow: 0 0 32px var(--color-shadow);
     z-index: 8;
     top: calc(100% + 5px);
     padding: 5px;
diff --git a/zero.Web.UI/App/components/tree/tree-item.vue b/zero.Web.UI/App/components/tree/tree-item.vue
index 9c1088e8..42289b29 100644
--- a/zero.Web.UI/App/components/tree/tree-item.vue
+++ b/zero.Web.UI/App/components/tree/tree-item.vue
@@ -232,7 +232,7 @@
     position: absolute;
     left: 10px;
     bottom: 12px;
-    background: var(--color-bg-light);
+    background: var(--color-bg-bright);
     border-radius: 50%;
     width: 14px;
     height: 14px;
diff --git a/zero.Web.UI/App/navigation.vue b/zero.Web.UI/App/navigation.vue
index 6d8cdb02..7ba0a8ef 100644
--- a/zero.Web.UI/App/navigation.vue
+++ b/zero.Web.UI/App/navigation.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="app-nav theme-light">
+  <div class="app-nav theme-dark">
 
     <h1 class="app-nav-headline">
-      <img src="/Assets/zero.png" v-localize:alt="'@zero.name'" />
+      <img src="/Assets/zero-2.png" v-localize:alt="'@zero.name'" />
     </h1>
 
     <ui-dropdown v-if="applications.length > 0" class="app-nav-switch">
diff --git a/zero.Web.UI/App/pages/media/media.vue b/zero.Web.UI/App/pages/media/media.vue
index adc64276..01ec95a7 100644
--- a/zero.Web.UI/App/pages/media/media.vue
+++ b/zero.Web.UI/App/pages/media/media.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="media">
-    <div class="media-tree" v-resizable="resizable">
+    <div class="app-tree media-tree" v-resizable="resizable">
       <ui-tree ref="tree" :get="getTree" :config="treeConfig" :active="id" header="@media.list" />
-      <div class="media-tree-resizable ui-resizable"></div>
+      <div class="app-tree-resizable ui-resizable"></div>
     </div>
 
     <div class="media-content">
@@ -305,45 +305,6 @@
     justify-content: stretch;
   }
 
-  .media-tree
-  {
-    width: 340px;
-    background: var(--color-bg-light);
-    padding: 0;
-    position: relative;
-    overflow-y: auto;
-    height: 100vh;
-
-    .ui-header-bar + .ui-tree
-    {
-      margin-top: -10px;
-    }
-
-    .ui-dot-button
-    {
-      margin-right: -8px;
-    }
-  }
-
-  .media-tree-resizable
-  {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    background: var(--color-fg);
-    opacity: 0;
-    right: 0;
-    width: 6px;
-    cursor: ew-resize;
-    transition: opacity 0.15s ease 0s;
-
-    &:hover
-    {
-      transition-delay: 0.2s;
-      opacity: 0.04;
-    }
-  }
-
   .media-content
   {
     height: 100vh;
diff --git a/zero.Web.UI/App/pages/pages/pages.vue b/zero.Web.UI/App/pages/pages/pages.vue
index a56eca15..c2ab91ed 100644
--- a/zero.Web.UI/App/pages/pages/pages.vue
+++ b/zero.Web.UI/App/pages/pages/pages.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="page-container">
-    <div class="page-container-tree" v-resizable="resizable">
+    <div class="app-tree" v-resizable="resizable">
       <ui-tree ref="tree" :get="getItems" :config="treeConfig" :active="id" header="Pages" />
-      <div class="page-container-tree-resizable ui-resizable"></div>
+      <div class="app-tree-resizable ui-resizable"></div>
     </div>
 
     <router-view v-if="!isOverview"></router-view>
@@ -303,49 +303,13 @@
     height: 100vh;
   }
 
-  .page-container-tree
-  {
-    width: 340px;
-    background: var(--color-bg-light);
-    padding: 0;
-    position: relative;
-    overflow-y: auto;
-    height: 100vh;
-    border-right: 1px solid var(--color-line-mid);
-
-    .ui-header-bar + .ui-tree
-    {
-      margin-top: -10px;
-    }
-
-    .ui-dot-button
-    {
-      margin-right: -8px;
-    }
-  }
-
-  .page-container-tree-resizable
-  {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    background: var(--color-fg);
-    opacity: 0;
-    right: 0;
-    width: 6px;
-    cursor: ew-resize;
-    transition: opacity 0.15s ease 0s;
-
-    &:hover
-    {
-      transition-delay: 0.2s;
-      opacity: 0.04;
-    }
-  }
 
   .page-overview
   {
-    padding: 95px 0 0 60px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 80px;
   }
 
   .page-overview-action
@@ -370,7 +334,7 @@
     line-height: 89px !important;
     font-size: 22px;
     text-align: center;
-    background: var(--color-bg-light);
+    background: var(--color-bg-bright);
     border-radius: var(--radius);
     transition: box-shadow 0.2s ease;
     box-shadow: var(--color-shadow-short);
@@ -379,7 +343,7 @@
   .page-overview-action-text
   {
     line-height: 1.3;
-    color: var(--color-fg-light);
+    color: var(--color-fg-dim);
 
     strong
     {
diff --git a/zero.Web.UI/App/pages/settings/settings.vue b/zero.Web.UI/App/pages/settings/settings.vue
index 4ff4867e..5c980e17 100644
--- a/zero.Web.UI/App/pages/settings/settings.vue
+++ b/zero.Web.UI/App/pages/settings/settings.vue
@@ -80,7 +80,7 @@
 
   a.settings-group-item
   {
-    color: var(--color-text);
+    color: var(--color-fg);
     font-size: var(--font-size);
     display: grid;
     grid-template-columns: auto 1fr;
@@ -90,12 +90,12 @@
 
   .settings-group-item-icon
   {
-    width: 54px;
-    height: 54px;
-    line-height: 53px !important;
+    width: 60px;
+    height: 60px;
+    line-height: 59px !important;
     font-size: 18px;
     text-align: center;
-    background: var(--color-bg-light);
+    background: var(--color-bg-bright);
     border-radius: var(--radius);
     transition: box-shadow 0.2s ease;
     box-shadow: var(--color-shadow-short);
@@ -104,7 +104,7 @@
   .settings-group-item-text
   {
     line-height: 1.3;
-    color: var(--color-fg-light);
+    color: var(--color-fg-dim);
     margin: 0;
 
     strong
diff --git a/zero.Web.UI/Sass/Canvas/_navigation.scss b/zero.Web.UI/Sass/Canvas/_navigation.scss
index 6798cd80..49468136 100644
--- a/zero.Web.UI/Sass/Canvas/_navigation.scss
+++ b/zero.Web.UI/Sass/Canvas/_navigation.scss
@@ -2,13 +2,14 @@
 
 .app-nav
 {
-  background: var(--color-bg-light);
+  background: var(--color-bg-bright);
   width: 260px;
-  border-right: 1px solid var(--color-line-mid);
   color: white;
-  height: 100vh;
+  height: calc(100vh - 40px);
   display: grid;
+  margin: 20px;
   grid-template-rows: auto auto 1fr auto;
+  border-radius: var(--radius);
 
   a, button
   {
@@ -28,19 +29,12 @@
   align-items: center;
   padding: 0 var(--padding);
   padding-top: 8px;
-  font-size: 2.4em;
-  line-height: 1;
-  font-weight: 700;
   height: var(--height-top);
   margin: 0;
-  color: var(--color-fg);
-  background: var(--color-secondary);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
 
   img
   {
-    height: 32px;
+    height: 28px;
     margin-top: 10px;
   }
 }
@@ -52,10 +46,8 @@
 
   .ui-button.type-action
   {
-    background: var(--color-bg);
-    //background: rgba(white, 0.05);
+    background: var(--color-bg-bright-two);
     color: var(--color-fg);
-    //border-color: rgba(white, 0.1);
     padding-left: 20px;
   }
 }
@@ -69,7 +61,7 @@ a.app-nav-item
   font-size: var(--font-size);
   padding: 0 var(--padding);
   height: 52px;
-  color: var(--color-fg-mid);
+  color: var(--color-fg-dim);
 
   &:hover
   {
@@ -84,7 +76,7 @@ a.app-nav-item
   &.is-active:not([alias="dashboard"]), &.is-active-exact
   {
     color: var(--color-fg);
-    background: var(--color-bg-light);
+    background: var(--color-bg-bright-two);
     font-weight: 700;
 
     .app-nav-item-icon
@@ -106,7 +98,7 @@ a.app-nav-item
   font-weight: 400;
   position: relative;
   top: -2px;
-  color: var(--color-fg-mid);
+  color: var(--color-fg-dim);
   transition: color 0.2s ease;
 }
 
@@ -122,7 +114,7 @@ a.app-nav-child
   font-size: $font-size;
   padding: 0 var(--padding) 0 calc(var(--padding) + 36px);
   height: 40px;
-  color: var(--color-fg-mid);
+  color: var(--color-fg-dim);
 
   &:hover, &.is-active
   {
@@ -166,7 +158,7 @@ a.app-nav-child
   width: 100%;
   grid-template-columns: auto 1fr auto;
   grid-gap: 16px;
-  color: var(--color-fg-mid);
+  color: var(--color-fg-dim-two);
   align-items: center;
 
   .-image
@@ -176,7 +168,7 @@ a.app-nav-child
     border-radius: 18px;
     position: relative;
     top: -1px;
-    background: var(--color-bg-mid);
+    background: var(--color-bg-bright-two);
     text-align: center;
     line-height: 37px;
     font-size: 16px;
@@ -193,9 +185,4 @@ a.app-nav-child
       color: var(--color-fg);
     }
   }
-
-  .-icon
-  {
-
-  }
 }
\ No newline at end of file
diff --git a/zero.Web.UI/Sass/Core/_settings.scss b/zero.Web.UI/Sass/Core/_settings.scss
index 79509bf3..a58189b3 100644
--- a/zero.Web.UI/Sass/Core/_settings.scss
+++ b/zero.Web.UI/Sass/Core/_settings.scss
@@ -1,5 +1,5 @@
 
-:root, .theme-light
+/*:root, .theme-light
 {
   // accent colors
   --color-primary: #04bfbf; //linear-gradient(75deg, #48da9c, #3eb8ad); //#484c5b; // #292b2c; // #00aea2
@@ -68,28 +68,28 @@
   --color-fg: #fff;
   --color-fg-mid: #c1c5c9;
   --color-fg-light: #919294;
-  --color-fg-xlight: #919294;
+  --color-fg-xlight: #919294;*/
 
   /*--color-fg: #222;
   --color-fg-mid: #6f7375;
   --color-fg-light: #919294;*/
 
-  // background color shades
+  /*// background color shades
   --color-bg: #1c1e1f;
   --color-bg-dark: #1c1e1f;
   --color-bg-xmid: #292b2c;
   --color-bg-mid: #282c3b;
   --color-bg-light: #242526;
   --color-bg-xlight: #292b2c;
-  --color-bg-xxlight: #242526;
+  --color-bg-xxlight: #242526;*/
 
   /*--color-bg: #fff;
   --color-bg-light: #f8f9fa;
   --color-bg-mid: #f4f5f6;*/
 
-  // line colors
+  /*// line colors
   --color-line: #2f3233;
-  --color-line-mid: #3b3e40;
+  --color-line-mid: #2f3233;
   --color-line-light: #2f3233;
 
   // misc colors
@@ -97,6 +97,55 @@
   --color-shadow: rgba(0,0,0,0.3);
   --color-highlight: rgba(255,255,255, 0.03);
   --color-overlay-shade: rgba(0,0,0,0.3);
+}*/
+
+
+:root
+{
+  // foreground colors
+  --color-fg: #fff;
+  --color-fg-dim: #b2b5b8;
+  --color-fg-dim-two: #87898c;
+  
+  // background colors
+  --color-bg: #1c1e1f;
+  --color-bg-bright: #242526;
+  --color-bg-bright-two: #2b2c2e;
+  --color-bg-bright-three: #343638;
+
+  // misc colors
+  //--color-box: #242526;
+  --color-shadow: rgba(0,0,0,0.3);
+  --color-shadow-short: 0 1px 1px 0 rgba(0,0,0,0.05);
+  --color-overlay-shade: rgba(0,0,0,0.3);
+}
+
+
+:root
+{
+  // message colors
+  --color-accent-info: rgb(44, 162, 212);
+  --color-accent-info-bg: rgba(44, 162, 212, 0.1);
+  --color-accent-success: rgb(47, 187, 152);
+  --color-accent-success-bg: rgba(47, 187, 152, 0.15);
+  --color-accent-warn: rgb(211, 172, 35);
+  --color-accent-warn-bg: rgba(233, 193, 56, 0.1);
+  --color-accent-error: rgb(216, 40, 83);
+  --color-accent-error-bg: rgba(216, 40, 83, 0.08);
+
+  // sizes
+
+  --padding: 32px;
+  --padding-s: 24px;
+  --height-top: 74px;
+  --radius: 6px;
+
+  --font-size-xs: 12px;
+  --font-size-s: 13px;
+  --font-size: 14px;
+  --font-size-m: 15px;
+  --font-size-l: 16px;
+  --font-size-xl: 18px;
 }
 
 
diff --git a/zero.Web.UI/Sass/Modules/_all.scss b/zero.Web.UI/Sass/Modules/_all.scss
index 61baa881..85ec860b 100644
--- a/zero.Web.UI/Sass/Modules/_all.scss
+++ b/zero.Web.UI/Sass/Modules/_all.scss
@@ -7,4 +7,6 @@
 
 @import "link";
 
-@import "flatpickr";
\ No newline at end of file
+@import "flatpickr";
+
+@import "tree";
\ No newline at end of file
diff --git a/zero.Web.UI/Sass/Modules/_headlines.scss b/zero.Web.UI/Sass/Modules/_headlines.scss
index 86b26294..1212cbf4 100644
--- a/zero.Web.UI/Sass/Modules/_headlines.scss
+++ b/zero.Web.UI/Sass/Modules/_headlines.scss
@@ -4,8 +4,10 @@ h2.ui-headline
 {
   @extend %font;
   margin: 0;
-  font-size: var(--font-size-l);
+  font-size: var(--font-size);
+  letter-spacing: 1px;
   font-weight: 700;
+  text-transform: uppercase;
 
   &.xl
   {
diff --git a/zero.Web.UI/Sass/Modules/_tree.scss b/zero.Web.UI/Sass/Modules/_tree.scss
new file mode 100644
index 00000000..eceaba72
--- /dev/null
+++ b/zero.Web.UI/Sass/Modules/_tree.scss
@@ -0,0 +1,47 @@
+
+
+.app-tree
+{
+  width: 340px;
+  background: var(--color-bg-bright);
+  padding: 0;
+  position: relative;
+  overflow-y: auto;
+  height: calc(100vh - 40px);
+  margin: 20px 0;
+  border-radius: var(--radius);
+
+  .ui-header-bar + .ui-tree
+  {
+    margin-top: -10px;
+  }
+
+  .ui-dot-button
+  {
+    margin-right: -8px;
+  }
+
+  .ui-tree-item.is-active:before
+  {
+    background: var(--color-bg-bright-two);
+  }
+}
+
+.app-tree-resizable
+{
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background: var(--color-fg);
+  opacity: 0;
+  right: 0;
+  width: 6px;
+  cursor: ew-resize;
+  transition: opacity 0.15s ease 0s;
+
+  &:hover
+  {
+    transition-delay: 0.2s;
+    opacity: 0.04;
+  }
+}
\ No newline at end of file
diff --git a/zero.Web/Controllers/IndexController.cs b/zero.Web/Controllers/IndexController.cs
index b61d6678..46ff4db7 100644
--- a/zero.Web/Controllers/IndexController.cs
+++ b/zero.Web/Controllers/IndexController.cs
@@ -23,7 +23,7 @@ namespace zero.Web.Controllers
         return RedirectToAction("Index", "Setup");
       }
 
-      return View("/Views/Index.cshtml", new ZeroBackofficeModel()
+      return View(new ZeroBackofficeModel()
       {
         Vue = ZeroVue
       });
diff --git a/zero.Web/Views/Index.cshtml b/zero.Web/Views/Shared/Index.cshtml
similarity index 96%
rename from zero.Web/Views/Index.cshtml
rename to zero.Web/Views/Shared/Index.cshtml
index 7b7f9492..fce66751 100644
--- a/zero.Web/Views/Index.cshtml
+++ b/zero.Web/Views/Shared/Index.cshtml
@@ -16,7 +16,7 @@
   </environment>
   <title>zero</title>
 </head>
-<body class="theme-light">
+<body class="theme-dark">
   <div id="app"></div>
   <script>
     window.zero = window.zero || {};
diff --git a/zero.Web/Views/Setup.cshtml b/zero.Web/Views/Shared/Setup.cshtml
similarity index 100%
rename from zero.Web/Views/Setup.cshtml
rename to zero.Web/Views/Shared/Setup.cshtml
diff --git a/zero.Web/zero.Web.csproj b/zero.Web/zero.Web.csproj
index cd21613a..a790be20 100644
--- a/zero.Web/zero.Web.csproj
+++ b/zero.Web/zero.Web.csproj
@@ -39,7 +39,7 @@
     </None>
 
     <BackofficeUI Include="..\zero.Web.UI\**\*" Exclude="..\zero.Web.UI\node_modules\**\*;..\zero.Web.UI\Assets\*.js;..\zero.Web.UI\package-lock.json" />
-    <None Include="@(BackofficeUI)" Link="Zero\%(RecursiveDir)%(Filename)%(Extension)" >
+    <None Include="@(BackofficeUI)" Link="Zero\%(RecursiveDir)%(Filename)%(Extension)">
       <Pack>true</Pack>
       <PackageCopyToOutput>true</PackageCopyToOutput>
       <PackagePath>content\zero\Web\</PackagePath>