diff --git a/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.theme.scss b/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.theme.scss
index fb5bf0bee..7a8042a87 100644
--- a/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.theme.scss
+++ b/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.theme.scss
@@ -1,95 +1,95 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../../../styles/constants/palettes' as palettes;
-@use '../../../styles/breakpoints' as breakpoints;
-
-$gray-palette: map.get(palettes.$palettes, 'gray');
-$blue-palette: map.get(palettes.$palettes, 'blue');
-
-@mixin color($theme) {
-  cde-create-visualization-page {
-    h1,
-    h2,
-    h3,
-    h4 {
-      color: mat.get-theme-color($theme, accent, darker);
-    }
-
-    .page-nav .nav {
-      a {
-        color: mat.get-theme-color($theme, primary, 700);
-      }
+// @use 'sass:map';
+// @use '@angular/material' as mat;
+// @use '../../../styles/constants/palettes' as palettes;
+// @use '../../../styles/breakpoints' as breakpoints;
+
+// $gray-palette: map.get(palettes.$palettes, 'gray');
+// $blue-palette: map.get(palettes.$palettes, 'blue');
+
+// @mixin color($theme) {
+cde-create-visualization-page {
+  h1,
+  h2,
+  h3,
+  h4 {
+    // color: mat.get-theme-color($theme, accent, darker);
+  }
 
-      mat-icon,
-      span {
-        color: map.get($gray-palette, 700);
-      }
+  .page-nav .nav {
+    a {
+      color: var(--sys-on-background);
     }
 
-    .card {
-      background-color: white;
+    mat-icon,
+    span {
+      // color: map.get($gray-palette, 700);
+    }
+  }
 
-      .header {
-        .step-number {
-          background-color: map.get($blue-palette, 800);
-          color: white;
-        }
+  .card {
+    background-color: white;
 
-        .use-template {
-          color: mat.get-theme-color($theme, primary, 700);
-        }
+    .header {
+      .step-number {
+        // background-color: map.get($blue-palette, 800);
+        color: white;
       }
-    }
 
-    .data-upload {
-      td {
-        color: map.get($gray-palette, 700);
+      .use-template {
+        // color: mat.get-theme-color($theme, primary, 700);
       }
     }
+  }
 
-    .color-config {
-      mat-button-toggle-group {
-        border-color: map.get($gray-palette, 600);
-        --mat-standard-button-toggle-text-color: #{mat.get-theme-color($theme, accent, darker)};
-        --mat-standard-button-toggle-selected-state-background-color: rgb(
-          from #{mat.get-theme-color($theme, primary, 600)} r g b / 0.24
-        );
-      }
+  .data-upload {
+    td {
+      // color: map.get($gray-palette, 700);
+    }
+  }
 
-      mat-button-toggle {
-        &:first-child {
-          border-color: map.get($gray-palette, 600);
-        }
-      }
+  .color-config {
+    mat-button-toggle-group {
+      // border-color: map.get($gray-palette, 600);
+      // --mat-standard-button-toggle-text-color: #{mat.get-theme-color($theme, accent, darker)};
+      // --mat-standard-button-toggle-selected-state-background-color: rgb(
+      //   from #{mat.get-theme-color($theme, primary, 600)} r g b / 0.24
+      // );
+    }
 
-      .use-template {
-        color: mat.get-theme-color($theme, primary, 700);
+    mat-button-toggle {
+      &:first-child {
+        // border-color: map.get($gray-palette, 600);
       }
     }
 
-    .metadata {
-      --mdc-filled-text-field-label-text-color: #{map.get($gray-palette, 700)};
+    .use-template {
+      // color: mat.get-theme-color($theme, primary, 700);
     }
   }
 
-  .info-tooltip-panel {
-    background-color: white;
-    color: map.get($gray-palette, 600);
+  .metadata {
+    // --mdc-filled-text-field-label-text-color: #{map.get($gray-palette, 700)};
   }
+}
 
-  mat-form-field {
-    --mdc-filled-text-field-container-color: #{map.get($blue-palette, 500)};
-    --mdc-filled-text-field-focus-label-text-color: #{mat.get-theme-color($theme, primary, darker)};
-    --mdc-filled-text-field-label-text-color: #{map.get($gray-palette, 700)};
-    --mat-select-enabled-arrow-color: #{map.get($gray-palette, 700)};
-    --mat-select-focused-arrow-color: #{mat.get-theme-color($theme, primary, darker)};
-  }
+.info-tooltip-panel {
+  background-color: white;
+  // color: map.get($gray-palette, 600);
+}
+
+mat-form-field {
+  //   --mdc-filled-text-field-container-color: #{map.get($blue-palette, 500)};
+  //   --mdc-filled-text-field-focus-label-text-color: #{mat.get-theme-color($theme, primary, darker)};
+  //   --mdc-filled-text-field-label-text-color: #{map.get($gray-palette, 700)};
+  //   --mat-select-enabled-arrow-color: #{map.get($gray-palette, 700)};
+  //   --mat-select-focused-arrow-color: #{mat.get-theme-color($theme, primary, darker)};
+  // }
 
   .select-panel {
-    --mat-option-selected-state-layer-color: #{mat.get-theme-color($theme, accent, lighter)};
-    --mat-option-label-text-color: #{map.get($gray-palette, 700)};
-    --mat-option-selected-state-label-text-color: #{mat.get-theme-color($theme, accent, darker)};
-    --mat-minimal-pseudo-checkbox-selected-checkmark-color: #{mat.get-theme-color($theme, primary, 700)};
+    // --mat-option-selected-state-layer-color: #{mat.get-theme-color($theme, accent, lighter)};
+    // --mat-option-label-text-color: #{map.get($gray-palette, 700)};
+    // --mat-option-selected-state-label-text-color: #{mat.get-theme-color($theme, accent, darker)};
+    // --mat-minimal-pseudo-checkbox-selected-checkmark-color: #{mat.get-theme-color($theme, primary, 700)};
   }
 
   .visualize-notification {
@@ -98,23 +98,23 @@ $blue-palette: map.get(palettes.$palettes, 'blue');
 
   .upload-errors {
     .error-message {
-      color: #{mat.get-theme-color($theme, primary, darker)};
+      // color: #{mat.get-theme-color($theme, primary, darker)};
     }
     .error-instructions {
-      color: #{map.get($gray-palette, 700)};
+      // color: #{map.get($gray-palette, 700)};
     }
   }
-}
+  // }
 
-@mixin typography($theme) {
-}
+  // @mixin typography($theme) {
+  // }
 
-@mixin theme($theme) {
-  @if mat.theme-has($theme, color) {
-    @include color($theme);
-  }
+  // @mixin theme($theme) {
+  //   @if mat.theme-has($theme, color) {
+  //     @include color($theme);
+  //   }
 
-  @if mat.theme-has($theme, typography) {
-    @include typography($theme);
-  }
+  //   @if mat.theme-has($theme, typography) {
+  //     @include typography($theme);
+  //   }
 }
diff --git a/apps/cde-ui/src/styles.scss b/apps/cde-ui/src/styles.scss
index d8ac7521c..15d46c199 100644
--- a/apps/cde-ui/src/styles.scss
+++ b/apps/cde-ui/src/styles.scss
@@ -1,16 +1,17 @@
-@use './styles/cta' as cta;
-@use './styles/global/resets';
-@use './styles/global/fonts';
-@use './styles/material-theming';
+// @use './styles/cta' as cta;
+// @use './styles/global/resets';
+// @use './styles/global/fonts';
+// @use './styles/material-theming';
 @use 'light-theme';
 @use 'theming';
+@use '../src/app/pages/create-visualization-page/create-visualization-page.component.theme.scss' as create-visualization;
+
+@mixin theme($theme) {
+  @include create-visualization.theme($theme);
+}
 
 // TODO Update and switch to design system theming
-// html {
-//   @include theming.theme(light-theme.$theme);
-// }
-// Only enabled for the footer at the moment
-hra-footer {
+html {
   @include theming.theme(light-theme.$theme);
 }
 
@@ -33,43 +34,43 @@ a {
   text-decoration: none;
 }
 
-.cta-filled {
-  @include cta.filledDefault();
+// .cta-filled {
+//   @include cta.filledDefault();
 
-  &:hover {
-    @include cta.filledHover();
-  }
+//   &:hover {
+//     @include cta.filledHover();
+//   }
 
-  &:active {
-    @include cta.filledActive();
-  }
+//   &:active {
+//     @include cta.filledActive();
+//   }
 
-  &:focus-visible {
-    --mdc-filled-button-label-text-color: rgba(32, 30, 61, 1);
-    color: var(--mdc-filled-button-label-text-color);
-  }
+//   &:focus-visible {
+//     --mdc-filled-button-label-text-color: rgba(32, 30, 61, 1);
+//     color: var(--mdc-filled-button-label-text-color);
+//   }
 
-  &:focus-visible::after {
-    @include cta.filledFocus();
-  }
-}
+//   &:focus-visible::after {
+//     @include cta.filledFocus();
+//   }
+// }
 
-.cta-flat {
-  @include cta.flatDefault();
+// .cta-flat {
+//   @include cta.flatDefault();
 
-  &:hover {
-    @include cta.flatHover();
-  }
+//   &:hover {
+//     @include cta.flatHover();
+//   }
 
-  &:active {
-    @include cta.flatActive();
-  }
+//   &:active {
+//     @include cta.flatActive();
+//   }
 
-  &:focus-visible {
-    @include cta.flatFocus();
-  }
-}
+//   &:focus-visible {
+//     @include cta.flatFocus();
+//   }
+// }
 
-.selected {
-  box-shadow: 0 -2px 0 #e00d3a inset;
-}
+// .selected {
+//   box-shadow: 0 -2px 0 #e00d3a inset;
+// }