diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..e705b45
--- /dev/null
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+export const Dialog = DialogPrimitive.Root;
+export const DialogTrigger = DialogPrimitive.Trigger;
+export const DialogClose = DialogPrimitive.Close;
+
+export function DialogContent({
+  className,
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>) {
+  return (
+    <DialogPrimitive.Portal>
+      <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-background/55 backdrop-blur-md data-[state=open]:animate-fade-in" />
+      <DialogPrimitive.Content
+        className={cn(
+          "glass-modal fixed left-1/2 top-1/2 z-50 max-h-[92vh] w-[calc(100vw-2rem)] max-w-2xl -translate-x-1/2 -translate-y-1/2 overflow-auto rounded-xl p-0 data-[state=open]:animate-scale-in",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close asChild>
+          <Button
+            className="absolute right-3 top-3"
+            size="icon"
+            variant="ghost"
+            aria-label="Close dialog"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPrimitive.Portal>
+  );
+}
+
+export function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn("border-b border-border/60 px-5 py-4 pr-12", className)} {...props} />
+  );
+}
+
+export function DialogTitle({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      className={cn("font-display text-base font-semibold tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+export function DialogDescription(
+  props: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>,
+) {
+  return (
+    <DialogPrimitive.Description className="mt-1 text-sm text-muted-foreground" {...props} />
+  );
+}