diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--pseudo-states--dark.png b/frontend/__snapshots__/lemon-ui-lemon-button--pseudo-states--dark.png
new file mode 100644
index 0000000000000..bda6b87f52ed2
Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-button--pseudo-states--dark.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--pseudo-states--light.png b/frontend/__snapshots__/lemon-ui-lemon-button--pseudo-states--light.png
new file mode 100644
index 0000000000000..51f4a4f82268b
Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-button--pseudo-states--light.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--pseudo-states.png b/frontend/__snapshots__/lemon-ui-lemon-button--pseudo-states.png
new file mode 100644
index 0000000000000..d33d03c99278f
Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-button--pseudo-states.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--types-3000--dark.png b/frontend/__snapshots__/lemon-ui-lemon-button--types-3000--dark.png
index 4b360e20e22f0..44a5c6cc36111 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--types-3000--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-button--types-3000--dark.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--types-3000--light.png b/frontend/__snapshots__/lemon-ui-lemon-button--types-3000--light.png
index 3b141807c7f47..3b62973650bd8 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--types-3000--light.png and b/frontend/__snapshots__/lemon-ui-lemon-button--types-3000--light.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--types-3000.png b/frontend/__snapshots__/lemon-ui-lemon-button--types-3000.png
index 920416789b607..bcf468b94ebfe 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-button--types-3000.png and b/frontend/__snapshots__/lemon-ui-lemon-button--types-3000.png differ
diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.stories.tsx b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.stories.tsx
index 7673cb3b3b84a..254e56643372d 100644
--- a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.stories.tsx
@@ -74,78 +74,65 @@ const TypesAndStatusesTemplate: StoryFn<typeof LemonButton> = (props) => {
     )
 }
 
+const ButtonVariants3000 = ({
+    tertiary = false,
+    active = false,
+}: {
+    tertiary?: boolean
+    active?: LemonButtonProps['active']
+}): JSX.Element => {
+    const variants: LemonButtonProps[] = tertiary
+        ? [
+              { type: 'tertiary', children: 'Primary' },
+              { type: 'tertiary', status: 'danger', children: 'Danger' },
+          ]
+        : [
+              { type: 'primary', children: 'Primary' },
+              { type: 'primary', status: 'primary-alt', children: 'Primary alt' },
+              { type: 'secondary', children: 'Secondary' },
+              { type: 'secondary', status: 'danger', children: 'Danger' },
+              { type: 'secondary', stealth: true, status: 'primary', children: 'Stealth' },
+          ]
+    return (
+        <div className="flex gap-2 flex-wrap">
+            {variants.map((props, index) => (
+                <LemonButton key={index} active={active} {...props} icon={<IconCalculate />} />
+            ))}
+        </div>
+    )
+}
+
 export const Types3000: Story = () => {
     return (
         <div className="space-y-2">
-            <h5>type=BLOCK</h5>
+            <h5>type=3D</h5>
             <div className="border rounded">
-                <div className="flex gap-2 flex-wrap p-2">
-                    <LemonButton type={'primary'} icon={<IconCalculate />}>
-                        Primary
-                    </LemonButton>
-                    <LemonButton type={'primary'} status="primary-alt" icon={<IconCalculate />}>
-                        Primary Alt
-                    </LemonButton>
-                    <LemonButton type={'secondary'} icon={<IconCalculate />}>
-                        Secondary
-                    </LemonButton>
-                    <LemonButton type={'secondary'} status="danger" icon={<IconCalculate />}>
-                        Destroy
-                    </LemonButton>
-                    <LemonButton stealth type={'secondary'} status="primary" icon={<IconCalculate />}>
-                        Stealth
-                    </LemonButton>
+                <div className="p-2">
+                    <ButtonVariants3000 />
                 </div>
                 <div className="p-2">
                     <h5>Active</h5>
+                    <ButtonVariants3000 active />
+                </div>
+                <div className="p-2 bg-bg-light rounded-b">
+                    <h5>Light background</h5>
                     <div className="flex gap-2 flex-wrap">
-                        <LemonButton active type={'primary'} icon={<IconCalculate />}>
-                            Primary
-                        </LemonButton>
-                        <LemonButton active type={'primary'} status="primary-alt" icon={<IconCalculate />}>
-                            Primary Alt
-                        </LemonButton>
-                        <LemonButton active type={'secondary'} icon={<IconCalculate />}>
-                            Secondary
-                        </LemonButton>
-                        <LemonButton active type={'secondary'} status="danger" icon={<IconCalculate />}>
-                            Destroy
-                        </LemonButton>
-                        <LemonButton active stealth type={'secondary'} status="primary" icon={<IconCalculate />}>
-                            Stealth
-                        </LemonButton>
+                        <ButtonVariants3000 />
                     </div>
                 </div>
+            </div>
+            <h5>type=TERTIARY</h5>
+            <div className="border rounded">
+                <div className="p-2">
+                    <ButtonVariants3000 tertiary />
+                </div>
                 <div className="p-2 bg-bg-light rounded-b">
                     <h5>Light background</h5>
                     <div className="flex gap-2 flex-wrap">
-                        <LemonButton type={'primary'} icon={<IconCalculate />}>
-                            Primary
-                        </LemonButton>
-                        <LemonButton type={'primary'} status="primary-alt" icon={<IconCalculate />}>
-                            Primary Alt
-                        </LemonButton>
-                        <LemonButton type={'secondary'} icon={<IconCalculate />}>
-                            Secondary
-                        </LemonButton>
-                        <LemonButton type={'secondary'} status="danger" icon={<IconCalculate />}>
-                            Destroy
-                        </LemonButton>
-                        <LemonButton stealth type={'secondary'} status="primary" icon={<IconCalculate />}>
-                            Stealth
-                        </LemonButton>
+                        <ButtonVariants3000 tertiary />
                     </div>
                 </div>
             </div>
-            <h5>type=MENU</h5>
-            <div className="flex gap-2 border rourounded p-2 flex-wrap">
-                <LemonButton type="tertiary" icon={<IconCalculate />}>
-                    Primary
-                </LemonButton>
-                <LemonButton type="tertiary" status="danger" icon={<IconCalculate />}>
-                    Danger
-                </LemonButton>
-            </div>
         </div>
     )
 }
@@ -245,6 +232,47 @@ export const Active = (): JSX.Element => {
     )
 }
 
+export const PseudoStates = (): JSX.Element => {
+    return (
+        <div className="space-y-2">
+            <div className="border rounded p-2">
+                <div>
+                    <h5>TYPE=3D STATE=DEFAULT</h5>
+                    <ButtonVariants3000 />
+                </div>
+                <div id="hover">
+                    <h5>TYPE=3D STATE=HOVER</h5>
+                    <ButtonVariants3000 />
+                </div>
+                <div id="active">
+                    <h5>TYPE=3D STATE=HOVER,ACTIVE</h5>
+                    <ButtonVariants3000 />
+                </div>
+            </div>
+            <div className="border rounded p-2">
+                <div>
+                    <h5>TYPE=TERTIARY STATE=DEFAULT</h5>
+                    <ButtonVariants3000 tertiary />
+                </div>
+                <div id="hover">
+                    <h5>TYPE=TERTIARY STATE=HOVER</h5>
+                    <ButtonVariants3000 tertiary />
+                </div>
+                <div id="active">
+                    <h5>TYPE=TERTIARY STATE=HOVER,ACTIVE</h5>
+                    <ButtonVariants3000 tertiary />
+                </div>
+            </div>
+        </div>
+    )
+}
+PseudoStates.parameters = {
+    pseudo: {
+        hover: ['#hover .LemonButton', '#active .LemonButton'],
+        active: ['#active .LemonButton'],
+    },
+}
+
 export const MenuButtons = (): JSX.Element => {
     return (
         <div className="space-y-2">