diff --git a/assets/styles/themes/_dark.scss b/assets/styles/themes/_dark.scss
new file mode 100644
index 0000000000..d8d45c35c8
--- /dev/null
+++ b/assets/styles/themes/_dark.scss
@@ -0,0 +1,207 @@
+.theme-dark {
+  // Local variables for reused colors
+
+  //dark sidebar
+  $darkest: #141419;
+
+  //dark body
+  $darker: #1b1c21;
+
+  //dark inputs
+  $dark: #27292e;
+
+  //dark borders and button
+  $medium: #4a4b52;
+
+  // dark disabled,
+  $light: #6c6c76;
+
+  //dark secondary
+  $lighter: #b6b6c2;
+
+  // dark main text
+  $lightest: #ffffff;
+
+  $secondary: $lighter;
+  $disabled: $light;
+
+  //Contrast colors
+  $contrasted-dark: $lightest !default;
+  $contrasted-light: $darkest !default;
+
+
+  --default                    : #{$dark};
+  --default-text               : #{$light};
+  --default-hover-bg           : #{darken($dark, 10%)};
+  --default-hover-text         : #{saturate($lightest, 20%)};
+  --default-active-bg          : #{darken($dark, 25%)};
+  --default-active-text        : #{contrast-color(darken($dark, 25%))};
+  --default-border             : #($dark);
+  --default-banner-bg          : #{rgba($dark, 0.15)};
+  --default-light-bg           : #{rgba($dark, 0.05)};
+  --slider-light-bg            : #{rgba($darker, 1)};
+  --slider-light-bg-right      : #{rgba($darker, 0)};
+
+  --muted                      : #{$disabled};
+
+  --body-bg                    : #{$darker};
+  --body-text                  : #{$lightest};
+  --scrollbar-thumb            : #{$medium};
+  --scrollbar-thumb-dropdown   : #{$medium};
+
+  --header-bg                  : #{$darker};
+  --header-border              : #{$medium};
+  --header-btn-bg              : transparent;
+  --header-btn-text            : #{$lightest};
+  --header-input-text          : #{$lightest};
+
+  // Header, Footer and Consent banner defaults
+  --banner-text-color          : #{$lightest};
+
+  --nav-bg                     : #{$darkest};
+  --nav-active                 : var(--primary-active-bg);
+  --nav-border                 : #{$medium};
+  --nav-hover                  : var(--primary);
+  --nav-expander-hover         : var(--primary-banner-bg);
+
+  --disabled-bg                : #{darken($disabled, 10%)};
+  --disabled-text              : #{$secondary};
+  --box-bg                     : #{$darkest};
+  --subtle-border              : #{$darkest};
+  --border                     : #{$medium};
+
+  --topmenu-bg                 : #{$darkest};
+  --topmenu-text               : #{$lightest};
+  --topmost-border             : #{$medium};
+  --topmost-shadow             : #{lighten($darkest, 5%)};
+  --topmost-light-hover        : #{$medium};
+
+  --accent-btn                 : var(--primary-banner-bg);
+  --accent-btn-hover           : var(--primary);
+  --accent-btn-hover-text      : #{$lightest};
+
+  --modal-bg                   : #{$dark};
+  --modal-border               : #{$medium};
+  --overlay-bg                 : #{rgba($darkest, 0.75)};
+  --shadow                     : #{rgba($darkest, 0.9)};
+
+  --checkbox-tick              : #{$lightest};
+  --checkbox-border            : #{$medium};
+  --checkbox-tick-disabled     : #{lighten($disabled, 50%)};
+  --checkbox-disabled-bg       : #{$disabled};
+  --checkbox-ticked-bg         : var(--primary);
+
+  --dropdown-bg                : #{mix($medium, $dark, 10%)};
+  --dropdown-border            : #{$light};
+  --dropdown-divider           : #{$light};
+  --dropdown-text              : #{$link};
+  --dropdown-active-text       : #{$lightest};
+  --dropdown-active-bg         : #{$selected};
+  --dropdown-hover-text        : #{$lightest};
+  --dropdown-hover-bg          : #{$link};
+  --dropdown-disabled-bg       : #{$disabled};
+  --dropdown-disabled-text     : #{$disabled};
+
+  --input-text                 : #{$lightest};
+  --input-label                : #{$lighter};
+  --input-placeholder          : #{$disabled};
+  --input-border               : var(--border);
+  --input-bg                   : var(--body-bg);
+  --input-bg-accent            : #{darken($dark, 3%)};
+  --input-hover-bg             : var(--box-bg);
+  --input-focus-bg             : var(--box-bg);
+  --input-disabled-text        : #{darken($lightest, 50%)};
+  --input-disabled-label       : #{darken($lighter, 30%)};
+  --input-disabled-bg          : #{darken($disabled, 30%)};
+  --input-disabled-border      : #{darken($medium, 30%)};
+  --input-disabled-placeholder : #{darken($disabled, 10%)};
+  --input-addon-bg             : #{$darker};
+
+  --progress-bg                : #{$medium};
+  --progress-divider           : #{$lightest};
+
+  --sortable-table-bg          : #{lighten($darkest, 10%)};
+  --sortable-table-row-bg      : #{$darker};;
+  --sortable-table-header-bg   : #{$darkest};
+  --sortable-table-top-divider : var(--border);
+  --sortable-table-hover-bg    : #{$darkest};
+  --sortable-table-selected-bg : var(--primary-light-bg);
+  --sortable-table-group-label : #{$lighter};
+
+  --tag-primary                : #{$lightest};
+  --tag-bg                     : #{$medium};
+
+  --popover-bg                 : var(--body-bg);
+  --popover-border             : var(--border);
+  --popover-text               : var(--body-text);
+
+  --tooltip-bg                 : #{$medium};
+  --tooltip-border             : var(--tag-primary);
+  --tooltip-text               : var(--body-text);
+  --tooltip-text-warning       : var(--body-text);
+
+
+  --tabbed-border              : #{$medium};
+  --tabbed-sidebar-bg          : #{$darkest};
+  --tabbed-container-bg        : #{mix($medium, $dark, 20%)};
+
+  --yaml-editor-bg             : #{$darkest};
+
+  --diff-border                : var(--border);
+  --diff-header-bg             : var(--nav-bg);
+  --diff-header-border         : var(--border);
+  --diff-header                : #{rgba($darkest, 0.3)};
+  --diff-linenum-bg            : var(--nav-bg);
+  --diff-linenum               : var(--muted);
+  --diff-linenum-border        : var(--border);
+  --diff-line-ins-bg           : $success;
+  --diff-line-del-bg           : #{rgba($error, 0.75)};
+  --diff-del-bg                : #{rgba($error, 0.3)};
+  --diff-del-border            : #{$error};
+  --diff-ins-bg                : #{rgba($success, 0.3)};
+  --diff-ins-border            : #{rgba($success, 0.5)};
+  --diff-chg-ins               : #{rgba($success, 0.25)};
+  --diff-chg-del               : #{rgba($warning, 0.5)};
+  --diff-chg-dela               : #{rgba($warning, 1)};
+  --diff-empty-placeholder     : #{$darker};
+
+
+  --wm-tabs-bg                 : #{mix($medium, $dark, 10%)};
+  --wm-tab-bg                  : #{$darkest};
+  --wm-closer-hover-bg         : #{$medium};
+  --wm-tab-active-bg           : #{$darker};
+  --wm-title-bg                : #{$darkest};
+  --wm-title-border            : #{$medium};
+  --wm-body-bg                 : #{$darkest};
+  --wm-border                  : black;
+
+  --glance-divider             : #{$medium};
+
+  --resource-gauge-back-circle : 74, 75, 82, 0.5;
+
+  --simple-box-bg              : #{$darker};
+  --simple-box-border          : #{$medium};
+  --simple-box-divider         : #{$medium};
+  --simple-box-shadow          : none;
+
+  --terminal-bg                : var(--wm-body-bg);
+  --terminal-cursor            : var(--warning);
+  --terminal-selection         : #{$selected};
+  --terminal-text              : var(--body-text);
+
+  --logs-bg                    : var(--wm-body-bg);
+  --logs-highlight             : var(--wm-body-bg);
+  --logs-highlight-bg          : var(--warning);
+  --logs-text                  : var(--body-text);
+
+  --gauge-divider              : rgba(255, 255, 255, 0.3);
+  --gauge-success-primary      : 75, 95, 64;
+  --gauge-success-secondary    : 150, 189, 127;
+  --gauge-warning-primary      : 218, 195, 66;
+  --gauge-warning-secondary    : 109, 98, 33;
+  --gauge-error-primary        : 239, 90, 83;
+  --gauge-error-secondary      : 120, 45, 42;
+
+  --product-icon               : #{$lighter};
+  --product-icon-active        : #{$lightest};
+}
diff --git a/assets/styles/themes/_light.scss b/assets/styles/themes/_light.scss
new file mode 100644
index 0000000000..d4c0f37679
--- /dev/null
+++ b/assets/styles/themes/_light.scss
@@ -0,0 +1,536 @@
+// Local variables for reused colors
+//light main text
+$darkest   : #141419;
+
+//light secondary
+$darker    : #6C6C76;
+
+//light disabled
+$dark      : #B6B6C2;
+
+//light border and buttons
+$medium    : #DCDEE7;
+
+//light inputs 
+$light     : #EEEFF4;
+
+//light sidebar and box
+$lighter   : #F4F5FA;
+
+//light body bg
+$lightest  : #FFFFFF;
+
+//color for items that are not enabled
+$disabled  : $medium;
+
+$primary         : #3D98D3;
+$secondary       : $darker;
+$link            : #3D98D3;
+
+// Status colors
+$success         : #5D995D;
+$warning         : #DAC342;
+$error           : #F64747;
+$info            : #3D98D3;
+
+$contrasted-dark: $darkest !default;
+$contrasted-light: $lightest !default;
+
+// Text selection color for terminal window (we don't want this to change with the primary color)
+// The terminal alway uses a light background, so okay to use a fixed color
+$selected: rgba(#3D98D3, .5);
+
+BODY, .theme-light {
+
+  --primary                    : #{$primary};
+  --primary-text               : #{contrast-color($primary)};
+  --primary-hover-bg           : #{darken($primary, 10%)};
+  --primary-hover-text         : #{saturate($lightest, 20%)};
+  --primary-active-bg          : #{darken($primary, 25%)};
+  --primary-active-text        : #{contrast-color(darken($primary, 25%))};
+  --primary-border             : #{$primary};
+  --primary-banner-bg          : #{rgba($primary, 0.15)};
+  --primary-light-bg           : #{rgba($primary, 0.05)};
+
+
+  .text-primary {
+    color: var(--primary) !important;
+  }
+
+  .bg-primary {
+    background-color: var(--primary);
+    color: var(--primary-text);
+
+    &.btn:hover {
+      color: var(--primary-hover-text);
+      background: var(--primary-hover-bg);
+      transition: all 0.3s ease;
+    }
+
+    &.btn:active {
+      color: var(--primary-active-text);
+      background: var(--primary-active-bg);
+      }
+  }
+
+  --link                    : #{$link};
+  --link-text               : #{contrast-color($link)};
+  --link-hover-bg           : #{darken($link, 10%)};
+  --link-hover-text         : #{saturate($lightest, 20%)};
+  --link-active-bg          : #{darken($link, 25%)};
+  --link-active-text        : #{contrast-color(darken($link, 25%))};
+  --link-border             : #{$link};
+  --link-banner-bg          : #{rgba($link, 0.15)};
+  --link-light-bg           : #{rgba($link, 0.05)};
+ 
+
+  
+  .text-link {
+    color: var(--link) !important;
+  }
+
+  .bg-link {
+    background-color: var(--link);
+    color: var(--link-text);
+
+    &.btn:hover {
+      color: var(--link-hover-text);
+      background: var(--link-hover-bg);
+      transition: all 0.3s ease;
+    }
+
+    &.btn:active {
+      color: var(--link-active-text);
+      background: var(--link-active-bg);
+      }
+  }
+
+  --default                    : #{$light};
+  --default-text               : #{contrast-color($light)};
+  --default-hover-bg           : #{darken($light, 10%)};
+  --default-hover-text         : #{saturate($lightest, 20%)};
+  --default-active-bg          : #{darken($light, 25%)};
+  --default-active-text        : #{contrast-color(darken($light, 25%))};
+  --default-border             : #{$light};
+  --default-banner-bg          : #{rgba($light, 0.15)};
+  --default-light-bg           : #{rgba($light, 0.05)};
+  --slider-light-bg            : #{rgba($lightest, 1)};
+  --slider-light-bg-right      : #{rgba($lightest, 0)};
+
+
+  .text-default {
+    color: var(--default) !important;
+  }
+
+  .bg-default {
+    background-color: var(--default);
+    color: var(--default-text);
+
+    &.btn:hover {
+      color: var(--default-hover-text);
+      background: var(--default-hover-bg);
+      transition: all 0.3s ease;
+    }
+
+    &.btn:active {
+      color: var(--default-active-text);
+      background: var(--default-active-bg);
+      }
+  }
+
+  --muted                      : #{$dark};
+
+  .text-muted {
+    color: var(--muted) !important;
+  }
+
+  --darker                    : #{$darker};
+  --darker-text               : #{contrast-color($darker)};
+  --darker-hover-bg           : #{darken($darker, 10%)};
+  --darker-hover-text         : #{saturate($lightest, 20%)};
+  --darker-active-bg          : #{darken($darker, 25%)};
+  --darker-active-text        : #{contrast-color(darken($darker, 25%))};
+  --darker-border             : #{$darker};
+  --darker-banner-bg          : #{rgba($darker, 0.15)};
+  --darker-light-bg           : #{rgba($darker, 0.05)};
+
+  .text-darker {
+    color: var(--default) !important;
+  }
+
+  .bg-darker {
+    background-color: var(--darker);
+    color: var(--darker-text);
+
+    &.btn:hover {
+      color: var(--darker-hover-text);
+      background: var(--darker-hover-bg);
+      transition: all 0.3s ease;
+    }
+
+    &.btn:active {
+      color: var(--darker-active-text);
+      background: var(--darker-active-bg);
+      }
+  }
+
+
+
+  --success                    : #{$success};
+  --success-text               : #{contrast-color($success)};
+  --success-hover-bg           : #{darken($success, 10%)};
+  --success-hover-text         : #{saturate($lightest, 20%)};
+  --success-active-bg          : #{darken($success, 25%)};
+  --success-active-text        : #{contrast-color(darken($success, 25%))};
+  --success-border             : #{$success};
+  --success-banner-bg          : #{rgba($success, 0.15)};
+  --success-light-bg           : #{rgba($success, 0.05)};
+
+  .text-success {
+    color: var(--success) !important;
+  }
+
+  .bg-success {
+    background-color: var(--success);
+    color: var(--success-text);
+
+    &.btn:hover {
+      color: var(--success-hover-text);
+      background: var(--success-hover-bg);
+      transition: all 0.3s ease;
+    }
+
+    &.btn:active {
+      color: var(--success-active-text);
+      background: var(--success-active-bg);
+      }
+  }
+
+
+  --info                    : #{$info};
+  --info-text               : #{contrast-color($info)};
+  --info-hover-bg           : #{darken($info, 10%)};
+  --info-hover-text         : #{saturate($lightest, 20%)};
+  --info-active-bg          : #{darken($info, 25%)};
+  --info-active-text        : #{contrast-color(darken($info, 25%))};
+  --info-border             : #{$info};
+  --info-banner-bg          : #{rgba($info, 0.15)};
+  --info-light-bg           : #{rgba($info, 0.05)};
+
+  .text-info {
+    color: var(--info) !important;
+  }
+
+  .bg-info {
+    background-color: var(--info);
+    color: var(--info-text);
+
+    &.btn:hover {
+      color: var(--info-hover-text);
+      background: var(--info-hover-bg);
+      transition: all 0.3s ease;
+    }
+
+    &.btn:active {
+      color: var(--info-active-text);
+      background: var(--info-active-bg);
+      }
+  }
+
+
+  --warning                    : #{$warning};
+  --warning-text               : #{contrast-color($warning)};
+  --warning-hover-bg           : #{darken($warning, 10%)};
+  --warning-hover-text         : #{saturate($lightest, 20%)};
+  --warning-active-bg          : #{darken($warning, 25%)};
+  --warning-active-text        : #{contrast-color(darken($warning, 25%))};
+  --warning-border             : #{$warning};
+  --warning-banner-bg          : #{rgba($warning, 0.15)};
+  --warning-light-bg           : #{rgba($warning, 0.05)};
+
+  .text-warning {
+    color: var(--error) !important;
+  }
+
+  .bg-warning {
+    background-color: var(--warning);
+    color: var(--warning-text);
+
+    &.btn:hover {
+      color: var(--warning-hover-text);
+      background: var(--warning-hover-bg);
+      transition: all 0.3s ease;
+    }
+
+    &.btn:active {
+      color: var(--warning-active-text);
+      background: var(--warning-active-bg);
+      }
+  }
+
+
+  --error                    : #{$error};
+  --error-text               : #{contrast-color($error)};
+  --error-hover-bg           : #{darken($error, 10%)};
+  --error-hover-text         : #{saturate($lightest, 20%)};
+  --error-active-bg          : #{darken($error, 25%)};
+  --error-active-text        : #{contrast-color(darken($error, 25%))};
+  --error-border             : #{$error};
+  --error-banner-bg          : #{rgba($error, 0.15)};
+  --error-light-bg           : #{rgba($error, 0.05)};
+
+
+  .text-error {
+    color: var(--error) !important;
+  }
+
+  .bg-error {
+    background-color: var(--error);
+    color: var(--error-text);
+
+    &.btn:hover {
+      color: var(--error-hover-text);
+      background: var(--error-hover-bg);
+      transition: all 0.3s ease;
+    }
+
+    &.btn:active {
+      color: var(--error-active-text);
+      background: var(--error-active-bg);
+      }
+  }
+  
+
+  --body-bg                    : #{$lightest};
+  --body-text                  : #{$darkest};
+  --scrollbar-thumb            : #{$dark};
+  --scrollbar-thumb-dropdown   : #{$lighter};
+  --scrollbar-track            : transparent;
+
+  // Header, Footer and Consent banner defaults
+  --banner-text-color          : #{$darkest};
+
+  --header-bg                  : #{$lightest};
+  --header-btn-bg              : transparent;
+  --header-btn-text            : #{$darkest};
+  --header-input-text          : #{$darkest};
+  --header-height              : 55px;
+  --header-border              : #{$medium};
+  --header-border-size         : 1px;
+  --nav-width                  : 230px;
+  --nav-bg                     : #{$lightest};
+  --nav-active                 : #{$light};
+  --nav-hover                  : #{$medium};
+  --nav-expander-hover         : #{darken($medium, 10%)};
+  --nav-border                 : #{$medium};
+  --nav-border-size            : 1px;
+
+  --footer-bg                  : transparent;
+  --footer-height              : 0px;
+
+  --topmenu-bg                 : #{$lightest};
+  --topmenu-text               : #{$darkest};
+  --topmost-border             : #{$medium};
+  --topmost-shadow             : #{lighten($lightest, 10%)};
+  --topmost-light-hover        : #{$light};
+
+  --disabled-bg                : #{$disabled};
+  --disabled-text              : #{$secondary};
+  --box-bg                     : #{$lighter};
+  --subtle-border              : #{$medium};
+  --border                     : #{$medium};
+  --border-width               : 1px;
+  --border-radius              : 4px;
+  --outline                    : var(--primary);
+  --outline-width              : 1px;
+
+  --accent-btn                 : var(--primary-banner-bg);
+  --accent-btn-hover           : var(--primary);
+  --accent-btn-hover-text      : #{$lightest};
+
+  --modal-bg                   : #{$lightest};
+  --modal-border               : #{$dark};
+  --overlay-bg                 : #{rgba($lighter, 0.75)};
+  --shadow                     : #{rgba($medium, 0.85)};
+
+  --checkbox-tick              : #{$lightest};
+  --checkbox-border            : #{$medium};
+  --checkbox-tick-disabled     : #{darken($disabled, 40%)};
+  --checkbox-disabled-bg       : #{$disabled};
+  --checkbox-ticked-bg         : #{$link};
+
+  --dropdown-bg                : #{$lightest};
+  --dropdown-border            : #{$medium};
+  --dropdown-divider           : #{$medium};
+  --dropdown-text              : #{$link};
+  --dropdown-active-text       : #{$lightest};
+  --dropdown-active-bg         : #{$dark};
+  --dropdown-hover-text        : #{$lightest};
+  --dropdown-hover-bg          : var(--primary);
+  --dropdown-disabled-text     : var(--muted);
+  --dropdown-disabled-bg       : #{$disabled};
+
+  --card-badge-text            : #ffffff;
+
+  // UNUSED?
+  --card-header                : var(--primary-banner-bg);
+
+  --input-text                 : #{$darkest};
+  --input-label                : #{$secondary};
+  --input-placeholder          : #{darken($disabled, 10%)};
+  --input-border               : var(--border);
+  --input-bg                   : var(--body-bg);
+  --input-bg-accent            : #{darken($light, 2%)};
+  --input-hover-bg             : var(--box-bg);
+  --input-focus-bg             : var(--box-bg);
+  --input-disabled-text        : #{darken($disabled, 60%)};
+  --input-disabled-label       : #{darken($disabled, 40%)};
+  --input-disabled-bg          : #{$disabled};
+  --input-disabled-border      : #{darken($medium, 10%)};
+  --input-disabled-placeholder : #{darken($medium, 15%)};
+  --input-addon-bg             : #{$darker};
+  --input-hover-border         : #{darken($medium, 25%)};
+
+  --progress-bg                : #{$medium};
+  --progress-divider           : #{$medium};
+
+  --sortable-table-bg          : #{darken($lightest, 5%)};
+  --sortable-table-row-bg      : #{$lightest};
+  --sortable-table-header-bg   : #{$lighter};
+  --sortable-table-top-divider : var(--border);
+  --sortable-table-body-divider : #{$medium};
+
+  --sortable-table-hover-bg    : #{$lighter};
+  //--sortable-table-selected-bg : #{rgba($primary, 0.02)};
+
+  --sortable-table-selected-bg : var(--primary-light-bg);
+  --sortable-table-group-label : #{$secondary};
+
+  --tag-primary                : #{$darkest};
+  --tag-bg                     : #{$medium};
+
+  --popover-bg                 : var(--body-bg);
+  --popover-border             : var(--border);
+  --popover-text               : var(--body-text);
+  --popover-border-radius      : var(--border-radius);
+  --tooltip-bg                 : #{$medium};
+  --tooltip-border             : var(--tag-primary);
+  --tooltip-text               : var(--tag-primary);
+  --tooltip-bg-warning         : #{rgba($warning, 0.8)};
+  --tooltip-text-warning       : var(--body-text);
+
+  --tabbed-border              : #{$medium};
+  --tabbed-sidebar-bg          : #{$lighter};
+  --tabbed-container-bg        : #{mix($light, $lighter, 15%)};
+
+  --yaml-editor-bg             : #{$lighter};
+
+  --diff-border                : var(--border);
+  --diff-header-bg             : var(--nav-bg);
+  --diff-header-border         : var(--border);
+  --diff-header                : #{rgba($darkest, 0.3)};
+  --diff-linenum-bg            : var(--nav-bg);
+  --diff-linenum               : var(--muted);
+  --diff-linenum-border        : var(--border);
+  --diff-line-ins-bg           : $success;
+  --diff-line-del-bg           : #{rgba($error, 0.75)};
+  --diff-del-bg                : #{rgba($error, 0.3)};
+  --diff-del-border            : #{$error};
+  --diff-ins-bg                : #{rgba($success, 0.3)};
+  --diff-ins-border            : #{rgba($success, 0.5)};
+  --diff-chg-ins               : #{rgba($success, 0.25)};
+  --diff-chg-del               : #{rgba($warning, 0.5)};
+  --diff-empty-placeholder     : #{$lightest};
+
+  --wm-tabs-bg                 : #{$medium};
+  --wm-tab-bg                  : #{$light};
+  --wm-closer-hover-bg         : #{$lighter};
+  --wm-tab-active-bg           : #{$lighter};
+  --wm-title-bg                : #{$lightest};
+  --wm-title-border            : #{$medium};
+  --wm-body-bg                 : #{$lighter};
+  --wm-border                  : var(--border);
+  --wm-tab-height              : 29px;
+
+  --glance-bg-rgb              : 61, 152, 211;
+  --glance-divider             : #{$medium};
+
+  --resource-gauge-back-circle : 255, 255, 255, 0.15;
+
+  --simple-box-bg              : #{$lightest};
+  --simple-box-border          : #{$medium};
+  --simple-box-divider         : #{$medium};
+  --simple-box-shadow          : none;
+
+  --terminal-bg                : var(--body-bg);
+  --terminal-cursor            : var(--warning);
+  --terminal-selection         : #{$selected};
+  --terminal-text              : var(--body-text);
+
+  --logs-bg                    : var(--wm-body-bg);
+  --logs-highlight             : var(--wm-body-bg);
+  --logs-highlight-bg          : var(--warning);
+  --logs-text                  : var(--body-text);
+
+  --gauge-divider              : #{$lightest};
+  --gauge-zero                 : #{$medium};
+  --gauge-success-primary      : 150, 189, 127;
+  --gauge-success-secondary    : 190, 211, 172;
+  --gauge-warning-primary      : 238, 226, 176;
+  --gauge-warning-secondary    : 218, 195, 66;
+  --gauge-error-primary        : 249, 186, 171;
+  --gauge-error-secondary      : 239, 90, 83;
+
+  --sizzle-0                   : 180, 210, 30;
+  --sizzle-1                   : 225, 45, 74;
+  --sizzle-2                   : 212, 66, 148;
+  --sizzle-3                   : 0, 169, 217;
+  --sizzle-4                   : 244, 136, 68;
+  --sizzle-5                   : 0, 147, 128;
+  --sizzle-6                   : 136, 81, 165;
+  --sizzle-7                   : 45, 47, 149;
+  --sizzle-8                   : 255, 235, 0;
+
+  --sizzle-success             : #{red($success)}, #{green($success)}, #{blue($success)};
+  --sizzle-info                : #{red($info)},    #{green($info)},    #{blue($info)};
+  --sizzle-warning             : #{red($warning)}, #{green($warning)}, #{blue($warning)};
+  --sizzle-error               : #{red($error)},   #{green($error)},   #{blue($error)};
+  --sizzle-unknown             : #{red($disabled)},#{green($disabled)},#{blue($disabled)};
+
+  $rancher                     : $primary;
+  $partner                     : #FEA424;
+  $other                       : #614EA2;
+
+  --app-rancher-accent         : #{$rancher};
+  --app-rancher-accent-text    : #ffffff;
+
+  --app-partner-accent         : #{$partner};
+  --app-partner-accent-text    : black;
+
+  --app-color1-accent          : rgba(var(--sizzle-1), 1);
+  --app-color1-accent-text     : white;
+
+  --app-color2-accent          : rgba(var(--sizzle-2), 1);
+  --app-color2-accent-text     : white;
+
+  --app-color3-accent          : rgba(var(--sizzle-3), 1);
+  --app-color3-accent-text     : white;
+
+  --app-color4-accent          : rgba(var(--sizzle-4), 1);
+  --app-color4-accent-text     : white;
+
+  --app-color5-accent          : rgba(var(--sizzle-5), 1);
+  --app-color5-accent-text     : white;
+
+  --app-color6-accent          : rgba(var(--sizzle-6), 1);
+  --app-color6-accent-text     : white;
+
+  --app-color7-accent          : rgba(var(--sizzle-7), 1);
+  --app-color7-accent-text     : white;
+
+  --app-color8-accent          : rgba(var(--sizzle-8), 1);
+  --app-color8-accent-text     : white;
+
+  --product-icon               : #{$darker};
+  --product-icon-active        : #{$darkest};
+}
diff --git a/pages/c/_cluster/apps/charts/index.vue b/pages/c/_cluster/apps/charts/index.vue
new file mode 100644
index 0000000000..bd49597565
--- /dev/null
+++ b/pages/c/_cluster/apps/charts/index.vue
@@ -0,0 +1,661 @@
+<script>
+import AsyncButton from '@/components/AsyncButton';
+import Loading from '@/components/Loading';
+import Banner from '@/components/Banner';
+import Carousel from '@/components/Carousel';
+import ButtonGroup from '@/components/ButtonGroup';
+import SelectIconGrid from '@/components/SelectIconGrid';
+import TypeDescription from '@/components/TypeDescription';
+import {
+  REPO_TYPE, REPO, CHART, VERSION, SEARCH_QUERY, _FLAGGED, CATEGORY, DEPRECATED, HIDDEN, OPERATING_SYSTEM
+} from '@/config/query-params';
+import { lcFirst } from '@/utils/string';
+import { sortBy } from '@/utils/sort';
+import { mapGetters } from 'vuex';
+import Checkbox from '@/components/form/Checkbox';
+import Select from '@/components/form/Select';
+import { mapPref, HIDE_REPOS, SHOW_PRE_RELEASE, SHOW_CHART_MODE } from '@/store/prefs';
+import { removeObject, addObject, findBy } from '@/utils/array';
+import { compatibleVersionsFor, filterAndArrangeCharts } from '@/store/catalog';
+import { CATALOG } from '@/config/labels-annotations';
+
+export default {
+  components: {
+    AsyncButton,
+    Banner,
+    Carousel,
+    ButtonGroup,
+    Loading,
+    Checkbox,
+    Select,
+    SelectIconGrid,
+    TypeDescription
+  },
+
+  async fetch() {
+    await this.$store.dispatch('catalog/load');
+
+    const query = this.$route.query;
+
+    this.searchQuery = query[SEARCH_QUERY] || '';
+    this.showDeprecated = query[DEPRECATED] === _FLAGGED;
+    this.showHidden = query[HIDDEN] === _FLAGGED;
+    this.category = query[CATEGORY] || '';
+    this.allRepos = this.areAllEnabled();
+  },
+
+  data() {
+    return {
+      allRepos:             null,
+      category:             null,
+      operatingSystem:      null,
+      searchQuery:          null,
+      showDeprecated:       null,
+      showHidden:           null,
+      chartMode:            this.$store.getters['prefs/get'](SHOW_CHART_MODE),
+      chartOptions:    [
+        {
+          label:       'Browse',
+          value:       'browse',
+        },
+        {
+          label: 'Featured',
+          value: 'featured'
+        }
+      ]
+    };
+  },
+
+  computed: {
+
+    ...mapGetters(['currentCluster']),
+    ...mapGetters({ allCharts: 'catalog/charts', loadingErrors: 'catalog/errors' }),
+
+    hideRepos: mapPref(HIDE_REPOS),
+
+    viewOptions() {
+      const out = [];
+
+      if ( this.hasDetail ) {
+        out.push({
+          labelKey: 'resourceDetail.masthead.detail',
+          value:    'detail',
+        });
+      }
+
+      if ( this.hasEdit ) {
+        out.push({
+          labelKey: 'resourceDetail.masthead.config',
+          value:    'config',
+        });
+      }
+
+      if ( !out.length ) {
+        // If there's only YAML, return nothing and the button group will be hidden entirely
+        return null;
+      }
+
+      out.push({
+        labelKey: 'resourceDetail.masthead.yaml',
+        value:    'yaml',
+      });
+
+      return out;
+    },
+
+    repoOptions() {
+      let nextColor = 0;
+      // Colors 3 and 4 match `rancher` and `partner` colors, so just avoid them
+      const colors = [1, 2, 5, 6, 7, 8];
+
+      let out = this.$store.getters['catalog/repos'].map((r) => {
+        return {
+          _key:    r._key,
+          label:   r.nameDisplay,
+          color:   r.color,
+          weight:  ( r.isRancher ? 1 : ( r.isPartner ? 2 : 3 ) ),
+          enabled: !this.hideRepos.includes(r._key),
+        };
+      });
+
+      out = sortBy(out, ['weight', 'label']);
+
+      for ( const entry of out ) {
+        if ( !entry.color ) {
+          entry.color = `color${ colors[nextColor] }`;
+          nextColor++;
+          if ( nextColor >= colors.length ) {
+            nextColor = 0;
+          }
+        }
+      }
+
+      return out;
+    },
+
+    repoOptionsForDropdown() {
+      return [{
+        label: this.t('catalog.repo.all'), all: true, enabled: this.areAllEnabled()
+      }, ...this.repoOptions];
+    },
+
+    flattenedRepoNames() {
+      const allChecked = this.repoOptionsForDropdown.find(repo => repo.all && repo.enabled);
+
+      if (allChecked) {
+        return allChecked.label;
+      }
+
+      // None checked
+      if (!this.repoOptionsForDropdown.find(repo => repo.enabled)) {
+        return this.t('generic.none');
+      }
+
+      const shownRepos = this.repoOptions.filter(repo => !this.hideRepos.includes(repo._key));
+      const reducedRepos = shownRepos.reduce((acc, c, i) => {
+        acc += c.label;
+        const length = shownRepos.length;
+
+        if (i < length - 1) {
+          acc += ', ';
+        }
+
+        return acc;
+      }, '');
+
+      return reducedRepos;
+    },
+
+    enabledCharts() {
+      return (this.allCharts || []).filter((c) => {
+        if ( c.deprecated && !this.showDeprecated ) {
+          return false;
+        }
+
+        if ( c.hidden && !this.showHidden ) {
+          return false;
+        }
+
+        if ( this.hideRepos.includes(c.repoKey) ) {
+          return false;
+        }
+
+        return true;
+      });
+    },
+
+    filteredCharts() {
+      const enabledCharts = (this.enabledCharts || []);
+
+      return filterAndArrangeCharts(enabledCharts, {
+        category:         this.category,
+        searchQuery:      this.searchQuery,
+        showDeprecated:   this.showDeprecated,
+        showHidden:       this.showHidden,
+        hideRepos:        this.hideRepos,
+        hideTypes:        [CATALOG._CLUSTER_TPL],
+        showPrerelease:   this.$store.getters['prefs/get'](SHOW_PRE_RELEASE),
+      });
+    },
+
+    getFeaturedCharts() {
+      const newArray = (this.filteredCharts || []);
+
+      return newArray.slice(0, 5);
+    },
+
+    categories() {
+      const map = {};
+
+      for ( const chart of this.enabledCharts ) {
+        for ( const c of chart.categories ) {
+          if ( !map[c] ) {
+            const labelKey = `catalog.charts.categories.${ lcFirst(c) }`;
+
+            map[c] = {
+              label: this.$store.getters['i18n/withFallback'](labelKey, null, c),
+              value: c,
+              count: 0
+            };
+          }
+
+          map[c].count++;
+        }
+      }
+
+      const out = Object.values(map);
+
+      out.unshift({
+        label: this.t('catalog.charts.categories.all'),
+        value: '',
+        count: this.enabledCharts.length
+      });
+
+      return out;
+    },
+
+    showCarousel() {
+      return this.chartMode === 'featured' && this.getFeaturedCharts.length;
+    }
+  },
+
+  watch: {
+    searchQuery(q) {
+      this.$router.applyQuery({ [SEARCH_QUERY]: q || undefined });
+    },
+
+    category(cat) {
+      this.$router.applyQuery({ [CATEGORY]: cat || undefined });
+    },
+
+    operatingSystem(os) {
+      this.$router.applyQuery({ [OPERATING_SYSTEM]: os || undefined });
+    },
+  },
+
+  mounted() {
+    if ( typeof window !== 'undefined' ) {
+      window.c = this;
+    }
+  },
+
+  methods: {
+    colorForChart(chart) {
+      const repos = this.repoOptions;
+      const repo = findBy(repos, '_key', chart.repoKey);
+
+      if ( repo ) {
+        return repo.color;
+      }
+
+      return null;
+    },
+
+    toggleAll(on) {
+      for ( const r of this.repoOptions ) {
+        this.toggleRepo(r, on, false);
+      }
+
+      this.$nextTick(() => {
+        this.allRepos = this.areAllEnabled();
+      });
+    },
+
+    areAllEnabled() {
+      const all = this.$store.getters['catalog/repos'];
+
+      for ( const r of all ) {
+        if ( this.hideRepos.includes(r._key) ) {
+          return false;
+        }
+      }
+
+      return true;
+    },
+
+    toggleRepo(repo, on, updateAll = true) {
+      const hidden = this.hideRepos;
+
+      if ( on ) {
+        removeObject(hidden, repo._key);
+      } else {
+        addObject(hidden, repo._key);
+      }
+
+      this.hideRepos = hidden;
+
+      if ( updateAll ) {
+        this.allRepos = this.areAllEnabled();
+      }
+    },
+
+    selectChart(chart) {
+      let version;
+      const OSs = this.currentCluster.workerOSs;
+      const showPrerelease = this.$store.getters['prefs/get'](SHOW_PRE_RELEASE);
+      const compatibleVersions = compatibleVersionsFor(chart, OSs, showPrerelease);
+      const versions = chart.versions;
+
+      if (compatibleVersions.length > 0) {
+        version = compatibleVersions[0].version;
+      } else {
+        version = versions[0].version;
+      }
+
+      this.$router.push({
+        name:   'c-cluster-apps-charts-chart',
+        params: {
+          cluster:  this.$route.params.cluster,
+          product:  this.$store.getters['productId'],
+        },
+        query: {
+          [REPO_TYPE]: chart.repoType,
+          [REPO]:      chart.repoName,
+          [CHART]:     chart.chartName,
+          [VERSION]:   version,
+        }
+      });
+    },
+
+    focusSearch() {
+      if ( this.$refs.searchQuery ) {
+        this.$refs.searchQuery.focus();
+        this.$refs.searchQuery.select();
+      }
+    },
+
+    async refresh(btnCb) {
+      try {
+        await this.$store.dispatch('catalog/refresh');
+        btnCb(true);
+      } catch (e) {
+        this.$store.dispatch('growl/fromError', e);
+        btnCb(false);
+      }
+    },
+
+  },
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
+    <header>
+      <div class="title">
+        <h1 class="m-0">
+          {{ t('catalog.charts.header') }}
+        </h1>
+      </div>
+      <div class="actions-container">
+        <ButtonGroup
+          v-model="chartMode"
+          :options="chartOptions"
+        />
+      </div>
+    </header>
+    <Carousel
+      v-if="showCarousel"
+      :sliders="getFeaturedCharts"
+      @clicked="(row) => selectChart(row)"
+    />
+
+    <TypeDescription resource="chart" />
+    <div class="left-right-split">
+      <Select
+        :searchable="false"
+        :options="repoOptionsForDropdown"
+        :value="flattenedRepoNames"
+        class="checkbox-select"
+        :close-on-select="false"
+        @option:selecting="$event.all ? toggleAll(!$event.enabled) : toggleRepo($event, !$event.enabled) "
+      >
+        <template #selected-option="selected">
+          {{ selected.label }}
+        </template>
+        <template #option="repo">
+          <Checkbox
+            :value="repo.enabled"
+            :label="repo.label"
+            class="pull-left repo in-select"
+            :class="{ [repo.color]: true}"
+            :color="repo.color"
+          >
+            <template #label>
+              <span>{{ repo.label }}</span><i v-if="!repo.all" class=" pl-5 icon icon-dot icon-sm" :class="{[repo.color]: true}" />
+            </template>
+          </Checkbox>
+        </template>
+      </Select>
+
+      <Select
+        v-model="category"
+        :clearable="false"
+        :searchable="false"
+        :options="categories"
+        placement="bottom"
+        label="label"
+        style="min-width: 200px;"
+        :reduce="opt => opt.value"
+      >
+        <template #option="opt">
+          {{ opt.label }} ({{ opt.count }})
+        </template>
+      </Select>
+
+      <div class="filter-block">
+        <input
+          ref="searchQuery"
+          v-model="searchQuery"
+          type="search"
+          class="input-sm"
+          :placeholder="t('catalog.charts.search')"
+        >
+
+        <button v-shortkey.once="['/']" class="hide" @shortkey="focusSearch()" />
+        <AsyncButton class="refresh-btn" mode="refresh" size="sm" @click="refresh" />
+      </div>
+    </div>
+
+    <Banner v-for="err in loadingErrors" :key="err" color="error" :label="err" />
+
+    <div v-if="allCharts.length">
+      <div v-if="filteredCharts.length === 0" style="width: 100%;">
+        <div class="m-50 text-center">
+          <h1>{{ t('catalog.charts.noCharts') }}</h1>
+        </div>
+      </div>
+      <SelectIconGrid
+        v-else
+        :rows="filteredCharts"
+        name-field="chartNameDisplay"
+        description-field="chartDescription"
+        :color-for="colorForChart"
+        @clicked="(row) => selectChart(row)"
+      />
+    </div>
+    <div v-else class="m-50 text-center">
+      <h1>{{ t('catalog.charts.noCharts') }}</h1>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.left-right-split {
+    padding: 0 0 20px 0;
+    width: 100%;
+    z-index: z-index('fixedTableHeader');
+    background: transparent;
+    display: grid;
+    grid-template-columns: 40% auto auto;
+    align-content: center;
+    grid-column-gap: 10px;
+
+    .filter-block {
+      display: flex;
+    }
+    .refresh-btn {
+      margin-left: 10px;
+    }
+
+    &.with-os-options {
+      grid-template-columns: 40% auto auto auto;
+    }
+
+    @media only screen and (max-width: map-get($breakpoints, '--viewport-12')) {
+      &{
+        grid-template-columns: auto auto !important;
+        grid-template-rows: 40px 40px;
+        grid-row-gap: 20px;
+      }
+    }
+
+    @media only screen and (max-width: map-get($breakpoints, '--viewport-7')) {
+      &{
+        &{
+          grid-template-columns: auto !important;
+          grid-template-rows: 40px 40px 40px !important;
+
+          &.with-os-options {
+            grid-template-rows: 40px 40px 40px 40px !important;
+          }
+        }
+      }
+    }
+  }
+
+.checkbox-select {
+   .vs__search {
+    position: absolute;
+    right: 0
+  }
+
+ .vs__selected-options  {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    display: inline-block;
+    line-height: 2.4rem;
+  }
+
+}
+
+.checkbox-outer-container.in-select {
+  transform: translateX(-5px);
+  padding: 7px 0 6px 13px;
+  width: calc(100% + 10px);
+
+  ::v-deep.checkbox-label {
+    display: flex;
+    align-items: center;
+
+    & i {
+      line-height: inherit;
+    }
+  }
+
+  &:first-child {
+    &:hover {
+      background: var(--input-hover-bg);
+    }
+  }
+
+  &:hover ::v-deep.checkbox-label {
+      color: var(--body-text);
+    }
+
+  &.rancher {
+      &:hover {
+      background: var(--app-rancher-accent);
+    }
+    &:hover ::v-deep.checkbox-label {
+      color: var(--app-rancher-accent-text);
+    }
+    & i {
+      color: var(--app-rancher-accent)
+    }
+  }
+
+  &.partner {
+      &:hover {
+      background: var(--app-partner-accent);
+    }
+    &:hover ::v-deep.checkbox-label {
+      color: var(--app-partner-accent-text);
+    }
+    & i {
+      color: var(--app-partner-accent)
+    }
+  }
+
+  &.color1 {
+    &:hover {
+      background: var(--app-color1-accent);
+    }
+    &:hover ::v-deep.checkbox-label {
+      color: var(--app-color1-accent-text);
+    }
+    & i {
+      color: var(--app-color1-accent)
+    }
+  }
+  &.color2 {
+    &:hover {
+      background: var(--app-color2-accent);
+    }
+    &:hover ::v-deep.checkbox-label {
+      color: var(--app-color2-accent-text);
+    }
+        & i {
+      color: var(--app-color2-accent)
+    }
+  }
+  &.color3 {
+    &:hover {
+      background: var(--app-color3-accent);
+    }
+    &:hover ::v-deep.checkbox-label {
+      color: var(--app-color3-accent-text);
+    }
+    & i {
+      color: var(--app-color3-accent)
+    }
+  }
+  &.color4 {
+    &:hover {
+      background: var(--app-color4-accent);
+    }
+    &:hover ::v-deep.checkbox-label {
+      color: var(--app-color4-accent-text);
+    }
+    & i {
+      color: var(--app-color4-accent)
+    }
+  }
+  &.color5 {
+    &:hover {
+      background: var(--app-color5-accent);
+    }
+    &:hover ::v-deep.checkbox-label {
+      color: var(--app-color5-accent-text);
+    }
+    & i {
+      color: var(--app-color5-accent)
+    }
+  }
+  &.color6 {
+    &:hover {
+      background: var(--app-color6-accent);
+    }
+    &:hover ::v-deep.checkbox-label {
+      color: var(--app-color6-accent-text);
+    }
+    & i {
+      color: var(--app-color6-accent)
+    }
+  }
+  &.color7 {
+    &:hover {
+      background: var(--app-color7-accent);
+    }
+    &:hover ::v-deep.checkbox-label {
+      color: var(--app-color7-accent-text);
+    }
+    & i {
+      color: var(--app-color7-accent)
+    }
+  }
+  &.color8 {
+    &:hover {
+      background: var(--app-color8-accent);
+    }
+    &:hover ::v-deep.checkbox-label {
+      color: var(--app-color8-accent-text);
+    }
+    & i {
+      color: var(--app-color8-accent)
+    }
+  }
+}
+
+</style>
diff --git a/pages/c/_cluster/apps/charts/install.vue b/pages/c/_cluster/apps/charts/install.vue
new file mode 100644
index 0000000000..5a854fd0a8
--- /dev/null
+++ b/pages/c/_cluster/apps/charts/install.vue
@@ -0,0 +1,1633 @@
+<script>
+import jsyaml from 'js-yaml';
+import merge from 'lodash/merge';
+import isEqual from 'lodash/isEqual';
+import { mapPref, DIFF } from '@/store/prefs';
+import { mapFeature, MULTI_CLUSTER, LEGACY } from '@/store/features';
+import { mapGetters } from 'vuex';
+
+import Banner from '@/components/Banner';
+import ButtonGroup from '@/components/ButtonGroup';
+import ChartReadme from '@/components/ChartReadme';
+import Checkbox from '@/components/form/Checkbox';
+import LabeledSelect from '@/components/form/LabeledSelect';
+import LabeledInput from '@/components/form/LabeledInput';
+import LazyImage from '@/components/LazyImage';
+import Loading from '@/components/Loading';
+import NameNsDescription from '@/components/form/NameNsDescription';
+import ResourceCancelModal from '@/components/ResourceCancelModal';
+import Questions from '@/components/Questions';
+import Tabbed from '@/components/Tabbed';
+import UnitInput from '@/components/form/UnitInput';
+import YamlEditor, { EDITOR_MODES } from '@/components/YamlEditor';
+import Wizard from '@/components/Wizard';
+import TypeDescription from '@/components/TypeDescription';
+import ChartMixin from '@/mixins/chart';
+import ChildHook, { BEFORE_SAVE_HOOKS, AFTER_SAVE_HOOKS } from '@/mixins/child-hook';
+import { CATALOG, MANAGEMENT } from '@/config/types';
+import {
+  CHART, FROM_CLUSTER, FROM_TOOLS, HIDE_SIDE_NAV, NAMESPACE, REPO, REPO_TYPE, VERSION, _FLAGGED
+} from '@/config/query-params';
+import { CATALOG as CATALOG_ANNOTATIONS, PROJECT } from '@/config/labels-annotations';
+
+import { exceptionToErrorsArray } from '@/utils/error';
+import { clone, diff, get, set } from '@/utils/object';
+import { findBy, insertAt } from '@/utils/array';
+import Vue from 'vue';
+import { saferDump } from '@/utils/create-yaml';
+import { DEFAULT_WORKSPACE } from '@/models/provisioning.cattle.io.cluster';
+import { LINUX } from '@/store/catalog';
+
+const VALUES_STATE = {
+  FORM: 'FORM',
+  YAML: 'YAML',
+  DIFF: 'DIFF'
+};
+
+function isPlainLayout(query) {
+  return Object.keys(query).includes(HIDE_SIDE_NAV);
+}
+
+export default {
+  name: 'Install',
+
+  layout(context) {
+    return isPlainLayout(context.query) ? 'plain' : '';
+  },
+
+  components: {
+    Banner,
+    ButtonGroup,
+    ChartReadme,
+    Checkbox,
+    LabeledInput,
+    LabeledSelect,
+    LazyImage,
+    Loading,
+    NameNsDescription,
+    ResourceCancelModal,
+    Questions,
+    Tabbed,
+    UnitInput,
+    YamlEditor,
+    Wizard,
+    TypeDescription
+  },
+
+  mixins: [
+    ChildHook,
+    ChartMixin
+  ],
+
+  async fetch() {
+    await this.fetchChart();
+
+    this.errors = [];
+
+    this.defaultRegistrySetting = await this.$store.dispatch('management/find', {
+      type: MANAGEMENT.SETTING,
+      id:   'system-default-registry'
+    });
+
+    this.serverUrlSetting = await this.$store.dispatch('management/find', {
+      type: MANAGEMENT.SETTING,
+      id:   'server-url'
+    });
+
+    if ( this.existing ) {
+      this.forceNamespace = this.existing.metadata.namespace;
+      this.nameDisabled = true;
+    } else if (this.$route.query[FROM_CLUSTER] === _FLAGGED) {
+      this.forceNamespace = DEFAULT_WORKSPACE;
+    } else if ( this.chart?.targetNamespace ) {
+      this.forceNamespace = this.chart.targetNamespace;
+    } else if ( this.query.appNamespace ) {
+      this.forceNamespace = this.query.appNamespace;
+    } else {
+      this.forceNamespace = null;
+    }
+
+    this.legacyApp = this.existing ? await this.existing.deployedAsLegacy() : false;
+    this.mcapp = this.existing ? await this.existing.deployedAsMultiCluster() : false;
+
+    this.value = await this.$store.dispatch('cluster/create', {
+      type:     'chartInstallAction',
+      metadata: {
+        namespace: this.forceNamespace || this.$store.getters['defaultNamespace'],
+        name:      this.existing?.spec?.name || this.query.appName || '',
+      }
+    });
+
+    if ( !this.existing) {
+      if ( this.chart?.targetName ) {
+        this.value.metadata.name = this.chart.targetName;
+        this.nameDisabled = true;
+      } else if ( this.query.appName ) {
+        this.value.metadata.name = this.query.appName;
+      } else {
+        this.nameDisabled = false;
+      }
+
+      if ( this.query.description ) {
+        this.customCmdOpts.description = this.query.description;
+      }
+    }
+
+    if (this.forceNamespace && !this.existing) {
+      let ns;
+
+      try {
+        ns = await this.$store.dispatch('cluster/find', { type: NAMESPACE, id: this.forceNamespace });
+        const project = ns.metadata.annotations?.[PROJECT];
+
+        if (project) {
+          this.project = project.replace(':', '/');
+        }
+      } catch {}
+    }
+
+    if ( !this.chart || !this.query.versionName) {
+      return;
+    }
+
+    if ( this.version && process.client ) {
+      await this.loadValuesComponent();
+    }
+
+    await this.loadChartSteps();
+
+    if ( !this.loadedVersion || this.loadedVersion !== this.version.key ) {
+      let userValues;
+
+      if ( this.loadedVersion ) {
+        // If changing charts once the page is loaded, diff from the chart you were
+        // previously on to get the actual customization, then apply onto the new chart values.
+
+        if ( this.showingYaml ) {
+          this.applyYamlToValues();
+        }
+
+        userValues = diff(this.loadedVersionValues, this.chartValues);
+      } else if ( this.existing ) {
+        // For an existing app, use the values from the previous install
+        userValues = clone(this.existing.spec?.values || {});
+        // For an existing app, use the values from the previous install
+      } else {
+        // For an new app, start empty
+        userValues = {};
+      }
+
+      this.removeGlobalValuesFrom(userValues);
+      this.chartValues = merge(merge({}, this.versionInfo?.values || {}), userValues);
+      this.valuesYaml = saferDump(this.chartValues);
+
+      // For YAML diff
+      if ( !this.loadedVersion ) {
+        this.originalYamlValues = this.valuesYaml;
+      }
+
+      this.loadedVersionValues = this.versionInfo?.values || {};
+      this.loadedVersion = this.version?.key;
+    }
+
+    this.updateStepOneReady();
+
+    this.preFormYamlOption = this.valuesComponent || this.hasQuestions ? VALUES_STATE.FORM : VALUES_STATE.YAML;
+
+    // Look for annotation to say this app is a legacy migrated app (we look in either place for now)
+    this.migratedApp = (this.existing?.spec?.chart?.metadata?.annotations?.[CATALOG_ANNOTATIONS.MIGRATED] === 'true');
+  },
+
+  data() {
+    const defaultCmdOpts = {
+      cleanupOnFail:       false,
+      crds:                true,
+      hooks:               true,
+      force:               false,
+      resetValues:         false,
+      openApi:             true,
+      wait:                true,
+      timeout:       600,
+      historyMax:    5,
+    };
+
+    return {
+      defaultRegistrySetting: null,
+      serverUrlSetting:       null,
+      chartValues:            null,
+      originalYamlValues:     null,
+      previousYamlValues:     null,
+      errors:                 null,
+      existing:               null,
+      forceNamespace:         null,
+      loadedVersion:          null,
+      loadedVersionValues:    null,
+      legacyApp:              null,
+      mcapp:                  null,
+      mode:                   null,
+      value:                  null,
+      valuesComponent:        null,
+      valuesYaml:             '',
+      project:                null,
+      migratedApp:            false,
+
+      defaultCmdOpts,
+      customCmdOpts: { ...defaultCmdOpts },
+
+      nameDisabled: false,
+
+      preFormYamlOption:   VALUES_STATE.YAML,
+      formYamlOption:      VALUES_STATE.YAML,
+      showDiff:            false,
+      showValuesComponent: true,
+      showQuestions:       true,
+      showSlideIn:         false,
+      shownReadmeWindows:  [],
+      componentHasTabs:    false,
+      showCommandStep:     false,
+      isNamespaceNew:      false,
+
+      stepBasic: {
+        name:           'basics',
+        label:          this.t('catalog.install.steps.basics.label'),
+        subtext:        this.t('catalog.install.steps.basics.subtext'),
+        descriptionKey: 'catalog.install.steps.basics.description',
+        ready:          true,
+        weight:         30
+      },
+      stepClusterTplVersion: {
+        name:           'clusterTplVersion',
+        label:          this.t('catalog.install.steps.clusterTplVersion.label'),
+        subtext:        this.t('catalog.install.steps.clusterTplVersion.subtext'),
+        descriptionKey: 'catalog.install.steps.helmValues.description',
+        ready:          true,
+        weight:         30
+      },
+      stepValues: {
+        name:           'helmValues',
+        label:          this.t('catalog.install.steps.helmValues.label'),
+        subtext:        this.t('catalog.install.steps.helmValues.subtext'),
+        descriptionKey: 'catalog.install.steps.helmValues.description',
+        ready:          true,
+        weight:         20
+      },
+      stepCommands: {
+        name:           'helmCli',
+        label:          this.t('catalog.install.steps.helmCli.label'),
+        subtext:        this.t('catalog.install.steps.helmCli.subtext'),
+        descriptionKey: 'catalog.install.steps.helmCli.description',
+        ready:          true,
+        weight:         10
+      },
+
+      customSteps: [
+
+      ],
+
+      isPlainLayout: isPlainLayout(this.$route.query),
+
+      legacyDefs: {
+        legacy: this.t('catalog.install.error.legacy.category.legacy'),
+        mcm:    this.t('catalog.install.error.legacy.category.mcm')
+      }
+    };
+  },
+
+  computed: {
+    ...mapGetters({ inStore: 'catalog/inStore', features: 'features/get' }),
+    mcm: mapFeature(MULTI_CLUSTER),
+
+    namespaceIsNew() {
+      const all = this.$store.getters['cluster/all'](NAMESPACE);
+      const want = this.value?.metadata?.namespace;
+
+      if ( !want ) {
+        return false;
+      }
+
+      return !findBy(all, 'id', want);
+    },
+
+    showProject() {
+      return this.isRancher && !this.existing && this.forceNamespace;
+    },
+
+    projectOpts() {
+      const cluster = this.currentCluster;
+      const projects = this.$store.getters['management/all'](MANAGEMENT.PROJECT);
+
+      const out = projects.filter(x => x.spec.clusterName === cluster.id).map((project) => {
+        return {
+          id:    project.id,
+          label: project.nameDisplay,
+          value: project.id
+        };
+      });
+
+      out.unshift({
+        id:    'none',
+        label: `(${ this.t('generic.none') })`,
+        value: '',
+      });
+
+      return out;
+    },
+
+    charts() {
+      const current = this.existing?.matchingChart(true);
+
+      const out = this.$store.getters['catalog/charts'].filter((x) => {
+        if ( x.key === current?.key || x.chartName === current?.chartName ) {
+          return true;
+        }
+
+        if ( x.hidden && !this.showHidden ) {
+          return false;
+        }
+
+        if ( x.deprecated && !this.showDeprecated ) {
+          return false;
+        }
+
+        return true;
+      });
+
+      let last = '';
+
+      for ( let i = 0 ; i < out.length ; i++ ) {
+        if ( out[i].repoName !== last ) {
+          last = out[i].repoName;
+          insertAt(out, i, {
+            kind:     'label',
+            label:    out[i].repoNameDisplay,
+            disabled: true
+          });
+          i++;
+        }
+      }
+
+      return out;
+    },
+
+    showSelectVersionOrChart() {
+      // Allow the user to choose a version if the app exists OR they've come from tools
+      return this.existing || (FROM_TOOLS in this.$route.query);
+    },
+
+    showNameEditor() {
+      return !this.nameDisabled || !this.forceNamespace;
+    },
+
+    showVersions() {
+      return this.chart?.versions.length > 1;
+    },
+
+    targetNamespace() {
+      if ( this.forceNamespace ) {
+        return this.forceNamespace;
+      } else if ( this.value?.metadata.namespace ) {
+        return this.value.metadata.namespace;
+      }
+
+      return 'default';
+    },
+
+    editorMode() {
+      if ( this.showDiff ) {
+        return EDITOR_MODES.DIFF_CODE;
+      }
+
+      return EDITOR_MODES.EDIT_CODE;
+    },
+
+    showingYaml() {
+      return this.formYamlOption === VALUES_STATE.YAML || ( !this.valuesComponent && !this.hasQuestions );
+    },
+
+    formYamlOptions() {
+      const options = [];
+
+      if (this.valuesComponent || this.hasQuestions) {
+        options.push({
+          labelKey: 'catalog.install.section.chartOptions',
+          value:    VALUES_STATE.FORM,
+        });
+      }
+      options.push({
+        labelKey: 'catalog.install.section.valuesYaml',
+        value:    VALUES_STATE.YAML,
+      }, {
+        labelKey: 'catalog.install.section.diff',
+        value:    VALUES_STATE.DIFF,
+        // === quite obviously shouldn't work, but has been and still does. When the magic breaks address with heavier stringify/jsyaml.dump
+        disabled: this.formYamlOption === VALUES_STATE.FORM ? this.originalYamlValues === jsyaml.dump(this.chartValues || {}) : this.originalYamlValues === this.valuesYaml,
+      });
+
+      return options;
+    },
+
+    yamlDiffModeOptions() {
+      return [{
+        labelKey: 'resourceYaml.buttons.unified',
+        value:    'unified',
+      }, {
+        labelKey: 'resourceYaml.buttons.split',
+        value:    'split',
+      }];
+    },
+
+    stepperName() {
+      return this.existing?.nameDisplay || this.chart?.chartNameDisplay;
+    },
+
+    stepperSubtext() {
+      return this.existing && this.currentVersion !== this.targetVersion ? `${ this.currentVersion } > ${ this.targetVersion }` : this.targetVersion;
+    },
+
+    readmeWindowName() {
+      // Version can change, so allow multiple WM tabs for different versions
+      return `${ this.stepperName }-${ this.version?.version }`;
+    },
+
+    showingReadmeWindow() {
+      return !!this.$store.getters['wm/byId'](this.readmeWindowName);
+    },
+
+    diffMode: mapPref(DIFF),
+
+    step1Description() {
+      const descriptionKey = this.steps.find(s => s.name === 'basics').descriptionKey;
+
+      return this.$store.getters['i18n/withFallback'](descriptionKey, { action: this.action, existing: !!this.existing }, '');
+    },
+
+    step2Description() {
+      const descriptionKey = this.steps.find(s => s.name === 'helmValues').descriptionKey;
+
+      return this.$store.getters['i18n/withFallback'](descriptionKey, { action: this.action, existing: !!this.existing }, '');
+    },
+
+    step3Description() {
+      const descriptionKey = this.steps.find(s => s.name === 'helmCli').descriptionKey;
+
+      return this.$store.getters['i18n/withFallback'](descriptionKey, { action: this.action, existing: !!this.existing }, '');
+    },
+
+    steps() {
+      const steps = [];
+
+      const type = this.version?.annotations?.[CATALOG_ANNOTATIONS.TYPE];
+
+      if ( type === CATALOG_ANNOTATIONS._CLUSTER_TPL ) {
+        if (this.filteredVersions?.length > 1) {
+          steps.push(this.stepClusterTplVersion);
+        }
+        steps.push({
+          ...this.stepValues,
+          label:          this.t('catalog.install.steps.clusterTplValues.label'),
+          subtext:        this.t('catalog.install.steps.clusterTplValues.subtext'),
+          descriptionKey: 'catalog.install.steps.clusterTplValues.description',
+        });
+      } else {
+        steps.push(
+          this.stepBasic,
+          this.stepValues,
+          ...this.customSteps
+        );
+      }
+
+      if (this.showCommandStep) {
+        steps.push(this.stepCommands);
+      }
+
+      return steps.sort((a, b) => (b.weight || 0) - (a.weight || 0));
+    },
+
+    cmdOptions() {
+      return this.showCommandStep ? this.customCmdOpts : this.defaultCmdOpts;
+    },
+
+    namespaceNewAllowed() {
+      return !this.existing && !this.forceNamespace;
+    },
+
+    legacyEnabled() {
+      return this.features(LEGACY);
+    },
+
+    legacyFeatureRoute() {
+      return {
+        name:   'c-cluster-product-resource',
+        params: { product: 'settings', resource: 'management.cattle.io.feature' }
+      };
+    },
+
+    legacyAppRoute() {
+      return { name: 'c-cluster-legacy-project' };
+    },
+
+    mcmRoute() {
+      return { name: 'c-cluster-mcapps' };
+    },
+
+    windowsIncompatible() {
+      if (this.chart?.windowsIncompatible) {
+        return this.t('catalog.charts.windowsIncompatible');
+      }
+      if (this.versionInfo) {
+        const incompatibleVersion = !(this.versionInfo?.chart?.annotations?.[CATALOG_ANNOTATIONS.PERMITTED_OS] || LINUX).includes('windows');
+
+        if (incompatibleVersion && !this.chart.windowsIncompatible) {
+          return this.t('catalog.charts.versionWindowsIncompatible');
+        }
+      }
+
+      return null;
+    }
+  },
+
+  watch: {
+    '$route.query'(neu, old) {
+      if ( !isEqual(neu, old) ) {
+        this.$fetch();
+        this.showSlideIn = false;
+      }
+    },
+
+    'value.metadata.namespace'(neu, old) {
+      if (neu) {
+        const ns = this.$store.getters['cluster/byId'](NAMESPACE, this.value.metadata.namespace);
+
+        const project = ns?.metadata.annotations?.[PROJECT];
+
+        if (project) {
+          this.project = project.replace(':', '/');
+        }
+      }
+    },
+
+    preFormYamlOption(neu, old) {
+      if (neu === VALUES_STATE.FORM && this.valuesYaml !== this.previousYamlValues && !!this.$refs.cancelModal) {
+        this.$refs.cancelModal.show();
+      } else {
+        this.formYamlOption = neu;
+      }
+    },
+
+    formYamlOption(neu, old) {
+      switch (neu) {
+      case VALUES_STATE.FORM:
+        // Return to form, reset everything back to starting point
+        this.valuesYaml = this.previousYamlValues;
+
+        this.showValuesComponent = true;
+        this.showQuestions = true;
+
+        this.showDiff = false;
+        break;
+      case VALUES_STATE.YAML:
+        // Show the YAML preview
+        if (old === VALUES_STATE.FORM) {
+          this.valuesYaml = jsyaml.dump(this.chartValues || {});
+          this.previousYamlValues = this.valuesYaml;
+        }
+
+        this.showValuesComponent = false;
+        this.showQuestions = false;
+
+        this.showDiff = false;
+        break;
+      case VALUES_STATE.DIFF:
+        // Show the YAML diff
+        if (old === VALUES_STATE.FORM) {
+          this.valuesYaml = jsyaml.dump(this.chartValues || {});
+          this.previousYamlValues = this.valuesYaml;
+        }
+
+        this.showValuesComponent = false;
+        this.showQuestions = false;
+
+        this.updateValue(this.valuesYaml);
+        this.showDiff = true;
+        break;
+      }
+    },
+
+    requires() {
+      this.updateStepOneReady();
+    },
+
+    warnings() {
+      this.updateStepOneReady();
+    },
+
+  },
+
+  async mounted() {
+    await this.loadValuesComponent();
+
+    await this.loadChartSteps();
+
+    window.scrollTop = 0;
+
+    // For easy access debugging...
+    if ( typeof window !== 'undefined' ) {
+      window.v = this.value;
+      window.c = this;
+    }
+
+    this.preFormYamlOption = this.valuesComponent || this.hasQuestions ? VALUES_STATE.FORM : VALUES_STATE.YAML;
+  },
+
+  beforeDestroy() {
+    this.shownReadmeWindows.forEach(name => this.$store.dispatch('wm/close', name, { root: true }));
+  },
+
+  methods: {
+    updateValue(value) {
+      if (this.$refs.yaml) {
+        this.$refs.yaml.updateValue(value);
+      }
+    },
+
+    async loadValuesComponent() {
+      // TODO: Remove RELEASE_NAME. This is only in until the component annotation is added to the OPA Gatekeeper chart
+      const component = this.version?.annotations?.[CATALOG_ANNOTATIONS.COMPONENT] || this.version?.annotations?.[CATALOG_ANNOTATIONS.RELEASE_NAME];
+
+      if ( component ) {
+        if ( this.$store.getters['catalog/haveComponent'](component) ) {
+          this.valuesComponent = this.$store.getters['catalog/importComponent'](component);
+          const loaded = await this.valuesComponent();
+
+          this.showValuesComponent = true;
+          this.componentHasTabs = loaded?.default?.hasTabs || false;
+        } else {
+          this.valuesComponent = null;
+          this.componentHasTabs = false;
+          this.showValuesComponent = false;
+        }
+      } else {
+        this.valuesComponent = null;
+        this.componentHasTabs = false;
+        this.showValuesComponent = false;
+      }
+    },
+
+    async loadChartSteps() {
+      const component = this.version?.annotations?.[CATALOG_ANNOTATIONS.COMPONENT] || this.version?.annotations?.[CATALOG_ANNOTATIONS.RELEASE_NAME];
+
+      if ( component ) {
+        const steps = await this.$store.getters['catalog/chartSteps'](component);
+
+        this.customSteps = await Promise.all( steps.map(cs => this.loadChartStep(cs)));
+      }
+    },
+
+    async loadChartStep(customStep) {
+      const loaded = await customStep.component();
+      const withFallBack = this.$store.getters['i18n/withFallback'];
+
+      return {
+        name:        customStep.name,
+        label:       withFallBack(loaded?.default?.label, null, customStep.name),
+        subtext:     withFallBack(loaded?.default?.subtext, null, ''),
+        weight:      loaded?.default?.weight,
+        ready:       false,
+        hidden:      true,
+        loading:    true,
+        component: customStep.component,
+      };
+    },
+
+    selectChart(chart) {
+      if ( !chart ) {
+        return;
+      }
+
+      this.$router.applyQuery({
+        [REPO]:      chart.repoName,
+        [REPO_TYPE]: chart.repoType,
+        [CHART]:     chart.chartName,
+        [VERSION]:   chart.versions[0].version
+      });
+    },
+
+    cancel() {
+      if ( this.existing ) {
+        this.done();
+      } else if (this.$route.query[FROM_TOOLS] === _FLAGGED) {
+        this.$router.replace(this.clusterToolsLocation());
+      } else if (this.$route.query[FROM_CLUSTER] === _FLAGGED) {
+        this.$router.replace(this.clustersLocation());
+      } else {
+        this.$router.replace(this.chartLocation(false));
+      }
+    },
+
+    done() {
+      if ( this.$route.query[FROM_TOOLS] === _FLAGGED ) {
+        this.$router.replace(this.clusterToolsLocation());
+      } else if (this.$route.query[FROM_CLUSTER] === _FLAGGED) {
+        this.$router.replace(this.clustersLocation());
+      } else {
+        // If the create app process fails helm validation then we still get here... so until this is fixed new apps will be taken to the
+        // generic apps list (existing apps will be taken to their detail page)
+        this.$router.replace(this.appLocation());
+      }
+    },
+
+    async finish(btnCb) {
+      try {
+        const isUpgrade = !!this.existing;
+
+        this.errors = [];
+
+        await this.applyHooks(BEFORE_SAVE_HOOKS);
+
+        const { errors, input } = this.actionInput(isUpgrade);
+
+        if ( errors?.length ) {
+          this.errors = errors;
+          btnCb(false);
+
+          return;
+        }
+
+        const res = await this.repo.doAction((isUpgrade ? 'upgrade' : 'install'), input);
+        const operationId = `${ res.operationNamespace }/${ res.operationName }`;
+
+        // Non-admins without a cluster won't be able to fetch operations immediately
+        await this.repo.waitForOperation(operationId);
+
+        // Dynamically use store decided when loading catalog (covers standard user case when there's not cluster)
+        this.operation = await this.$store.dispatch(`${ this.inStore }/find`, {
+          type: CATALOG.OPERATION,
+          id:   operationId
+        });
+
+        try {
+          await this.operation.waitForLink('logs');
+          this.operation.openLogs();
+        } catch (e) {
+          // The wait times out eventually, move on...
+        }
+
+        await this.applyHooks(AFTER_SAVE_HOOKS);
+
+        btnCb(true);
+        this.done();
+      } catch (err) {
+        this.errors = exceptionToErrorsArray(err);
+        btnCb(false);
+      }
+    },
+
+    addGlobalValuesTo(values) {
+      let global = values.global;
+
+      if ( !global ) {
+        global = {};
+        set(values, 'global', global);
+      }
+
+      let cattle = global.cattle;
+
+      if ( !cattle ) {
+        cattle = {};
+        set(values.global, 'cattle', cattle);
+      }
+
+      const cluster = this.currentCluster;
+      const defaultRegistry = this.defaultRegistrySetting?.value || '';
+      const serverUrl = this.serverUrlSetting?.value || '';
+      const isWindows = cluster?.providerOs === 'windows';
+      const pathPrefix = cluster?.spec?.rancherKubernetesEngineConfig?.prefixPath || '';
+      const windowsPathPrefix = cluster?.spec?.rancherKubernetesEngineConfig?.winPrefixPath || '';
+
+      setIfNotSet(cattle, 'clusterId', cluster?.id);
+      setIfNotSet(cattle, 'clusterName', cluster?.nameDisplay);
+      setIfNotSet(cattle, 'systemDefaultRegistry', defaultRegistry);
+      setIfNotSet(global, 'systemDefaultRegistry', defaultRegistry);
+      setIfNotSet(cattle, 'url', serverUrl);
+      setIfNotSet(cattle, 'rkePathPrefix', pathPrefix);
+      setIfNotSet(cattle, 'rkeWindowsPathPrefix', windowsPathPrefix);
+
+      if ( isWindows ) {
+        setIfNotSet(cattle, 'windows.enabled', true);
+      }
+
+      return values;
+
+      function setIfNotSet(obj, key, val) {
+        if ( typeof get(obj, key) === 'undefined' ) {
+          set(obj, key, val);
+        }
+      }
+    },
+
+    removeGlobalValuesFrom(values) {
+      if ( !values ) {
+        return;
+      }
+
+      const cluster = this.$store.getters['currentCluster'];
+      const defaultRegistry = this.defaultRegistrySetting?.value || '';
+      const serverUrl = this.serverUrlSetting?.value || '';
+      const isWindows = cluster?.providerOs === 'windows';
+      const pathPrefix = cluster?.spec?.rancherKubernetesEngineConfig?.prefixPath || '';
+      const windowsPathPrefix = cluster?.spec?.rancherKubernetesEngineConfig?.winPrefixPath || '';
+
+      if ( values.global?.cattle ) {
+        deleteIfEqual(values.global.cattle, 'clusterId', cluster?.id);
+        deleteIfEqual(values.global.cattle, 'clusterName', cluster?.nameDisplay);
+        deleteIfEqual(values.global.cattle, 'systemDefaultRegistry', defaultRegistry);
+        deleteIfEqual(values.global.cattle, 'url', serverUrl);
+        deleteIfEqual(values.global.cattle, 'rkePathPrefix', pathPrefix);
+        deleteIfEqual(values.global.cattle, 'rkeWindowsPathPrefix', windowsPathPrefix);
+
+        if ( isWindows ) {
+          deleteIfEqual(values.global.cattle.windows, 'enabled', true);
+        }
+      }
+
+      if ( values.global?.cattle?.windows && !Object.keys(values.global.cattle.windows).length ) {
+        delete values.global.cattle.windows;
+      }
+
+      if ( values.global?.cattle && !Object.keys(values.global.cattle).length ) {
+        delete values.global.cattle;
+      }
+
+      if ( values.global ) {
+        deleteIfEqual(values.global, 'systemDefaultRegistry', defaultRegistry);
+      }
+
+      if ( !Object.keys(values.global || {}).length ) {
+        delete values.global;
+      }
+
+      return values;
+
+      function deleteIfEqual(obj, key, val) {
+        if ( get(obj, key) === val ) {
+          delete obj[key];
+        }
+      }
+    },
+
+    applyYamlToValues() {
+      try {
+        this.chartValues = jsyaml.load(this.valuesYaml);
+      } catch (err) {
+        return { errors: exceptionToErrorsArray(err) };
+      }
+
+      return { errors: [] };
+    },
+
+    actionInput(isUpgrade) {
+      const fromChart = this.versionInfo?.values || {};
+
+      const errors = [];
+
+      if ( this.showingYaml ) {
+        const { errors: yamlErrors } = this.applyYamlToValues();
+
+        errors.push(...yamlErrors);
+      }
+
+      // Only save the values that differ from the chart's standard values.yaml
+      const values = diff(fromChart, this.chartValues);
+
+      // Add our special blend of 11 herbs and global values
+      this.addGlobalValuesTo(values);
+
+      const form = JSON.parse(JSON.stringify(this.value));
+      const migratedAnnotations = this.migratedApp ? { [CATALOG_ANNOTATIONS.MIGRATED]: 'true' } : {};
+      const chart = {
+        chartName:   this.chart.chartName,
+        version:     this.version?.version || this.query.versionName,
+        releaseName: form.metadata.name,
+        description: this.customCmdOpts.description,
+        annotations: {
+          ...migratedAnnotations,
+          [CATALOG_ANNOTATIONS.SOURCE_REPO_TYPE]: this.chart.repoType,
+          [CATALOG_ANNOTATIONS.SOURCE_REPO_NAME]: this.chart.repoName
+        },
+        values,
+      };
+
+      if ( isUpgrade ) {
+        chart.resetValues = this.cmdOptions.resetValues;
+      }
+
+      const out = {
+        charts:    [chart],
+        noHooks:   this.cmdOptions.hooks === false,
+        timeout:   this.cmdOptions.timeout > 0 ? `${ this.cmdOptions.timeout }s` : null,
+        wait:      this.cmdOptions.wait === true,
+        namespace: form.metadata.namespace,
+        projectId: this.project,
+      };
+
+      if ( isUpgrade ) {
+        out.force = this.cmdOptions.force === true;
+        out.historyMax = this.cmdOptions.historyMax;
+        out.cleanupOnFail = this.cmdOptions.cleanupOnFail;
+      } else {
+        out.disableOpenAPIValidation = this.cmdOptions.openApi === false;
+        out.skipCRDs = this.cmdOptions.crds === false;
+      }
+
+      const more = [];
+
+      let auto = (this.version?.annotations?.[CATALOG_ANNOTATIONS.AUTO_INSTALL] || '').split(/\s*,\s*/).filter(x => !!x).reverse();
+
+      for ( const constraint of auto ) {
+        const provider = this.$store.getters['catalog/versionSatisfying']({
+          constraint,
+          repoName:     this.chart.repoName,
+          repoType:     this.chart.repoType,
+          chartVersion: this.version.version,
+        });
+
+        if ( provider ) {
+          more.push(provider);
+        } else {
+          errors.push(`This chart requires ${ constraint } but no matching chart was found`);
+        }
+      }
+
+      auto = (this.version?.annotations?.[CATALOG_ANNOTATIONS.AUTO_INSTALL_GVK] || '').split(/\s*,\s*/).filter(x => !!x).reverse();
+
+      for ( const gvr of auto ) {
+        const provider = this.$store.getters['catalog/versionProviding']({
+          gvr,
+          repoName: this.chart.repoName,
+          repoType: this.chart.repoType
+        });
+
+        if ( provider ) {
+          more.push(provider);
+        } else {
+          errors.push(`This chart requires another chart that provides ${ gvr }, but none was was found`);
+        }
+      }
+
+      // 'more' contains the values for the CRD chart, which needs the same
+      // global and cattle values as the chart.
+      for ( const dependency of more ) {
+        out.charts.unshift({
+          chartName:   dependency.name,
+          version:     dependency.version,
+          releaseName: dependency.annotations[CATALOG_ANNOTATIONS.RELEASE_NAME] || dependency.name,
+          projectId:   this.project,
+          values:      this.addGlobalValuesTo({ global: values.global }),
+          annotations: {
+            ...migratedAnnotations,
+            [CATALOG_ANNOTATIONS.SOURCE_REPO_TYPE]: dependency.repoType,
+            [CATALOG_ANNOTATIONS.SOURCE_REPO_NAME]: dependency.repoName
+          },
+        });
+      }
+
+      return { errors, input: out };
+    },
+
+    tabChanged() {
+      window.scrollTop = 0;
+    },
+
+    updateStepOneReady() {
+      const okRequires = !this.requires.length;
+      const okChart = !!this.chart;
+
+      this.steps[0].ready = okRequires && okChart;
+    },
+
+    getOptionLabel(opt) {
+      return opt?.chartNameDisplay;
+    },
+
+    showReadmeWindow() {
+      this.$store.dispatch('wm/open', {
+        id:        this.readmeWindowName,
+        label:     this.readmeWindowName,
+        icon:      'file',
+        component: 'ChartReadme',
+        attrs:     { versionInfo: this.versionInfo }
+      }, { root: true });
+      this.shownReadmeWindows.push(this.readmeWindowName);
+    },
+
+    updateStep(stepName, update) {
+      const step = this.steps.find(step => step.name === stepName);
+
+      if (step) {
+        for (const prop in update) {
+          Vue.set(step, prop, update[prop]);
+        }
+      }
+    }
+  },
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else-if="!legacyApp && !mcapp" class="install-steps" :class="{ 'isPlainLayout': isPlainLayout}">
+    <TypeDescription resource="chart" />
+    <Wizard
+      v-if="value"
+      :steps="steps"
+      :errors="errors"
+      :edit-first-step="true"
+      :banner-title="stepperName"
+      :banner-title-subtext="stepperSubtext"
+      :finish-mode="action"
+      class="wizard"
+      @cancel="cancel"
+      @finish="finish"
+    >
+      <template v-for="customStep of customSteps" v-slot:[customStep.name]>
+        <component
+          :is="customStep.component"
+          :key="customStep.name"
+          @update="updateStep(customStep.name, $event)"
+          @errors="e=>errors.push(...e)"
+        />
+      </template>
+      <template #bannerTitleImage>
+        <div>
+          <div class="logo-bg">
+            <LazyImage :src="chart ? chart.icon : ''" class="logo" />
+          </div>
+          <label v-if="windowsIncompatible" class="os-label">
+            {{ windowsIncompatible }}
+          </label>
+        </div>
+      </template>
+      <template #basics>
+        <div class="step__basic">
+          <Banner v-if="step1Description" color="info" class="description">
+            <span>{{ step1Description }}</span>
+            <span v-if="namespaceNewAllowed" class="mt-10">
+              {{ t('catalog.install.steps.basics.nsCreationDescription', {}, true) }}
+            </span>
+          </Banner>
+          <div v-if="requires.length || warnings.length" class="mb-15">
+            <Banner v-for="msg in requires" :key="msg" color="error">
+              <span v-html="msg" />
+            </Banner>
+
+            <Banner v-for="msg in warnings" :key="msg" color="warning">
+              <span v-html="msg" />
+            </Banner>
+          </div>
+          <div v-if="showSelectVersionOrChart" class="row mb-20">
+            <div class="col span-4">
+              <!-- We have a chart for the app, let the user select a new version -->
+              <LabeledSelect
+                v-if="chart"
+                :label="t('catalog.install.version')"
+                :value="query.versionName"
+                :options="filteredVersions"
+                :selectable="version => !version.disabled"
+                @input="selectVersion"
+              />
+              <!-- Can't find the chart for the app, let the user try to select one -->
+              <LabeledSelect
+                v-else
+                :label="t('catalog.install.chart')"
+                :value="chart"
+                :options="charts"
+                :selectable="option => !option.disabled"
+                :get-option-label="opt => getOptionLabel(opt)"
+                option-key="key"
+                @input="selectChart($event)"
+              >
+                <template v-slot:option="opt">
+                  <template v-if="opt.kind === 'divider'">
+                    <hr />
+                  </template>
+                  <template v-else-if="opt.kind === 'label'">
+                    <b style="position: relative; left: -2.5px;">{{ opt.label }}</b>
+                  </template>
+                </template>
+              </LabeledSelect>
+            </div>
+          </div>
+          <NameNsDescription
+            v-if="chart"
+            v-model="value"
+            :description-hidden="true"
+            :mode="mode"
+            :name-disabled="nameDisabled"
+            :name-required="false"
+            :name-ns-hidden="!showNameEditor"
+            :force-namespace="forceNamespace"
+            :namespace-new-allowed="namespaceNewAllowed"
+            :extra-columns="showProject ? ['project'] : []"
+            :show-spacer="false"
+            :horizontal="false"
+            @isNamespaceNew="isNamespaceNew = $event"
+          >
+            <template v-if="showProject" #project>
+              <LabeledSelect
+                v-model="project"
+                :disabled="!namespaceIsNew"
+                :label="t('catalog.install.project')"
+                option-key="id"
+                :options="projectOpts"
+                :tooltip="!namespaceIsNew ? t('catalog.install.namespaceIsInProject', {namespace: value.metadata.namespace}, true) : ''"
+                :hover-tooltip="!namespaceIsNew"
+                :status="'info'"
+              />
+            </template>
+          </NameNsDescription>
+          <div class="step__values__controls--spacer" style="flex:1">
+&nbsp;
+          </div>
+          <Banner v-if="isNamespaceNew" color="info" v-html="t('catalog.install.steps.basics.createNamespace', {namespace: value.metadata.namespace}, true) ">
+          </Banner>
+
+          <Checkbox v-model="showCommandStep" class="mb-20" :label="t('catalog.install.steps.helmCli.checkbox', { action, existing: !!existing })" />
+        </div>
+      </template>
+      <template #clusterTplVersion>
+        <Banner color="info" class="description">
+          {{ t('catalog.install.steps.clusterTplVersion.description') }}
+        </Banner>
+        <div class="row mb-20">
+          <div class="col span-4">
+            <LabeledSelect
+              v-if="chart"
+              :label="t('catalog.install.version')"
+              :value="query.versionName"
+              :options="filteredVersions"
+              :selectable="version => !version.disabled"
+              @input="selectVersion"
+            />
+          </div>
+          <div class="step__values__controls--spacer">
+&nbsp;
+          </div>
+          <div class="btn-group">
+            <button type="button" class="btn bg-primary btn-sm" :disabled="!hasReadme || showingReadmeWindow" @click="showSlideIn = !showSlideIn">
+              {{ t('catalog.install.steps.helmValues.chartInfo.button') }}
+            </button>
+          </div>
+        </div>
+      </template>
+      <template #helmValues>
+        <Banner v-if="step2Description" color="info" class="description">
+          {{ step2Description }}
+        </Banner>
+        <div class="step__values__controls">
+          <ButtonGroup
+            v-model="preFormYamlOption"
+            :options="formYamlOptions"
+            inactive-class="bg-disabled btn-sm"
+            active-class="bg-primary btn-sm"
+            :disabled="preFormYamlOption != formYamlOption"
+          ></ButtonGroup>
+          <div class="step__values__controls--spacer">
+&nbsp;
+          </div>
+          <ButtonGroup
+            v-if="showDiff"
+            v-model="diffMode"
+            :options="yamlDiffModeOptions"
+            inactive-class="bg-disabled btn-sm"
+            active-class="bg-primary btn-sm"
+          ></ButtonGroup>
+          <div v-if="hasReadme && !showingReadmeWindow" class="btn-group">
+            <button type="button" class="btn bg-primary btn-sm" @click="showSlideIn = !showSlideIn">
+              {{ t('catalog.install.steps.helmValues.chartInfo.button') }}
+            </button>
+          </div>
+        </div>
+        <div class="scroll__container">
+          <div class="scroll__content">
+            <!-- Values (as Custom Component) -->
+            <template v-if="valuesComponent && showValuesComponent">
+              <Tabbed
+                v-if="componentHasTabs"
+                ref="tabs"
+                :side-tabs="true"
+                :class="{'with-name': showNameEditor}"
+                class="step__values__content"
+                @changed="tabChanged($event)"
+              >
+                <component
+                  :is="valuesComponent"
+                  v-model="chartValues"
+                  :mode="mode"
+                  :chart="chart"
+                  class="step__values__content"
+                  :existing="existing"
+                  :version="version"
+                  :version-info="versionInfo"
+                  @warn="e=>errors.push(e)"
+                  @register-before-hook="registerBeforeHook"
+                  @register-after-hook="registerAfterHook"
+                />
+              </Tabbed>
+              <template v-else>
+                <component
+                  :is="valuesComponent"
+                  v-if="valuesComponent"
+                  v-model="chartValues"
+                  :mode="mode"
+                  :chart="chart"
+                  class="step__values__content"
+                  :existing="existing"
+                  :version="version"
+                  :version-info="versionInfo"
+                  @warn="e=>errors.push(e)"
+                  @register-before-hook="registerBeforeHook"
+                  @register-after-hook="registerAfterHook"
+                />
+              </template>
+            </template>
+            <!-- Values (as Questions)  -->
+            <Tabbed
+              v-else-if="hasQuestions && showQuestions"
+              ref="tabs"
+              :side-tabs="true"
+              :class="{'with-name': showNameEditor}"
+              class="step__values__content"
+              @changed="tabChanged($event)"
+            >
+              <Questions
+                v-model="chartValues"
+                :in-store="inStore"
+                :mode="mode"
+                :source="versionInfo"
+                tabbed="multiple"
+                :target-namespace="targetNamespace"
+              />
+            </Tabbed>
+            <!-- Values (as YAML) -->
+            <template v-else>
+              <YamlEditor
+                ref="yaml"
+                v-model="valuesYaml"
+                class="step__values__content"
+                :scrolling="true"
+                :initial-yaml-values="originalYamlValues"
+                :editor-mode="editorMode"
+                :hide-preview-buttons="true"
+              />
+            </template>
+          </div>
+        </div>
+
+        <!-- Confirm loss of changes on toggle from yaml/preview to form -->
+        <ResourceCancelModal ref="cancelModal" :is-cancel-modal="false" :is-form="true" @cancel-cancel="preFormYamlOption=formYamlOption" @confirm-cancel="formYamlOption = preFormYamlOption;"></ResourceCancelModal>
+      </template>
+      <template #helmCli>
+        <Banner v-if="step3Description" color="info" class="description">
+          {{ step3Description }}
+        </Banner>
+        <div><Checkbox v-if="existing" v-model="customCmdOpts.cleanupOnFail" :label="t('catalog.install.helm.cleanupOnFail')" /></div>
+        <div><Checkbox v-if="!existing" v-model="customCmdOpts.crds" :label="t('catalog.install.helm.crds')" /></div>
+        <div><Checkbox v-model="customCmdOpts.hooks" :label="t('catalog.install.helm.hooks')" /></div>
+        <div><Checkbox v-if="existing" v-model="customCmdOpts.force" :label="t('catalog.install.helm.force')" /></div>
+        <div><Checkbox v-if="existing" v-model="customCmdOpts.resetValues" :label="t('catalog.install.helm.resetValues')" /></div>
+        <div><Checkbox v-if="!existing" v-model="customCmdOpts.openApi" :label="t('catalog.install.helm.openapi')" /></div>
+        <div><Checkbox v-model="customCmdOpts.wait" :label="t('catalog.install.helm.wait')" /></div>
+        <div style="display: block; max-width: 400px;" class="mt-10">
+          <UnitInput
+            v-model.number="customCmdOpts.timeout"
+            :label="t('catalog.install.helm.timeout.label')"
+            :suffix="t('catalog.install.helm.timeout.unit', {value: customCmdOpts.timeout})"
+          />
+        </div>
+        <div style="display: block; max-width: 400px;" class="mt-10">
+          <UnitInput
+            v-if="existing"
+            v-model.number="customCmdOpts.historyMax"
+            :label="t('catalog.install.helm.historyMax.label')"
+            :suffix="t('catalog.install.helm.historyMax.unit', {value: customCmdOpts.historyMax})"
+          />
+        </div>
+        <div style="display: block; max-width: 400px;" class="mt-10">
+          <LabeledInput
+            v-model="customCmdOpts.description"
+            label-key="catalog.install.helm.description.label"
+            placeholder-key="catalog.install.helm.description.placeholder"
+            :min-height="30"
+          />
+        </div>
+      </template>
+    </Wizard>
+    <div class="slideIn" :class="{'hide': false, 'slideIn__show': showSlideIn}">
+      <h2 class="slideIn__header">
+        {{ t('catalog.install.steps.helmValues.chartInfo.label') }}
+        <div class="slideIn__header__buttons">
+          <div v-tooltip="t('catalog.install.slideIn.dock')" class="slideIn__header__button" @click="showSlideIn = false; showReadmeWindow()">
+            <i class="icon icon-dock" />
+          </div>
+          <div class="slideIn__header__button" @click="showSlideIn = false">
+            <i class="icon icon-close" />
+          </div>
+        </div>
+      </h2>
+      <ChartReadme v-if="hasReadme" :version-info="versionInfo" class="chart-content__tabs" />
+    </div>
+  </div>
+
+  <!-- App is deployed as a Legacy or MultiCluster app, don't let user update from here -->
+  <div v-else class="install-steps" :class="{ 'isPlainLayout': isPlainLayout}">
+    <div class="outer-container">
+      <div class="header mb-20">
+        <div class="title">
+          <div class="top choice-banner">
+            <div class="title">
+              <!-- Logo -->
+              <slot name="bannerTitleImage">
+                <div class="round-image">
+                  <LazyImage :src="chart ? chart.icon : ''" class="logo" />
+                </div>
+              </slot>
+              <!-- Title with subtext -->
+              <div class="subtitle">
+                <h2 v-if="stepperName">
+                  {{ stepperName }}
+                </h2>
+                <span v-if="stepperSubtext" class="subtext">{{ stepperSubtext }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <Banner color="warning" class="description">
+        <span>
+          {{ t('catalog.install.error.legacy.label', { legacyType: mcapp ? legacyDefs.mcm : legacyDefs.legacy }, true) }}
+        </span>
+        <template v-if="!legacyEnabled">
+          <span v-html="t('catalog.install.error.legacy.enableLegacy.prompt', true)" />
+          <nuxt-link :to="legacyFeatureRoute">
+            {{ t('catalog.install.error.legacy.enableLegacy.goto') }}
+          </nuxt-link>
+        </template>
+        <template v-else>
+          <nuxt-link :to="mcapp ? mcmRoute : legacyAppRoute">
+            <span v-html="t('catalog.install.error.legacy.navigate', { legacyType: mcapp ? legacyDefs.mcm : legacyDefs.legacy }, true)" />
+          </nuxt-link>
+        </template>
+      </Banner>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  $title-height: 50px;
+  $padding: 5px;
+  $slideout-width: 35%;
+
+  .install-steps {
+    position: relative;
+    overflow: hidden;
+
+    &.isPlainLayout {
+      padding: 20px;
+    }
+
+    .description {
+      display: flex;
+      flex-direction: column;
+      margin-top: 0;
+    }
+  }
+
+  .wizard {
+    .logo-bg {
+      height: $title-height;
+      width: $title-height;
+      background-color: white;
+      border: $padding solid white;
+      border-radius: calc( 3 * var(--border-radius));
+      position: relative;
+    }
+
+    .logo {
+      max-height: $title-height - 2 * $padding;
+      max-width: $title-height - 2 * $padding;
+      position: absolute;
+      width: auto;
+      height: auto;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      margin: auto;
+    }
+  }
+
+  .step {
+    &__basic {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+
+      .spacer {
+        line-height: 2;
+      }
+    }
+    &__values {
+      &__controls {
+        display: flex;
+        margin-bottom: 15px;
+
+        & > *:not(:last-of-type) {
+          margin-right: $padding * 2;
+        }
+
+        &--spacer {
+          flex: 1
+        }
+
+      }
+
+      &__content {
+        flex: 1;
+
+        ::v-deep .tab-container {
+          overflow: auto;
+        }
+      }
+
+    }
+  }
+
+  .slideIn {
+    $slideout-width: 35%;
+
+    border-left: var(--header-border-size) solid var(--header-border);
+    position: absolute;
+    top: 0;
+    right: -$slideout-width;
+    height: 100%;
+    background-color: var(--topmenu-bg);
+    width: $slideout-width;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+
+    padding: 10px;
+
+    transition: right .5s ease;
+
+    &__header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      &__buttons {
+        display: flex;
+      }
+
+      &__button {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 2px;
+        > i {
+          font-size: 20px;
+          opacity: 0.5;
+        }
+        &:hover {
+          background-color: var(--wm-closer-hover-bg);
+        }
+      }
+    }
+
+    .chart-content__tabs {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+
+      height: 0;
+
+      padding-bottom: 10px;
+
+      ::v-deep .chart-readmes {
+        flex: 1;
+        overflow: auto;
+      }
+    }
+
+    &__show {
+      right: 0;
+    }
+
+  }
+
+  .scroll {
+    &__container {
+      $yaml-height: 200px;
+      display: flex;
+      flex: 1;
+      min-height: $yaml-height;
+      height: 0;
+    }
+    &__content {
+      display: flex;
+      flex: 1;
+      overflow: auto;
+    }
+
+  }
+
+  ::v-deep .yaml-editor {
+    flex: 1
+  }
+
+.outer-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: 0;
+}
+
+.header {
+  display: flex;
+  align-content: space-between;
+  align-items: center;
+
+  border-bottom: var(--header-border-size) solid var(--header-border);
+
+  & > .title {
+    flex: 1;
+    min-height: 75px;
+  }
+
+  .choice-banner {
+
+    flex-basis: 40%;
+    display: flex;
+    align-items: center;
+
+    &.top {
+
+      H2 {
+        margin: 0px;
+      }
+
+      .title{
+        display: flex;
+        align-items: center;
+        justify-content: space-evenly;
+
+        & > .subtitle {
+          margin: 0 20px;
+        }
+      }
+
+      .subtitle{
+        display: flex;
+        flex-direction: column;
+        & .subtext {
+          color: var(--input-label);
+        }
+      }
+
+    }
+
+    &:not(.top){
+      box-shadow: 0px 0px 12px 3px var(--box-bg);
+      flex-direction: row;
+      align-items: center;
+      justify-content: start;
+      &:hover{
+        outline: var(--outline-width) solid var(--outline);
+        cursor: pointer;
+      }
+    }
+
+    & .round-image {
+      min-width: 50px;
+      height: 50px;
+      margin: 10px 10px 10px 0;
+      border-radius: 50%;
+      overflow: hidden;
+      .logo {
+        min-width: 50px;
+        height: 50px;
+      }
+    }
+  }
+}
+
+.os-label {
+  position: absolute;
+  background-color: var(--warning-banner-bg);
+  color:var(--warning);
+  margin-top: 5px;
+}
+
+</style>
diff --git a/shell/assets/images/featured.jpg b/shell/assets/images/featured.jpg
new file mode 100644
index 0000000000..bfdeb898bf
Binary files /dev/null and b/shell/assets/images/featured.jpg differ
diff --git a/shell/assets/images/featured/img1.jpg b/shell/assets/images/featured/img1.jpg
new file mode 100644
index 0000000000..6e3b9a9735
Binary files /dev/null and b/shell/assets/images/featured/img1.jpg differ
diff --git a/shell/assets/styles/themes/_dark.scss b/shell/assets/styles/themes/_dark.scss
index 7ee8c14f6a..d8d45c35c8 100644
--- a/shell/assets/styles/themes/_dark.scss
+++ b/shell/assets/styles/themes/_dark.scss
@@ -39,6 +39,8 @@
   --default-border             : #($dark);
   --default-banner-bg          : #{rgba($dark, 0.15)};
   --default-light-bg           : #{rgba($dark, 0.05)};
+  --slider-light-bg            : #{rgba($darker, 1)};
+  --slider-light-bg-right      : #{rgba($darker, 0)};
 
   --muted                      : #{$disabled};
 
@@ -160,6 +162,7 @@
   --diff-ins-border            : #{rgba($success, 0.5)};
   --diff-chg-ins               : #{rgba($success, 0.25)};
   --diff-chg-del               : #{rgba($warning, 0.5)};
+  --diff-chg-dela               : #{rgba($warning, 1)};
   --diff-empty-placeholder     : #{$darker};
 
 
diff --git a/shell/assets/styles/themes/_light.scss b/shell/assets/styles/themes/_light.scss
index 507eee8bbb..d4c0f37679 100644
--- a/shell/assets/styles/themes/_light.scss
+++ b/shell/assets/styles/themes/_light.scss
@@ -82,6 +82,7 @@ BODY, .theme-light {
   --link-border             : #{$link};
   --link-banner-bg          : #{rgba($link, 0.15)};
   --link-light-bg           : #{rgba($link, 0.05)};
+ 
 
   
   .text-link {
@@ -113,6 +114,8 @@ BODY, .theme-light {
   --default-border             : #{$light};
   --default-banner-bg          : #{rgba($light, 0.15)};
   --default-light-bg           : #{rgba($light, 0.05)};
+  --slider-light-bg            : #{rgba($lightest, 1)};
+  --slider-light-bg-right      : #{rgba($lightest, 0)};
 
 
   .text-default {
diff --git a/shell/components/Carousel.vue b/shell/components/Carousel.vue
new file mode 100644
index 0000000000..143a222501
--- /dev/null
+++ b/shell/components/Carousel.vue
@@ -0,0 +1,291 @@
+<script>
+import { get } from '@shell/utils/object';
+import { BadgeState } from '@components/BadgeState';
+
+export default {
+  components: { BadgeState },
+  name:       'Carousel',
+  props:      {
+    sliders: {
+      type:     Array,
+      required: true,
+    },
+    keyField: {
+      type:    String,
+      default: 'key',
+    },
+    asLink: {
+      type:    Boolean,
+      default: false,
+    },
+    linkField: {
+      type:    String,
+      default: 'link'
+    },
+    targetField: {
+      type:    String,
+      default: 'target',
+    },
+    rel: {
+      type:    String,
+      default: 'noopener noreferrer nofollow'
+    },
+  },
+  data() {
+    return {
+      slider:          this.sliders,
+      activeItemId:    0,
+      autoScroll:      true
+    };
+  },
+
+  computed: {
+
+    trackStyle() {
+      const sliderItem = this.activeItemId * 100 / this.slider.length;
+      const width = 60 * this.slider.length;
+
+      return `transform: translateX(-${ sliderItem }%); width: ${ width }%`;
+    },
+  },
+
+  methods: {
+    get,
+
+    select(slide, i) {
+      this.$emit('clicked', slide, i);
+    },
+
+    scrollSlide(i) {
+      this.autoScroll = false;
+      this.activeItemId = i;
+      setTimeout(() => {
+        this.slidePosition();
+      }, 400);
+    },
+
+    nextPrev(item) {
+      this.autoScroll = false;
+      if (item === 'next' && this.activeItemId < this.slider.length - 1) {
+        this.activeItemId++;
+      }
+
+      if (item === 'prev' && this.activeItemId > 0) {
+        this.activeItemId--;
+      }
+
+      this.slidePosition();
+    },
+
+    timer() {
+      setInterval(this.autoScrollSlide, 2000);
+    },
+    autoScrollSlide() {
+      if (this.activeItemId < this.slider.length && this.autoScroll ) {
+        this.activeItemId++;
+      }
+
+      if (this.activeItemId > this.slider.length - 1) {
+        this.autoScroll = false;
+        this.activeItemId = 0;
+      }
+      this.slidePosition();
+    },
+
+    slidePosition() {
+      if (this.activeItemId <= 1) {
+        this.$refs.slide[this.slider.length - 1].style.left = '-93%';
+        this.$refs.slide[0].style.left = '7%';
+      } else {
+        this.$refs.slide[this.slider.length - 1].style.left = '7%';
+        this.$refs.slide[0].style.left = '107%';
+      }
+    }
+  },
+
+  mounted() {
+    this.timer();
+  }
+};
+
+</script>
+
+<template>
+  <div class="slider">
+    <div id="slide-track" ref="slider" :style="trackStyle" class="slide-track">
+      <div
+        :is="asLink ? 'a' : 'div'"
+        v-for="(slide, i) in sliders"
+        :id="`slide` + i"
+        ref="slide"
+        :key="get(slide, keyField)"
+        class="slide"
+        :href="asLink ? get(slide, linkField) : null"
+        :target="get(slide, targetField)"
+        :rel="rel"
+        @click="select(slide, i)"
+      >
+        <div class="slide-content">
+          <div class="slide-img">
+            <img :src="slide.icon ? slide.icon : `/_nuxt/shell/assets/images/generic-catalog.svg`" />
+          </div>
+          <div class="slide-content-right">
+            <BadgeState :label="slide.repoName" color="slider-badge mb-20" />
+            <h1>{{ slide.chartNameDisplay }}</h1>
+            <p>{{ slide.chartDescription }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="controls">
+      <div
+        v-for="(slide, i) in slider"
+        :key="i"
+        class="control-item"
+        :class="{'active': activeItemId === i}"
+        @click="scrollSlide(i, slider.length)"
+      ></div>
+    </div>
+    <div ref="prev" class="prev" :class="[activeItemId === 0 ? 'disabled' : 'prev']" @click="nextPrev('prev')">
+      <i class="icon icon-chevron-left icon-4x"></i>
+    </div>
+    <div ref="next" class="next" :class="[activeItemId === slider.length - 1 ? 'disabled' : 'next']" @click="nextPrev('next')">
+      <i class="icon icon-chevron-right icon-4x"></i>
+    </div>
+  </div>
+</template>
+
+<style lang='scss' scoped>
+ .slider {
+  margin: auto;
+  position: relative;
+  width: 100%;
+  place-items: center;
+  overflow: hidden;
+  margin-bottom: 30px;
+  min-width: 700px;
+
+  &:hover {
+    .prev,
+    .next {
+      display: block;
+    }
+  }
+}
+
+.slide-track {
+  display: flex;
+  animation: scrolls 10s ;
+  position: relative;
+  transition: 1s ease-in-out;
+}
+
+.slider-badge {
+  background: var(--app-partner-accent);
+  color: var(--body-bg);
+}
+.slide {
+  min-height: 210px;
+  width: 60%;
+  max-width: 60%;
+  margin: 0 10px;
+  position: relative;
+  border: 1px solid var(--tabbed-border);
+  border-radius: var(--border-radius);
+  left: 7%;
+  cursor: pointer;
+
+  &:last-child {
+    left: -93%;
+  }
+
+  .slide-header {
+    background: var(--default);
+    width: 100%;
+    padding: 10px 15px;
+  }
+  .slide-content {
+    display: flex;
+    padding: 30px;
+
+    .slide-img {
+      width: 150px;
+      background: var(--card-badge-text);
+      border-radius: calc(2 * var(--border-radius));
+
+      img {
+        width: 100%;
+      }
+    }
+
+    .slide-content-right {
+      border-left: 1px solid var(--tabbed-border);
+      margin-left: 30px;
+      padding-left: 30px;
+
+      span {
+        margin: 0;
+      }
+    }
+
+  }
+}
+
+.slider::before,
+.slider::after {
+  background: linear-gradient(to right, var(--slider-light-bg) 0%, var(--slider-light-bg-right) 100%);
+  content: "";
+  height: 100%;
+  position: absolute;
+  width: 15%;
+  z-index: z-index('overContent');
+}
+
+.slider::before {
+  left: 0;
+  top: 0;
+}
+.slider::after{
+  right: -1px;
+  top: 0;
+  transform: rotate(180deg);
+}
+
+.controls {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-top: 10px;
+
+  .control-item {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--scrollbar-thumb);
+    margin: 5px;
+    cursor: pointer;
+
+    &.active {
+      background:var(--body-text);
+    }
+  }
+}
+.prev,
+.next {
+  position: absolute;
+  z-index: 20;
+  top: 90px;
+  display: none;
+  cursor: pointer;
+
+  &.disabled .icon {
+    color: var(--disabled-bg);
+    cursor: not-allowed;
+  }
+}
+
+.next {
+  right: 0;
+}
+
+</style>
diff --git a/shell/config/labels-annotations.js b/shell/config/labels-annotations.js
index 8417b3f252..f0096c15ed 100644
--- a/shell/config/labels-annotations.js
+++ b/shell/config/labels-annotations.js
@@ -95,7 +95,7 @@ export const CATALOG = {
   DEPLOYED_OS:   'catalog.cattle.io/deploys-on-os',
 
   MIGRATED: 'apps.cattle.io/migrated',
-  MANAGED:  'catalog.cattle.io/managed'
+  MANAGED:  'catalog.cattle.io/managed',
 };
 
 export const FLEET = {
diff --git a/shell/pages/c/_cluster/apps/charts/index.vue b/shell/pages/c/_cluster/apps/charts/index.vue
index 667131de22..1e96f8567c 100644
--- a/shell/pages/c/_cluster/apps/charts/index.vue
+++ b/shell/pages/c/_cluster/apps/charts/index.vue
@@ -2,6 +2,8 @@
 import AsyncButton from '@shell/components/AsyncButton';
 import Loading from '@shell/components/Loading';
 import { Banner } from '@components/Banner';
+import Carousel from '@shell/components/Carousel';
+import ButtonGroup from '@shell/components/ButtonGroup';
 import SelectIconGrid from '@shell/components/SelectIconGrid';
 import TypeDescription from '@shell/components/TypeDescription';
 import {
@@ -12,7 +14,7 @@ import { sortBy } from '@shell/utils/sort';
 import { mapGetters } from 'vuex';
 import { Checkbox } from '@components/Form/Checkbox';
 import Select from '@shell/components/form/Select';
-import { mapPref, HIDE_REPOS, SHOW_PRE_RELEASE } from '@shell/store/prefs';
+import { mapPref, HIDE_REPOS, SHOW_PRE_RELEASE, SHOW_CHART_MODE } from '@shell/store/prefs';
 import { removeObject, addObject, findBy } from '@shell/utils/array';
 import { compatibleVersionsFor, filterAndArrangeCharts } from '@shell/store/catalog';
 import { CATALOG } from '@shell/config/labels-annotations';
@@ -21,6 +23,8 @@ export default {
   components: {
     AsyncButton,
     Banner,
+    Carousel,
+    ButtonGroup,
     Loading,
     Checkbox,
     Select,
@@ -48,6 +52,17 @@ export default {
       searchQuery:         null,
       showDeprecated:      null,
       showHidden:          null,
+      chartMode:           this.$store.getters['prefs/get'](SHOW_CHART_MODE),
+      chartOptions:    [
+        {
+          label:       'Browse',
+          value:       'browse',
+        },
+        {
+          label: 'Featured',
+          value: 'featured'
+        }
+      ]
     };
   },
 
@@ -154,6 +169,14 @@ export default {
       });
     },
 
+    getFeaturedCharts() {
+      const allCharts = (this.filteredCharts || []);
+
+      const featuredCharts = allCharts.filter(value => value.featured).sort((a, b) => a.featured - b.featured);
+
+      return featuredCharts.slice(0, 5);
+    },
+
     categories() {
       const map = {};
 
@@ -184,6 +207,10 @@ export default {
       return out;
     },
 
+    showCarousel() {
+      return this.chartMode === 'featured' && this.getFeaturedCharts.length;
+    }
+
   },
 
   watch: {
@@ -313,7 +340,20 @@ export default {
           {{ t('catalog.charts.header') }}
         </h1>
       </div>
+      <div class="actions-container">
+        <ButtonGroup
+          v-model="chartMode"
+          :options="chartOptions"
+        />
+      </div>
     </header>
+    <div v-if="showCarousel">
+      <h3>Featured Charts</h3>
+      <Carousel
+        :sliders="getFeaturedCharts"
+        @clicked="(row) => selectChart(row)"
+      />
+    </div>
     <TypeDescription resource="chart" />
     <div class="left-right-split">
       <Select
diff --git a/shell/store/prefs.js b/shell/store/prefs.js
index cc21241ce7..8b2c66813d 100644
--- a/shell/store/prefs.js
+++ b/shell/store/prefs.js
@@ -74,6 +74,7 @@ export const HIDE_REPOS = create('hide-repos', [], { parseJSON });
 export const HIDE_DESC = create('hide-desc', [], { parseJSON });
 export const HIDE_SENSITIVE = create('hide-sensitive', true, { options: [true, false], parseJSON });
 export const SHOW_PRE_RELEASE = create('show-pre-release', false, { options: [false, true], parseJSON });
+export const SHOW_CHART_MODE = create('chartMode', 'featured', { parseJSON });
 
 export const DATE_FORMAT = create('date-format', 'ddd, MMM D YYYY', {
   options: [
diff --git a/store/prefs.js b/store/prefs.js
new file mode 100644
index 0000000000..4caf1bcb6a
--- /dev/null
+++ b/store/prefs.js
@@ -0,0 +1,485 @@
+import Vue from 'vue';
+import { MANAGEMENT, STEVE } from '@/config/types';
+import { clone } from '@/utils/object';
+import { SETTING } from '@/config/settings';
+
+const definitions = {};
+
+export const create = function(name, def, opt = {}) {
+  const parseJSON = opt.parseJSON === true;
+  const asCookie = opt.asCookie === true;
+  const asUserPreference = opt.asUserPreference !== false;
+  const options = opt.options;
+
+  definitions[name] = {
+    def,
+    options,
+    parseJSON,
+    asCookie,
+    asUserPreference,
+    mangleRead:  opt.mangleRead, // Alter the value read from the API (to match old Rancher expectations)
+    mangleWrite: opt.mangleWrite, // Alter the value written back to the API (ditto)
+  };
+
+  return name;
+};
+
+export const mapPref = function(name) {
+  return {
+    get() {
+      return this.$store.getters['prefs/get'](name);
+    },
+
+    set(value) {
+      this.$store.dispatch('prefs/set', { key: name, value });
+    }
+  };
+};
+
+// --------------------
+const parseJSON = true; // Shortcut for setting it below
+const asCookie = true; // Store as a cookie so that it's available before auth + on server-side
+
+// Keys must be lowercase and valid dns label (a-z 0-9 -)
+export const CLUSTER = create('cluster', '');
+export const LAST_NAMESPACE = create('last-namespace', '');
+export const NAMESPACE_FILTERS = create('ns-by-cluster', {}, { parseJSON });
+export const WORKSPACE = create('workspace', '');
+export const EXPANDED_GROUPS = create('open-groups', ['cluster', 'rbac', 'serviceDiscovery', 'storage', 'workload'], { parseJSON });
+export const FAVORITE_TYPES = create('fav-type', [], { parseJSON });
+export const GROUP_RESOURCES = create('group-by', 'namespace');
+export const DIFF = create('diff', 'unified', { options: ['unified', 'split'] });
+export const THEME = create('theme', 'auto', {
+  options:     ['light', 'auto', 'dark'],
+  asCookie,
+  parseJSON,
+  mangleRead:  x => x.replace(/^ui-/, ''),
+  mangleWrite: x => `ui-${ x }`,
+});
+export const PREFERS_SCHEME = create('pcs', '', { asCookie, asUserPreference: false });
+export const LOCALE = create('locale', 'en-us', { asCookie });
+export const KEYMAP = create('keymap', 'sublime', { options: ['sublime', 'emacs', 'vim'] });
+export const ROWS_PER_PAGE = create('per-page', 100, { options: [10, 25, 50, 100, 250, 500, 1000], parseJSON });
+export const LOGS_WRAP = create('logs-wrap', true, { parseJSON });
+export const LOGS_TIME = create('logs-time', true, { parseJSON });
+export const LOGS_RANGE = create('logs-range', '30 minutes', { parseJSON });
+export const HIDE_REPOS = create('hide-repos', [], { parseJSON });
+export const HIDE_DESC = create('hide-desc', [], { parseJSON });
+export const HIDE_SENSITIVE = create('hide-sensitive', true, { options: [true, false], parseJSON });
+export const SHOW_PRE_RELEASE = create('show-pre-release', false, { options: [false, true], parseJSON });
+export const SHOW_CHART_MODE = create('chartMode', 'featured', { parseJSON });
+
+export const DATE_FORMAT = create('date-format', 'ddd, MMM D YYYY', {
+  options: [
+    'ddd, MMM D YYYY',
+    'ddd, D MMM YYYY',
+    'D/M/YYYY',
+    'M/D/YYYY',
+    'YYYY-MM-DD'
+  ]
+});
+
+export const TIME_FORMAT = create('time-format', 'h:mm:ss a', {
+  options: [
+    'h:mm:ss a',
+    'HH:mm:ss'
+  ]
+});
+
+export const TIME_ZONE = create('time-zone', 'local');
+export const DEV = create('dev', false, { parseJSON });
+export const LAST_VISITED = create('last-visited', 'home', { parseJSON });
+export const SEEN_WHATS_NEW = create('seen-whatsnew', '', { parseJSON });
+export const READ_WHATS_NEW = create('read-whatsnew', '', { parseJSON });
+export const AFTER_LOGIN_ROUTE = create('after-login-route', 'home', { parseJSON } );
+export const HIDE_HOME_PAGE_CARDS = create('home-page-cards', {}, { parseJSON } );
+
+export const _RKE1 = 'rke1';
+export const _RKE2 = 'rke2';
+export const PROVISIONER = create('provisioner', _RKE1, { options: [_RKE1, _RKE2] });
+
+// Promo for Cluster Tools feature on Cluster Dashboard page
+export const CLUSTER_TOOLS_TIP = create('hide-cluster-tools-tip', false, { parseJSON });
+
+// Maximum number of clusters to show in the slide-in menu
+export const MENU_MAX_CLUSTERS = create('menu-max-clusters', 4, { options: [2, 3, 4, 5, 6, 7, 8, 9, 10], parseJSON });
+
+// --------------------
+
+const cookiePrefix = 'R_';
+const cookieOptions = {
+  maxAge:   365 * 86400,
+  path:     '/',
+  sameSite: true,
+  secure:   true,
+};
+
+export const state = function() {
+  return {
+    cookiesLoaded: false,
+    data:          {},
+  };
+};
+
+export const getters = {
+  get: state => (key) => {
+    const definition = definitions[key];
+
+    if (!definition) {
+      throw new Error(`Unknown preference: ${ key }`);
+    }
+
+    const user = state.data[key];
+
+    if (user !== undefined) {
+      return clone(user);
+    }
+
+    const def = clone(definition.def);
+
+    return def;
+  },
+
+  defaultValue: state => (key) => {
+    const definition = definitions[key];
+
+    if (!definition) {
+      throw new Error(`Unknown preference: ${ key }`);
+    }
+
+    return clone(definition.def);
+  },
+
+  options: state => (key) => {
+    const definition = definitions[key];
+
+    if (!definition) {
+      throw new Error(`Unknown preference: ${ key }`);
+    }
+
+    if (!definition.options) {
+      throw new Error(`Preference does not have options: ${ key }`);
+    }
+
+    return definition.options.slice();
+  },
+
+  theme: (state, getters) => {
+    let theme = getters['get'](THEME);
+    const pcs = getters['get'](PREFERS_SCHEME);
+
+    // console.log('Get Theme', theme, pcs);
+
+    // Ember UI uses this prefix
+    if ( theme.startsWith('ui-') ) {
+      theme = theme.substr(3);
+    }
+
+    if ( theme === 'auto' ) {
+      if ( pcs === 'light' || pcs === 'dark' ) {
+        return pcs;
+      }
+
+      return 'dark';
+    }
+
+    return theme;
+  },
+
+  afterLoginRoute: (state, getters) => {
+    const afterLoginRoutePref = getters['get'](AFTER_LOGIN_ROUTE);
+
+    if (typeof afterLoginRoutePref !== 'string') {
+      return afterLoginRoutePref;
+    }
+
+    switch (true) {
+    case (afterLoginRoutePref === 'home'):
+      return { name: 'home' };
+    case (afterLoginRoutePref === 'last-visited'): {
+      const lastVisitedPref = getters['get'](LAST_VISITED);
+
+      if (lastVisitedPref) {
+        return lastVisitedPref;
+      }
+      const clusterPref = getters['get'](CLUSTER);
+
+      return { name: 'c-cluster-explorer', params: { product: 'explorer', cluster: clusterPref } };
+    }
+    case (!!afterLoginRoutePref.match(/.+-dashboard$/)):
+    {
+      const clusterId = afterLoginRoutePref.split('-dashboard')[0];
+
+      return { name: 'c-cluster-explorer', params: { product: 'explorer', cluster: clusterId } };
+    }
+    default:
+      return { name: afterLoginRoutePref };
+    }
+  }
+};
+
+export const mutations = {
+  load(state, { key, value }) {
+    Vue.set(state.data, key, value);
+  },
+
+  cookiesLoaded(state) {
+    state.cookiesLoaded = true;
+  },
+
+  reset(state) {
+    for (const key in definitions) {
+      if ( definitions[key]?.asCookie ) {
+        continue;
+      }
+      delete state.data[key];
+    }
+  }
+};
+
+export const actions = {
+  async set({ dispatch, commit }, opt) {
+    let { key, value } = opt; // eslint-disable-line prefer-const
+    const definition = definitions[key];
+    let server;
+
+    if ( opt.val ) {
+      throw new Error('Use value, not val');
+    }
+
+    commit('load', { key, value });
+
+    if ( definition.asCookie ) {
+      const opt = {
+        ...cookieOptions,
+        parseJSON: definition.parseJSON === true
+      };
+
+      this.$cookies.set(`${ cookiePrefix }${ key }`.toUpperCase(), value, opt);
+    }
+
+    if ( definition.asUserPreference ) {
+      try {
+        server = await dispatch('loadServer', key); // There's no watch on prefs, so get before set...
+
+        if ( server?.data ) {
+          if ( definition.mangleWrite ) {
+            value = definition.mangleWrite(value);
+          }
+
+          if ( definition.parseJSON ) {
+            Vue.set(server.data, key, JSON.stringify(value));
+          } else {
+            Vue.set(server.data, key, value);
+          }
+
+          await server.save({ redirectUnauthorized: false });
+        }
+      } catch (e) {
+        // Well it failed, but not much to do about it...
+
+        // Return the error
+        return { type: e.type, status: e.status };
+      }
+    }
+  },
+
+  async setTheme({ dispatch }, val) {
+    await dispatch('set', { key: THEME, value: val });
+  },
+
+  loadCookies({ state, commit }) {
+    if ( state.cookiesLoaded ) {
+      return;
+    }
+
+    for (const key in definitions) {
+      const definition = definitions[key];
+
+      if ( !definition.asCookie ) {
+        continue;
+      }
+
+      const opt = { parseJSON: definition.parseJSON === true };
+      const value = this.$cookies.get(`${ cookiePrefix }${ key }`.toUpperCase(), opt);
+
+      if (value !== undefined) {
+        commit('load', { key, value });
+      }
+    }
+
+    commit('cookiesLoaded');
+  },
+
+  loadTheme({ state, dispatch }) {
+    if ( process.client ) {
+      const watchDark = window.matchMedia('(prefers-color-scheme: dark)');
+      const watchLight = window.matchMedia('(prefers-color-scheme: light)');
+      const watchNone = window.matchMedia('(prefers-color-scheme: no-preference)');
+
+      const interval = 30 * 60 * 1000;
+      const nextHalfHour = interval - Math.round(new Date().getTime()) % interval;
+
+      setTimeout(() => {
+        dispatch('loadTheme');
+      }, nextHalfHour);
+      // console.log('Update theme in', nextHalfHour, 'ms');
+
+      if ( watchDark.matches ) {
+        changed('dark');
+      } else if ( watchLight.matches ) {
+        changed('light');
+      } else {
+        changed(fromClock());
+      }
+
+      watchDark.addListener((e) => {
+        if ( e.matches ) {
+          changed('dark');
+        }
+      });
+
+      watchLight.addListener((e) => {
+        if ( e.matches ) {
+          changed('light');
+        }
+      });
+
+      watchNone.addListener((e) => {
+        if ( e.matches ) {
+          changed(fromClock());
+        }
+      });
+    }
+
+    function changed(value) {
+      // console.log('Prefers Theme:', value);
+      dispatch('set', { key: PREFERS_SCHEME, value });
+    }
+
+    function fromClock() {
+      const hour = new Date().getHours();
+
+      if ( hour < 7 || hour >= 18 ) {
+        return 'dark';
+      }
+
+      return 'light';
+    }
+  },
+
+  async loadServer({ state, dispatch, commit }, ignoreKey) {
+    let server = { data: {} };
+
+    try {
+      const all = await dispatch('management/findAll', {
+        type: STEVE.PREFERENCE,
+        opt:  {
+          url:                  'userpreferences',
+          force:                true,
+          watch:                false,
+          redirectUnauthorized: false,
+          stream:               false,
+        }
+      }, { root: true });
+
+      server = all?.[0];
+    } catch (e) {
+      console.error('Error loading preferences', e); // eslint-disable-line no-console
+
+      return;
+    }
+
+    if ( !server?.data ) {
+      return;
+    }
+
+    for (const key in definitions) {
+      const definition = definitions[key];
+      let value = clone(server.data[key]);
+
+      if ( value === undefined || key === ignoreKey) {
+        continue;
+      }
+
+      if ( definition.parseJSON ) {
+        try {
+          value = JSON.parse(value);
+        } catch (err) {
+          console.error('Error parsing server pref', key, value, err); // eslint-disable-line no-console
+          continue;
+        }
+      }
+
+      if ( definition.mangleRead ) {
+        value = definition.mangleRead(value);
+      }
+
+      commit('load', { key, value });
+    }
+
+    return server;
+  },
+
+  setLastVisited({ state, dispatch }, route) {
+    if (!route) {
+      return;
+    }
+
+    const toSave = getLoginRoute(route);
+
+    return dispatch('set', { key: LAST_VISITED, value: toSave });
+  },
+
+  toggleTheme({ getters, dispatch }) {
+    const value = getters[THEME] === 'light' ? 'dark' : 'light';
+
+    return dispatch('set', { key: THEME, value });
+  },
+
+  setBrandStyle({ rootState, rootGetters }, dark = false) {
+    if (rootState.managementReady) {
+      try {
+        const brandSetting = rootGetters['management/byId'](MANAGEMENT.SETTING, SETTING.BRAND);
+
+        if (brandSetting && brandSetting.value && brandSetting.value !== '') {
+          const brand = brandSetting.value;
+
+          const brandMeta = require(`~/assets/brand/${ brand }/metadata.json`);
+          const hasStylesheet = brandMeta.hasStylesheet === 'true';
+
+          if (hasStylesheet) {
+            document.body.classList.add(brand);
+          } else {
+            // TODO option apply color at runtime
+          }
+        }
+      } catch {}
+    }
+  }
+};
+
+function getLoginRoute(route) {
+  let parts = route.name?.split('-') || [];
+  const params = {};
+  const routeParams = route.params || {};
+
+  // Find the 'resource' part of the route, if it is there
+  const index = parts.findIndex(p => p === 'resource');
+
+  if (index >= 0) {
+    parts = parts.slice(0, index);
+  }
+
+  // Just keep the params that are needed
+  parts.forEach((param) => {
+    if (routeParams[param]) {
+      params[param] = routeParams[param];
+    }
+  });
+
+  return {
+    name: parts.join('-'),
+    params
+  };
+}