diff --git a/.gitignore b/.gitignore
index 9ac31ef56..5c2a18ef1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -66,6 +66,7 @@ node_modules/
 
 #vs code
 .vscode
+*.code-workspace
 
 #css
 public/css/style.css
diff --git a/public/css/style.scss b/public/css/style.scss
index c70021769..2688b553b 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -9,6 +9,20 @@
 }
 
 
+input[type="color"] {
+	-webkit-appearance: none;
+	border: none;
+	width: 32px;
+  height: 32px;
+  border-radius: var(--roundness);
+}
+input[type="color"]::-webkit-color-swatch-wrapper {
+	padding: 0;
+}
+input[type="color"]::-webkit-color-swatch {
+	border: none;
+}
+
 input{
   outline: none;
   border: none;
@@ -19,6 +33,17 @@ input{
   font-size: 1rem;
   line-height: 1rem;
   font-family: "Roboto Mono";
+  &.colorPicker {
+    text-align: center;
+    cursor: pointer;
+    will-change: padding;
+    transition: .1s ease-in-out padding;
+    width: 2rem;
+    height: 2rem;
+    &:hover {
+      padding: .3rem;
+    }
+  }
 }
 
 body {
@@ -1293,6 +1318,14 @@ key {
     grid-template-columns: 2fr 1fr;
     column-gap: 2rem;
     align-items: center;
+    &.customTheme {
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+      justify-items: stretch;
+      gap: .5rem;
+      & h1 {
+        grid-column: 1 / span 4;
+      }
+    }
     h1{
       font-size: 1rem;
       line-height: 1rem;
@@ -1411,7 +1444,10 @@ key {
         grid-area: tabs;
         display: flex;
         grid-template-columns: 1fr 1fr 9fr;
+        grid-area: tabs;
         .tab {
+          will-change: color;
+          transition: .2s ease-in-out color;
           outline: 0;
           cursor: pointer;
           padding: 0;
@@ -1423,7 +1459,7 @@ key {
           &:first-child{
             margin-right: .5rem;
           }
-          &.active {
+          &.active, &:hover {
             color: var(--main-color);
           }
         }
@@ -1638,4 +1674,3 @@ key {
 .hidden {
   display: none !important;
 }
-
diff --git a/public/index.html b/public/index.html
index 151a770ba..a70bb39ac 100644
--- a/public/index.html
+++ b/public/index.html
@@ -421,20 +421,33 @@
           </div>
         </div>
         <div class="section themes">
+          <h1>theme</h1>
           <div class='tabs'>
             <button class="tab">preset</button>
             <button class="tab">custom</button>
-            <div class="activeIndicator"></div>
           </div>
-          <h1>theme</h1>
-          <div class="buttons">
+          <div js-id="presetThemes" class="buttons">
           </div>
-          <div class="customTheme">
-            <p>enter the values for your own custom theme here</p>
-            <input class="colorSelector" type="color">
+          <div js-id="customThemes" class="section customTheme">
+            <h1>enter the values for your own custom theme here</h1>
+            <label class="text">background</label>
+            <input class="input colorPicker" type="color" value="#ff0000">
+            <label class="text">main</label>
+            <input class="input colorPicker" type="color" value="#00ff00">
+            <label class="text">caret</label>
+            <input class="input colorPicker" type="color" value="#ff00ff">
+            <label class="text">sub</label>
+            <input class="input colorPicker" type="color" value="#0000ff">
+            <label class="text">text</label>
+            <input class="input colorPicker" type="color" value="#f0f000">
+            <label class="text">error</label>
+            <input class="input colorPicker" type="color" value="#f000f0">
+            <label class="text">extra error</label>
+            <input class="input colorPicker" type="color" value="#00f0f0">
 
           </div>
         </div>
+        
 
 
         <div class="sectionSpacer"></div>