diff --git a/site/assets/js/lab/dragndrop_operations.ts b/site/assets/js/lab/dragndrop_operations.ts
index a1672c7..e22e15f 100644
--- a/site/assets/js/lab/dragndrop_operations.ts
+++ b/site/assets/js/lab/dragndrop_operations.ts
@@ -329,7 +329,6 @@ export class MoveFieldDragOperation extends DragOperation {
         const insert_column = (insert_data.alignment > 0 && col.cell_count > 0);
         const max_columns = this.nb.columns.length >= this.nb.max_columns;
 
-
         if (swap_mode) {
           if (different_pos && this.placeholder) {
             // Take the old position and swap it with our new position
diff --git a/site/assets/js/lab/index.ts b/site/assets/js/lab/index.ts
index f5ae8d5..77645bc 100644
--- a/site/assets/js/lab/index.ts
+++ b/site/assets/js/lab/index.ts
@@ -18,6 +18,8 @@ export async function init(compiler_worker_path: string) {
 
   let nb = new NB(2);
 
+    
+
   let grammar_input_field = nb.add_field(new NBEditorField("Grammar"), 0)
   grammar_input_field.set_content_visible(true);
   grammar_input_field.set_text("");
@@ -177,6 +179,10 @@ export async function init(compiler_worker_path: string) {
   setupConfig(config => {
     config_input.update(config);
   });
+
+  setTimeout(() => {
+    document.getElementById("loading-screen")!.classList.remove("active");
+  }, 500);
 }
 
 const grammar_examples = [
diff --git a/site/assets/js/lab/settings-panel.ts b/site/assets/js/lab/settings-panel.ts
index bd577db..ffdbd92 100644
--- a/site/assets/js/lab/settings-panel.ts
+++ b/site/assets/js/lab/settings-panel.ts
@@ -204,8 +204,7 @@ export function setupOpenCloseTriggers(panel: Element, button_selector: string =
 
 function setupThemes(setting_panel: Element) {
 
-  let default_theme = <string>document.body.dataset.defaulttheme;
-  let active_theme = getLocalValue(LocalStoreKeys.ActiveTheme) || default_theme;
+  let active_theme = getLocalValue(LocalStoreKeys.ActiveTheme);
 
   //document.body.classList.add(active_theme);
   let node = <HTMLTemplateElement>document.querySelector("#theme-entry-template");
@@ -219,13 +218,15 @@ function setupThemes(setting_panel: Element) {
     let title = <HTMLElement>theme_entry.querySelector(".theme-entry-title");
     let theme_entry_theme = <HTMLElement>theme_entry.querySelector(".theme");
 
-    let { bg, mg, fg, target: target_class } = theme.dataset;
+    let { text, bg, inner_border, inner_bg, border, target: target_class } = theme.dataset;
 
-    theme_entry.style.color = <string>fg;
+    theme_entry.style.color = <string>text;
     theme_entry.style.backgroundColor = <string>bg;
+    theme_entry.style.borderColor = <string>border;
 
-    theme_entry_theme.style.borderColor = <string>mg;
-    theme_entry_theme.style.backgroundColor = <string>fg;
+    theme_entry_theme.style.borderColor = <string>inner_border;
+    theme_entry_theme.style.backgroundColor = <string>inner_bg;
+    title.style.color = <string>text
 
     title.innerHTML = (<string>target_class).replace(/^(\w)|-(\w)/g, " <span style='text-transform:uppercase'>$1$2</span>");
 
@@ -234,22 +235,22 @@ function setupThemes(setting_panel: Element) {
         let old_theme = active_theme;
         active_theme = <string>target_class;
         setLocalValue(LocalStoreKeys.ActiveTheme, active_theme);
-        document.body.classList.replace(old_theme, active_theme);
-        //document.body.classList.remove(old_theme);
+        if (active_theme)
+          document.body.classList.add(active_theme);
+        if (old_theme)
+          document.body.classList.remove(old_theme);
         await sleep(400);
       }
     });
 
     theme.parentElement?.replaceChild(theme_entry, theme);
 
-
-    if (default_theme != active_theme) {
-      document.body.classList.replace(default_theme, active_theme);
+    if (active_theme) {
+      document.body.classList.add(active_theme);
     }
 
-
     return {
-      theme_entry, bg, fg, target_class
+      theme_entry, bg, fg: inner_bg, target_class
     };
   });
 }
diff --git a/site/assets/sass/color.scss b/site/assets/sass/color.scss
index d1abd97..71f5129 100644
--- a/site/assets/sass/color.scss
+++ b/site/assets/sass/color.scss
@@ -39,7 +39,7 @@ $theme-the-radlr-special: (
   settings-input-active-fg: rgb(255, 255, 255),
   settings-input-active-bg: rgb(53, 129, 204),
   settings-input-disabled-fg: rgb(245, 245, 245),
-  settings-input-disabled-bg: rgb(187, 82, 82),
+  settings-input-disabled-bg: rgb(207, 44, 44),
 
   // These setting contrast well with `focus-bg` and `base-bg`
   link-fg: rgb(98, 178, 196),
@@ -50,182 +50,211 @@ $theme-the-radlr-special: (
   // ------------------------------------------
 );
 
-$theme-pencil: (
-  //
-  class-name: "pencil",
+$theme-the-radlr-special-smoked: (
 
-  header-fg:   rgb(31, 31, 31),
-  header-bg:  rgb(241, 241, 241),
-  
-  header-hover-fg:rgb(241, 241, 241),
-  header-hover-bg:rgb(31, 31, 31),
+  class-name: "the-RADLR-special-smoked",
 
-  base-fg: rgb(31, 31, 31),
-  base-bg: rgb(241, 241, 241),
+  base-bg: rgb(45, 45, 45),
+  base-fg: rgb(241, 241, 241),
+  
+  // Panel header sections
+  header-bg:   rgb(45, 45, 45),
+  header-fg:  rgb(241, 241, 241),
+  
+  header-hover-bg:rgb(241, 241, 241),
+  header-hover-fg:rgb(45, 45, 45),
 
-  focus-fg: rgb(227, 227, 227),
-  focus-bg: rgb(61, 61, 61),
+  // Should contrast `base-*` to catch the user's attention
+  focus-bg: rgb(65, 65, 65),
+  focus-fg: rgb(215, 215, 215),
 
-  backdrop-fg: rgb(92, 92, 92),
-  backdrop-bg: rgb(227, 227, 227),
+  // Should blend in with `base-*` to avoid catching the user's attention
+  backdrop-bg: rgb(36, 36, 36),
+  backdrop-fg: rgb(227, 227, 227),
 
-  button-fg: rgb(165, 165, 165),
+  // Should work well when paired with  `base-fg` and `backdrop-bg`
+  button-fg: rgb(200, 200, 200),
   button-bg: transparent,
+  button-hover-bg: rgb(241, 241, 241),
+  button-hover-fg: rgb(45, 45, 45),
 
-  button-hover-fg: rgb(241, 241, 241),
-  button-hover-bg: rgb(31, 31, 31),
-
+  // Should contrast work will with `base-bg`, `focus-bg`, and `backdrop-bg`
+  bc-address-bg: rgb(130, 120, 219),
   bc-address-fg: rgb(241, 241, 241),
-  bc-address-bg: rgb(86, 78, 153),
 
-  section-bg: rgba(0, 0, 0, 0.019),
+  // Gives a subtle contrast to `base-bg` to help delineate panel contents
+  section-bg: rgba(255, 255, 255, 0.049),
 
-  settings-input-bg: rgb(191, 191, 191),
+  // These setting contrast well with `focus-bg`
+  settings-input-bg: rgb(227, 227, 227),
   settings-input-fg: rgb(61, 61, 61),
-  settings-input-active-fg: rgb(191, 191, 191),
-  settings-input-active-bg: rgb(53, 129, 204),
-  settings-input-disabled-fg: rgb(191, 191, 191),
-  settings-input-disabled-bg: rgb(187, 82, 82),
+  settings-input-active-fg: rgb(255, 255, 255),
+  settings-input-active-bg: rgb(25, 157, 25),
+  settings-input-disabled-fg: rgb(245, 245, 245),
+  settings-input-disabled-bg: rgb(212, 35, 35),
 
-  link-fg: purple,
+  // These setting contrast well with `focus-bg` and `base-bg`
+  link-fg: rgb(98, 178, 196),
   link-bg: transparent,
-
-  link-hover-fg: purple,
+  link-hover-fg: rgb(94, 148, 214),
   link-hover-bg: transparent,
 
-  ////
-
-  accent-color: #9f9f9f,
-  // Main Colors
-  bg-inc-2: #ffffff,
-  bg-inc-1: #eeeeee,
-  bg-basic: #e6e6e6,
-  bg-dec-1: #7c7c7c67,
-  bg-dec-2: #586464,
-
-  fg-inc-2: #bfbfbf,
-  fg-inc-1: #afafaf,
-  fg-basic: #848484,
-  fg-dec-1: #393939,
-  fg-dec-2: #000000,
-
-  // field header colors on hover
-  field-header-bg: #e7ba02,
-  field-header-fg: #ffffff,
-  loader-bg: #cfcfcf,
-  loader-fg: #3b9ee4,
-  //
-  border-color: #ff0000,
-  debugger-action-red: #f17559,
-  // codemirror
-  active-color: #828282,
-  inactive-color: #4a4a4a,
+  // ------------------------------------------
 );
 
-
-$theme-please-dont-debug: (
-  // 
-  class-name: "please-dont-debug",
-  accent-color: #9f9f9f,
-  // Main Colors
-  bg-inc-2: #eeeeee,
-  bg-inc-1: #e1e1e1,
-  bg-basic: #cdcdcd,
-  bg-dec-1: #878787,
-  bg-dec-2: #828282,
-
-  fg-inc-2: #e2e2e2,
-  fg-inc-1: #b5b5b5,
-  fg-basic: #676767,
-  fg-dec-1: #393939,
-  fg-dec-2: #000000,
-
-  // field header colors on hover
-  field-header-bg: red,
-  field-header-fg: #ffffff,
-  loader-bg: green,
-  loader-fg: red,
+$theme-pencil: (
   //
-  border-color: #ff0000,
-  debugger-action-red: #f17559,
-  // codemirror
-  active-color: #828282,
-  inactive-color: #4a4a4a,
-
-  button-fg: rgb(187, 187, 187),
-  button-bg: red,
-  button-active-fg: rgb(255, 255, 255),
-  button-active-bg: rgb(251, 94, 94),
+  class-name: "pencil",
+
+  base-fg: #848484,
+  base-bg: #e6e6e6,
+  
+  // Panel header sections
+  header-fg:   #848484,
+  header-bg:  #e6e6e6,
+  
+  header-hover-fg:#e4e4e4,
+  header-hover-bg:#e1bf36,
+
+  // Should contrast `base-*` to catch the user's attention
+  focus-fg: rgb(71, 71, 71),
+  focus-bg: rgb(236, 236, 236),
+
+  // Should blend in with `base-*` to avoid catching the user's attention
+  backdrop-fg: rgb(92, 92, 92),
+  backdrop-bg: rgb(216, 216, 216),
+
+  // Should work well when paired with  `base-fg` and `backdrop-bg`
+  button-fg: rgb(165, 165, 165),
+  button-bg: transparent,
+  button-hover-fg: #e6e6e6,
+  button-hover-bg: #848484,
+
+  // Should contrast work will with `base-bg`, `focus-bg`, and `backdrop-bg`
+  bc-address-bg: hsl(191, 44%, 50%),
+  bc-address-fg: #e6e6e6,
+
+  // Gives a subtle contrast to `base-bg` to help delineate panel contents
+  section-bg: rgba(0, 0, 0, 0),
+
+  // These setting contrast well with `focus-bg`
+  settings-input-bg: rgb(227, 227, 227),
+  settings-input-fg: rgb(61, 61, 61),
+  settings-input-active-fg: rgb(255, 255, 255),
+  settings-input-active-bg: hsl(191, 44%, 50%),
+  settings-input-disabled-fg: rgb(245, 245, 245),
+  settings-input-disabled-bg: rgb(201, 181, 66),
+
+  // These setting contrast well with `focus-bg` and `base-bg`
+  link-fg: hsl(191, 44%, 50%),
+  link-bg: transparent,
+  link-hover-fg: rgb(94, 148, 214),
+  link-hover-bg: transparent,
 );
 
 $theme-industrial-solace: (
-  //
   class-name: "industrial-solace",
-  accent-color: #9f9f9f,
-  // Main Colors
-  bg-inc-2: #9b9b9b,
-  bg-inc-1: #434343,
-  bg-basic: #2c2c2c,
-  bg-dec-1: #1f1f1f,
-  bg-dec-2: #000000,
-
-  fg-inc-2: #ffffff,
-  fg-inc-1: #d5d5d5,
-  fg-basic: #b0b0b0,
-  fg-dec-1: #909090,
-  fg-dec-2: #5f5f5f,
-  // field header colors on hover
-  field-header-bg: #c53131,
-  field-header-fg: #ffffff,
-  loader-bg: #bdbdbd,
-  loader-fg: #c53131,
-  //
-  border-color: #e4e4e4,
-  debugger-action-red: #f17559,
-  // codemirror
-  active-color: #828282,
-  inactive-color: #4a4a4a,
+
+  base-bg: #2c2c2c,
+  base-fg: #cecece,
   
-  bc-address-bg-active: #c53131,
-  bc-address-bg: #512626
+  // Panel header sections
+  header-bg:   #242424,
+  header-fg:  rgb(241, 241, 241),
+  
+  header-hover-bg:#c53131,
+  header-hover-fg:#ffffff,
+
+  // Should contrast `base-*` to catch the user's attention
+  focus-bg: #181818,
+  focus-fg: rgb(215, 215, 215),
+
+  // Should blend in with `base-*` to avoid catching the user's attention
+  backdrop-bg: rgb(36, 36, 36),
+  backdrop-fg: rgb(227, 227, 227),
+
+  // Should work well when paired with  `base-fg` and `backdrop-bg`
+  button-fg: rgb(200, 200, 200),
+  button-bg: transparent,
+  button-hover-bg: rgb(241, 241, 241),
+  button-hover-fg: rgb(45, 45, 45),
+
+  // Should contrast work will with `base-bg`, `focus-bg`, and `backdrop-bg`
+  bc-address-bg: #d7a611,
+  bc-address-fg: #f9f9f9,
+
+  // Gives a subtle contrast to `base-bg` to help delineate panel contents
+  section-bg: rgba(0, 0, 0, 0.19),
+
+  // These setting contrast well with `focus-bg`
+  settings-input-bg: rgb(227, 227, 227),
+  settings-input-fg: #181818,
+  settings-input-active-fg: rgb(255, 255, 255),
+  settings-input-active-bg: #d7a611,
+  settings-input-disabled-fg: rgb(245, 245, 245),
+  settings-input-disabled-bg: #7d2525,
+
+  // These setting contrast well with `focus-bg` and `base-bg`
+  link-fg: #ff8800,
+  link-bg: transparent,
+  link-hover-fg: #d7a611,
+  link-hover-bg: transparent,
 );
 
-$theme-desperados-unite: (
+$theme-desperados-united: (
   //
-  class-name: "desperados-unite",
-  accent-color: #9f9f9f,
-  // Main Colors
-  bg-inc-2: #9b9b9b,
-  bg-inc-1: #63009d,
-  bg-basic: #4d007a,
-  bg-dec-1: #1f1f1f,
-  bg-dec-2: #000000,
-
-  fg-inc-2: #ffffff,
-  fg-inc-1: #ffd94e,
-  fg-basic: #dda43b,
-  fg-dec-1: rgb(227, 103, 55),
-  fg-dec-2: #5f5f5f,
-  // field header colors on hover
-  field-header-bg: #ed8e0a,
-  field-header-fg: #ffffff,
-  loader-bg: #ffd94e,
-  loader-fg: #ed8e0a,
-  //
-  border-color: #e4e4e4,
-  debugger-action-red: #f17559,
-  // codemirror
-  active-color: #828282,
-  inactive-color: #4a4a4a,
-);
+  class-name: "desperados-united",
 
+  base-bg: #421865,
+  base-fg: #e3c794,
+  
+  // Panel header sections
+  header-bg:   transparent,
+  header-fg:  #cdb994,
+  
+  header-hover-bg:#c8ac65,
+  header-hover-fg:#421865,
 
+  // Should contrast `base-*` to catch the user's attention
+  focus-bg: rgb(37, 0, 67),
+  focus-fg: rgb(238, 238, 238),
 
+  // Should blend in with `base-*` to avoid catching the user's attention
+  backdrop-bg: #3b115e,
+  backdrop-fg: rgb(227, 227, 227),
+
+  // Should work well when paired with  `base-fg` and `backdrop-bg`
+  button-fg: #e3c794,
+  button-bg: transparent,
+  button-hover-bg: #e3c794,
+  button-hover-fg: #421865,
+
+  // Should contrast work will with `base-bg`, `focus-bg`, and `backdrop-bg`
+  bc-address-bg: #e3c794,
+  bc-address-fg: #421865,
+
+  // Gives a subtle contrast to `base-bg` to help delineate panel contents
+  section-bg: rgba(0, 0, 0, 0.044),
+
+  // These setting contrast well with `focus-bg`
+  settings-input-bg: #e3c794,
+  settings-input-fg: #5c3978,
+  settings-input-active-fg: #421865,
+  settings-input-active-bg: #cd9717,
+  settings-input-disabled-fg: #ff0000,
+  settings-input-disabled-bg: #3b115e,
+
+  // These setting contrast well with `focus-bg` and `base-bg`
+  link-fg: #ff8800,
+  link-bg: transparent,
+  link-hover-fg: #d7a611,
+  link-hover-bg: transparent,
+);
 
-$themes : ( //
+$themes : ( 
   $theme-the-radlr-special,
-  //$theme-pencil,
-  //$theme-industrial-solace,
-  //$theme-please-dont-debug,
-  //$theme-desperados-unite,
+  $theme-the-radlr-special-smoked,
+  $theme-pencil,
+  $theme-desperados-united,
+  $theme-industrial-solace,
 );
\ No newline at end of file
diff --git a/site/assets/sass/lab.sass b/site/assets/sass/lab.sass
index f775373..ed8a472 100644
--- a/site/assets/sass/lab.sass
+++ b/site/assets/sass/lab.sass
@@ -142,39 +142,6 @@
         .nb-label
           padding: 0 0px
 
-    .nb-loader
-      position: relative
-      width: 25%
-      height: 10px
-      border: 2px solid none
-      border-radius: 10px
-      box-sizing: content-box
-      padding: 0 10px
-      margin-right: 10px
-      opacity: 0
-      visibility: hidden
-      top: 2px
-      transition: opacity $bts * 2, visibility $bts * 2, top $bts * 4
-
-    .loader-div
-      width: 10px
-      height: 10px
-      position: relative
-      border-radius: 5px
-      animation: cylon_loader 550ms ease-in-out infinite alternate
-
-      @keyframes cylon_loader
-        0%
-          left: -10px
-          width: 10px
-
-        50%
-          width: 30%
-
-        100%
-          left: 100%
-          width: 10px
-
     .nb-loading-screen
       position: absolute
       top: $header-height
@@ -217,12 +184,6 @@
           background-color: none
           border-color: none
 
-    &.loading
-      .nb-loader
-        visibility: visible
-        opacity: 1
-        top: 0
-
       .nb-body
         opacity: 0
 
@@ -260,6 +221,46 @@
     .nb-body
       margin-bottom: 0px
 
+.nb-loader
+  $bts: 200ms
+  position: relative
+  width: 25%
+  height: 10px
+  border: 2px solid none
+  border-radius: 10px
+  box-sizing: content-box
+  padding: 0 10px
+  margin-right: 10px
+  opacity: 0
+  visibility: hidden
+  top: 2px
+  transition: opacity $bts * 2, visibility $bts * 2, top $bts * 4
+
+.loader-div
+  width: 10px
+  height: 10px
+  position: relative
+  border-radius: 5px
+  animation: cylon_loader 550ms ease-in-out infinite alternate
+
+  @keyframes cylon_loader
+    0%
+      left: -10px
+      width: 10px
+
+    50%
+      width: 30%
+
+    100%
+      left: 100%
+      width: 10px
+
+*.loading
+    .nb-loader
+      visibility: visible
+      opacity: 1
+      top: 0
+
 .nb-field.mini-candidate
   height: 40px !important
   .nb-body
@@ -722,16 +723,17 @@
             opacity:  1
           background: map-get($theme-map, header-hover-bg)
 
-        .nb-loader
-          background-color: map-get($theme-map, header-hover-bg)
-          border-color: map-get($theme-map, header-hover-bg)
+        .nb-loading-screen
+          background-color: map-get($theme-map, base-bg)
+          color: map-get($theme-map, base-fg)
+
+  .nb-loader
+    background-color: map-get($theme-map, header-hover-bg)
+    border-color: map-get($theme-map, header-hover-bg)
 
-        .loader-div
-          background: map-get($theme-map, header-hover-fg)
+    .loader-div
+      background: map-get($theme-map, header-hover-fg)
 
-      .nb-loading-screen
-        background-color: map-get($theme-map, base-bg)
-        color: map-get($theme-map, base-fg)
 
   .nb-column.mini .nb-field.nb-content-field .nb-header,
     &, .nb-icon-container
diff --git a/site/assets/sass/main.sass b/site/assets/sass/main.sass
index 94dcb9c..04b1197 100644
--- a/site/assets/sass/main.sass
+++ b/site/assets/sass/main.sass
@@ -1,5 +1,6 @@
-@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');
+@use 'sass:list'
 
+@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');
 *
   transition: color 200ms, background-color 200ms, fill 200ms
   
@@ -68,7 +69,7 @@ button:hover
   cursor: pointer
 
 
-#noscript, #screen-too-small
+#noscript, #screen-too-small, #loading-screen
   font-size: 1.2em
   position: absolute
   display: flex
@@ -84,6 +85,7 @@ button:hover
   background: white
   z-index: 100000
   pointer-events: none
+  opacity: 1
   transition: opacity 200ms
 
   .settings-button
@@ -103,19 +105,31 @@ button:hover
     font-size: 16px
     box-sizing: border-box
 
-#screen-too-small
+#screen-too-small, #loading-screen
   opacity: 0
 
+#loading-screen
+  &.active
+    opacity: 1
+    pointer-events: all
+  *
+    pointer-events: none
+
+  header
+    margin-bottom: 40px
+    align-items: center
+
+    .header-right
+      display: none
+
+
 @media (max-width: 374px), (max-height: 665px)
   #screen-too-small
     z-index: 100001
     opacity: 1
 
-  
-  
-
 @mixin main-themable($theme-map)
-  &, #noscript, #screen-too-small
+  #noscript, #screen-too-small
     color: map-get($theme-map, "button-fg")
     background-color: map-get($theme-map, "base-bg")
 
@@ -145,18 +159,45 @@ button:hover
 @import "./lab"
 @import "./settings-panel"
 
-@mixin themables($theme-name, $theme-map)
+@mixin default-themables($theme-map)
+  @include main-themable($theme-map)
+  @include lab-themable($theme-map)
+  @include cm-themable($theme-map)
+  @include inputs-themable($theme-map)
+  @include settings-panel-themable($theme-map)
+  @include header-footer-themable($theme-map)
+
+@mixin themables($theme-name, $theme)
   body.#{$theme-name}
 
-    @include main-themable($theme-map)
-    @include lab-themable($theme-map)
-    @include cm-themable($theme-map)
-    @include inputs-themable($theme-map)
-    @include settings-panel-themable($theme-map)
-    @include header-footer-themable($theme-map)
+    #loading-screen
+      color: map-get($theme, "button-fg")
+      background-color: map-get($theme, "base-bg")
+
+    color: map-get($theme, "base-fg")
+    background-color: map-get($theme, "base-bg")
+    @include default-themables($theme)
+
+@mixin default-thema($theme)
+  body
+    #loading-screen
+      color: map-get($theme, "button-fg")
+      background-color: map-get($theme, "base-bg")
+
+    color: map-get($theme, "base-fg")
+    background-color: map-get($theme, "base-bg")
+    @include default-themables($theme)
+    @include settings-panel-themable-default($theme)
+
+@media  ( prefers-color-scheme: light  )
+  @include default-thema($theme: nth($themes, 1))
+
+@media  ( prefers-color-scheme: dark  )
+  @include default-thema($theme: nth($themes, 2))
 
-@each $theme in $themes
-  @include themables(map-get($theme, class-name), $theme)
+@media  ( prefers-color-scheme: dark  ), ( prefers-color-scheme: light  )
+  @each $theme in $themes
+    @include themables(map-get($theme, class-name), $theme)
 
 @mixin dubugger-flag($name, $index, $color)
   position: relative
diff --git a/site/assets/sass/settings-panel.sass b/site/assets/sass/settings-panel.sass
index a4593b1..cb710f6 100644
--- a/site/assets/sass/settings-panel.sass
+++ b/site/assets/sass/settings-panel.sass
@@ -111,39 +111,42 @@
       cursor: pointer
 
   .theme-section
-
     display: flex
     flex-wrap: wrap
     justify-content: space-between
     width: 100%
 
-    .theme-entry
-      display: flex
-      flex-direction: row
-      justify-content: left
-      align-items: center
-      margin: 2.5% 20px
-      width: 200px
-      height: 40px
-      border-radius: 20px
-      padding: 8px
-      font-weight: 800
-      opacity: 0.8
-
-      &:hover, &.active
-        opacity: 1
-        cursor: pointer
+  .theme-entry
+    display: flex
+    flex-direction: row
+    justify-content: left
+    align-items: center
+    margin: 2.5% 20px
+    width: 200px
+    height: 50px
+    border-radius: 25px
+    padding: 8px
+    font-weight: 800
+    opacity: 0.8
+    text-align: center
+    line-height: 1em
+    border: 5px solid red
 
-      .theme
-        box-sizing: border-box
-        position: relative
-        background-color: red
-        border-color: green
-        border: 8px solid
-        height: 30px
-        width: 30px
-        border-radius: 15px
-        margin-right: 10px
+
+    &:hover, &.active
+      opacity: 1
+      cursor: pointer
+
+    .theme
+      box-sizing: border-box
+      position: relative
+      border: 8px solid red
+      height: 30px
+      width: 30px
+      border-radius: 15px
+      margin-right: 10px
+      flex-grow: 0;
+      flex-shrink: 0;
 
 // Colors ------------------------------------------
 
@@ -161,14 +164,17 @@
         background-color: map-get($theme-map, button-hover-bg)
         color: map-get($theme-map, button-hover-fg)
 
+
+@mixin settings-panel-themable-default($theme-map)
+
+  #settings-panel, #config-panel
     .theme-entry
-      background-color: map-get($theme-map, focus-bg)
-      color: map-get($theme-map, focus-fg)
+      border-color: map-get($theme-map, focus-bg)
+      background-color: map-get($theme-map, base-bg)
 
-      &:hover
-        background-color: map-get($theme-map, base-bg)
+      .theme
+        background-color: map-get($theme-map, base-fg)
+        border-color: map-get($theme-map, bc-address-bg)
+    
+      .theme-entry-title
         color: map-get($theme-map, base-fg)
-
-      &.active
-        background-color: map-get($theme-map, backdrop-bg)
-        color: map-get($theme-map, backdrop-fg)
diff --git a/site/assets/sass/themes.sass b/site/assets/sass/themes.sass
index 26b3154..807fc04 100644
--- a/site/assets/sass/themes.sass
+++ b/site/assets/sass/themes.sass
@@ -1,7 +1,7 @@
 @import "color"
 
 @mixin kludge($theme-name, $theme-map)
-  /*!theme<div class="theme" data-target="#{$theme-name}" data-fg="#{map-get($theme-map, focus-fg)}" data-mg="#{map-get($theme-map, header-hover-bg)}" data-bg="#{map-get($theme-map, focuse-bg)}" ></div>|#{$theme-name}emeht*/
+  /*!theme<div class="theme" data-target="#{$theme-name}" data-text="#{map-get($theme-map, base-fg)}" data-border="#{map-get($theme-map, focus-bg)}" data-inner_bg="#{map-get($theme-map, header-hover-bg)}" data-inner_border="#{map-get($theme-map, bc-address-bg)}" data-bg="#{map-get($theme-map, base-bg)}" ></div>|#{$theme-name}emeht*/
 
 @each $theme in $themes
   @include kludge(map-get($theme, class-name), $theme)
diff --git a/site/layouts/page/lab.html b/site/layouts/page/lab.html
index 6f7dda1..22712c2 100644
--- a/site/layouts/page/lab.html
+++ b/site/layouts/page/lab.html
@@ -12,11 +12,14 @@
 
 {{- $themes_kludge := resources.Get "sass/themes.sass" | resources.ExecuteAsTemplate "main.scss" . | resources.ToCSS -}}
 {{- $theme_data := $themes_kludge.Content | findRESubmatch `theme(.*)\|(.*)emeht` }}
-{{- $default_theme := index $theme_data 0 2 -}}
+{{- $default_light := index $theme_data 0 2 -}}
+{{- $default_dark := index $theme_data 1 2 -}}
 {{- .Scratch.Set "headerSubtext" "lab" -}}
 {{ partial "header/header.html" . }}
 
-<body class="{{$default_theme}}" data-defaulttheme="{{$default_theme}}">
+
+
+<body>
   <noscript>
     <!-- anchor linking to external file -->
     <div id="noscript">
@@ -34,6 +37,13 @@
     <div style="font-size: 40px">375x665</div>
   </div>
 
+  <div id="loading-screen" class="active loading">
+    {{ partial "header/header.html" . }}
+    <div class="nb-loader">
+      <div class="loader-div"></div>
+    </div>
+  </div>
+
   <div id="controls-container">
     <div id="controls" class="inactive">
       <div class="classification"></div>
@@ -170,6 +180,9 @@ <h2>Lexer</h2>
       <div class="close-button">x</div>
       <h1>Themes</h1>
       <div class="theme-section">
+        <div class="theme" data-target="system" data-text="System Default" data-focus="" data-fg="" data-mg=""
+          data-bg="">
+        </div>
         {{- $themes_kludge := resources.Get "sass/themes.sass" | resources.ExecuteAsTemplate "main.scss" . |
         resources.ToCSS -}}
         {{- range $theme_data }}