diff --git a/src/example/ExampleWrapper.svelte b/src/example/ExampleWrapper.svelte
index a5644997..f15cfcc8 100644
--- a/src/example/ExampleWrapper.svelte
+++ b/src/example/ExampleWrapper.svelte
@@ -9,9 +9,9 @@
   export let idx: number;
   export let bg: string;
   export let clickExample: (example: any, idx: number) => void;
-
-  let operations = [
-    { name: "Edit", action: () => clickExample(example, idx), condition: true },
+  $: size = example.size || 250;
+  $: operations = [
+    { name: "Edit", action: () => clickExample(example, idx) },
     {
       name: "Delete",
       action: () => exampleStore.deleteExample(idx),
@@ -22,11 +22,7 @@
       action: () => exampleStore.toggleHidden(idx),
       condition: true,
     },
-    {
-      name: "Expand",
-      action: () => exampleStore.setExampleSize(idx, 600),
-      condition: true,
-    },
+
     {
       name: "Focus (expand and hide others)",
       action: () => {
@@ -35,10 +31,20 @@
       },
       condition: true,
     },
+    {
+      name: "Expand",
+      action: () => exampleStore.setExampleSize(idx, 600),
+      condition: size !== 600,
+    },
+    {
+      name: "Reset size",
+      action: () => exampleStore.setExampleSize(idx, 250),
+      condition: size !== 250,
+    },
     {
       name: "Shrink",
       action: () => exampleStore.setExampleSize(idx, 50),
-      condition: true,
+      condition: size !== 50,
     },
   ].filter((x) => x.condition);
 </script>
@@ -60,7 +66,7 @@
       <button slot="target" class={buttonStyle} let:toggle on:click={toggle}>
         Options ⚙
       </button>
-      <div slot="content">
+      <div slot="content" class="flex flex-col items-start">
         {#each operations as { name, action }}
           <button class={buttonStyle} on:click={action}>{name}</button>
         {/each}
diff --git a/src/example/Examples.svelte b/src/example/Examples.svelte
index 6969ac7f..accecbda 100644
--- a/src/example/Examples.svelte
+++ b/src/example/Examples.svelte
@@ -87,19 +87,6 @@
   $: groupsHidden = Object.keys(sections).filter((x) => !sections[x]).length;
   $: hiddenExamples = $exampleStore.examples.filter((x: any) => x.hidden);
   $: numberHidden = hiddenExamples.length + groupsHidden;
-
-  $: numToShow = $exampleStore.examples.filter((x: any) => {
-    if (x.hidden) {
-      return false;
-    }
-    if (sections.svg && x?.svg) {
-      return true;
-    }
-    if (sections.vega && x.vega) {
-      return true;
-    }
-    return false;
-  }).length;
 </script>
 
 <div class="flex items-center bg-stone-300 px-4 py-2">
@@ -171,49 +158,14 @@
   class="flex flex-wrap overflow-auto p-4 w-full bg-stone-100"
   style={`height: calc(100% - 100px)`}
 >
+  {#if $exampleStore.sections["swatches"]}
+    <Swatches />
+  {/if}
   {#each examples as example, idx}
     {#if exampleShowMap[idx]}
       <ExampleWrapper {example} {idx} bg={bg.toHex()} {clickExample} />
     {/if}
   {/each}
-  {#if $exampleStore.sections["swatches"]}
-    <div class="mr-4 mb-2">
-      <div class="bg-stone-300 w-full justify-between flex p-1">
-        Swatches
-        <Tooltip>
-          <button
-            slot="target"
-            class={buttonStyle}
-            let:toggle
-            on:click={toggle}
-          >
-            Options
-          </button>
-          <div slot="content">
-            <button
-              class={buttonStyle}
-              on:click={() => {
-                onToggle("swatches");
-              }}
-            >
-              Hide
-            </button>
-            {#if numToShow > 1}
-              <button
-                class={buttonStyle}
-                on:click={() => {
-                  exampleStore.onlySwatches();
-                }}
-              >
-                Focus
-              </button>
-            {/if}
-          </div>
-        </Tooltip>
-      </div>
-      <Swatches />
-    </div>
-  {/if}
 </div>
 {#if modalState !== "closed"}
   <Modal
diff --git a/src/example/Swatches.svelte b/src/example/Swatches.svelte
index 98153444..7c3441bd 100644
--- a/src/example/Swatches.svelte
+++ b/src/example/Swatches.svelte
@@ -3,7 +3,9 @@
   import colorStore from "../stores/color-store";
   import focusStore from "../stores/focus-store";
   import Tooltip from "../components/Tooltip.svelte";
+  import exampleStore from "../stores/example-store";
   import SwatchTooltipContent from "../components/SwatchTooltipContent.svelte";
+  import { buttonStyle } from "../lib/styles";
 
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
   $: colors = currentPal.colors;
@@ -29,85 +31,121 @@
       selectionClass: "relative top-1 left-1",
     },
   ];
+
+  $: sections = $exampleStore.sections as any;
+  $: numToShow = $exampleStore.examples.filter((x: any) => {
+    if (x.hidden) {
+      return false;
+    }
+    if (sections.svg && x?.svg) {
+      return true;
+    }
+    if (sections.vega && x.vega) {
+      return true;
+    }
+    return false;
+  }).length;
 </script>
 
-<div
-  class="flex flex-col p-4 flex-initial"
-  style={`background-color: ${bg.toHex()}; max-width: 600px`}
->
-  <div class="flex mb-2 justify-between items-center">
-    <!-- <span class="text-sm flex flex-col" class:text-white={bg.luminance() < 0.5}>
-      <span>Click to modify colors</span>
-      <span>Hold shift to select multiple</span>
-    </span> -->
-  </div>
-  {#each classes as { className, styleMap, selectionClass }}
-    <div class="flex justify-center flex-wrap">
-      {#each colors as color, idx}
-        <Tooltip top={"100px"} allowDrag={true}>
-          <div slot="content" class="flex flex-col" let:onClick>
-            <SwatchTooltipContent {color} closeTooltip={onClick} {idx} />
-          </div>
+<div class="mr-4 mb-2">
+  <div class="bg-stone-300 w-full justify-between flex p-1">
+    Swatches
+    <Tooltip>
+      <button slot="target" class={buttonStyle} let:toggle on:click={toggle}>
+        Options
+      </button>
+      <div slot="content">
+        <button
+          class={buttonStyle}
+          on:click={() => exampleStore.toggleSection("swatches")}
+        >
+          Hide
+        </button>
+        {#if numToShow > 1}
           <button
-            let:toggle
-            let:tooltipOpen
-            slot="target"
-            class={`${className} ${focusSet.has(idx) ? selectionClass : ""}`}
-            style={`${styleMap(color)}`}
-            on:click={(e) => {
-              const isFocused = focusSet.has(idx);
-              const shiftKey = e.shiftKey;
-              if (!tooltipOpen && !isFocused) {
-                if (shiftKey) {
-                  focusStore.addColor(idx);
-                } else {
-                  focusStore.setColors([idx]);
-                }
-                toggle();
-              } else if (!tooltipOpen && isFocused) {
-                if (shiftKey) {
-                  focusStore.toggleColor(idx);
-                } else {
-                  focusStore.clearColors();
-                }
-              } else if (tooltipOpen && !isFocused) {
-                if (shiftKey) {
-                  focusStore.addColor(idx);
-                } else {
-                  focusStore.setColors([idx]);
-                }
-              } else {
-                toggle();
-                if (shiftKey) {
-                  focusStore.toggleColor(idx);
+            class={buttonStyle}
+            on:click={() => {
+              exampleStore.onlySwatches();
+            }}
+          >
+            Focus
+          </button>
+        {/if}
+      </div>
+    </Tooltip>
+  </div>
+  <div
+    class="flex flex-col p-4 flex-initial"
+    style={`background-color: ${bg.toHex()}; max-width: 600px`}
+  >
+    {#each classes as { className, styleMap, selectionClass }}
+      <div class="flex justify-center flex-wrap">
+        {#each colors as color, idx}
+          <Tooltip top={"100px"} allowDrag={true}>
+            <div slot="content" class="flex flex-col" let:onClick>
+              <SwatchTooltipContent {color} closeTooltip={onClick} {idx} />
+            </div>
+            <button
+              let:toggle
+              let:tooltipOpen
+              slot="target"
+              class={`${className} ${focusSet.has(idx) ? selectionClass : ""}`}
+              style={`${styleMap(color)}`}
+              on:click={(e) => {
+                const isFocused = focusSet.has(idx);
+                const shiftKey = e.shiftKey;
+                if (!tooltipOpen && !isFocused) {
+                  if (shiftKey) {
+                    focusStore.addColor(idx);
+                  } else {
+                    focusStore.setColors([idx]);
+                  }
+                  toggle();
+                } else if (!tooltipOpen && isFocused) {
+                  if (shiftKey) {
+                    focusStore.toggleColor(idx);
+                  } else {
+                    focusStore.clearColors();
+                  }
+                } else if (tooltipOpen && !isFocused) {
+                  if (shiftKey) {
+                    focusStore.addColor(idx);
+                  } else {
+                    focusStore.setColors([idx]);
+                  }
                 } else {
-                  focusStore.clearColors();
+                  toggle();
+                  if (shiftKey) {
+                    focusStore.toggleColor(idx);
+                  } else {
+                    focusStore.clearColors();
+                  }
                 }
-              }
-            }}
-          ></button>
-        </Tooltip>
+              }}
+            ></button>
+          </Tooltip>
+        {/each}
+      </div>
+    {/each}
+    <div class="flex flex-wrap justify-center">
+      {#each colors as color, i}
+        <button
+          style={`color: ${color.toHex()}; transform: rotate(${
+            focusSet.has(i) ? 10 : 0
+          }deg)`}
+          class="mr-2 w-16"
+          on:click={(e) => {
+            const isMeta = e.metaKey || e.shiftKey || e.ctrlKey;
+            if (isMeta) {
+              focusStore.toggleColor(i);
+            } else {
+              focusStore.setColors(focusSet.has(i) ? [] : [i]);
+            }
+          }}
+        >
+          {color.toHex()}
+        </button>
       {/each}
     </div>
-  {/each}
-  <div class="flex flex-wrap justify-center">
-    {#each colors as color, i}
-      <button
-        style={`color: ${color.toHex()}; transform: rotate(${
-          focusSet.has(i) ? 10 : 0
-        }deg)`}
-        class="mr-2 w-16"
-        on:click={(e) => {
-          const isMeta = e.metaKey || e.shiftKey || e.ctrlKey;
-          if (isMeta) {
-            focusStore.toggleColor(i);
-          } else {
-            focusStore.setColors(focusSet.has(i) ? [] : [i]);
-          }
-        }}
-      >
-        {color.toHex()}
-      </button>
-    {/each}
   </div>
 </div>