diff --git a/src/api/ddns.ts b/src/api/ddns.ts
new file mode 100644
index 0000000..0b74c2d
--- /dev/null
+++ b/src/api/ddns.ts
@@ -0,0 +1,18 @@
+import { ModelDDNSForm } from "@/types"
+import { fetcher, FetcherMethod } from "./api"
+
+export const createDDNSProfile = async (data: ModelDDNSForm): Promise<number> => {
+    return fetcher<number>(FetcherMethod.POST, '/api/v1/ddns', data)
+}
+
+export const updateDDNSProfile = async (id: number, data: ModelDDNSForm): Promise<void> => {
+    return fetcher<void>(FetcherMethod.PATCH, `/api/v1/ddns/${id}`, data)
+}
+
+export const deleteDDNSProfiles = async (id: number[]): Promise<void> => {
+    return fetcher<void>(FetcherMethod.POST, '/api/v1/batch-delete/ddns', id)
+}
+
+export const getDDNSProviders = async (): Promise<string[]> => {
+    return fetcher<string[]>(FetcherMethod.GET, '/api/v1/ddns/providers', null)
+}
diff --git a/src/api/nat.ts b/src/api/nat.ts
new file mode 100644
index 0000000..524a02e
--- /dev/null
+++ b/src/api/nat.ts
@@ -0,0 +1,14 @@
+import { ModelNATForm } from "@/types"
+import { fetcher, FetcherMethod } from "./api"
+
+export const createNAT = async (data: ModelNATForm): Promise<number> => {
+    return fetcher<number>(FetcherMethod.POST, '/api/v1/nat', data)
+}
+
+export const updateNAT = async (id: number, data: ModelNATForm): Promise<void> => {
+    return fetcher<void>(FetcherMethod.PATCH, `/api/v1/nat/${id}`, data)
+}
+
+export const deleteNAT = async (id: number[]): Promise<void> => {
+    return fetcher<void>(FetcherMethod.POST, '/api/v1/batch-delete/nat', id)
+}
diff --git a/src/components/ddns.tsx b/src/components/ddns.tsx
new file mode 100644
index 0000000..680449f
--- /dev/null
+++ b/src/components/ddns.tsx
@@ -0,0 +1,361 @@
+import { Button } from "@/components/ui/button"
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select"
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { ModelDDNSProfile } from "@/types"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Label } from "@/components/ui/label"
+import { conv } from "@/lib/utils"
+import { useState } from "react"
+import { KeyedMutator } from "swr"
+import { asOptionalField } from "@/lib/utils"
+import { IconButton } from "@/components/xui/icon-button"
+import { ddnsTypes, ddnsRequestTypes } from "@/types"
+import { createDDNSProfile, updateDDNSProfile } from "@/api/ddns"
+import { Textarea } from "./ui/textarea"
+
+interface DDNSCardProps {
+    data?: ModelDDNSProfile;
+    providers: string[];
+    mutate: KeyedMutator<ModelDDNSProfile[]>;
+}
+
+const ddnsFormSchema = z.object({
+    max_retries: z.coerce.number().int().min(1),
+    enable_ipv4: asOptionalField(z.boolean()),
+    enable_ipv6: asOptionalField(z.boolean()),
+    name: z.string().min(1),
+    provider: z.string(),
+    domains: z.array(z.string()),
+    access_id: asOptionalField(z.string()),
+    access_secret: asOptionalField(z.string()),
+    webhook_url: asOptionalField(z.string().url()),
+    webhook_method: asOptionalField(z.coerce.number().int().min(1).max(255)),
+    webhook_request_type: asOptionalField(z.coerce.number().int().min(1).max(255).default(1)),
+    webhook_request_body: asOptionalField(z.string()),
+    webhook_headers: asOptionalField(z.string()),
+});
+
+export const DDNSCard: React.FC<DDNSCardProps> = ({ data, providers, mutate }) => {
+    const form = useForm<z.infer<typeof ddnsFormSchema>>({
+        resolver: zodResolver(ddnsFormSchema),
+        defaultValues: data ? data : {
+            max_retries: 3,
+            name: "",
+            provider: "dummy",
+            domains: [],
+        },
+        resetOptions: {
+            keepDefaultValues: false,
+        }
+    })
+
+    const [open, setOpen] = useState(false);
+
+    const onSubmit = async (values: z.infer<typeof ddnsFormSchema>) => {
+        data?.id ? await updateDDNSProfile(data.id, values) : await createDDNSProfile(values);
+        setOpen(false);
+        await mutate();
+        form.reset();
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>
+                {data
+                    ?
+                    <IconButton variant="outline" icon="edit" />
+                    :
+                    <IconButton icon="plus" />
+                }
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-xl">
+                <ScrollArea className="max-h-[calc(100dvh-5rem)] p-3">
+                    <div className="items-center mx-1">
+                        <DialogHeader>
+                            <DialogTitle>New DDNS Profile</DialogTitle>
+                            <DialogDescription />
+                        </DialogHeader>
+                        <Form {...form}>
+                            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2 my-2">
+                                <FormField
+                                    control={form.control}
+                                    name="name"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Name</FormLabel>
+                                            <FormControl>
+                                                <Input
+                                                    placeholder="My DDNS Profile"
+                                                    {...field}
+                                                />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="provider"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Provider</FormLabel>
+                                            <Select onValueChange={field.onChange} defaultValue={`${field.value}`}>
+                                                <FormControl>
+                                                    <SelectTrigger>
+                                                        <SelectValue placeholder="Select service type" />
+                                                    </SelectTrigger>
+                                                </FormControl>
+                                                <SelectContent>
+                                                    {providers.map((v, i) => (
+                                                        <SelectItem key={i} value={v}>{v}</SelectItem>
+                                                    ))}
+                                                </SelectContent>
+                                            </Select>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="domains"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Domains (separate with comma)</FormLabel>
+                                            <FormControl>
+                                                <Input
+                                                    placeholder="www.example.com"
+                                                    {...field}
+                                                    value={conv.arrToStr(field.value ?? [])}
+                                                    onChange={e => {
+                                                        const arr = conv.strToArr(e.target.value);
+                                                        field.onChange(arr);
+                                                    }}
+                                                />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="access_id"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Credential 1</FormLabel>
+                                            <FormControl>
+                                                <Input
+                                                    placeholder="Token ID"
+                                                    {...field}
+                                                />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="access_secret"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Credential 2</FormLabel>
+                                            <FormControl>
+                                                <Input
+                                                    placeholder="Token Secret"
+                                                    {...field}
+                                                />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="max_retries"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Maximum retry attempts</FormLabel>
+                                            <FormControl>
+                                                <Input
+                                                    type="number"
+                                                    placeholder="3"
+                                                    {...field}
+                                                />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="webhook_url"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Webhook URL</FormLabel>
+                                            <FormControl>
+                                                <Input
+                                                    placeholder="https://ddns.example.com/?record=#record#"
+                                                    {...field}
+                                                />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="webhook_method"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Webhook Request Method</FormLabel>
+                                            <Select onValueChange={field.onChange} defaultValue={`${field.value}`}>
+                                                <FormControl>
+                                                    <SelectTrigger>
+                                                        <SelectValue placeholder="Webhook Request Method" />
+                                                    </SelectTrigger>
+                                                </FormControl>
+                                                <SelectContent>
+                                                    {Object.entries(ddnsTypes).map(([k, v]) => (
+                                                        <SelectItem key={k} value={k}>{v}</SelectItem>
+                                                    ))}
+                                                </SelectContent>
+                                            </Select>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="webhook_request_type"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Webhook Request Type</FormLabel>
+                                            <Select onValueChange={field.onChange} defaultValue={`${field.value}`}>
+                                                <FormControl>
+                                                    <SelectTrigger>
+                                                        <SelectValue placeholder="Webhook Request Type" />
+                                                    </SelectTrigger>
+                                                </FormControl>
+                                                <SelectContent>
+                                                    {Object.entries(ddnsRequestTypes).map(([k, v]) => (
+                                                        <SelectItem key={k} value={k}>{v}</SelectItem>
+                                                    ))}
+                                                </SelectContent>
+                                            </Select>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="webhook_headers"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Webhook Request Headers</FormLabel>
+                                            <FormControl>
+                                                <Textarea
+                                                    className="resize-y"
+                                                    placeholder='{"User-Agent":"Nezha-Agent"}'
+                                                    {...field}
+                                                />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="webhook_request_body"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Webhook Request Body</FormLabel>
+                                            <FormControl>
+                                                <Textarea
+                                                    className="resize-y"
+                                                    placeholder='{&#13;&#10; "ip": #ip#,&#13;&#10; "domain": "#domain#"&#13;&#10;}'
+                                                    {...field}
+                                                />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="enable_ipv4"
+                                    render={({ field }) => (
+                                        <FormItem className="flex items-center space-x-2">
+                                            <FormControl>
+                                                <div className="flex items-center gap-2">
+                                                    <Checkbox
+                                                        checked={field.value}
+                                                        onCheckedChange={field.onChange}
+                                                    />
+                                                    <Label className="text-sm">Enable IPv4</Label>
+                                                </div>
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="enable_ipv6"
+                                    render={({ field }) => (
+                                        <FormItem className="flex items-center space-x-2">
+                                            <FormControl>
+                                                <div className="flex items-center gap-2">
+                                                    <Checkbox
+                                                        checked={field.value}
+                                                        onCheckedChange={field.onChange}
+                                                    />
+                                                    <Label className="text-sm">Enable IPv6</Label>
+                                                </div>
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <DialogFooter className="justify-end">
+                                    <DialogClose asChild>
+                                        <Button type="button" className="my-2" variant="secondary">
+                                            Close
+                                        </Button>
+                                    </DialogClose>
+                                    <Button type="submit" className="my-2">Submit</Button>
+                                </DialogFooter>
+                            </form>
+                        </Form>
+                    </div>
+                </ScrollArea>
+            </DialogContent>
+        </Dialog>
+    )
+}
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 5fb9d8a..4cf89f3 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -42,6 +42,16 @@ export default function Header() {
                                 <Link to="/dashboard/service">Service</Link>
                             </NzNavigationMenuLink>
                         </NavigationMenuItem>
+                        <NavigationMenuItem>
+                            <NzNavigationMenuLink asChild active={location.pathname === "/dashboard/ddns"} className={navigationMenuTriggerStyle()}>
+                                <Link to="/dashboard/ddns">Dynamic DNS</Link>
+                            </NzNavigationMenuLink>
+                        </NavigationMenuItem>
+                        <NavigationMenuItem>
+                            <NzNavigationMenuLink asChild active={location.pathname === "/dashboard/nat"} className={navigationMenuTriggerStyle()}>
+                                <Link to="/dashboard/nat">NAT Traversal</Link>
+                            </NzNavigationMenuLink>
+                        </NavigationMenuItem>
                     </>
                 }
             </NavigationMenuList>
diff --git a/src/components/nat.tsx b/src/components/nat.tsx
new file mode 100644
index 0000000..557c7f4
--- /dev/null
+++ b/src/components/nat.tsx
@@ -0,0 +1,165 @@
+import { Button } from "@/components/ui/button"
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { ModelNAT } from "@/types"
+import { useState } from "react"
+import { KeyedMutator } from "swr"
+import { IconButton } from "@/components/xui/icon-button"
+import { createNAT, updateNAT } from "@/api/nat"
+
+interface NATCardProps {
+    data?: ModelNAT;
+    mutate: KeyedMutator<ModelNAT[]>;
+}
+
+const natFormSchema = z.object({
+    name: z.string().min(1),
+    server_id: z.coerce.number().int(),
+    host: z.string(),
+    domain: z.string(),
+});
+
+export const NATCard: React.FC<NATCardProps> = ({ data, mutate }) => {
+    const form = useForm<z.infer<typeof natFormSchema>>({
+        resolver: zodResolver(natFormSchema),
+        defaultValues: data ? data : {
+            name: "",
+            server_id: 0,
+            host: "",
+            domain: "",
+        },
+        resetOptions: {
+            keepDefaultValues: false,
+        }
+    })
+
+    const [open, setOpen] = useState(false);
+
+    const onSubmit = async (values: z.infer<typeof natFormSchema>) => {
+        data?.id ? await updateNAT(data.id, values) : await createNAT(values);
+        setOpen(false);
+        await mutate();
+        form.reset();
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>
+                {data
+                    ?
+                    <IconButton variant="outline" icon="edit" />
+                    :
+                    <IconButton icon="plus" />
+                }
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-xl">
+                <ScrollArea className="max-h-[calc(100dvh-5rem)] p-3">
+                    <div className="items-center mx-1">
+                        <DialogHeader>
+                            <DialogTitle>New NAT Profile</DialogTitle>
+                            <DialogDescription />
+                        </DialogHeader>
+                        <Form {...form}>
+                            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2 my-2">
+                                <FormField
+                                    control={form.control}
+                                    name="name"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Name</FormLabel>
+                                            <FormControl>
+                                                <Input
+                                                    placeholder="My NAT Profile"
+                                                    {...field}
+                                                />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="server_id"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Server ID</FormLabel>
+                                            <FormControl>
+                                                <Input
+                                                    type="number"
+                                                    placeholder="1"
+                                                    {...field}
+                                                />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="host"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Local Service</FormLabel>
+                                            <FormControl>
+                                                <Input
+                                                    placeholder="192.168.1.1:80 (with port)"
+                                                    {...field}
+                                                />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="domain"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Bind hostname</FormLabel>
+                                            <FormControl>
+                                                <Input
+                                                    placeholder="router.app.yourdomain.com"
+                                                    {...field}
+                                                />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <DialogFooter className="justify-end">
+                                    <DialogClose asChild>
+                                        <Button type="button" className="my-2" variant="secondary">
+                                            Close
+                                        </Button>
+                                    </DialogClose>
+                                    <Button type="submit" className="my-2">Submit</Button>
+                                </DialogFooter>
+                            </form>
+                        </Form>
+                    </div>
+                </ScrollArea>
+            </DialogContent>
+        </Dialog>
+    )
+}
diff --git a/src/components/server.tsx b/src/components/server.tsx
index 60060a1..771786b 100644
--- a/src/components/server.tsx
+++ b/src/components/server.tsx
@@ -42,7 +42,7 @@ const serverFormSchema = z.object({
     name: z.string().min(1),
     note: asOptionalField(z.string()),
     public_note: asOptionalField(z.string()),
-    display_index: z.number(),
+    display_index: z.number().int(),
     hide_for_guest: asOptionalField(z.boolean()),
     enable_ddns: asOptionalField(z.boolean()),
     ddns_profiles: z.array(z.string()).transform((v => {
diff --git a/src/components/service.tsx b/src/components/service.tsx
index e699ebd..111cdd4 100644
--- a/src/components/service.tsx
+++ b/src/components/service.tsx
@@ -46,25 +46,25 @@ interface ServiceCardProps {
 }
 
 const serviceFormSchema = z.object({
-    cover: z.coerce.number().min(0),
-    duration: z.coerce.number().min(30),
+    cover: z.coerce.number().int().min(0),
+    duration: z.coerce.number().int().min(30),
     enable_show_in_service: asOptionalField(z.boolean()),
     enable_trigger_task: asOptionalField(z.boolean()),
     fail_trigger_tasks: z.array(z.string()).transform((v => {
         return v.filter(Boolean).map(Number);
     })),
     latency_notify: asOptionalField(z.boolean()),
-    max_latency: z.coerce.number().min(0),
-    min_latency: z.coerce.number().min(0),
+    max_latency: z.coerce.number().int().min(0),
+    min_latency: z.coerce.number().int().min(0),
     name: z.string().min(1),
-    notification_group_id: z.coerce.number(),
+    notification_group_id: z.coerce.number().int(),
     notify: asOptionalField(z.boolean()),
     recover_trigger_tasks: z.array(z.string()).transform((v => {
         return v.filter(Boolean).map(Number);
     })),
     skip_servers: z.record(z.boolean()),
     target: z.string().url(),
-    type: z.coerce.number().min(0),
+    type: z.coerce.number().int().min(0),
 });
 
 export const ServiceCard: React.FC<ServiceCardProps> = ({ data, mutate }) => {
diff --git a/src/main.tsx b/src/main.tsx
index d444ae7..f62dc3a 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -15,6 +15,8 @@ import ServerPage from './routes/server';
 import ServicePage from './routes/service';
 import { AuthProvider } from './hooks/useAuth';
 import { TerminalPage } from './components/terminal';
+import DDNSPage from './routes/ddns';
+import NATPage from './routes/nat';
 
 const router = createBrowserRouter([
   {
@@ -34,6 +36,14 @@ const router = createBrowserRouter([
         path: "/dashboard/service",
         element: <ServicePage />,
       },
+      {
+        path: "/dashboard/ddns",
+        element: <DDNSPage />,
+      },
+      {
+        path: "/dashboard/nat",
+        element: <NATPage />,
+      },
       {
         path: "/dashboard/terminal/:id",
         element: <TerminalPage />,
diff --git a/src/routes/ddns.tsx b/src/routes/ddns.tsx
new file mode 100644
index 0000000..ac1edd4
--- /dev/null
+++ b/src/routes/ddns.tsx
@@ -0,0 +1,194 @@
+import { swrFetcher } from "@/api/api"
+import { Checkbox } from "@/components/ui/checkbox"
+import { DDNSCard } from "@/components/ddns"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { ModelDDNSProfile } from "@/types"
+import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"
+import useSWR from "swr"
+import { useEffect, useState } from "react"
+import { ActionButtonGroup } from "@/components/action-button-group"
+import { HeaderButtonGroup } from "@/components/header-button-group"
+import { Skeleton } from "@/components/ui/skeleton"
+import { toast } from "sonner"
+import { deleteDDNSProfiles, getDDNSProviders } from "@/api/ddns"
+
+export default function DDNSPage() {
+    const { data, mutate, error, isLoading } = useSWR<ModelDDNSProfile[]>('/api/v1/ddns', swrFetcher);
+    const [providers, setProviders] = useState<string[]>([]);
+
+    useEffect(() => {
+        const fetchProviders = async () => {
+            const fetchedProviders = await getDDNSProviders();
+            setProviders(fetchedProviders);
+        };
+        fetchProviders();
+    }, []);
+
+    useEffect(() => {
+        if (error)
+            toast("Error", {
+                description: `Error fetching resource: ${error.message}.`,
+            })
+    }, [error])
+
+    const columns: ColumnDef<ModelDDNSProfile>[] = [
+        {
+            id: "select",
+            header: ({ table }) => (
+                <Checkbox
+                    checked={
+                        table.getIsAllPageRowsSelected() ||
+                        (table.getIsSomePageRowsSelected() && "indeterminate")
+                    }
+                    onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+                    aria-label="Select all"
+                />
+            ),
+            cell: ({ row }) => (
+                <Checkbox
+                    checked={row.getIsSelected()}
+                    onCheckedChange={(value) => row.toggleSelected(!!value)}
+                    aria-label="Select row"
+                />
+            ),
+            enableSorting: false,
+            enableHiding: false,
+        },
+        {
+            header: "ID",
+            accessorKey: "id",
+            accessorFn: row => row.id,
+        },
+        {
+            header: "Name",
+            accessorKey: "name",
+            cell: ({ row }) => {
+                const s = row.original;
+                return (
+                    <div className="max-w-24 whitespace-normal break-words">
+                        {s.name}
+                    </div>
+                )
+            }
+        },
+        {
+            header: "IPv4 Enabled",
+            accessorKey: "enableIPv4",
+            accessorFn: row => row.enable_ipv4 ?? false,
+        },
+        {
+            header: "IPv6 Enabled",
+            accessorKey: "enableIPv6",
+            accessorFn: row => row.enable_ipv6 ?? false,
+        },
+        {
+            header: "DDNS Provider",
+            accessorKey: "provider",
+            accessorFn: row => row.provider,
+        },
+        {
+            header: "Domains",
+            accessorKey: "domains",
+            cell: ({ row }) => {
+                const s = row.original;
+                return (
+                    <div className="max-w-24 whitespace-normal break-words">
+                        {s.domains}
+                    </div>
+                )
+            }
+        },
+        {
+            header: "Maximum retry attempts",
+            accessorKey: "maxRetries",
+            accessorFn: row => row.max_retries,
+        },
+        {
+            id: "actions",
+            header: "Actions",
+            cell: ({ row }) => {
+                const s = row.original
+                return (
+                    <ActionButtonGroup className="flex gap-2" delete={{ fn: deleteDDNSProfiles, id: s.id, mutate: mutate }}>
+                        <DDNSCard mutate={mutate} data={s} providers={providers} />
+                    </ActionButtonGroup>
+                )
+            },
+        },
+    ]
+
+    const table = useReactTable({
+        data: data ?? [],
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+    })
+
+    const selectedRows = table.getSelectedRowModel().rows;
+
+    return (
+        <div className="px-8">
+            <div className="flex mt-6 mb-4">
+                <h1 className="flex-1 text-3xl font-bold tracking-tight">
+                    Dynamic DNS
+                </h1>
+                <HeaderButtonGroup className="flex-2 flex ml-auto gap-2" delete={{
+                    fn: deleteDDNSProfiles,
+                    id: selectedRows.map(r => r.original.id),
+                    mutate: mutate,
+                }}>
+                    <DDNSCard mutate={mutate} providers={providers} />
+                </HeaderButtonGroup>
+            </div>
+            {isLoading ? (
+                <div className="flex flex-col items-center space-y-4">
+                    <Skeleton className="h-[60px] w-[100%] rounded-lg" />
+                    <Skeleton className="h-[60px] w-[100%] rounded-lg" />
+                    <Skeleton className="h-[60px] w-[100%] rounded-lg" />
+                </div>
+            ) : (
+                <Table>
+                    <TableHeader>
+                        {table.getHeaderGroups().map((headerGroup) => (
+                            <TableRow key={headerGroup.id}>
+                                {headerGroup.headers.map((header) => {
+                                    return (
+                                        <TableHead key={header.id} className="text-sm">
+                                            {header.isPlaceholder
+                                                ? null
+                                                : flexRender(
+                                                    header.column.columnDef.header,
+                                                    header.getContext()
+                                                )}
+                                        </TableHead>
+                                    )
+                                })}
+                            </TableRow>
+                        ))}
+                    </TableHeader>
+                    <TableBody>
+                        {table.getRowModel().rows?.length ? (
+                            table.getRowModel().rows.map((row) => (
+                                <TableRow
+                                    key={row.id}
+                                    data-state={row.getIsSelected() && "selected"}
+                                >
+                                    {row.getVisibleCells().map((cell) => (
+                                        <TableCell key={cell.id} className="text-xsm">
+                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                        </TableCell>
+                                    ))}
+                                </TableRow>
+                            ))
+                        ) : (
+                            <TableRow>
+                                <TableCell colSpan={columns.length} className="h-24 text-center">
+                                    No results.
+                                </TableCell>
+                            </TableRow>
+                        )}
+                    </TableBody>
+                </Table>
+            )}
+        </div >
+    )
+}
diff --git a/src/routes/nat.tsx b/src/routes/nat.tsx
new file mode 100644
index 0000000..239431c
--- /dev/null
+++ b/src/routes/nat.tsx
@@ -0,0 +1,182 @@
+import { swrFetcher } from "@/api/api"
+import { Checkbox } from "@/components/ui/checkbox"
+import { NATCard } from "@/components/nat"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { ModelNAT } from "@/types"
+import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"
+import useSWR from "swr"
+import { useEffect } from "react"
+import { ActionButtonGroup } from "@/components/action-button-group"
+import { HeaderButtonGroup } from "@/components/header-button-group"
+import { Skeleton } from "@/components/ui/skeleton"
+import { toast } from "sonner"
+import { deleteNAT } from "@/api/nat"
+
+export default function NATPage() {
+    const { data, mutate, error, isLoading } = useSWR<ModelNAT[]>('/api/v1/nat', swrFetcher);
+
+    useEffect(() => {
+        if (error)
+            toast("Error", {
+                description: `Error fetching resource: ${error.message}.`,
+            })
+    }, [error])
+
+    const columns: ColumnDef<ModelNAT>[] = [
+        {
+            id: "select",
+            header: ({ table }) => (
+                <Checkbox
+                    checked={
+                        table.getIsAllPageRowsSelected() ||
+                        (table.getIsSomePageRowsSelected() && "indeterminate")
+                    }
+                    onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+                    aria-label="Select all"
+                />
+            ),
+            cell: ({ row }) => (
+                <Checkbox
+                    checked={row.getIsSelected()}
+                    onCheckedChange={(value) => row.toggleSelected(!!value)}
+                    aria-label="Select row"
+                />
+            ),
+            enableSorting: false,
+            enableHiding: false,
+        },
+        {
+            header: "ID",
+            accessorKey: "id",
+            accessorFn: row => row.id,
+        },
+        {
+            header: "Name",
+            accessorKey: "name",
+            cell: ({ row }) => {
+                const s = row.original;
+                return (
+                    <div className="max-w-32 whitespace-normal break-words">
+                        {s.name}
+                    </div>
+                )
+            }
+        },
+        {
+            header: "Server ID",
+            accessorKey: "serverID",
+            accessorFn: row => row.server_id,
+        },
+        {
+            header: "Local service",
+            accessorKey: "host",
+            cell: ({ row }) => {
+                const s = row.original;
+                return (
+                    <div className="max-w-32 whitespace-normal break-words">
+                        {s.host}
+                    </div>
+                )
+            }
+        },
+        {
+            header: "Bind hostname",
+            accessorKey: "domain",
+            cell: ({ row }) => {
+                const s = row.original;
+                return (
+                    <div className="max-w-32 whitespace-normal break-words">
+                        {s.domain}
+                    </div>
+                )
+            }
+        },
+        {
+            id: "actions",
+            header: "Actions",
+            cell: ({ row }) => {
+                const s = row.original
+                return (
+                    <ActionButtonGroup className="flex gap-2" delete={{ fn: deleteNAT, id: s.id, mutate: mutate }}>
+                        <NATCard mutate={mutate} data={s} />
+                    </ActionButtonGroup>
+                )
+            },
+        },
+    ]
+
+    const table = useReactTable({
+        data: data ?? [],
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+    })
+
+    const selectedRows = table.getSelectedRowModel().rows;
+
+    return (
+        <div className="px-8">
+            <div className="flex mt-6 mb-4">
+                <h1 className="flex-1 text-3xl font-bold tracking-tight">
+                    NAT Traversal
+                </h1>
+                <HeaderButtonGroup className="flex-2 flex ml-auto gap-2" delete={{
+                    fn: deleteNAT,
+                    id: selectedRows.map(r => r.original.id),
+                    mutate: mutate,
+                }}>
+                    <NATCard mutate={mutate} />
+                </HeaderButtonGroup>
+            </div>
+            {isLoading ? (
+                <div className="flex flex-col items-center space-y-4">
+                    <Skeleton className="h-[60px] w-[100%] rounded-lg" />
+                    <Skeleton className="h-[60px] w-[100%] rounded-lg" />
+                    <Skeleton className="h-[60px] w-[100%] rounded-lg" />
+                </div>
+            ) : (
+                <Table>
+                    <TableHeader>
+                        {table.getHeaderGroups().map((headerGroup) => (
+                            <TableRow key={headerGroup.id}>
+                                {headerGroup.headers.map((header) => {
+                                    return (
+                                        <TableHead key={header.id} className="text-sm">
+                                            {header.isPlaceholder
+                                                ? null
+                                                : flexRender(
+                                                    header.column.columnDef.header,
+                                                    header.getContext()
+                                                )}
+                                        </TableHead>
+                                    )
+                                })}
+                            </TableRow>
+                        ))}
+                    </TableHeader>
+                    <TableBody>
+                        {table.getRowModel().rows?.length ? (
+                            table.getRowModel().rows.map((row) => (
+                                <TableRow
+                                    key={row.id}
+                                    data-state={row.getIsSelected() && "selected"}
+                                >
+                                    {row.getVisibleCells().map((cell) => (
+                                        <TableCell key={cell.id} className="text-xsm">
+                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                        </TableCell>
+                                    ))}
+                                </TableRow>
+                            ))
+                        ) : (
+                            <TableRow>
+                                <TableCell colSpan={columns.length} className="h-24 text-center">
+                                    No results.
+                                </TableCell>
+                            </TableRow>
+                        )}
+                    </TableBody>
+                </Table>
+            )}
+        </div >
+    )
+}
diff --git a/src/types/ddns.ts b/src/types/ddns.ts
new file mode 100644
index 0000000..96fd8ab
--- /dev/null
+++ b/src/types/ddns.ts
@@ -0,0 +1,12 @@
+export const ddnsTypes: Record<number, string> = {
+    1: "GET",
+    2: "POST",
+    3: "PATCH",
+    4: "DELETE",
+    5: "PUT",
+}
+
+export const ddnsRequestTypes: Record<number, string> = {
+    1: "JSON",
+    2: "Form",
+}
diff --git a/src/types/index.ts b/src/types/index.ts
index 7defd11..e1babf3 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -2,3 +2,4 @@ export * from './mainStore';
 export * from './authContext';
 export * from './api';
 export * from './service';
+export * from './ddns';