Index: chapterx-frontend/src/components/ui/Badge.tsx
===================================================================
--- chapterx-frontend/src/components/ui/Badge.tsx	(revision b62cefc14094ca5ac7154f7d48797a1e6c444935)
+++ chapterx-frontend/src/components/ui/Badge.tsx	(revision b62cefc14094ca5ac7154f7d48797a1e6c444935)
@@ -0,0 +1,68 @@
+import React from 'react'
+import { UserRole, StoryStatus } from '../../types'
+
+interface RoleBadgeProps {
+  role: UserRole
+}
+
+interface StatusBadgeProps {
+  status: StoryStatus
+}
+
+interface GenreBadgeProps {
+  genre: string
+  onClick?: () => void
+}
+
+export const RoleBadge: React.FC<RoleBadgeProps> = ({ role }) => {
+  const styles = {
+    admin: 'bg-rose-500/20 text-rose-400 border-rose-500/30',
+    writer: 'bg-indigo-500/20 text-indigo-400 border-indigo-500/30',
+    regular: 'bg-slate-500/20 text-slate-400 border-slate-500/30',
+    guest: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
+  }
+  const labels = { admin: 'Admin', writer: 'Writer', regular: 'Reader', guest: 'Guest' }
+  return (
+    <span className={`px-2 py-0.5 text-xs font-medium rounded-full border ${styles[role]}`}>
+      {labels[role]}
+    </span>
+  )
+}
+
+export const StatusBadge: React.FC<StatusBadgeProps> = ({ status }) => {
+  const styles = {
+    draft: 'bg-amber-500/20 text-amber-400 border-amber-500/30',
+    published: 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30',
+    archived: 'bg-slate-500/20 text-slate-400 border-slate-500/30',
+  }
+  const labels = { draft: 'Draft', published: 'Published', archived: 'Archived' }
+  return (
+    <span className={`px-2 py-0.5 text-xs font-medium rounded-full border ${styles[status]}`}>
+      {labels[status]}
+    </span>
+  )
+}
+
+export const GenreBadge: React.FC<GenreBadgeProps> = ({ genre, onClick }) => {
+  const colors: Record<string, string> = {
+    Fantasy: 'bg-purple-500/20 text-purple-300 border-purple-500/30 hover:bg-purple-500/30',
+    'Sci-Fi': 'bg-cyan-500/20 text-cyan-300 border-cyan-500/30 hover:bg-cyan-500/30',
+    Romance: 'bg-pink-500/20 text-pink-300 border-pink-500/30 hover:bg-pink-500/30',
+    'Historical Fiction': 'bg-amber-500/20 text-amber-300 border-amber-500/30 hover:bg-amber-500/30',
+    Adventure: 'bg-emerald-500/20 text-emerald-300 border-emerald-500/30 hover:bg-emerald-500/30',
+    Thriller: 'bg-slate-500/20 text-slate-300 border-slate-500/30 hover:bg-slate-500/30',
+    Mystery: 'bg-violet-500/20 text-violet-300 border-violet-500/30 hover:bg-violet-500/30',
+    Horror: 'bg-red-500/20 text-red-300 border-red-500/30 hover:bg-red-500/30',
+    Contemporary: 'bg-blue-500/20 text-blue-300 border-blue-500/30 hover:bg-blue-500/30',
+    Poetry: 'bg-rose-500/20 text-rose-300 border-rose-500/30 hover:bg-rose-500/30',
+  }
+  const style = colors[genre] || 'bg-indigo-500/20 text-indigo-300 border-indigo-500/30 hover:bg-indigo-500/30'
+  return (
+    <span
+      className={`px-2 py-0.5 text-xs font-medium rounded-full border transition-colors ${style} ${onClick ? 'cursor-pointer' : ''}`}
+      onClick={onClick}
+    >
+      {genre}
+    </span>
+  )
+}