Update src/App.svelte

src/App.svelte

@@ -299,12 +299,26 @@
     {:else} Loading… {/if}
   </div>
 
-  <!-- Modifier buttons (affect bottom plot) -->
-  <div class="switcher" role="tablist" aria-label="Choose modifier for comparison below" style="margin-bottom:14px;">
-    <button class:selected={mod==='anti'} aria-selected={mod==='anti'} on:click={() => mod='anti'}>Anti-Spike</button>
-    <button class:selected={mod==='veggie'} aria-selected={mod==='veggie'} on:click={() => mod='veggie'}>Veggie Starter</button>
+  <!-- Modifier buttons (affect bottom plot) — with images -->
+  <div class="switcher imgs" role="tablist" aria-label="Choose modifier for comparison below" style="margin-bottom:14px;">
+    <button class="imgbtn" class:selected={mod==='anti'}
+            aria-selected={mod==='anti'}
+            on:click={() => mod='anti'}
+            title="Anti-Spike" aria-label="Anti-Spike">
+      <img src="/antispike.png" alt="Anti-Spike" />
+      <span>Anti-Spike</span>
+    </button>
+  
+    <button class="imgbtn" class:selected={mod==='veggie'}
+            aria-selected={mod==='veggie'}
+            on:click={() => mod='veggie'}
+            title="Veggie Starter" aria-label="Veggie Starter">
+      <img src="/broccoli.png" alt="Veggie Starter" />
+      <span>Veggie Starter</span>
+    </button>
   </div>
 
+
   <!-- =================== BOTTOM: Food + modifier =================== -->
   <div class="card" style="position:relative; margin-bottom:6px;">
     {#if loaded}
@@ -358,9 +372,5 @@
     {:else} Loading… {/if}
   </div>
 
-  <!-- Duplicate modifier buttons below the bottom plot (as requested) -->
-  <div class="switcher" role="tablist" aria-label="Choose modifier (bottom)">
-    <button class:selected={mod==='anti'} aria-selected={mod==='anti'} on:click={() => mod='anti'}>Anti-Spike</button>
-    <button class:selected={mod==='veggie'} aria-selected={mod==='veggie'} on:click={() => mod='veggie'}>Veggie Starter</button>
-  </div>
+
 </div>