diff --git a/src/App.svelte b/src/App.svelte
index 5a4848c..04040ac 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -362,9 +362,14 @@
       <div class="btn-div">
         <button on:click={() => colors = [...colors, "#90A4AE"]}>+</button>
         {#each colors as color, idx}
+        <div class="color-picker-div">
           <button class="color-picker" on:click={() => ci = idx} aria-label="color" class:selected={ci === idx}>
-            <input type="color" value={color} on:input={e => { colors[idx] = e.target.value; updateColors() }}/>
+            <div class="color" style={`background-color: ${color}`} role="none"
+              on:click={() => document.getElementById(`color-picker-${idx}`)!.click()}></div>
           </button>
+          <input type="color" value={color} id={`color-picker-${idx}`}
+            on:input={e => { colors[idx] = e.target.value; updateColors() }}/>
+        </div>
         {/each}
       </div>
     {/if}
diff --git a/src/app.sass b/src/app.sass
index 43be335..c61e0fd 100644
--- a/src/app.sass
+++ b/src/app.sass
@@ -98,20 +98,31 @@ main
   flex-wrap: wrap
   place-items: center
 
-.color-picker
-  display: flex
-  flex-direction: column
-  padding: 1em 0 0 0
-  overflow: hidden
-  height: 42px
-  width: 30px
+.color-picker-div
+  position: relative
 
-  &.selected
-    border-color: colors.$accent
+  .color-picker
+    display: flex
+    align-items: flex-end
+    padding: 0
+    overflow: hidden
+    height: 42px
+    width: 30px
+
+    &.selected
+      border-color: colors.$accent
+
+    .color
+      height: 60%
+      width: 100%
+      z-index: 10
 
   input
-    padding: 0
-    border: 0
+    max-height: 0
+    opacity: 0
+    position: absolute
+    bottom: 0
+    z-index: -10
 
 @import url('https://fonts.googleapis.com/css2?family=Teko&display=swap')
 .timer