diff --git a/src/components/ui/badge/Badge.vue b/src/components/ui/badge/Badge.vue
new file mode 100644
index 0000000..0374568
--- /dev/null
+++ b/src/components/ui/badge/Badge.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { BadgeVariants } from "."
+import { cn } from "@/lib/utils"
+import { badgeVariants } from "."
+
+const props = defineProps<{
+  variant?: BadgeVariants["variant"]
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div :class="cn(badgeVariants({ variant }), props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/badge/index.ts b/src/components/ui/badge/index.ts
new file mode 100644
index 0000000..98a768d
--- /dev/null
+++ b/src/components/ui/badge/index.ts
@@ -0,0 +1,26 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Badge } from "./Badge.vue"
+
+export const badgeVariants = cva(
+  "inline-flex gap-1 items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>
diff --git a/src/views/AccommodationView.vue b/src/views/AccommodationView.vue
index f0bab13..a84aad4 100644
--- a/src/views/AccommodationView.vue
+++ b/src/views/AccommodationView.vue
@@ -3,6 +3,7 @@ import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
 
 const { t, tm, rt } = useI18n()
 
@@ -96,20 +97,16 @@ const exteriorItems = tm('accommodation.exterior.items') as string[]
                 <h3 class="font-serif text-xl font-semibold">
                   {{ t(`accommodation.rooms.${room.key}.name`) }}
                 </h3>
-                <span
-                  class="rounded-full px-2 py-0.5 text-[10px] uppercase tracking-wider"
-                  :class="
-                    room.open
-                      ? 'bg-primary/10 text-primary'
-                      : 'border border-border text-muted-foreground'
-                  "
+                <Badge
+                  :variant="room.open ? 'default' : 'outline'"
+                  class="text-[10px] uppercase tracking-wider"
                 >
                   {{
                     room.open
                       ? t('accommodation.statusOpen')
                       : t('accommodation.statusComingSoon')
                   }}
-                </span>
+                </Badge>
               </div>
               <p class="mt-3 text-sm leading-relaxed text-foreground/85">
                 {{ t(`accommodation.rooms.${room.key}.summary`) }}
@@ -142,11 +139,12 @@ const exteriorItems = tm('accommodation.exterior.items') as string[]
                 <h3 class="font-serif text-xl font-semibold">
                   {{ t(`accommodation.cabins.${cabin.key}`) }}
                 </h3>
-                <span
-                  class="rounded-full border border-border px-2 py-0.5 text-[10px] uppercase tracking-wider text-muted-foreground"
+                <Badge
+                  variant="outline"
+                  class="text-[10px] uppercase tracking-wider text-muted-foreground"
                 >
                   {{ t('accommodation.statusComingSoon') }}
-                </span>
+                </Badge>
               </div>
             </Card>
           </li>