diff --git a/src/shared/ui/Badge/Badge.stories.svelte b/src/shared/ui/Badge/Badge.stories.svelte
index f9e1d90..e401ce5 100644
--- a/src/shared/ui/Badge/Badge.stories.svelte
+++ b/src/shared/ui/Badge/Badge.stories.svelte
@@ -9,8 +9,7 @@ const { Story } = defineMeta({
     parameters: {
         docs: {
             description: {
-                component:
-                    'Small status indicator with color variants and size options. Use for displaying status, categories, or labels.',
+                component: 'Pill badge with border and optional status dot.',
             },
             story: { inline: false },
         },
@@ -19,58 +18,76 @@ const { Story } = defineMeta({
     argTypes: {
         variant: {
             control: 'select',
-            options: ['default', 'success', 'warning', 'error', 'info'],
-            description: 'Color variant of the badge',
+            options: ['default', 'accent', 'success', 'warning', 'info'],
+            description: 'Badge variant',
+            defaultValue: 'default',
         },
         size: {
             control: 'select',
-            options: ['sm', 'md'],
-            description: 'Size of the badge',
+            options: ['xs', 'sm', 'md'],
+            description: 'Badge size',
+            defaultValue: 'xs',
+        },
+        dot: {
+            control: 'boolean',
+            description: 'Show status dot',
+            defaultValue: false,
         },
     },
 });
 </script>
 
-<script lang="ts">
-import type { Snippet } from 'svelte';
-</script>
-
-<Story name="Default">
-    {#snippet template(args)}
-        <Badge variant="default" {...args}>Default</Badge>
+<Story
+    name="Default variant"
+    args={{ variant: 'default', size: 'xs' }}
+>
+    {#snippet template()}
+        <Badge variant="default" size="xs">Default</Badge>
     {/snippet}
 </Story>
 
-<Story name="Variants">
-    {#snippet template(args)}
-        <div class="flex gap-2">
-            <Badge variant="default" {...args}>Default</Badge>
-            <Badge variant="success" {...args}>Success</Badge>
-            <Badge variant="warning" {...args}>Warning</Badge>
-            <Badge variant="error" {...args}>Error</Badge>
-            <Badge variant="info" {...args}>Info</Badge>
-        </div>
-    {/snippet}
-</Story>
-
-<Story name="Sizes">
-    {#snippet template(args)}
-        <div class="flex items-center gap-2">
-            <Badge size="sm" {...args}>Small</Badge>
-            <Badge size="md" {...args}>Medium</Badge>
-        </div>
-    {/snippet}
-</Story>
-
-<Story name="All Combinations">
-    {#snippet template(args)}
-        <div class="space-y-2">
-            {#each ['default', 'success', 'warning', 'error', 'info'] as variant}
-                <div class="flex gap-2">
-                    <Badge {variant} size="sm" {...args}>{variant} sm</Badge>
-                    <Badge {variant} size="md" {...args}>{variant} md</Badge>
-                </div>
-            {/each}
+<Story
+    name="Accent variant"
+    args={{ variant: 'accent', size: 'xs' }}
+>
+    {#snippet template()}
+        <Badge variant="accent" size="xs">Accent</Badge>
+    {/snippet}
+</Story>
+
+<Story
+    name="Success variant"
+    args={{ variant: 'success', size: 'xs' }}
+>
+    {#snippet template()}
+        <Badge variant="success" size="xs">Success</Badge>
+    {/snippet}
+</Story>
+
+<Story
+    name="Warning variant"
+    args={{ variant: 'warning', size: 'xs' }}
+>
+    {#snippet template()}
+        <Badge variant="warning" size="xs">Warning</Badge>
+    {/snippet}
+</Story>
+
+<Story
+    name="Info variant"
+    args={{ variant: 'info', size: 'xs' }}
+>
+    {#snippet template()}
+        <Badge variant="info" size="xs">Info</Badge>
+    {/snippet}
+</Story>
+
+<Story name="All sizes">
+    {#snippet template()}
+        <div class="flex gap-3 items-center">
+            <Badge variant="default" size="xs">XS</Badge>
+            <Badge variant="default" size="sm">SM</Badge>
+            <Badge variant="default" size="md">MD</Badge>
         </div>
     {/snippet}
 </Story>
diff --git a/src/shared/ui/Badge/Badge.svelte b/src/shared/ui/Badge/Badge.svelte
index a559a87..81de6fe 100644
--- a/src/shared/ui/Badge/Badge.svelte
+++ b/src/shared/ui/Badge/Badge.svelte
@@ -1,40 +1,56 @@
 <!--
     Component: Badge
-    Small status indicator with color variants and size options
+    Pill badge with border and optional status dot.
 -->
 <script lang="ts">
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import {
+    type LabelSize,
+    labelSizeConfig,
+} from '$shared/ui/Label/config';
+import type { Snippet } from 'svelte';
+
+type BadgeVariant = 'default' | 'accent' | 'success' | 'warning' | 'info';
+
+const badgeVariantConfig: Record<BadgeVariant, string> = {
+    default: 'border-black/10 dark:border-white/10 text-neutral-500',
+    accent: 'bg-brand/10 border-brand/20 text-brand',
+    success: 'bg-green-500/10 border-green-500/20 text-green-600 dark:text-green-400',
+    warning: 'bg-yellow-500/10 border-yellow-500/20 text-yellow-600 dark:text-yellow-400',
+    info: 'bg-blue-500/10 border-blue-500/20 text-blue-600 dark:text-blue-400',
+};
+
 interface Props {
-    /**
-     * Color variant of the badge
-     * @default default
-     */
-    variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
-    /**
-     * Size of the badge
-     * @default md
-     */
-    size?: 'sm' | 'md';
+    variant?: BadgeVariant;
+    size?: LabelSize;
+    /** Renders a small filled circle before the text. */
+    dot?: boolean;
+    children?: Snippet;
+    class?: string;
 }
 
-const { variant = 'default', size = 'md' }: Props = $props();
-
-const baseClasses = 'inline-flex items-center justify-center rounded-full font-medium';
-
-const variantClasses = $derived(
-    variant === 'success'
-        ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
-        : variant === 'warning'
-        ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400'
-        : variant === 'error'
-        ? 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
-        : variant === 'info'
-        ? 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400'
-        : 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300',
-);
-
-const sizeClasses = $derived(size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-2.5 py-0.5 text-sm');
+let {
+    variant = 'default',
+    size = 'xs',
+    dot = false,
+    children,
+    class: className,
+}: Props = $props();
 </script>
 
-<span class="{baseClasses} {variantClasses} {sizeClasses}">
-    <slot />
+<span
+    class={cn(
+        'inline-flex items-center gap-1 px-2 py-0.5 border rounded-full',
+        'font-mono uppercase tracking-wide',
+        labelSizeConfig[size],
+        badgeVariantConfig[variant],
+        className,
+    )}
+>
+    {#if dot}
+        <span class="w-1 h-1 rounded-full bg-current"></span>
+    {/if}
+    {#if children}
+        {@render children()}
+    {/if}
 </span>