diff --git a/docs/_layouts/palette.njk b/docs/_layouts/palette.njk
index 8ebcd7c42..5b9999a4d 100644
--- a/docs/_layouts/palette.njk
+++ b/docs/_layouts/palette.njk
@@ -37,19 +37,21 @@
 
   <h1 class="title">
     <span v-content="saved?.title || (step > 0 ? defaultPaletteTitle : paletteTitle)">{{ title }}</span>
-    <wa-icon-button v-if="saved || step > 0" name="pencil" label="Rename palette" @click="rename"></wa-icon-button>
-    <wa-icon-button v-if="saved" class="delete" name="trash" label="Delete palette" @click="deleteSaved"></wa-icon-button>
-    <wa-button v-if="saved || step > 0" @click="save()" :disabled="!unsavedChanges"
-      variant="success" size="small">
-      <span slot="prefix" class="icon-modifier">
-        <wa-icon name="sidebar" variant="regular"></wa-icon>
-        <wa-icon name="circle-plus" class="modifier" style="color: light-dark(var(--wa-color-green-70), var(--wa-color-green-60));"></wa-icon>
-      </span>
-      <span v-content="unsavedChanges ? 'Save' : 'Saved'">Save</span>
-    </wa-button>
+    <template v-if="saved || step > 0">
+      <wa-icon-button name="pencil" label="Rename palette" @click="rename"></wa-icon-button>
+      <wa-icon-button v-if="saved" class="delete" name="trash" label="Delete palette" @click="deleteSaved"></wa-icon-button>
+      <wa-button @click="save()" :disabled="!unsavedChanges"
+        variant="success" size="small">
+        <span slot="prefix" class="icon-modifier">
+          <wa-icon name="sidebar" variant="regular"></wa-icon>
+          <wa-icon name="circle-plus" class="modifier" style="color: light-dark(var(--wa-color-green-70), var(--wa-color-green-60));"></wa-icon>
+        </span>
+        <span v-content="unsavedChanges ? 'Save' : 'Saved'">Save</span>
+      </wa-button>
+    </template>
   </h1>
 
-  <div class="block-info" v-if="saved || !isCustom || step > 0">
+  <div class="block-info" v-if="saved || !isCustom || step > 0" v-cloak>
     <code class="class">.wa-palette-<span v-content="slug">{{ page.fileSlug }}</span></code>
     {% include '../_includes/status.njk' %}
     {% if not isPro %}
diff --git a/docs/docs/palettes/app/custom.css b/docs/docs/palettes/app/custom.css
index eb4f1e4f8..ee0a486e3 100644
--- a/docs/docs/palettes/app/custom.css
+++ b/docs/docs/palettes/app/custom.css
@@ -1,6 +1,6 @@
 #seed-colors {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(21ch, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(22ch, 1fr));
   gap: var(--wa-space-m);
 
   > .add-button {
@@ -57,6 +57,8 @@
     wa-icon-button {
       color: light-dark(black, white);
       transition: opacity var(--wa-transition-slow);
+      --background-color-hover: oklab(from currentColor l a b / 15%);
+      --text-color-hover: currentColor;
     }
 
     .delete-button {