diff --git a/client/src/components/domain/domain-details.bk.tsx b/client/src/components/domain/domain-details.bk.tsx
new file mode 100644
index 0000000..bbec394
--- /dev/null
+++ b/client/src/components/domain/domain-details.bk.tsx
@@ -0,0 +1,976 @@
+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().optional().or(z.literal('')),
+  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(),
+}).refine(data => {
+  // Different validation based on record type
+  if ((data.type === 'A' || data.type === 'AAAA') && data.isAutoIP) {
+    // Auto IP enabled, content not required
+    return true;
+  } else if (data.type === 'A') {
+    // A record - validate IPv4
+    return !!data.content && /^(\d{1,3}\.){3}\d{1,3}$/.test(data.content.trim());
+  } else if (data.type === 'AAAA') {
+    // AAAA record - accept any non-empty content for IPv6 (simplified validation)
+    return !!data.content && data.content.trim().length > 0;
+  } else if (data.type === 'CNAME' || data.type === 'MX' || data.type === 'NS') {
+    // Domain-based records - ensure content is present and looks like domain
+    return !!data.content && data.content.trim().length > 0;
+  } else {
+    // For all other types, just ensure content is non-empty
+    return !!data.content && data.content.trim().length > 0;
+  }
+}, {
+  message: "Content is required and must be valid for the selected record type",
+  path: ["content"]
+});
+
+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: "",
+    },
+  });
+
+  // Add record mutation
+  const addRecordMutation = useMutation({
+    mutationFn: async (data: z.infer<typeof dnsRecordSchema>) => {
+      // Prepare record data
+      const recordData: InsertDnsRecord = {
+        ...data,
+        domainId: domain.id,
+        // Inherit providerId from domain
+        providerId: domain.providerId
+      };
+      
+      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;
+      
+      // Always use domain's provider for the record
+      const updatedData = {
+        ...updateData,
+        providerId: domain.providerId
+      };
+      
+      const res = await apiRequest("PUT", `/api/dns-records/${id}`, updatedData);
+      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 as any, // Type cast to handle compatibility
+      content: record.content,
+      ttl: record.ttl as number, // Type cast to handle nullable
+      proxied: record.proxied as boolean, // Type cast to handle nullable
+      isActive: record.isActive,
+      isAutoIP: record.isAutoIP,
+      notes: record.notes || "",
+    });
+    
+    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: "",
+    });
+    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.isAutoIP ? "Auto IP" : record.content}
+                            </span>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>{record.isAutoIP ? "Auto IP" : 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="outline" className="bg-green-50 text-green-700 border-green-200">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>
+                )}
+              />
+              
+              {(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>
+                  )}
+                />
+              )}
+              
+              {(!form.watch("isAutoIP") || (form.watch("type") !== "A" && form.watch("type") !== "AAAA")) && (
+                <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>
+                )}
+              />
+              
+              <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>
+                )}
+              />
+              
+              {(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>
+                  )}
+                />
+              )}
+              
+              {(!form.watch("isAutoIP") || (form.watch("type") !== "A" && form.watch("type") !== "AAAA")) && (
+                <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>
+                )}
+              />
+              
+              <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/components/domain/domain-details.optimized.tsx b/client/src/components/domain/domain-details.optimized.tsx
new file mode 100644
index 0000000..f774f31
--- /dev/null
+++ b/client/src/components/domain/domain-details.optimized.tsx
@@ -0,0 +1,913 @@
+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().optional().or(z.literal('')),
+  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(),
+}).refine(data => {
+  // Different validation based on record type
+  if ((data.type === 'A' || data.type === 'AAAA') && data.isAutoIP) {
+    // Auto IP enabled, content not required
+    return true;
+  } else if (data.type === 'A') {
+    // A record - validate IPv4
+    return !!data.content && /^(\d{1,3}\.){3}\d{1,3}$/.test(data.content.trim());
+  } else if (data.type === 'AAAA') {
+    // AAAA record - accept any non-empty content for IPv6 (simplified validation)
+    return !!data.content && data.content.trim().length > 0;
+  } else if (data.type === 'CNAME' || data.type === 'MX' || data.type === 'NS') {
+    // Domain-based records - ensure content is present and looks like domain
+    return !!data.content && data.content.trim().length > 0;
+  } else {
+    // For all other types, just ensure content is non-empty
+    return !!data.content && data.content.trim().length > 0;
+  }
+}, {
+  message: "Content is required and must be valid for the selected record type",
+  path: ["content"]
+});
+
+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: "",
+    },
+  });
+
+  // Add record mutation
+  const addRecordMutation = useMutation({
+    mutationFn: async (data: z.infer<typeof dnsRecordSchema>) => {
+      // Prepare record data
+      const recordData: InsertDnsRecord = {
+        ...data,
+        domainId: domain.id,
+        // Inherit providerId from domain
+        providerId: domain.providerId
+      };
+      
+      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;
+      
+      // Always use domain's provider for the record
+      const updatedData = {
+        ...updateData,
+        providerId: domain.providerId
+      };
+      
+      const res = await apiRequest("PUT", `/api/dns-records/${id}`, updatedData);
+      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 as any, // Type cast to handle compatibility
+      content: record.content,
+      ttl: record.ttl as number, // Type cast to handle nullable
+      proxied: record.proxied as boolean, // Type cast to handle nullable
+      isActive: record.isActive,
+      isAutoIP: record.isAutoIP,
+      notes: record.notes || "",
+    });
+    
+    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: "",
+    });
+    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.isAutoIP ? "Auto IP" : record.content}
+                            </span>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>{record.isAutoIP ? "Auto IP" : 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="outline" className="bg-green-50 text-green-700 border-green-200">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="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>
+                )}
+              />
+              
+              {/* Moved proxied toggle above isAutoIP */}
+              <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>
+                )}
+              />
+              
+              {(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>
+                  )}
+                />
+              )}
+              
+              {(!form.watch("isAutoIP") || (form.watch("type") !== "A" && form.watch("type") !== "AAAA")) && (
+                <FormField
+                  control={form.control}
+                  name="content"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Content</FormLabel>
+                      <FormControl>
+                        <Input placeholder="Record value" {...field} />
+                      </FormControl>
+                      <FormDescription>
+                        The content of the DNS record (e.g. IP address, domain name)
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+              
+              <FormField
+                control={form.control}
+                name="ttl"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>TTL (seconds)</FormLabel>
+                    <FormControl>
+                      <Input 
+                        type="number" 
+                        min={1} 
+                        {...field} 
+                        onChange={e => field.onChange(parseInt(e.target.value))}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      Time to live in seconds, how long DNS servers should cache this record
+                    </FormDescription>
+                    <FormMessage />
+                  </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 or disable this DNS record
+                      </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 optional notes about this record (for internal reference only)
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              
+              <DialogFooter>
+                <Button 
+                  type="button" 
+                  variant="outline" 
+                  onClick={() => setIsAddRecordDialogOpen(false)}
+                >
+                  Cancel
+                </Button>
+                <Button 
+                  type="submit"
+                  disabled={addRecordMutation.isPending}
+                >
+                  {addRecordMutation.isPending && (
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  )}
+                  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="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>
+                )}
+              />
+              
+              {/* Moved proxied toggle above isAutoIP */}
+              <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>
+                )}
+              />
+              
+              {(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>
+                  )}
+                />
+              )}
+              
+              {(!form.watch("isAutoIP") || (form.watch("type") !== "A" && form.watch("type") !== "AAAA")) && (
+                <FormField
+                  control={form.control}
+                  name="content"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Content</FormLabel>
+                      <FormControl>
+                        <Input placeholder="Record value" {...field} />
+                      </FormControl>
+                      <FormDescription>
+                        The content of the DNS record (e.g. IP address, domain name)
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+              
+              <FormField
+                control={form.control}
+                name="ttl"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>TTL (seconds)</FormLabel>
+                    <FormControl>
+                      <Input 
+                        type="number" 
+                        min={1} 
+                        {...field} 
+                        onChange={e => field.onChange(parseInt(e.target.value))}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      Time to live in seconds, how long DNS servers should cache this record
+                    </FormDescription>
+                    <FormMessage />
+                  </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 or disable this DNS record
+                      </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 optional notes about this record (for internal reference only)
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              
+              <DialogFooter>
+                <Button 
+                  type="button" 
+                  variant="outline" 
+                  onClick={() => setIsEditRecordDialogOpen(false)}
+                >
+                  Cancel
+                </Button>
+                <Button 
+                  type="submit"
+                  disabled={updateRecordMutation.isPending}
+                >
+                  {updateRecordMutation.isPending && (
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  )}
+                  Update Record
+                </Button>
+              </DialogFooter>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+      
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This will permanently delete the DNS record "{selectedRecord?.name}" 
+              of type {selectedRecord?.type}. This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={confirmDeleteRecord}
+              className="bg-destructive text-destructive-foreground"
+            >
+              {deleteRecordMutation.isPending && (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              )}
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+      
+      {/* Back Button */}
+      {onBack && (
+        <div className="mt-6">
+          <Button 
+            variant="outline" 
+            onClick={onBack}
+          >
+            Back to Domains
+          </Button>
+        </div>
+      )}
+    </>
+  );
+}
\ No newline at end of file
diff --git a/client/src/components/domain/domain-details.tsx b/client/src/components/domain/domain-details.tsx
index bbec394..f774f31 100644
--- a/client/src/components/domain/domain-details.tsx
+++ b/client/src/components/domain/domain-details.tsx
@@ -487,41 +487,6 @@ export function DomainDetails({ domain, onBack }: DomainDetailsProps) {
                 )}
               />
               
-              <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"
@@ -553,6 +518,28 @@ export function DomainDetails({ domain, onBack }: DomainDetailsProps) {
                 )}
               />
               
+              {/* Moved proxied toggle above isAutoIP */}
+              <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>
+                )}
+              />
+              
               {(form.watch("type") === "A" || form.watch("type") === "AAAA") && (
                 <FormField
                   control={form.control}
@@ -584,14 +571,10 @@ export function DomainDetails({ domain, onBack }: DomainDetailsProps) {
                     <FormItem>
                       <FormLabel>Content</FormLabel>
                       <FormControl>
-                        <Input placeholder="192.168.1.1, example.com, etc" {...field} />
+                        <Input placeholder="Record value" {...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"}
+                        The content of the DNS record (e.g. IP address, domain name)
                       </FormDescription>
                       <FormMessage />
                     </FormItem>
@@ -608,40 +591,19 @@ export function DomainDetails({ domain, onBack }: DomainDetailsProps) {
                     <FormControl>
                       <Input 
                         type="number" 
+                        min={1} 
                         {...field} 
-                        value={field.value}
-                        onChange={e => field.onChange(parseInt(e.target.value || "3600"))}
+                        onChange={e => field.onChange(parseInt(e.target.value))}
                       />
                     </FormControl>
                     <FormDescription>
-                      Time-to-live in seconds. 3600 = 1 hour
+                      Time to live in seconds, how long DNS servers should cache this record
                     </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"
@@ -650,7 +612,7 @@ export function DomainDetails({ domain, onBack }: DomainDetailsProps) {
                     <div className="space-y-0.5">
                       <FormLabel className="text-base">Active</FormLabel>
                       <FormDescription>
-                        Enable this record to be used
+                        Enable or disable this DNS record
                       </FormDescription>
                     </div>
                     <FormControl>
@@ -673,7 +635,7 @@ export function DomainDetails({ domain, onBack }: DomainDetailsProps) {
                       <Input placeholder="Optional notes about this record" {...field} />
                     </FormControl>
                     <FormDescription>
-                      Add any additional information about this record
+                      Add optional notes about this record (for internal reference only)
                     </FormDescription>
                     <FormMessage />
                   </FormItem>
@@ -682,24 +644,27 @@ export function DomainDetails({ domain, onBack }: DomainDetailsProps) {
               
               <DialogFooter>
                 <Button 
-                  type="submit" 
+                  type="button" 
+                  variant="outline" 
+                  onClick={() => setIsAddRecordDialogOpen(false)}
+                >
+                  Cancel
+                </Button>
+                <Button 
+                  type="submit"
                   disabled={addRecordMutation.isPending}
                 >
-                  {addRecordMutation.isPending ? (
-                    <>
-                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                      Adding...
-                    </>
-                  ) : (
-                    "Add Record"
+                  {addRecordMutation.isPending && (
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                   )}
+                  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">
@@ -729,41 +694,6 @@ export function DomainDetails({ domain, onBack }: DomainDetailsProps) {
                 )}
               />
               
-              <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"
@@ -795,6 +725,28 @@ export function DomainDetails({ domain, onBack }: DomainDetailsProps) {
                 )}
               />
               
+              {/* Moved proxied toggle above isAutoIP */}
+              <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>
+                )}
+              />
+              
               {(form.watch("type") === "A" || form.watch("type") === "AAAA") && (
                 <FormField
                   control={form.control}
@@ -826,14 +778,10 @@ export function DomainDetails({ domain, onBack }: DomainDetailsProps) {
                     <FormItem>
                       <FormLabel>Content</FormLabel>
                       <FormControl>
-                        <Input placeholder="192.168.1.1, example.com, etc" {...field} />
+                        <Input placeholder="Record value" {...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"}
+                        The content of the DNS record (e.g. IP address, domain name)
                       </FormDescription>
                       <FormMessage />
                     </FormItem>
@@ -850,40 +798,19 @@ export function DomainDetails({ domain, onBack }: DomainDetailsProps) {
                     <FormControl>
                       <Input 
                         type="number" 
+                        min={1} 
                         {...field} 
-                        value={field.value}
-                        onChange={e => field.onChange(parseInt(e.target.value || "3600"))}
+                        onChange={e => field.onChange(parseInt(e.target.value))}
                       />
                     </FormControl>
                     <FormDescription>
-                      Time-to-live in seconds. 3600 = 1 hour
+                      Time to live in seconds, how long DNS servers should cache this record
                     </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"
@@ -892,7 +819,7 @@ export function DomainDetails({ domain, onBack }: DomainDetailsProps) {
                     <div className="space-y-0.5">
                       <FormLabel className="text-base">Active</FormLabel>
                       <FormDescription>
-                        Enable this record to be used
+                        Enable or disable this DNS record
                       </FormDescription>
                     </div>
                     <FormControl>
@@ -915,7 +842,7 @@ export function DomainDetails({ domain, onBack }: DomainDetailsProps) {
                       <Input placeholder="Optional notes about this record" {...field} />
                     </FormControl>
                     <FormDescription>
-                      Add any additional information about this record
+                      Add optional notes about this record (for internal reference only)
                     </FormDescription>
                     <FormMessage />
                   </FormItem>
@@ -924,53 +851,63 @@ export function DomainDetails({ domain, onBack }: DomainDetailsProps) {
               
               <DialogFooter>
                 <Button 
-                  type="submit" 
+                  type="button" 
+                  variant="outline" 
+                  onClick={() => setIsEditRecordDialogOpen(false)}
+                >
+                  Cancel
+                </Button>
+                <Button 
+                  type="submit"
                   disabled={updateRecordMutation.isPending}
                 >
-                  {updateRecordMutation.isPending ? (
-                    <>
-                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                      Updating...
-                    </>
-                  ) : (
-                    "Update Record"
+                  {updateRecordMutation.isPending && (
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                   )}
+                  Update Record
                 </Button>
               </DialogFooter>
             </form>
           </Form>
         </DialogContent>
       </Dialog>
-
+      
       {/* Delete Confirmation Dialog */}
       <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
-        <AlertDialogContent className="max-w-md">
+        <AlertDialogContent>
           <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.
+              This will permanently delete the DNS record "{selectedRecord?.name}" 
+              of type {selectedRecord?.type}. This action cannot be undone.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction 
+            <AlertDialogAction
               onClick={confirmDeleteRecord}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-              disabled={deleteRecordMutation.isPending}
+              className="bg-destructive text-destructive-foreground"
             >
-              {deleteRecordMutation.isPending ? (
-                <>
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  Deleting...
-                </>
-              ) : (
-                "Delete"
+              {deleteRecordMutation.isPending && (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
               )}
+              Delete
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
+      
+      {/* Back Button */}
+      {onBack && (
+        <div className="mt-6">
+          <Button 
+            variant="outline" 
+            onClick={onBack}
+          >
+            Back to Domains
+          </Button>
+        </div>
+      )}
     </>
   );
 }
\ No newline at end of file