diff --git a/client/src/components/domain/domain-details.tsx b/client/src/components/domain/domain-details.tsx
new file mode 100644
index 0000000..29994e7
--- /dev/null
+++ b/client/src/components/domain/domain-details.tsx
@@ -0,0 +1,957 @@
+import { useState } from "react";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { DnsRecord, InsertDnsRecord, Domain, Provider, recordTypes } from "@shared/schema";
+import { apiRequest, queryClient } from "@/lib/queryClient";
+import { useToast } from "@/hooks/use-toast";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  FormDescription,
+} from "@/components/ui/form";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { 
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "@/components/ui/tooltip";
+import { RecentActivity } from "@/components/activity/recent-activity";
+import { Pagination } from "@/components/shared/pagination";
+import { Loader2, FileText, Pencil, Trash2, Plus } from "lucide-react";
+import { formatDistanceToNow } from "date-fns";
+
+// DNS Record form schema
+const dnsRecordSchema = z.object({
+  name: z.string().min(1, "Record name is required"),
+  type: z.enum(recordTypes),
+  content: z.string().min(1, "Content is required"),
+  ttl: z.number().int().min(1).default(3600),
+  proxied: z.boolean().default(false),
+  isActive: z.boolean().default(true),
+  isAutoIP: z.boolean().default(false),
+  notes: z.string().optional(),
+  providerId: z.string().uuid().optional(),
+});
+
+interface DomainDetailsProps {
+  domain: Domain;
+  onBack?: () => void;
+}
+
+export function DomainDetails({ domain, onBack }: DomainDetailsProps) {
+  const { toast } = useToast();
+  
+  const [isAddRecordDialogOpen, setIsAddRecordDialogOpen] = useState(false);
+  const [isEditRecordDialogOpen, setIsEditRecordDialogOpen] = useState(false);
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const [selectedRecord, setSelectedRecord] = useState<DnsRecord | null>(null);
+  const [currentPage, setCurrentPage] = useState(1);
+  const pageSize = 5;
+  
+  // Fetch providers for the form
+  const { data: providers = [] } = useQuery<Provider[]>({
+    queryKey: ["/api/providers"],
+  });
+
+  // Fetch DNS Records
+  const { 
+    data: records = [], 
+    isLoading 
+  } = useQuery<DnsRecord[]>({
+    queryKey: ["/api/dns-records", domain.id],
+    queryFn: async () => {
+      const res = await apiRequest("GET", `/api/dns-records?domainId=${domain.id}`);
+      return await res.json();
+    },
+    enabled: !!domain?.id,
+  });
+
+  // Form for adding/editing a record
+  const form = useForm<z.infer<typeof dnsRecordSchema>>({
+    resolver: zodResolver(dnsRecordSchema),
+    defaultValues: {
+      name: "",
+      type: "A",
+      content: "",
+      ttl: 3600,
+      proxied: false,
+      isActive: true,
+      isAutoIP: false,
+      notes: "",
+      providerId: undefined,
+    },
+  });
+
+  // Add record mutation
+  const addRecordMutation = useMutation({
+    mutationFn: async (data: z.infer<typeof dnsRecordSchema>) => {
+      // Prepare record data
+      const recordData: InsertDnsRecord = {
+        ...data,
+        domainId: domain.id,
+      };
+      
+      // Handle providerId - convert "none" to null
+      if (recordData.providerId === "none") {
+        recordData.providerId = null;
+      }
+      
+      const res = await apiRequest("POST", "/api/dns-records", recordData);
+      return await res.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/dns-records", domain.id] });
+      setIsAddRecordDialogOpen(false);
+      form.reset();
+      toast({
+        title: "Record added",
+        description: "The DNS record has been successfully added.",
+      });
+    },
+    onError: (error) => {
+      toast({
+        title: "Failed to add record",
+        description: error.message,
+        variant: "destructive",
+      });
+    },
+  });
+
+  // Update record mutation
+  const updateRecordMutation = useMutation({
+    mutationFn: async (data: z.infer<typeof dnsRecordSchema> & { id: string }) => {
+      const { id, ...updateData } = data;
+      
+      // Handle providerId - convert "none" to null
+      if (updateData.providerId === "none") {
+        updateData.providerId = null;
+      }
+      
+      const res = await apiRequest("PUT", `/api/dns-records/${id}`, updateData);
+      return await res.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/dns-records", domain.id] });
+      setIsEditRecordDialogOpen(false);
+      setSelectedRecord(null);
+      toast({
+        title: "Record updated",
+        description: "The DNS record has been successfully updated.",
+      });
+    },
+    onError: (error) => {
+      toast({
+        title: "Failed to update record",
+        description: error.message,
+        variant: "destructive",
+      });
+    },
+  });
+
+  // Delete record mutation
+  const deleteRecordMutation = useMutation({
+    mutationFn: async (recordId: string) => {
+      await apiRequest("DELETE", `/api/dns-records/${recordId}`);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/dns-records", domain.id] });
+      setIsDeleteDialogOpen(false);
+      setSelectedRecord(null);
+      toast({
+        title: "Record deleted",
+        description: "The DNS record has been successfully deleted.",
+      });
+    },
+    onError: (error) => {
+      toast({
+        title: "Failed to delete record",
+        description: error.message,
+        variant: "destructive",
+      });
+    },
+  });
+
+  // Form submission handlers
+  const onAddSubmit = (data: z.infer<typeof dnsRecordSchema>) => {
+    addRecordMutation.mutate(data);
+  };
+
+  const onEditSubmit = (data: z.infer<typeof dnsRecordSchema>) => {
+    if (selectedRecord) {
+      updateRecordMutation.mutate({ ...data, id: selectedRecord.id });
+    }
+  };
+
+  // Handle record editing
+  const handleEditRecord = (record: DnsRecord) => {
+    setSelectedRecord(record);
+    
+    // Set form values for editing
+    form.reset({
+      name: record.name,
+      type: record.type,
+      content: record.content,
+      ttl: record.ttl,
+      proxied: record.proxied,
+      isActive: record.isActive,
+      isAutoIP: record.isAutoIP,
+      notes: record.notes || "",
+      providerId: record.providerId || "none",
+    });
+    
+    setIsEditRecordDialogOpen(true);
+  };
+
+  // Handle record deletion
+  const handleDeleteRecord = (record: DnsRecord) => {
+    setSelectedRecord(record);
+    setIsDeleteDialogOpen(true);
+  };
+
+  // Confirm deletion
+  const confirmDeleteRecord = () => {
+    if (selectedRecord) {
+      deleteRecordMutation.mutate(selectedRecord.id);
+    }
+  };
+
+  // Get a human-readable provider name from the provider ID
+  const getProviderName = (providerId: string | null) => {
+    if (!providerId) return "None";
+    const provider = providers.find(p => p.id === providerId);
+    return provider ? provider.name : "Unknown Provider";
+  };
+
+  // Calculate pagination
+  const startIndex = (currentPage - 1) * pageSize;
+  const endIndex = startIndex + pageSize;
+  const paginatedRecords = records.slice(startIndex, endIndex);
+  const totalPages = Math.ceil(records.length / pageSize);
+
+  // Handle adding a new record
+  const handleAddRecord = () => {
+    // Reset form with defaults
+    form.reset({
+      name: "",
+      type: "A",
+      content: "",
+      ttl: 3600,
+      proxied: false,
+      isActive: true,
+      isAutoIP: false,
+      notes: "",
+      providerId: "none",
+    });
+    setIsAddRecordDialogOpen(true);
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center py-8">
+        <Loader2 className="h-8 w-8 animate-spin text-primary" />
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="mb-6 flex justify-between items-center">
+        <h2 className="text-xl font-semibold">DNS Records for {domain.name}</h2>
+        <Button onClick={handleAddRecord}>
+          <Plus className="mr-2 h-4 w-4" />
+          Add Record
+        </Button>
+      </div>
+
+      {records.length === 0 ? (
+        <div className="text-center py-8 border rounded-lg">
+          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
+            <FileText className="h-6 w-6 text-primary" />
+          </div>
+          <h3 className="mt-4 text-lg font-medium">No DNS records found</h3>
+          <p className="mt-2 text-sm text-muted-foreground">
+            Get started by adding your first DNS record.
+          </p>
+          <div className="mt-6">
+            <Button onClick={handleAddRecord}>Add DNS Record</Button>
+          </div>
+        </div>
+      ) : (
+        <div className="bg-card rounded-lg border shadow-sm">
+          <div className="overflow-x-auto">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Name</TableHead>
+                  <TableHead>Type</TableHead>
+                  <TableHead>Content</TableHead>
+                  <TableHead>TTL</TableHead>
+                  <TableHead>Provider</TableHead>
+                  <TableHead>Last Update</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead className="text-right">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {paginatedRecords.map(record => (
+                  <TableRow key={record.id}>
+                    <TableCell className="font-medium">
+                      {record.name === "@" ? (
+                        <TooltipProvider>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <span>{record.name}</span>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              <p>Root domain: {domain.name}</p>
+                            </TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
+                      ) : (
+                        record.name
+                      )}
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant="outline">{record.type}</Badge>
+                    </TableCell>
+                    <TableCell>
+                      <TooltipProvider>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <span className="truncate max-w-[150px] inline-block">
+                              {record.content}
+                            </span>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>{record.content}</p>
+                            {record.notes && (
+                              <>
+                                <div className="border-t my-1"></div>
+                                <p className="italic text-xs">{record.notes}</p>
+                              </>
+                            )}
+                          </TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+                    </TableCell>
+                    <TableCell>{record.ttl}s</TableCell>
+                    <TableCell>{getProviderName(record.providerId)}</TableCell>
+                    <TableCell>
+                      {record.lastUpdated 
+                        ? formatDistanceToNow(new Date(record.lastUpdated), { addSuffix: true }) 
+                        : "Never"}
+                    </TableCell>
+                    <TableCell>
+                      {record.isActive ? (
+                        <Badge variant="success">Active</Badge>
+                      ) : (
+                        <Badge variant="secondary">Inactive</Badge>
+                      )}
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <div className="flex justify-end gap-2">
+                        <Button 
+                          variant="ghost" 
+                          size="icon"
+                          onClick={() => handleEditRecord(record)}
+                        >
+                          <Pencil className="h-4 w-4" />
+                        </Button>
+                        <Button 
+                          variant="ghost" 
+                          size="icon"
+                          className="text-destructive hover:text-destructive"
+                          onClick={() => handleDeleteRecord(record)}
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+          
+          {records.length > pageSize && (
+            <div className="p-4 border-t">
+              <Pagination
+                currentPage={currentPage}
+                totalPages={totalPages}
+                onPageChange={setCurrentPage}
+                itemLabel="records"
+                totalItems={records.length}
+                itemsPerPage={pageSize}
+              />
+            </div>
+          )}
+        </div>
+      )}
+
+      <div className="mt-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>Recent Activity</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <RecentActivity domainId={domain.id} />
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Add Record Dialog */}
+      <Dialog open={isAddRecordDialogOpen} onOpenChange={setIsAddRecordDialogOpen}>
+        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>Add DNS Record</DialogTitle>
+            <DialogDescription>
+              Add a new DNS record to {domain.name}.
+            </DialogDescription>
+          </DialogHeader>
+          
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onAddSubmit)} className="space-y-4">
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Name</FormLabel>
+                    <FormControl>
+                      <Input placeholder="@, www, subdomain, etc" {...field} />
+                    </FormControl>
+                    <FormDescription>
+                      Use @ for root domain or enter subdomain name
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              
+              <FormField
+                control={form.control}
+                name="providerId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>DNS Provider</FormLabel>
+                    <Select
+                      onValueChange={field.onChange}
+                      defaultValue={field.value}
+                    >
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select a DNS provider" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="none">None</SelectItem>
+                        {providers.map((provider) => (
+                          <SelectItem 
+                            key={provider.id} 
+                            value={provider.id}
+                          >
+                            {provider.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormDescription>
+                      Select the DNS provider to use for this record
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              
+              <FormField
+                control={form.control}
+                name="type"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Record Type</FormLabel>
+                    <Select
+                      onValueChange={field.onChange}
+                      defaultValue={field.value}
+                    >
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select record type" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {recordTypes.map((type) => (
+                          <SelectItem 
+                            key={type} 
+                            value={type}
+                          >
+                            {type}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              
+              <FormField
+                control={form.control}
+                name="content"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Content</FormLabel>
+                    <FormControl>
+                      <Input placeholder="192.168.1.1, example.com, etc" {...field} />
+                    </FormControl>
+                    <FormDescription>
+                      {form.watch("type") === "A" && "IP address (e.g. 192.168.1.1)"}
+                      {form.watch("type") === "AAAA" && "IPv6 address"}
+                      {form.watch("type") === "CNAME" && "Domain name (e.g. example.com)"}
+                      {form.watch("type") === "MX" && "Mail server (e.g. mail.example.com)"}
+                      {form.watch("type") === "TXT" && "Text content"}
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              
+              <FormField
+                control={form.control}
+                name="ttl"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>TTL (seconds)</FormLabel>
+                    <FormControl>
+                      <Input 
+                        type="number" 
+                        {...field} 
+                        value={field.value}
+                        onChange={e => field.onChange(parseInt(e.target.value || "3600"))}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      Time-to-live in seconds. 3600 = 1 hour
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              
+              <FormField
+                control={form.control}
+                name="proxied"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                    <div className="space-y-0.5">
+                      <FormLabel className="text-base">Proxied</FormLabel>
+                      <FormDescription>
+                        Enable proxying through CDN (Cloudflare only)
+                      </FormDescription>
+                    </div>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+              
+              <FormField
+                control={form.control}
+                name="isActive"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                    <div className="space-y-0.5">
+                      <FormLabel className="text-base">Active</FormLabel>
+                      <FormDescription>
+                        Enable this record to be used
+                      </FormDescription>
+                    </div>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+              
+              {(form.watch("type") === "A" || form.watch("type") === "AAAA") && (
+                <FormField
+                  control={form.control}
+                  name="isAutoIP"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                      <div className="space-y-0.5">
+                        <FormLabel className="text-base">Auto IP Address</FormLabel>
+                        <FormDescription>
+                          Automatically determine IP address using STUN
+                        </FormDescription>
+                      </div>
+                      <FormControl>
+                        <Switch
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              )}
+              
+              <FormField
+                control={form.control}
+                name="notes"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Notes</FormLabel>
+                    <FormControl>
+                      <Input placeholder="Optional notes about this record" {...field} />
+                    </FormControl>
+                    <FormDescription>
+                      Add any additional information about this record
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              
+              <DialogFooter>
+                <Button 
+                  type="submit" 
+                  disabled={addRecordMutation.isPending}
+                >
+                  {addRecordMutation.isPending ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      Adding...
+                    </>
+                  ) : (
+                    "Add Record"
+                  )}
+                </Button>
+              </DialogFooter>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+
+      {/* Edit Record Dialog */}
+      <Dialog open={isEditRecordDialogOpen} onOpenChange={setIsEditRecordDialogOpen}>
+        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>Edit DNS Record</DialogTitle>
+            <DialogDescription>
+              Update the DNS record for {domain.name}.
+            </DialogDescription>
+          </DialogHeader>
+          
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onEditSubmit)} className="space-y-4">
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Name</FormLabel>
+                    <FormControl>
+                      <Input placeholder="@, www, subdomain, etc" {...field} />
+                    </FormControl>
+                    <FormDescription>
+                      Use @ for root domain or enter subdomain name
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              
+              <FormField
+                control={form.control}
+                name="providerId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>DNS Provider</FormLabel>
+                    <Select
+                      onValueChange={field.onChange}
+                      defaultValue={field.value}
+                    >
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select a DNS provider" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="none">None</SelectItem>
+                        {providers.map((provider) => (
+                          <SelectItem 
+                            key={provider.id} 
+                            value={provider.id}
+                          >
+                            {provider.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormDescription>
+                      Select the DNS provider to use for this record
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              
+              <FormField
+                control={form.control}
+                name="type"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Record Type</FormLabel>
+                    <Select
+                      onValueChange={field.onChange}
+                      defaultValue={field.value}
+                    >
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select record type" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {recordTypes.map((type) => (
+                          <SelectItem 
+                            key={type} 
+                            value={type}
+                          >
+                            {type}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              
+              <FormField
+                control={form.control}
+                name="content"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Content</FormLabel>
+                    <FormControl>
+                      <Input placeholder="192.168.1.1, example.com, etc" {...field} />
+                    </FormControl>
+                    <FormDescription>
+                      {form.watch("type") === "A" && "IP address (e.g. 192.168.1.1)"}
+                      {form.watch("type") === "AAAA" && "IPv6 address"}
+                      {form.watch("type") === "CNAME" && "Domain name (e.g. example.com)"}
+                      {form.watch("type") === "MX" && "Mail server (e.g. mail.example.com)"}
+                      {form.watch("type") === "TXT" && "Text content"}
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              
+              <FormField
+                control={form.control}
+                name="ttl"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>TTL (seconds)</FormLabel>
+                    <FormControl>
+                      <Input 
+                        type="number" 
+                        {...field} 
+                        value={field.value}
+                        onChange={e => field.onChange(parseInt(e.target.value || "3600"))}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      Time-to-live in seconds. 3600 = 1 hour
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              
+              <FormField
+                control={form.control}
+                name="proxied"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                    <div className="space-y-0.5">
+                      <FormLabel className="text-base">Proxied</FormLabel>
+                      <FormDescription>
+                        Enable proxying through CDN (Cloudflare only)
+                      </FormDescription>
+                    </div>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+              
+              <FormField
+                control={form.control}
+                name="isActive"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                    <div className="space-y-0.5">
+                      <FormLabel className="text-base">Active</FormLabel>
+                      <FormDescription>
+                        Enable this record to be used
+                      </FormDescription>
+                    </div>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+              
+              {(form.watch("type") === "A" || form.watch("type") === "AAAA") && (
+                <FormField
+                  control={form.control}
+                  name="isAutoIP"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                      <div className="space-y-0.5">
+                        <FormLabel className="text-base">Auto IP Address</FormLabel>
+                        <FormDescription>
+                          Automatically determine IP address using STUN
+                        </FormDescription>
+                      </div>
+                      <FormControl>
+                        <Switch
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              )}
+              
+              <FormField
+                control={form.control}
+                name="notes"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Notes</FormLabel>
+                    <FormControl>
+                      <Input placeholder="Optional notes about this record" {...field} />
+                    </FormControl>
+                    <FormDescription>
+                      Add any additional information about this record
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              
+              <DialogFooter>
+                <Button 
+                  type="submit" 
+                  disabled={updateRecordMutation.isPending}
+                >
+                  {updateRecordMutation.isPending ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      Updating...
+                    </>
+                  ) : (
+                    "Update Record"
+                  )}
+                </Button>
+              </DialogFooter>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
+        <AlertDialogContent className="max-w-md">
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This will permanently delete the DNS record <strong>{selectedRecord?.name}</strong> of type <strong>{selectedRecord?.type}</strong>. 
+              This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction 
+              onClick={confirmDeleteRecord}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              disabled={deleteRecordMutation.isPending}
+            >
+              {deleteRecordMutation.isPending ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Deleting...
+                </>
+              ) : (
+                "Delete"
+              )}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/client/src/pages/domains.tsx b/client/src/pages/domains.tsx
index ac27a0e..8147ff8 100644
--- a/client/src/pages/domains.tsx
+++ b/client/src/pages/domains.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { MainLayout } from "@/components/layouts/main-layout";
 import { DomainTable } from "@/components/domain/domain-table";
+import { DomainDetails } from "@/components/domain/domain-details";
 import { Domain, InsertDomain, Provider } from "@shared/schema";
 import { useOrganization } from "@/context/organization-context";
 import { apiRequest, queryClient } from "@/lib/queryClient";
@@ -44,7 +45,7 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Loader2 } from "lucide-react";
+import { Loader2, ArrowLeft } from "lucide-react";
 
 // Domain name regex
 const domainRegex = /^((?!-)[A-Za-z0-9-]{1,63}(?<!-)\.)+[A-Za-z]{2,}$/;
@@ -65,6 +66,7 @@ export default function DomainsPage() {
   const [isAddDomainDialogOpen, setIsAddDomainDialogOpen] = useState(false);
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [selectedDomain, setSelectedDomain] = useState<Domain | null>(null);
+  const [activeDomain, setActiveDomain] = useState<Domain | null>(null);
 
   // Fetch domains
   const { data: domains = [], isLoading } = useQuery<Domain[]>({
@@ -156,8 +158,12 @@ export default function DomainsPage() {
 
   // Handle domain management
   const handleManageDomain = (domain: Domain) => {
-    // Navigate to DNS records for this domain
-    window.location.href = `/dns-records?domainId=${domain.id}`;
+    setActiveDomain(domain);
+  };
+
+  // Return to domain list
+  const handleBackToDomains = () => {
+    setActiveDomain(null);
   };
 
   // Handle domain deletion
@@ -170,6 +176,10 @@ export default function DomainsPage() {
   const confirmDeleteDomain = () => {
     if (selectedDomain) {
       deleteDomainMutation.mutate(selectedDomain.id);
+      // If the deleted domain is the active domain, return to the domain list
+      if (activeDomain && activeDomain.id === selectedDomain.id) {
+        setActiveDomain(null);
+      }
     }
   };
 
@@ -178,22 +188,42 @@ export default function DomainsPage() {
       title="Domains"
       description="Manage your DNS domains across providers."
     >
-      <div className="mb-6 flex justify-end">
-        <Button onClick={() => setIsAddDomainDialogOpen(true)}>
-          Add Domain
-        </Button>
-      </div>
+      {!activeDomain ? (
+        // Domain list view
+        <>
+          <div className="mb-6 flex justify-end">
+            <Button onClick={() => setIsAddDomainDialogOpen(true)}>
+              Add Domain
+            </Button>
+          </div>
 
-      {/* Domains Table */}
-      <DomainTable 
-        onManageDomain={handleManageDomain}
-        onDeleteDomain={handleDeleteDomain}
-        onAddDomain={() => setIsAddDomainDialogOpen(true)}
-      />
+          {/* Domains Table */}
+          <DomainTable 
+            onManageDomain={handleManageDomain}
+            onDeleteDomain={handleDeleteDomain}
+            onAddDomain={() => setIsAddDomainDialogOpen(true)}
+          />
+        </>
+      ) : (
+        // Domain detail view with DNS records
+        <>
+          <div className="mb-6">
+            <Button 
+              variant="outline" 
+              onClick={handleBackToDomains}
+              className="mb-4"
+            >
+              <ArrowLeft className="mr-2 h-4 w-4" />
+              Back to Domains
+            </Button>
+            <DomainDetails domain={activeDomain} />
+          </div>
+        </>
+      )}
 
       {/* Add Domain Dialog */}
       <Dialog open={isAddDomainDialogOpen} onOpenChange={setIsAddDomainDialogOpen}>
-        <DialogContent>
+        <DialogContent className="max-w-md">
           <DialogHeader>
             <DialogTitle>Add Domain</DialogTitle>
             <DialogDescription>
@@ -270,7 +300,7 @@ export default function DomainsPage() {
 
       {/* Delete Confirmation Dialog */}
       <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
-        <AlertDialogContent>
+        <AlertDialogContent className="max-w-md">
           <AlertDialogHeader>
             <AlertDialogTitle>Are you sure?</AlertDialogTitle>
             <AlertDialogDescription>
@@ -299,4 +329,4 @@ export default function DomainsPage() {
       </AlertDialog>
     </MainLayout>
   );
-}
+}
\ No newline at end of file