diff --git a/styles/wizard.css b/styles/wizard.css
index 12840aa..8ca7d4c 100644
--- a/styles/wizard.css
+++ b/styles/wizard.css
@@ -273,6 +273,11 @@
     max-width: 15rem;
     width: 80%;
     padding: 2rem 1rem;
+    transition: 200ms var(--cubic-ease-out);
+}
+
+.hidden .color-selection {
+    padding: 0 1rem;
 }
 
 .color-selection > div {
@@ -288,6 +293,10 @@
     scale: 1.1;
 }
 
+.hidden .color-selection > div {
+    width: 0;
+}
+
 #custom-color {
     display: flex;
     justify-content: center;
@@ -313,12 +322,18 @@
     max-width: 15rem;
     width: 80%;
     padding: 0rem 1rem 1rem;
+    transition: 200ms var(--cubic-ease-out);
 }
 
 .switch-container:hover {
     cursor: pointer;
 }
 
+.hidden .switch-container {
+    font-size: 0;
+    padding: 0;
+}
+
 .switch {
     position: relative;
     width: 4rem;
@@ -326,6 +341,11 @@
     border-radius: 1rem;
     border: 1px solid var(--background-text-color);
     margin-right: 1rem;
+    transition: 200ms var(--cubic-ease-out);
+}
+
+.hidden .switch {
+    height: 0;
 }
 
 .switch::after {