diff --git a/frontend/src/components/ColorIndex.svelte b/frontend/src/components/ColorIndex.svelte
index 96b8b67..95247f8 100644
--- a/frontend/src/components/ColorIndex.svelte
+++ b/frontend/src/components/ColorIndex.svelte
@@ -1,6 +1,6 @@
 <script lang='ts'>
   import { Button } from "carbon-components-svelte";
-  import { Add, ColorSwitch } from "carbon-icons-svelte";
+  import { AddLarge, ColorSwitch } from "carbon-icons-svelte";
   import { ReplaceSwatchUndoable, type LoadedFile, AddSwatchUndoable } from "../types/file";
   import { createEventDispatcher } from "svelte";
 
@@ -22,11 +22,13 @@
   function addSwatch() {
     file.push(new AddSwatchUndoable(red, green, blue, alpha))
     dispatch('refresh', {})
+    ;(document.activeElement as HTMLElement).blur()
   }
 
   function replaceSwatch() {
     file.push(new ReplaceSwatchUndoable(index, red, green, blue, alpha))
     dispatch('refresh', {})
+    ;(document.activeElement as HTMLElement).blur()
   }
 </script>
 
@@ -35,7 +37,7 @@
     <div class="label" style="color: rgb({255-red}, {255-green}, {255-blue})">{index}</div>
   </div>
   <Button kind="ghost" size="small" disabled={swatchExists} iconDescription="replace swatch" tooltipPosition="top" icon={ColorSwitch} on:click={replaceSwatch}></Button>
-  <Button kind="ghost" size="small" disabled={swatchExists} iconDescription="add swatch" tooltipPosition="top" icon={Add} on:click={addSwatch}></Button>
+  <Button kind="ghost" size="small" disabled={swatchExists} iconDescription="add swatch" tooltipPosition="top" icon={AddLarge} on:click={addSwatch}></Button>
 </main>
 
 <style>