diff --git a/packages/web-react/src/components/Pill/demo/Pill.tsx b/packages/web-react/src/components/Pill/demo/Pill.tsx
deleted file mode 100644
index 45fd66970c..0000000000
--- a/packages/web-react/src/components/Pill/demo/Pill.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { ElementType } from 'react';
-import { ComponentStory } from '@storybook/react';
-import Pill from '../Pill';
-import { SpiritPillProps } from '../../../types';
-
-const Story: ComponentStory<typeof Pill> = <T extends ElementType = 'span', C = void>(args: SpiritPillProps<T, C>) => (
-  <Pill {...args} />
-);
-
-Story.args = {
-  children: '3',
-};
-
-export default Story;
diff --git a/packages/web-react/src/components/Pill/demo/PillColors.tsx b/packages/web-react/src/components/Pill/demo/PillColors.tsx
index 4ecb6f6020..fc2e54aaa1 100644
--- a/packages/web-react/src/components/Pill/demo/PillColors.tsx
+++ b/packages/web-react/src/components/Pill/demo/PillColors.tsx
@@ -1,27 +1,21 @@
 import React from 'react';
+import { ActionColors, EmotionColors } from '../../../constants';
 import Pill from '../Pill';
 
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => (
-  <>
-    <div className="mb-500">
-      <Pill color="primary">3</Pill>
-      <Pill color="secondary">3</Pill>
-      <Pill color="tertiary">3</Pill>
-      <Pill color="inverted">3</Pill>
-    </div>
-    <div className="mb-500">
-      <Pill color="selected">333</Pill>
-      <Pill color="unselected">333</Pill>
-    </div>
-    <div>
-      <Pill color="success">3</Pill>
-      <Pill color="informative">3</Pill>
-      <Pill color="warning">3</Pill>
-      <Pill color="danger">3</Pill>
-    </div>
-  </>
-);
+const PillColors = () => {
+  const actionColors = Object.values(ActionColors);
+  const emotionColors = Object.values(EmotionColors);
+  const colors = [...actionColors, 'selected', 'unselected', ...emotionColors];
 
-export default Story;
+  return (
+    <>
+      {colors.map((color) => (
+        <Pill key={color} color={color}>
+          3
+        </Pill>
+      ))}
+    </>
+  );
+};
+
+export default PillColors;
diff --git a/packages/web-react/src/components/Pill/demo/PillLongText.tsx b/packages/web-react/src/components/Pill/demo/PillLongText.tsx
new file mode 100644
index 0000000000..496192733b
--- /dev/null
+++ b/packages/web-react/src/components/Pill/demo/PillLongText.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import Pill from '../Pill';
+
+const PillLongText = () => <Pill>333</Pill>;
+
+export default PillLongText;
diff --git a/packages/web-react/src/components/Pill/demo/index.tsx b/packages/web-react/src/components/Pill/demo/index.tsx
index 54738aa55d..b1f67797c8 100644
--- a/packages/web-react/src/components/Pill/demo/index.tsx
+++ b/packages/web-react/src/components/Pill/demo/index.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import DocsSection from '../../../../docs/DocsSections';
-import Pill from './Pill';
 import PillColors from './PillColors';
+import PillLongText from './PillLongText';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <DocsSection title="Default">
-      <Pill {...Pill.args} />
-    </DocsSection>
     <DocsSection title="Colors">
       <PillColors />
     </DocsSection>
+    <DocsSection title="Long Text">
+      <PillLongText />
+    </DocsSection>
   </React.StrictMode>,
 );
diff --git a/packages/web/src/scss/components/Pill/index.html b/packages/web/src/scss/components/Pill/index.html
index fa07c2bc25..5af0960a17 100644
--- a/packages/web/src/scss/components/Pill/index.html
+++ b/packages/web/src/scss/components/Pill/index.html
@@ -1,20 +1,36 @@
 {{#> layout/plain }}
 
-<div class="mb-500">
-  <span class="Pill Pill--primary">3</span>
-  <span class="Pill Pill--secondary">3</span>
-  <span class="Pill Pill--tertiary">3</span>
-  <span class="Pill Pill--inverted">3</span>
-</div>
-<div class="mb-500">
-  <span class="Pill Pill--selected">333</span>
-  <span class="Pill Pill--unselected">333</span>
-</div>
-<div>
-  <span class="Pill Pill--success">3</span>
-  <span class="Pill Pill--informative">3</span>
-  <span class="Pill Pill--warning">3</span>
-  <span class="Pill Pill--danger">3</span>
-</div>
+<section class="docs-Section">
+
+  <h2 class="docs-Heading">Colors</h2>
+          
+  <div class="docs-Stack docs-Stack--start">
+                        
+    <span class="Pill Pill--primary">3</span>
+    <span class="Pill Pill--secondary">3</span>
+    <span class="Pill Pill--tertiary">3</span>
+    <span class="Pill Pill--inverted">3</span>
+    <span class="Pill Pill--selected">3</span>
+    <span class="Pill Pill--unselected">3</span>
+    <span class="Pill Pill--success">3</span>
+    <span class="Pill Pill--informative">3</span>
+    <span class="Pill Pill--warning">3</span>
+    <span class="Pill Pill--danger">3</span>
+    
+  </div>
+  
+</section>
+
+<section class="docs-Section">
+
+  <h2 class="docs-Heading">Long Text</h2>
+
+  <div class="docs-Stack docs-Stack--start">
+    
+    <span class="Pill Pill--selected">333</span>
+
+  </div>
+
+</section>
 
 {{/layout/plain }}