diff --git a/src/pages/ComponentsPage/components/BadgeComponents.tsx b/src/pages/ComponentsPage/components/BadgeComponents.tsx
index 8c9c0b3..7471bcc 100644
--- a/src/pages/ComponentsPage/components/BadgeComponents.tsx
+++ b/src/pages/ComponentsPage/components/BadgeComponents.tsx
@@ -86,13 +86,27 @@ const BadgeComponents = ({
 
       <div className="my-8">
         <div className="mb-2 flex place-content-center rounded border border-neutral-500/10 p-4 dark:bg-neutral-700/25">
-          <Badge className="bg-blue-500" testId="my-badge">
+          <Badge className="!bg-blue-500" testId="my-badge">
             19
           </Badge>
         </div>
         <CodeSnippet
           className="my-2"
-          code={`<Badge className='bg-blue-500' testId='my-badge'>19</Badge>`}
+          code={`<Badge className='!bg-blue-500' testId='my-badge'>19</Badge>`}
+        />
+      </div>
+
+      <div className="my-8">
+        <div className="mb-2 flex place-content-center rounded border border-neutral-500/10 p-4 dark:bg-neutral-700/25">
+          <Badge className="!bg-neutral-500 uppercase" testId="badge-status-closed">
+            Closed
+          </Badge>
+        </div>
+        <CodeSnippet
+          className="my-2"
+          code={`<Badge className="!bg-neutral-500 uppercase" testId="badge-status-closed">
+  Closed
+</Badge>`}
         />
       </div>
     </section>