diff --git a/src/components/features/dns-editor.tsx b/src/components/features/dns-editor.tsx
new file mode 100644
index 0000000..8f00d2d
--- /dev/null
+++ b/src/components/features/dns-editor.tsx
@@ -0,0 +1,267 @@
+"use client";
+
+import type { ColumnDef } from "@tanstack/react-table";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Copy, FileDown, FileUp, Plus, Trash2 } from "lucide-react";
+import { useState } from "react";
+import type { DnsRecord } from "@/api/contracts/models";
+import { panelService } from "@/api/services/panel-service";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { DataTable } from "@/components/common/data-table";
+import { Card, CardContent } from "@/components/ui/card";
+import { CodeEditor } from "@/components/common/code-editor";
+import { Input } from "@/components/ui/input";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+const columns: ColumnDef<DnsRecord>[] = [
+  { accessorKey: "name", header: "Name" },
+  { accessorKey: "ttl", header: "TTL" },
+  { accessorKey: "class", header: "Class" },
+  {
+    accessorKey: "type",
+    header: "Type",
+    cell: ({ row }) => <Badge variant="outline">{row.original.type}</Badge>,
+  },
+  { accessorKey: "record", header: "Record" },
+  {
+    accessorKey: "warning",
+    header: "Warnings",
+    cell: ({ row }) => row.original.warning ?? "None",
+  },
+];
+
+const dnsTypes: DnsRecord["type"][] = [
+  "A",
+  "AAAA",
+  "CNAME",
+  "MX",
+  "TXT",
+  "SRV",
+  "CAA",
+  "NS",
+  "PTR",
+];
+
+export function DnsEditor() {
+  const queryClient = useQueryClient();
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [record, setRecord] = useState<Partial<DnsRecord>>({
+    name: "api.example.com.",
+    ttl: 14400,
+    type: "A",
+    record: "198.51.100.40",
+  });
+  const [error, setError] = useState("");
+  const { data, isLoading } = useQuery({
+    queryKey: ["dns-records"],
+    queryFn: () => panelService.domains.records(),
+  });
+  const createRecord = useMutation({
+    mutationFn: () => panelService.domains.saveRecord(record),
+    onSuccess: async (response) => {
+      if (response.error) {
+        setError(response.error.message);
+        return;
+      }
+      await queryClient.invalidateQueries({ queryKey: ["dns-records"] });
+      setDialogOpen(false);
+      setError("");
+      setRecord({
+        name: "api.example.com.",
+        ttl: 14400,
+        type: "A",
+        record: "198.51.100.40",
+      });
+    },
+    onError: (mutationError) => {
+      setError(
+        mutationError instanceof Error ? mutationError.message : "DNS record creation failed.",
+      );
+    },
+  });
+  return (
+    <div className="space-y-4">
+      <Card>
+        <CardContent className="space-y-2 p-3">
+          <div className="-mx-1 flex items-center gap-1.5 overflow-x-auto px-1 pb-1">
+            {["All", "A", "AAAA", "CNAME", "MX", "TXT", "SRV", "CAA", "NS", "PTR"].map(
+              (type) => (
+                <Button
+                  key={type}
+                  variant={type === "All" ? "default" : "outline"}
+                  size="sm"
+                  className="shrink-0"
+                >
+                  {type}
+                </Button>
+              ),
+            )}
+          </div>
+          <div className="flex flex-wrap items-center gap-2">
+            <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+              <DialogTrigger asChild>
+                <Button size="sm">
+                  <Plus className="h-4 w-4" />
+                  Add record
+                </Button>
+              </DialogTrigger>
+              <DialogContent>
+                <DialogHeader>
+                  <DialogTitle>Add DNS record</DialogTitle>
+                  <DialogDescription>
+                    Create a DNS record in the active zone and refresh the zone editor.
+                  </DialogDescription>
+                </DialogHeader>
+                <form
+                  className="grid gap-3 sm:grid-cols-2"
+                  onSubmit={(event) => {
+                    event.preventDefault();
+                    setError("");
+                    createRecord.mutate();
+                  }}
+                >
+                  <label className="space-y-1 text-sm sm:col-span-2">
+                    <span className="font-medium">Name</span>
+                    <Input
+                      value={record.name ?? ""}
+                      onChange={(event) =>
+                        setRecord((value) => ({ ...value, name: event.target.value }))
+                      }
+                    />
+                  </label>
+                  <label className="space-y-1 text-sm">
+                    <span className="font-medium">Type</span>
+                    <Select
+                      value={record.type ?? "A"}
+                      onValueChange={(value) =>
+                        setRecord((current) => ({
+                          ...current,
+                          type: value as DnsRecord["type"],
+                        }))
+                      }
+                    >
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {dnsTypes.map((type) => (
+                          <SelectItem key={type} value={type}>
+                            {type}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </label>
+                  <label className="space-y-1 text-sm">
+                    <span className="font-medium">TTL</span>
+                    <Input
+                      type="number"
+                      min={60}
+                      value={record.ttl ?? 14400}
+                      onChange={(event) =>
+                        setRecord((value) => ({
+                          ...value,
+                          ttl: Number(event.target.value),
+                        }))
+                      }
+                    />
+                  </label>
+                  <label className="space-y-1 text-sm sm:col-span-2">
+                    <span className="font-medium">Record value</span>
+                    <Input
+                      value={record.record ?? ""}
+                      onChange={(event) =>
+                        setRecord((value) => ({ ...value, record: event.target.value }))
+                      }
+                    />
+                  </label>
+                  {record.type === "MX" || record.type === "SRV" ? (
+                    <label className="space-y-1 text-sm">
+                      <span className="font-medium">Priority</span>
+                      <Input
+                        type="number"
+                        min={0}
+                        value={record.priority ?? 10}
+                        onChange={(event) =>
+                          setRecord((value) => ({
+                            ...value,
+                            priority: Number(event.target.value),
+                          }))
+                        }
+                      />
+                    </label>
+                  ) : null}
+                  {error ? (
+                    <div className="rounded-md border border-destructive/30 bg-destructive/10 p-2 text-sm text-destructive sm:col-span-2">
+                      {error}
+                    </div>
+                  ) : null}
+                  <div className="flex justify-end gap-2 sm:col-span-2">
+                    <Button
+                      type="button"
+                      variant="outline"
+                      onClick={() => setDialogOpen(false)}
+                      disabled={createRecord.isPending}
+                    >
+                      Cancel
+                    </Button>
+                    <Button type="submit" disabled={createRecord.isPending}>
+                      {createRecord.isPending ? "Creating..." : "Create record"}
+                    </Button>
+                  </div>
+                </form>
+              </DialogContent>
+            </Dialog>
+            <Button size="sm" variant="outline">
+              <Copy className="h-4 w-4" />
+              Duplicate
+            </Button>
+            <Button size="sm" variant="outline">
+              <FileUp className="h-4 w-4" />
+              Import
+            </Button>
+            <Button size="sm" variant="outline">
+              <FileDown className="h-4 w-4" />
+              Export
+            </Button>
+            <Button size="sm" variant="destructive" className="sm:ml-auto">
+              <Trash2 className="h-4 w-4" />
+              Delete
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+      {isLoading ? (
+        <div className="skeleton h-80 rounded-lg border border-border/50" />
+      ) : (
+        <DataTable
+          data={data?.data ?? []}
+          columns={columns}
+          searchPlaceholder="Filter by name or record"
+        />
+      )}
+      <CodeEditor
+        title="Raw zone editor"
+        language="dns"
+        value={
+          "$TTL 14400\nexample.com. IN A 198.51.100.24\nwww IN CNAME example.com.\n@ IN MX 10 mail.example.com.\n"
+        }
+      />
+    </div>
+  );
+}