diff --git a/apps/site/src/content/design-system/components/badge/code/development-examples/content.mdoc b/apps/site/src/content/design-system/components/badge/code/development-examples/content.mdoc
index ed6f5cd0a..fa4156cfd 100644
--- a/apps/site/src/content/design-system/components/badge/code/development-examples/content.mdoc
+++ b/apps/site/src/content/design-system/components/badge/code/development-examples/content.mdoc
@@ -2,20 +2,62 @@
 
 ```tsx
 <Fragment>
-  <p className="my-2">
-    <Badge >Default</Badge>
-  </p>
+<p className="typography-body-10 text-muted">
+<em>Default</em>
+</p>
   <p className="my-2">
     <Badge color="primary">Primary</Badge>{" "}
     <Badge color="hero">Hero</Badge>{" "}
     <Badge color="neutral">Neutral</Badge>{" "}
-    <Badge color="faint">Faint</Badge>
-  </p>
-  <p className="my-2">
+    <Badge color="faint">Faint</Badge>{" "}
+
     <Badge color="success" >Success</Badge>{" "}
     <Badge color="info" >Info</Badge>{" "}
     <Badge color="warning" >Warning</Badge>{" "}
     <Badge color="danger" >Danger</Badge>
   </p>
+  <p className="typography-body-10 text-muted">
+<em>Soft</em>
+</p>
+    <p className="my-2">
+    <Badge color="primary" soft>Primary</Badge>{" "}
+    <Badge color="hero" soft>Hero</Badge>{" "}
+    <Badge color="neutral" soft>Neutral</Badge>{" "}
+    <Badge color="faint" soft>Faint</Badge>{" "}
+    <Badge color="success" soft>Success</Badge>{" "}
+    <Badge color="info" soft>Info</Badge>{" "}
+    <Badge color="warning" soft>Warning</Badge>{" "}
+    <Badge color="danger" soft>Danger</Badge>
+  </p>
+  
+  <Fragment>
+    <p className="mb-2 mt-6 typography-body-10 text-muted">
+    <em>Default - Pill</em>
+    </p>
+    <div className="flex gap-1">
+    <Badge color="primary" type="pill">88</Badge>{" "}
+    <Badge color="hero" type="pill">88</Badge>{" "}
+    <Badge color="neutral" type="pill">88</Badge>{" "}
+    <Badge color="faint" type="pill">88</Badge>{" "}
+
+    <Badge color="success" type="pill">88</Badge>{" "}
+    <Badge color="info"  type="pill">88</Badge>{" "}
+    <Badge color="warning"  type="pill">88</Badge>{" "}
+    <Badge color="danger"  type="pill">88</Badge>
+  </p>
+    <p className="mb-2 mt-2 typography-body-10 text-muted">
+    <em>Soft - Pill</em>
+    </p>
+    <div className="flex gap-1">
+    <Badge color="primary"  type="pill" soft>88</Badge>{" "}
+    <Badge color="hero" type="pill" soft>88</Badge>{" "}
+    <Badge color="neutral" type="pill" soft>88</Badge>{" "}
+    <Badge color="faint" type="pill" soft>88</Badge>{" "}
+    <Badge color="success" type="pill" soft>88</Badge>{" "}
+    <Badge color="info" type="pill" soft>88</Badge>{" "}
+    <Badge color="warning" type="pill" soft>88</Badge>{" "}
+    <Badge color="danger" type="pill" soft>88</Badge>
+  </p>
+</Fragment>
 </Fragment>
 ```
diff --git a/apps/site/src/content/design-system/components/badge/design/badge-styles/content.mdoc b/apps/site/src/content/design-system/components/badge/design/badge-styles/content.mdoc
index 3a2376810..21b2f3326 100644
--- a/apps/site/src/content/design-system/components/badge/design/badge-styles/content.mdoc
+++ b/apps/site/src/content/design-system/components/badge/design/badge-styles/content.mdoc
@@ -1,69 +1,74 @@
-Badges come in 2 different styles: Default, used to highlight words, and Pill, used to highlight numbers.
+Badges come in 2 different types:
+
+- Default -  used to highlight words
+- Pill - used to highlight numbers
 
 ### Badges - Default
 
 ```tsx
-() => {
-  const COLORS = ['danger', 'warning', 'success', 'info', 'primary', 'hero', 'neutral', 'faint', 'muted'] as const;
- 
-  return (
-    <div className="flex flex-col gap-2">
-          <p className="typography-body-10 text-muted">
-            <em>Colours</em>
-          </p>
-      <div>
-        {COLORS.map(color => (
-          <Badge color={color} className="my-1 mr-2" >
-            {color}
-          </Badge>
-        ))}
-      </div>
-          <p className="typography-body-10 text-muted">
-            <em>Soft</em>
-          </p>
-      <div>
-        {COLORS.map(color => (
-          <Badge color={color} soft className="my-1 mr-2">
-            {color}
-          </Badge>
-        ))}
-      </div>
-    </div>
-  );
-};
+<Fragment>
+<p className="typography-body-10 text-muted">
+<em>Default</em>
+</p>
+  <p className="my-2">
+    <Badge color="primary">Primary</Badge>{" "}
+    <Badge color="hero">Hero</Badge>{" "}
+    <Badge color="neutral">Neutral</Badge>{" "}
+    <Badge color="faint">Faint</Badge>{" "}
+
+    <Badge color="success" >Success</Badge>{" "}
+    <Badge color="info" >Info</Badge>{" "}
+    <Badge color="warning" >Warning</Badge>{" "}
+    <Badge color="danger" >Danger</Badge>
+  </p>
+  <p className="typography-body-10 text-muted">
+<em>Soft</em>
+</p>
+    <p className="my-2">
+    <Badge color="primary" soft>Primary</Badge>{" "}
+    <Badge color="hero" soft>Hero</Badge>{" "}
+    <Badge color="neutral" soft>Neutral</Badge>{" "}
+    <Badge color="faint" soft>Faint</Badge>{" "}
+    <Badge color="success" soft>Success</Badge>{" "}
+    <Badge color="info" soft>Info</Badge>{" "}
+    <Badge color="warning" soft>Warning</Badge>{" "}
+    <Badge color="danger" soft>Danger</Badge>
+  </p>
+</Fragment>
 ```
 
 ### Badges - Pill
 
 ```tsx
-() => {
-  const COLORS = ['danger', 'warning', 'success', 'info', 'primary', 'hero', 'neutral', 'faint', 'muted'] as const;
- 
-  return (
-    <div className="flex flex-col gap-2">
-          <p className="typography-body-10 text-muted">
-            <em>Colours</em>
+<Fragment>
+          <p className="mb-2 typography-body-10 text-muted">
+            <em>Default</em>
           </p>
-      <div>
-        {COLORS.map(color => (
-          <Badge className="my-1 mr-2" type="pill" color={color}>
-            88
-          </Badge>
-        ))}
-      </div>
-          <p className="typography-body-10 text-muted">
+                <div className="flex gap-1">
+    <Badge color="primary" type="pill">88</Badge>{" "}
+    <Badge color="hero" type="pill">88</Badge>{" "}
+    <Badge color="neutral" type="pill">88</Badge>{" "}
+    <Badge color="faint" type="pill">88</Badge>{" "}
+
+    <Badge color="success" type="pill">88</Badge>{" "}
+    <Badge color="info"  type="pill">88</Badge>{" "}
+    <Badge color="warning"  type="pill">88</Badge>{" "}
+    <Badge color="danger"  type="pill">88</Badge>
+  </p>
+          <p className="mb-2 mt-2 typography-body-10 text-muted">
             <em>Soft</em>
           </p>
-      <div>
-        {COLORS.map(color => (
-          <Badge className="my-1 mr-2" type="pill" color={color} soft>
-            88
-          </Badge>
-        ))}
-      </div>
-    </div>
-  );
-};
+                  <div className="flex gap-1">
+    <Badge color="primary"  type="pill" soft>88</Badge>{" "}
+    <Badge color="hero" type="pill" soft>88</Badge>{" "}
+    <Badge color="neutral" type="pill" soft>88</Badge>{" "}
+    <Badge color="faint" type="pill" soft>88</Badge>{" "}
+    <Badge color="success" type="pill" soft>88</Badge>{" "}
+    <Badge color="info" type="pill" soft>88</Badge>{" "}
+    <Badge color="warning" type="pill" soft>88</Badge>{" "}
+    <Badge color="danger" type="pill" soft>88</Badge>
+  </p>
+</Fragment>
 ```
 
 ### Usage examples
@@ -106,11 +111,11 @@ Badges come in 2 different styles: Default, used to highlight words, and Pill, u
               </div>
             </Button>
             <a className="text-link underline" href="#">
-                Messages 
-                <Badge color="muted" type="pill" className="ml-1">
+                Messages </a>
+                <Badge color="muted" type="pill" className="ml-.5">
                   12
                 </Badge>
-              </a>
+              
           </div>
         </div>
         <div>
@@ -122,23 +127,23 @@ Badges come in 2 different styles: Default, used to highlight words, and Pill, u
             <Button look="primary" soft>
               <div className="flex gap-1 items-center">
                 <span>Label</span>
-                <Badge color="hero">NEW</Badge>
+                <Badge color="hero">New</Badge>
               </div>
             </Button>
   
             <Button look="primary">
               <div className="flex gap-1 items-center">
                 <span>Label</span>
-                <Badge color="faint" soft>NEW</Badge>
+                <Badge color="faint" soft>New</Badge>
               </div>
             </Button>
   
             <a className="text-link underline" href="#">
-                Product feature
-                <Badge color="muted"  className="ml-1">
-                  NEW
+                Product feature</a>
+                <Badge color="muted" className="ml-.5">
+                  New
                 </Badge>
-              </a>
+              
 
 
           </div>