diff --git a/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx b/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx
index 49219f46b..ad375f8d0 100644
--- a/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx
+++ b/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx
@@ -26,16 +26,26 @@ export const All = {
     <>
       <StoryHeader>
         <h1>All Icons</h1>
-        <p>Hover on an icon to see its ID.</p>
       </StoryHeader>
-      <StoryGrid>
+      <StoryGrid size="256">
         {icons.map((iconId) => (
           <StoryGridCell
-            title={iconId}
             key={iconId}
-            style={{ color: "var(--color-accent-primary)" }}
+            style={{
+              color: "var(--color-accent-primary)",
+              display: "grid",
+              gap: "0.5rem",
+            }}
           >
             <Icon id={iconId} size={size} />
+            <code
+              style={{
+                "font-family": "monospace",
+                color: "var(--color-foreground-secondary)",
+              }}
+            >
+              {iconId}
+            </code>
           </StoryGridCell>
         ))}
       </StoryGrid>
diff --git a/frontend/src/app/main/ui/ds/storybook.scss b/frontend/src/app/main/ui/ds/storybook.scss
index 167fe085c..0bd5c45e9 100644
--- a/frontend/src/app/main/ui/ds/storybook.scss
+++ b/frontend/src/app/main/ui/ds/storybook.scss
@@ -16,6 +16,7 @@
 
 .story-header {
   color: var(--color-foreground-primary);
+  margin-bottom: 1rem;
 }
 
 .story-grid-row {