diff --git a/src/docs/data/badge.ts b/src/docs/data/badge.ts
index 04490db..2f85e8f 100644
--- a/src/docs/data/badge.ts
+++ b/src/docs/data/badge.ts
@@ -2,46 +2,46 @@ export const badgeVariants = `
 import { Badge } from 'kampsy-ui';
 
 <div class="flex flex-col gap-2">
-	<div class="flex gap-1">
+	<div class="flex gap-1 capitalize">
 		<Badge variant="gray">gray</Badge>
 		<Badge variant="gray-subtle">gray-subtle</Badge>
 	</div>
 
-	<div class="flex gap-1">
+	<div class="flex gap-1 capitalize">
 		<Badge variant="blue">blue</Badge>
 		<Badge variant="blue-subtle">blue-subtle</Badge>
 	</div>
 
-	<div class="flex gap-1">
+	<div class="flex gap-1 capitalize">
 		<Badge variant="purple">purple</Badge>
 		<Badge variant="purple-subtle">purple-subtle</Badge>
 	</div>
 
-	<div class="flex gap-1">
+	<div class="flex gap-1 capitalize">
 		<Badge variant="amber">amber</Badge>
 		<Badge variant="amber-subtle">amber-subtle</Badge>
 	</div>
 
-	<div class="flex gap-1">
+	<div class="flex gap-1 capitalize">
 		<Badge variant="red">red</Badge>
 		<Badge variant="red-subtle">red-subtle</Badge>
 	</div>
 
-	<div class="flex gap-1">
+	<div class="flex gap-1 capitalize">
 		<Badge variant="pink">pink</Badge>
 		<Badge variant="pink-subtle">pink-subtle</Badge>
 	</div>
 
-	<div class="flex gap-1">
+	<div class="flex gap-1 capitalize">
 		<Badge variant="green">green</Badge>
 		<Badge variant="green-subtle">green-subtle</Badge>
 	</div>
 
-	<div class="flex gap-1">
+	<div class="flex gap-1 capitalize">
 		<Badge variant="teal">teal</Badge>
 		<Badge variant="teal-subtle">teal-subtle</Badge>
 	</div>
-	<div class="flex gap-1">
+	<div class="flex gap-1 capitalize">
 		<Badge variant="inverted">inverted</Badge>
 	</div>
 </div>`;
@@ -51,15 +51,15 @@ import { Badge } from 'kampsy-ui';
 
 <div class="flex flex-col gap-2">
 
-	<div class="flex gap-1">
+	<div class="flex gap-1 capitalize">
 		<Badge size="sm" >small</Badge>
 	</div>
 
-	<div class="flex gap-1">
+	<div class="flex gap-1 capitalize">
 		<Badge size="md" >medium</Badge>
 	</div>
 
-	<div class="flex gap-1">
+	<div class="flex gap-1 capitalize">
 		<Badge size="lg" >large</Badge>
 	</div>
 </div>`;
@@ -70,7 +70,7 @@ import { Shield } from 'kampsy-ui/icons';
 
 <div class="flex flex-col gap-2">
 
-	<div class="flex items-center gap-1">
+	<div class="flex items-center gap-1 capitalize">
 		<Badge icon={Shield} size="lg" variant="gray">gray</Badge>
 		<Badge icon={Shield} size="md" variant="gray" >gray</Badge>
 		<Badge icon={Shield} size="sm" variant="gray">gray</Badge>
@@ -79,7 +79,7 @@ import { Shield } from 'kampsy-ui/icons';
 		<Badge icon={Shield} size="lg" variant="gray-subtle">gray</Badge>
 	</div>
 
-	<div class="flex items-center gap-1">
+	<div class="flex items-center gap-1 capitalize">
 		<Badge icon={Shield} size="lg" variant="blue">blue</Badge>
 		<Badge icon={Shield} size="md" variant="blue" >blue</Badge>
 		<Badge icon={Shield} size="sm" variant="blue">blue</Badge>
@@ -88,7 +88,7 @@ import { Shield } from 'kampsy-ui/icons';
 		<Badge icon={Shield} size="lg" variant="blue-subtle">blue</Badge>
 	</div>
 
-	<div class="flex items-center gap-1">
+	<div class="flex items-center gap-1 capitalize">
 		<Badge icon={Shield} size="lg" variant="purple">purple</Badge>
 		<Badge icon={Shield} size="md" variant="purple" >purple</Badge>
 		<Badge icon={Shield} size="sm" variant="purple">purple</Badge>
@@ -97,7 +97,7 @@ import { Shield } from 'kampsy-ui/icons';
 		<Badge icon={Shield} size="lg" variant="purple-subtle">purple</Badge>
 	</div>
 
-	<div class="flex items-center gap-1">
+	<div class="flex items-center gap-1 capitalize">
 		<Badge icon={Shield} size="lg" variant="amber">amber</Badge>
 		<Badge icon={Shield} size="md" variant="amber" >amber</Badge>
 		<Badge icon={Shield} size="sm" variant="amber">amber</Badge>
@@ -106,7 +106,7 @@ import { Shield } from 'kampsy-ui/icons';
 		<Badge icon={Shield} size="lg" variant="amber-subtle">amber</Badge>
 	</div>
 
-	<div class="flex items-center gap-1">
+	<div class="flex items-center gap-1 capitalize">
 		<Badge icon={Shield} size="lg" variant="red">red</Badge>
 		<Badge icon={Shield} size="md" variant="red" >red</Badge>
 		<Badge icon={Shield} size="sm" variant="red">red</Badge>
@@ -115,7 +115,7 @@ import { Shield } from 'kampsy-ui/icons';
 		<Badge icon={Shield} size="lg" variant="red-subtle">red</Badge>
 	</div>
 
-	<div class="flex items-center gap-1">
+	<div class="flex items-center gap-1 capitalize">
 		<Badge icon={Shield} size="lg" variant="pink">pink</Badge>
 		<Badge icon={Shield} size="md" variant="pink" >pink</Badge>
 		<Badge icon={Shield} size="sm" variant="pink">pink</Badge>
@@ -124,7 +124,7 @@ import { Shield } from 'kampsy-ui/icons';
 		<Badge icon={Shield} size="lg" variant="pink-subtle">pink</Badge>
 	</div>
 
-	<div class="flex items-center gap-1">
+	<div class="flex items-center gap-1 capitalize">
 		<Badge icon={Shield} size="lg" variant="green">green</Badge>
 		<Badge icon={Shield} size="md" variant="green" >green</Badge>
 		<Badge icon={Shield} size="sm" variant="green">green</Badge>
@@ -133,7 +133,7 @@ import { Shield } from 'kampsy-ui/icons';
 		<Badge icon={Shield} size="lg" variant="green-subtle">green</Badge>
 	</div>	
 
-	<div class="flex items-center gap-1">
+	<div class="flex items-center gap-1 capitalize">
 		<Badge icon={Shield} size="lg" variant="teal">teal</Badge>
 		<Badge icon={Shield} size="md" variant="teal" >teal</Badge>
 		<Badge icon={Shield} size="sm" variant="teal">teal</Badge>
@@ -142,7 +142,7 @@ import { Shield } from 'kampsy-ui/icons';
 		<Badge icon={Shield} size="lg" variant="teal-subtle">teal</Badge>
 	</div>
 
-	<div class="flex items-center gap-1">
+	<div class="flex items-center gap-1 capitalize">
 		<Badge icon={Shield} size="lg" variant="inverted">inverted</Badge>
 		<Badge icon={Shield} size="md" variant="inverted" >inverted</Badge>
 		<Badge icon={Shield} size="sm" variant="inverted">inverted</Badge>
diff --git a/src/lib/badge/badge.svelte b/src/lib/badge/badge.svelte
index 4f5afec..01e1f22 100644
--- a/src/lib/badge/badge.svelte
+++ b/src/lib/badge/badge.svelte
@@ -113,7 +113,7 @@
 {/snippet}
 
 <span class="flex items-center justify-center rounded-full {badgeClass} {klass}">
-	<span class="flex items-center {iconXGap} capitalize">
+	<span class="flex items-center {iconXGap}">
 		{@render iconSnip()}
 		{@render children()}
 	</span>
diff --git a/src/routes/badge/+page.svelte b/src/routes/badge/+page.svelte
index 71e066c..12d5755 100644
--- a/src/routes/badge/+page.svelte
+++ b/src/routes/badge/+page.svelte
@@ -53,47 +53,47 @@
 		<div class="mt-4 xl:mt-7">
 			{#snippet demo()}
 				<div class="flex flex-col gap-2">
-					<div class="flex gap-1">
+					<div class="flex gap-1 capitalize">
 						<Badge variant="gray">gray</Badge>
 						<Badge variant="gray-subtle">gray-subtle</Badge>
 					</div>
 
-					<div class="flex gap-1">
+					<div class="flex gap-1 capitalize">
 						<Badge variant="blue">blue</Badge>
 						<Badge variant="blue-subtle">blue-subtle</Badge>
 					</div>
 
-					<div class="flex gap-1">
+					<div class="flex gap-1 capitalize">
 						<Badge variant="purple">purple</Badge>
 						<Badge variant="purple-subtle">purple-subtle</Badge>
 					</div>
 
-					<div class="flex gap-1">
+					<div class="flex gap-1 capitalize">
 						<Badge variant="amber">amber</Badge>
 						<Badge variant="amber-subtle">amber-subtle</Badge>
 					</div>
 
-					<div class="flex gap-1">
+					<div class="flex gap-1 capitalize">
 						<Badge variant="red">red</Badge>
 						<Badge variant="red-subtle">red-subtle</Badge>
 					</div>
 
-					<div class="flex gap-1">
+					<div class="flex gap-1  capitalize">
 						<Badge variant="pink">pink</Badge>
 						<Badge variant="pink-subtle">pink-subtle</Badge>
 					</div>
 
-					<div class="flex gap-1">
+					<div class="flex gap-1 capitalize">
 						<Badge variant="green">green</Badge>
 						<Badge variant="green-subtle">green-subtle</Badge>
 					</div>
 
-					<div class="flex gap-1">
+					<div class="flex gap-1 capitalize">
 						<Badge variant="teal">teal</Badge>
 						<Badge variant="teal-subtle">teal-subtle</Badge>
 					</div>
 
-					<div class="flex gap-1">
+					<div class="flex gap-1 capitalize">
 						<Badge variant="inverted">inverted</Badge>
 					</div>
 				</div>
@@ -113,15 +113,15 @@
 		<div class="mt-4 xl:mt-7">
 			{#snippet demo()}
 				<div class="flex flex-col gap-2">
-					<div class="flex gap-1">
+					<div class="flex gap-1 capitalize">
 						<Badge size="sm">small</Badge>
 					</div>
 
-					<div class="flex gap-1">
+					<div class="flex gap-1 capitalize">
 						<Badge size="md">medium</Badge>
 					</div>
 
-					<div class="flex gap-1">
+					<div class="flex gap-1 capitalize">
 						<Badge size="lg">large</Badge>
 					</div>
 				</div>
@@ -142,7 +142,7 @@
 		<div class="mt-4 xl:mt-7">
 			{#snippet demo()}
 				<div class="flex flex-col gap-2">
-					<div class="flex items-center gap-1">
+					<div class="flex items-center gap-1 capitalize">
 						<Badge icon={Shield} size="lg" variant="gray">gray</Badge>
 						<Badge icon={Shield} size="md" variant="gray" >gray</Badge>
 						<Badge icon={Shield} size="sm" variant="gray">gray</Badge>
@@ -151,7 +151,7 @@
 						<Badge icon={Shield} size="lg" variant="gray-subtle">gray</Badge>
 					</div>
 
-					<div class="flex items-center gap-1">
+					<div class="flex items-center gap-1 capitalize">
 						<Badge icon={Shield} size="lg" variant="blue">blue</Badge>
 						<Badge icon={Shield} size="md" variant="blue" >blue</Badge>
 						<Badge icon={Shield} size="sm" variant="blue">blue</Badge>
@@ -160,7 +160,7 @@
 						<Badge icon={Shield} size="lg" variant="blue-subtle">blue</Badge>
 					</div>
 
-					<div class="flex items-center gap-1">
+					<div class="flex items-center gap-1 capitalize">
 						<Badge icon={Shield} size="lg" variant="purple">purple</Badge>
 						<Badge icon={Shield} size="md" variant="purple" >purple</Badge>
 						<Badge icon={Shield} size="sm" variant="purple">purple</Badge>
@@ -169,7 +169,7 @@
 						<Badge icon={Shield} size="lg" variant="purple-subtle">purple</Badge>
 					</div>
 
-					<div class="flex items-center gap-1">
+					<div class="flex items-center gap-1 capitalize">
 						<Badge icon={Shield} size="lg" variant="amber">amber</Badge>
 						<Badge icon={Shield} size="md" variant="amber" >amber</Badge>
 						<Badge icon={Shield} size="sm" variant="amber">amber</Badge>
@@ -178,7 +178,7 @@
 						<Badge icon={Shield} size="lg" variant="amber-subtle">amber</Badge>
 					</div>
 
-					<div class="flex items-center gap-1">
+					<div class="flex items-center gap-1 capitalize">
 						<Badge icon={Shield} size="lg" variant="red">red</Badge>
 						<Badge icon={Shield} size="md" variant="red" >red</Badge>
 						<Badge icon={Shield} size="sm" variant="red">red</Badge>
@@ -187,7 +187,7 @@
 						<Badge icon={Shield} size="lg" variant="red-subtle">red</Badge>
 					</div>
 
-					<div class="flex items-center gap-1">
+					<div class="flex items-center gap-1 capitalize">
 						<Badge icon={Shield} size="lg" variant="pink">pink</Badge>
 						<Badge icon={Shield} size="md" variant="pink" >pink</Badge>
 						<Badge icon={Shield} size="sm" variant="pink">pink</Badge>
@@ -196,7 +196,7 @@
 						<Badge icon={Shield} size="lg" variant="pink-subtle">pink</Badge>
 					</div>
 
-					<div class="flex items-center gap-1">
+					<div class="flex items-center gap-1 capitalize">
 						<Badge icon={Shield} size="lg" variant="green">green</Badge>
 						<Badge icon={Shield} size="md" variant="green" >green</Badge>
 						<Badge icon={Shield} size="sm" variant="green">green</Badge>
@@ -205,7 +205,7 @@
 						<Badge icon={Shield} size="lg" variant="green-subtle">green</Badge>
 					</div>	
 
-					<div class="flex items-center gap-1">
+					<div class="flex items-center gap-1 capitalize">
 						<Badge icon={Shield} size="lg" variant="teal">teal</Badge>
 						<Badge icon={Shield} size="md" variant="teal" >teal</Badge>
 						<Badge icon={Shield} size="sm" variant="teal">teal</Badge>
@@ -214,7 +214,7 @@
 						<Badge icon={Shield} size="lg" variant="teal-subtle">teal</Badge>
 					</div>
 
-					<div class="flex items-center gap-1">
+					<div class="flex items-center gap-1 capitalize">
 						<Badge icon={Shield} size="lg" variant="inverted">inverted</Badge>
 						<Badge icon={Shield} size="md" variant="inverted" >inverted</Badge>
 						<Badge icon={Shield} size="sm" variant="inverted">inverted</Badge>