diff --git a/server/db/schema.ts b/server/db/schema.ts
index 55ebbf1b..38daccb5 100644
--- a/server/db/schema.ts
+++ b/server/db/schema.ts
@@ -12,7 +12,7 @@ export const sites = sqliteTable("sites", {
     orgId: text("orgId").references(() => orgs.orgId, {
         onDelete: "cascade",
     }),
-    niceId: text("niceId"),
+    niceId: text("niceId").notNull(),
     exitNode: integer("exitNode").references(() => exitNodes.exitNodeId, {
         onDelete: "set null",
     }),
diff --git a/src/app/[orgId]/sites/[niceId]/components/create-site.tsx b/src/app/[orgId]/sites/[niceId]/components/create-site.tsx
index 8bc86165..1faf3510 100644
--- a/src/app/[orgId]/sites/[niceId]/components/create-site.tsx
+++ b/src/app/[orgId]/sites/[niceId]/components/create-site.tsx
@@ -176,13 +176,13 @@ sh get-docker.sh`;
                         )}
                     />
                     {form.watch("method") === "wg" && !isLoading ? (
-                        <pre className="mt-2 w-full rounded-md bg-slate-950 p-4 overflow-x-auto">
-                            <code className="text-white whitespace-pre-wrap">{wgConfig}</code>
+                        <pre className="mt-2 w-full rounded-md bg-muted p-4 overflow-x-auto">
+                            <code className="text-white whitespace-pre-wrap font-mono">{wgConfig}</code>
                         </pre>
                     ) : form.watch("method") === "wg" && isLoading ? (
                         <p>Loading WireGuard configuration...</p>
                     ) : (
-                        <pre className="mt-2 w-full rounded-md bg-slate-950 p-4 overflow-x-auto">
+                        <pre className="mt-2 w-full rounded-md bg-muted p-4 overflow-x-auto">
                             <code className="text-white whitespace-pre-wrap">{newtConfig}</code>
                         </pre>
                     )}
diff --git a/src/app/[orgId]/sites/components/SitesTable.tsx b/src/app/[orgId]/sites/components/SitesTable.tsx
index 4fadab8f..1b6e0c07 100644
--- a/src/app/[orgId]/sites/components/SitesTable.tsx
+++ b/src/app/[orgId]/sites/components/SitesTable.tsx
@@ -22,22 +22,6 @@ export type SiteRow = {
 };
 
 export const columns: ColumnDef<SiteRow>[] = [
-    {
-        accessorKey: "id",
-        header: ({ column }) => {
-            return (
-                <Button
-                    variant="ghost"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === "asc")
-                    }
-                >
-                    Site
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            );
-        },
-    },
     {
         accessorKey: "name",
         header: ({ column }) => {
@@ -54,6 +38,22 @@ export const columns: ColumnDef<SiteRow>[] = [
             );
         },
     },
+    {
+        accessorKey: "id",
+        header: ({ column }) => {
+            return (
+                <Button
+                    variant="ghost"
+                    onClick={() =>
+                        column.toggleSorting(column.getIsSorted() === "asc")
+                    }
+                >
+                    Site
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            );
+        },
+    },
     {
         accessorKey: "mbIn",
         header: "MB In",
diff --git a/src/app/[orgId]/sites/page.tsx b/src/app/[orgId]/sites/page.tsx
index 86190f09..e02bed91 100644
--- a/src/app/[orgId]/sites/page.tsx
+++ b/src/app/[orgId]/sites/page.tsx
@@ -22,8 +22,8 @@ export default async function Page({ params }: SitesPageProps) {
 
     const siteRows: SiteRow[] = sites.map((site) => {
         return {
-            id: site.siteId.toString(),
             name: site.name,
+            id: site.niceId.toString(),
             mbIn: site.megabytesIn || 0,
             mbOut: site.megabytesOut || 0,
             orgId: params.orgId,
diff --git a/src/app/globals.css b/src/app/globals.css
index 2aa2b710..ce5ab96b 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -38,7 +38,7 @@
         --chart-4: 23.33 8.82% 60%;
         --chart-5: 24 8.98% 67.25%;
 
-        --radius: 0.5rem;
+        --radius: 0.25rem;
     }
     .dark {
         --background: 0 0% 10.98%;
@@ -50,7 +50,7 @@
         --card: 0 0% 8.63%;
         --card-foreground: 24 9.09% 89.22%;
 
-        --popover: 0 0% 4.71%;
+        --popover: 0 0% 10.98%;
         --popover-foreground: 24 9.09% 89.22%;
 
         --secondary: 23.33 28.13% 12.55%;
@@ -75,7 +75,7 @@
         --chart-4: 23.33 23.68% 14.9%;
         --chart-5: 24 23.81% 12.35%;
 
-        --radius: 0.5rem;
+        --radius: 0.25rem;
     }
 }