diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx
index 8c204cd..1d44b31 100644
--- a/app/(marketing)/page.tsx
+++ b/app/(marketing)/page.tsx
@@ -8,6 +8,7 @@ import {
   Textarea,
 } from "@/packages/ui";
 import AccordionStyleDefault from "@/preview/components/accordion-style-default";
+import BadgeStyleVariants from "@/preview/components/badge-style-variants";
 import { GithubIcon, MessageCircle } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
@@ -71,8 +72,7 @@ export default function Home() {
           <div className="space-y-4">
             <Text as="h4">Badge</Text>
             <div className="flex flex-wrap space-y-2 lg:space-y-0 space-x-2">
-              <Badge>Default Badge</Badge>
-              <Badge variant="error">Error Badge</Badge>
+              <BadgeStyleVariants />
             </div>
           </div>
           <div className="space-y-4">
diff --git a/app/(sink)/demo/components/page.tsx b/app/(sink)/demo/components/page.tsx
index c0d11e9..ab72523 100644
--- a/app/(sink)/demo/components/page.tsx
+++ b/app/(sink)/demo/components/page.tsx
@@ -13,6 +13,7 @@ import {
   TabsTriggerList,
 } from "@/packages/ui";
 import { Card } from "@/packages/ui/Cards/Card";
+import BadgeStyleVariants from "@/preview/components/badge-style-variants";
 import { Check, CheckCircle, CheckCircle2 } from "lucide-react";
 import React from "react";
 
@@ -25,10 +26,7 @@ export default function page() {
         <Button variant="link">Link Button</Button>
       </div>
       <div className="space-x-4">
-        <Badge>Badge</Badge>
-        <Badge variant="success">Badge</Badge>
-        <Badge variant="error">Badge</Badge>
-        <Badge variant="filled">Badge</Badge>
+        <BadgeStyleVariants />
       </div>
 
       <div className="flex items-center space-x-4">