diff --git a/src/components/general/client-route-form/index.tsx b/src/components/general/client-route-form/index.tsx
index 689a8f7..7966ba3 100644
--- a/src/components/general/client-route-form/index.tsx
+++ b/src/components/general/client-route-form/index.tsx
@@ -1,4 +1,7 @@
-import type { BUN_SQLITE_WGUI_CLIENT_ROUTES } from "@/db/types/db";
+import type {
+    BUN_SQLITE_WGUI_CLIENT_ROUTES,
+    BUN_SQLITE_WGUI_HOSTS,
+} from "@/db/types/db";
 import type { ClientRouteView } from "@/src/functions/backend/acme/decorate-client-route";
 import type { ClientRouteFormObject } from "./types";
 import Form from "@/src/components/twui/form/Form";
@@ -12,22 +15,31 @@ import FormSection from "../form-section";
 import FormActions from "../form-actions";
 import InlineAlert from "../inline-alert";
 import submitClientRouteForm from "./submit-client-route-form";
-import { useContext } from "react";
+import { useContext, useRef, useState } from "react";
 import { AppContext } from "@/src/pages/__root";
+import { useAdminCrudGet } from "@/src/hooks/use-admin-crud-get";
+import Select from "../../twui/form/Select";
+import adminCrudHandler from "@/src/functions/frontend/admin-crud-handler";
+import EmptyContent from "../../twui/elements/EmptyContent";
+import twuiNumberfy from "../../twui/utils/numberfy";
 
 type Props = {
-    host_id: number;
+    host_id?: number;
     existing_route?: ClientRouteView;
-    cancel_href: string;
 };
 
 export default function ClientRouteForm({
-    host_id,
+    host_id: passed_host_id,
     existing_route,
-    cancel_href,
 }: Props) {
     const { confirm } = useConfirm();
-    const { user } = useContext(AppContext);
+    const { user, pageProps } = useContext(AppContext);
+
+    const [host_id, set_host_id] = useState(
+        passed_host_id || pageProps?.host?.id || pageProps?.hosts?.[0]?.id,
+    );
+
+    const is_host_id_present = typeof host_id == "number";
 
     const init = useFormInit<ClientRouteFormObject>({
         existing: existing_route,
@@ -53,18 +65,33 @@ export default function ClientRouteForm({
         return <LoadingBlock className="h-[420px]" />;
     }
 
+    if (!pageProps?.hosts?.[0]) {
+        return (
+            <EmptyContent title="No hosts added. Please Add a host to continue" />
+        );
+    }
+
+    const cancel_href = is_host_id_present
+        ? `/admin/hosts/${host_id}/routes`
+        : `/admin/routes`;
+
     return (
         <Panel>
             <Form
                 className="w-full gap-0"
-                onSubmit={() =>
+                onSubmit={() => {
+                    if (typeof host_id !== "number") {
+                        window.alert(`Host ID is required!`);
+                        return;
+                    }
+
                     submitClientRouteForm({
                         init,
                         host_id,
-                        cancel_href,
                         confirm,
-                    })
-                }
+                        cancel_href,
+                    });
+                }}
             >
                 {status?.error ? (
                     <InlineAlert
@@ -74,6 +101,20 @@ export default function ClientRouteForm({
                     />
                 ) : null}
 
+                <FormSection title="Host" description="The host for this route">
+                    <Select
+                        options={
+                            pageProps.hosts.map((h) => ({
+                                value: String(h.id),
+                                default: h.id == host_id,
+                                title: h.name,
+                            })) || []
+                        }
+                        changeHandler={(value) => {
+                            set_host_id(twuiNumberfy(value));
+                        }}
+                    />
+                </FormSection>
                 <FormSection
                     title="Route"
                     description="The public hostname and path Caddy matches."
diff --git a/src/pages/admin/routes/add/index.server.ts b/src/pages/admin/routes/add/index.server.ts
new file mode 100644
index 0000000..bd3eaa5
--- /dev/null
+++ b/src/pages/admin/routes/add/index.server.ts
@@ -0,0 +1,41 @@
+import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
+import { AppData } from "@/src/data/app-data";
+import type { PagePropsType, TableType } from "@/src/types";
+import BunSQLite from "@moduletrace/bun-sqlite";
+import type { BunextPageServerFn } from "@moduletrace/bunext/types";
+
+const server: BunextPageServerFn<PagePropsType> = async (ctx) => {
+    const props = ctx.props as PagePropsType;
+
+    if (!props.main_host?.name) {
+        return {
+            redirect: {
+                destination: `/admin/hosts/add`,
+                permanent: false,
+            },
+        };
+    }
+
+    const hosts_res = await BunSQLite.select<BUN_SQLITE_WGUI_HOSTS, TableType>({
+        table: "hosts",
+    });
+
+    const hosts = hosts_res.payload || [];
+
+    const requested_id = Number(ctx.url.searchParams.get("host_id"));
+
+    const host =
+        hosts.find((h) => Number(h.id) === requested_id) ||
+        hosts.find((h) => Number(h.id) === AppData["WireguardMainHostID"]) ||
+        hosts[0] ||
+        null;
+
+    return {
+        props: {
+            hosts,
+            host,
+        },
+    };
+};
+
+export default server;
diff --git a/src/pages/admin/routes/add/index.tsx b/src/pages/admin/routes/add/index.tsx
new file mode 100644
index 0000000..46f9d9b
--- /dev/null
+++ b/src/pages/admin/routes/add/index.tsx
@@ -0,0 +1,25 @@
+import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
+import PageHeader from "@/src/components/general/page-header";
+import PageBody from "@/src/components/general/page-body";
+import { SiteData } from "@/src/data/site-data";
+import ClientRouteForm from "@/src/components/general/client-route-form";
+
+export default function AddClientPage() {
+    return (
+        <>
+            <PageHeader
+                title="Add Route"
+                description="Add a Client Route"
+                back={{ href: "/admin/routes", title: "Routes" }}
+            />
+            <PageBody>
+                <ClientRouteForm />
+            </PageBody>
+        </>
+    );
+}
+
+export const meta: BunextPageModuleMeta = {
+    title: `Add client route | ${SiteData["SiteName"]}`,
+    description: `Add a Caddy route config to a Wireguard host`,
+};
diff --git a/src/pages/admin/routes/index.tsx b/src/pages/admin/routes/index.tsx
index ab2a671..b631c2c 100644
--- a/src/pages/admin/routes/index.tsx
+++ b/src/pages/admin/routes/index.tsx
@@ -3,6 +3,7 @@ import PageHeader from "@/src/components/general/page-header";
 import PageBody from "@/src/components/general/page-body";
 import ClientRoutesPanel from "@/src/components/general/client-routes-panel";
 import { SiteData } from "@/src/data/site-data";
+import { Plus } from "lucide-react";
 
 export default function RoutesPage() {
     return (
@@ -10,6 +11,12 @@ export default function RoutesPage() {
             <PageHeader
                 title="Routes"
                 description="HTTPS services exposed to WireGuard clients, with their host and certificate status."
+                primary_action={{
+                    key: "add-client-route",
+                    title: "Add Route",
+                    href: "/admin/routes/add",
+                    icon: <Plus size={14} />,
+                }}
             />
             <PageBody>
                 <ClientRoutesPanel