diff --git a/packages/css-theme/src/components/_draft-configurator.scss b/packages/css-theme/src/components/_draft-configurator.scss
index ec462731a5f..93ab66d68f8 100644
--- a/packages/css-theme/src/components/_draft-configurator.scss
+++ b/packages/css-theme/src/components/_draft-configurator.scss
@@ -1,135 +1,187 @@
-ul.config {
-  @include button-font;
-  padding: 0;
-}
-ul.config.l1 {
-  overflow-x: hidden;
-}
-ul.config.l2,
-ul.config.l3,
-ul.config.l4 {
-  margin: 0;
+ul#draft-config {
+  margin: 1rem 0;
   padding: 0;
+  div.collapsed {
+    display: none;
+  }
+  span.dflt,
+  span.p-dflt,
+  span.custom {
+    padding: 2px 4px;
+    border-radius: 4px;
+  }
+  button.mini-icon-btn {
+    margin: 0;
+    padding: 2px;
+  }
+  svg.icon-col-exp {
+    margin-bottom: -5px;
+    margin-right: 5px;
+    transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
+    opacity: 0.4;
+  }
+  svg.icon-col-exp.expanded {
+    transform: rotate(90deg);
+    opacity: 1;
+  }
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+  li {
+    list-style-type: none;
+  }
+  > li {
+    padding: 0.25rem 0;
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 500;
+    > span {
+      padding: 1rem;
+      svg {
+        padding-right: 0.5rem;
+        margin-bottom: -4px;
+      }
+    }
+  }
+  ul.config.level-1 > li {
+    font-size: 1.25rem;
+    font-weight: normal;
+    > div {
+      padding: 0.2rem 0.5rem 0.1rem 1rem;
+    }
+    > span {
+      padding: 0.2rem 0.5rem 0.1rem 1rem;
+      display: block;
+      svg {
+        margin-bottom: -5px;
+      }
+    }
+    > div:first-of-type > div:last-of-type {
+      font-size: 0.9rem;
+    }
+    > div.col-exp {
+      padding: 0.2rem 0.5rem 0.1rem 2rem;
+      font-size: 1.1rem;
+    }
+    > div.col-exp:hover {
+      background-color: inherit;
+    }
+  }
+  ul.config.level-2 > li {
+    font-size: 1.15rem;
+    font-weight: normal;
+    > span,
+    > div:first-of-type {
+      padding: 0.3rem 0.5rem 0.2rem 2rem;
+      line-height: 1;
+      display: block;
+    }
+    > div:first-of-type:hover,
+    > span:hover {
+      cursor: pointer;
+    }
+    > div.col-exp.expanded {
+      padding: 0 1rem 0 3rem;
+      font-size: 1.1rem;
+    }
+    span.subheading {
+      padding-left: 2.5rem;
+    }
+    span.subheading:after {
+      content: '...';
+    }
+    span.subheading:after {
+      content: '...';
+    }
+    > div:first-of-type > div:last-of-type {
+      font-size: 0.9rem;
+    }
+  }
+  ul.config.level-2 > li.expanded > div.col-exp {
+    padding-bottom: 1rem;
+  }
+  ul.config.level-3 > li {
+    font-size: 1.1rem;
+    font-weight: normal;
+    > div:first-of-type {
+      padding: 0.3rem 0.5rem 0.2rem 3rem;
+      line-height: 1.2;
+      display: block;
+    }
+    > div:first-of-type:hover,
+    > span:hover {
+      cursor: pointer;
+    }
+    > div.col-exp.expanded {
+      padding: 0 1rem 0 3rem;
+      font-size: 1rem;
+    }
+    > div:first-of-type > div:last-of-type {
+      font-size: 0.9rem;
+    }
+  }
 }
 
-ul.config li {
-  list-style-type: none;
+.theme-wrapper.light ul#draft-config {
+  color: $oc-gray-7;
+  > li > span > svg {
+    color: $oc-violet-5;
+  }
+  span.custom {
+    background: $oc-yellow-1;
+    border: 1px solid $oc-yellow-2;
+  }
+  span.p-dflt {
+    background: $oc-green-1;
+    border: 1px solid $oc-green-2;
+  }
+  button.mini-icon-btn.recipe:enabled {
+    color: $oc-blue-7;
+  }
+  button.mini-icon-btn.pattern:enabled {
+    color: $oc-green-8;
+  }
+  span.subheading:hover,
+  li.collapsed:hover,
+  ul.config.level-1 > li > span:hover {
+    background-color: $oc-gray-2;
+  }
+  ul.config.level-3 > li {
+    > div:first-of-type:hover,
+    > span:hover {
+      background-color: $oc-gray-2;
+    }
+  }
 }
-
-/* level 1 */
-ul.config.l1 > li > span {
-  display: block;
-  padding: 0.25rem 1rem;
-  font-weight: bold;
-  text-transform: uppercase;
-  border-bottom: 1px solid $oc-gray-6;
-  margin: 0.5rem 0;
-}
-
-/* level 2 */
-ul.config.l2 > li.collapsed > span,
-ul.config.l2 > li.expanded > span {
-  display: block;
-  padding: 0.5rem 1rem;
-  font-weight: bold;
-}
-
-ul.config.l2 > li > span:hover {
-  cursor: pointer;
-  background: $oc-gray-5;
-}
-
-/* level 3 */
-div.collapsed {
-  display: none;
-}
-ul.config.l2 > li > div,
-ul.config.l3 > li > div,
-ul.config.l4 > li > div {
-  padding: 0.25rem 1.5rem 0.25rem 1.5rem;
-}
-ul.config.l3 > li > div.expanded,
-ul.config.l4 > li > div.expanded {
-  margin: 0 0 2rem 0;
-  padding: 0.75 0.5rem 1.5rem;
-}
-ul.config.l2 > li > div:hover,
-ul.config.l3 > li > div:hover,
-ul.config.l4 > li > div:hover {
-  cursor: pointer;
-  background: $oc-gray-4;
-}
-ul.config.l2 > li > div.expanded:hover,
-ul.config.l3 > li > div.expanded:hover {
-  background: initial;
-  cursor: initial;
-}
-div.expanded div.MuiSlider-container {
-  width: initial;
-  margin: 0;
-  overflow: initial;
-}
-ul.config p {
-  @include body-font;
-}
-
-/* level 4 */
-ul.config.l3 li span.subheading {
-  padding-left: 2rem;
-  font-weight: bold;
-}
-ul.config.l4 > li > div {
-  padding-left: 2.5rem;
-}
-
-span.dflt,
-span.p-dflt,
-span.custom {
-  padding: 2px 4px;
-  border-radius: 4px;
-}
-.theme-wrapper.light span.custom {
-  background: $oc-orange-2;
-}
-.theme-wrapper.dark span.custom {
-  color: $oc-yellow-8;
-}
-.theme-wrapper.light span.p-dflt {
-  background: $oc-green-2;
-}
-.theme-wrapper.dark span.p-dflt {
-  color: $oc-green-6;
-}
-.theme-wrapper.light div.col-exp.expanded {
-  border-left: 4px solid $fc-text-light;
-}
-.theme-wrapper.dark div.col-exp.expanded {
-  border-left: 4px solid $fc-text-dark;
-}
-
-svg.icon-col-exp {
-  margin-bottom: -5px;
-  margin-right: 5px;
-  transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
-  opacity: 0.4;
-}
-svg.icon-col-exp.expanded {
-  transform: rotate(90deg);
-  opacity: 1;
-}
-button.mini-icon-btn {
-  margin: 0;
-  padding: 2px;
-}
-.theme-wrapper.light button.mini-icon-btn.recipe:enabled {
-  color: $oc-blue-7;
-}
-.theme-wrapper.light button.mini-icon-btn.pattern:enabled {
-  color: $oc-green-8;
-}
-.theme-wrapper.dark button.mini-icon-btn.recipe:enabled {
-  color: $oc-blue-5;
-}
-.theme-wrapper.dark button.mini-icon-btn.pattern:enabled {
-  color: $oc-green-6;
+.theme-wrapper.dark ul#draft-config {
+  color: $oc-gray-3;
+  > li > span > svg {
+    color: $oc-violet-3;
+  }
+  span.custom {
+    background: $oc-yellow-8;
+    border: 1px solid $oc-yellow-9;
+  }
+  span.p-dflt {
+    background: $oc-green-8;
+    border: 1px solid $oc-green-9;
+  }
+  button.mini-icon-btn.recipe:enabled {
+    color: $oc-blue-7;
+  }
+  button.mini-icon-btn.pattern:enabled {
+    color: $oc-green-8;
+  }
+  span.subheading:hover,
+  li.collapsed:hover,
+  ul.config.level-1 > li > span:hover {
+    background-color: $oc-gray-9;
+  }
+  ul.config.level-3 > li {
+    > div:first-of-type:hover,
+    > span:hover {
+      background-color: $oc-gray-9;
+    }
+  }
 }