diff --git a/apps/dashboard/app/assets/css/tailwind/config.css b/apps/dashboard/app/assets/css/tailwind/config.css
index f36c4832..fa35c45b 100644
--- a/apps/dashboard/app/assets/css/tailwind/config.css
+++ b/apps/dashboard/app/assets/css/tailwind/config.css
@@ -113,6 +113,28 @@
   --radius-4xl: calc(2rem * var(--oui-radius-base, 1));
 
   --spacing: calc(0.25rem * var(--oui-spacing-base, 1));
+
+  /* Named spacing for padding/margin/gap utilities.
+     Uses per-utility namespaces to avoid colliding with --container-*
+     (Tailwind v4 resolves max-w-xl via --spacing-xl before --container-xl). */
+  --padding-xs: calc(0.25rem * var(--oui-spacing-base, 1));
+  --padding-sm: calc(0.5rem * var(--oui-spacing-base, 1));
+  --padding-md: calc(1rem * var(--oui-spacing-base, 1));
+  --padding-lg: calc(1.5rem * var(--oui-spacing-base, 1));
+  --padding-xl: calc(2rem * var(--oui-spacing-base, 1));
+  --padding-2xl: calc(3rem * var(--oui-spacing-base, 1));
+  --margin-xs: calc(0.25rem * var(--oui-spacing-base, 1));
+  --margin-sm: calc(0.5rem * var(--oui-spacing-base, 1));
+  --margin-md: calc(1rem * var(--oui-spacing-base, 1));
+  --margin-lg: calc(1.5rem * var(--oui-spacing-base, 1));
+  --margin-xl: calc(2rem * var(--oui-spacing-base, 1));
+  --margin-2xl: calc(3rem * var(--oui-spacing-base, 1));
+  --gap-xs: calc(0.25rem * var(--oui-spacing-base, 1));
+  --gap-sm: calc(0.5rem * var(--oui-spacing-base, 1));
+  --gap-md: calc(1rem * var(--oui-spacing-base, 1));
+  --gap-lg: calc(1.5rem * var(--oui-spacing-base, 1));
+  --gap-xl: calc(2rem * var(--oui-spacing-base, 1));
+  --gap-2xl: calc(3rem * var(--oui-spacing-base, 1));
   --breakpoint-sm: 40rem;
   --breakpoint-md: 48rem;
   --breakpoint-lg: 64rem;
diff --git a/apps/dashboard/app/components/oui/classMaps.ts b/apps/dashboard/app/components/oui/classMaps.ts
index 4e2374d0..3f91c8e6 100644
--- a/apps/dashboard/app/components/oui/classMaps.ts
+++ b/apps/dashboard/app/components/oui/classMaps.ts
@@ -225,9 +225,10 @@ export function responsiveClass<T extends string | number>(
     return mapped ? [mapped] : [];
   }
 
-  // Now TypeScript knows value is Partial<Record<Breakpoint, T>>
+  // Object form: { default?: T; sm?: T; md?: T; lg?: T; xl?: T; "2xl"?: T }
   const classes: string[] = [];
-  const breakpointPrefix: Record<Breakpoint, string> = {
+  const breakpointPrefix: Record<string, string> = {
+    default: "",
     sm: "sm:",
     md: "md:",
     lg: "lg:",
@@ -237,9 +238,10 @@ export function responsiveClass<T extends string | number>(
 
   Object.entries(value).forEach(([k, candidate]) => {
     if (candidate === undefined) return;
-    const bp = k as Breakpoint;
+    const prefix = breakpointPrefix[k];
+    if (prefix === undefined) return;
     const mapped = map[String(candidate)];
-    if (mapped) classes.push(`${breakpointPrefix[bp]}${mapped}`);
+    if (mapped) classes.push(`${prefix}${mapped}`);
   });
 
   return classes;
diff --git a/apps/dashboard/app/components/oui/types.d.ts b/apps/dashboard/app/components/oui/types.d.ts
index 3c28595e..7e6686f6 100644
--- a/apps/dashboard/app/components/oui/types.d.ts
+++ b/apps/dashboard/app/components/oui/types.d.ts
@@ -162,8 +162,11 @@ export type Breakpoint = "sm" | "md" | "lg" | "xl" | "2xl";
 
 /**
  * Responsive<T> - either a single value T or an object keyed by breakpoints.
+ * Use `default` for the base (no breakpoint prefix) value.
  * Example:
  *   T
- *   | { sm?: T; md?: T; lg?: T; ... }
+ *   | { default?: T; sm?: T; md?: T; lg?: T; ... }
  */
-export type Responsive<T extends string | number> = T | Partial<Record<Breakpoint, T>>;
+export type Responsive<T extends string | number> =
+  | T
+  | (Partial<Record<Breakpoint, T>> & { default?: T });
diff --git a/apps/dashboard/app/pages/admin/bindings.vue b/apps/dashboard/app/pages/admin/bindings.vue
index cc13e50b..d5f6a056 100644
--- a/apps/dashboard/app/pages/admin/bindings.vue
+++ b/apps/dashboard/app/pages/admin/bindings.vue
@@ -10,7 +10,7 @@
               <OuiText size="sm" weight="semibold" transform="uppercase" class="tracking-wide" color="secondary">
                 Basic Information
               </OuiText>
-              <OuiGrid cols="1" colsMd="3" gap="md">
+              <OuiGrid :cols="{ sm: 1, md: 3 }" gap="md">
                 <OuiStack gap="xs">
                   <OuiText size="sm" weight="medium">Organization</OuiText>
                   <OuiSelect v-model="selectedOrg" :items="orgItems" />
@@ -60,7 +60,7 @@
                 </OuiButton>
               </OuiFlex>
               
-              <OuiGrid cols="1" colsMd="2" gap="md">
+              <OuiGrid :cols="{ sm: 1, md: 2 }" gap="md">
                 <OuiStack gap="xs">
                   <OuiText size="sm" weight="medium">Resource Type</OuiText>
                   <OuiSelect 
diff --git a/apps/dashboard/app/pages/admin/quotas.vue b/apps/dashboard/app/pages/admin/quotas.vue
index b865ebd8..de7e5a6b 100644
--- a/apps/dashboard/app/pages/admin/quotas.vue
+++ b/apps/dashboard/app/pages/admin/quotas.vue
@@ -6,7 +6,7 @@
     <OuiCard>
       <OuiCardBody>
         <form @submit.prevent="save">
-          <OuiGrid cols="1" colsMd="2" gap="md">
+          <OuiGrid :cols="{ sm: 1, md: 2 }" gap="md">
             <OuiSelect
               label="Organization"
               v-model="selectedOrg"
diff --git a/apps/dashboard/app/pages/billing.vue b/apps/dashboard/app/pages/billing.vue
index c579b86d..91a600db 100644
--- a/apps/dashboard/app/pages/billing.vue
+++ b/apps/dashboard/app/pages/billing.vue
@@ -1198,7 +1198,7 @@
       <OuiCardBody>
         <OuiStack gap="lg">
           <!-- Organization Selector -->
-          <OuiGrid cols="1" colsLg="2" gap="md">
+          <OuiGrid :cols="{ sm: 1, lg: 2 }" gap="md">
             <OuiStack gap="xs">
               <OuiText size="sm" weight="medium">Select Organization</OuiText>
               <OuiSelect
diff --git a/apps/dashboard/app/pages/deployments/[id]/index.vue b/apps/dashboard/app/pages/deployments/[id]/index.vue
index 068648d4..8e2dfe1f 100644
--- a/apps/dashboard/app/pages/deployments/[id]/index.vue
+++ b/apps/dashboard/app/pages/deployments/[id]/index.vue
@@ -74,7 +74,7 @@
                       p="xs"
                       rounded="lg"
                       bg="accent-primary"
-                      class="bg-primary/10 ring-1 ring-primary/20 shrink-0 md:p-sm md:rounded-xl"
+                      class="bg-primary/10 ring-1 ring-primary/20 shrink-0  md:p-sm md:rounded-xl"
                     >
                       <RocketLaunchIcon
                         class="w-6 h-6 md:w-8 md:h-8 text-primary"
diff --git a/apps/dashboard/app/pages/deployments/index.vue b/apps/dashboard/app/pages/deployments/index.vue
index 250e5dfc..66c3d7f6 100644
--- a/apps/dashboard/app/pages/deployments/index.vue
+++ b/apps/dashboard/app/pages/deployments/index.vue
@@ -863,7 +863,6 @@
   };
 
   const viewDeployment = (id: string) => {
-    const router = useRouter();
     router.push(`/deployments/${id}`);
   };
 
@@ -911,7 +910,6 @@
 
       // Navigate to the detail page to finish configuration
       if (deployment) {
-        const router = useRouter();
         router.push(`/deployments/${deployment.id}`);
       }
     } catch (error) {
diff --git a/apps/dashboard/app/pages/organizations.vue b/apps/dashboard/app/pages/organizations.vue
index c877aab3..080e692f 100644
--- a/apps/dashboard/app/pages/organizations.vue
+++ b/apps/dashboard/app/pages/organizations.vue
@@ -1129,7 +1129,7 @@
 
 <template>
   <OuiStack gap="lg">
-    <OuiGrid cols="1" colsLg="3" gap="lg">
+    <OuiGrid :cols="{ sm: 1, lg: 3 }" gap="lg">
       <OuiCard class="col-span-2">
         <OuiCardHeader>
           <OuiFlex align="center" justify="between">
@@ -1142,7 +1142,7 @@
         </OuiCardHeader>
         <OuiCardBody>
           <OuiStack gap="lg">
-            <OuiGrid cols="1" colsLg="2" gap="md">
+            <OuiGrid :cols="{ sm: 1, lg: 2 }" gap="md">
               <OuiStack gap="xs">
                 <OuiText size="sm" weight="medium">Select Organization</OuiText>
                 <OuiSelect
@@ -1242,7 +1242,7 @@
             
             <OuiStack gap="md" as="form" @submit.prevent="createOrg">
               <OuiText size="sm" weight="medium">Create Organization</OuiText>
-              <OuiGrid cols="1" colsLg="2" gap="md">
+              <OuiGrid :cols="{ sm: 1, lg: 2 }" gap="md">
                 <OuiInput
                   v-model="name"
                   label="Name"
@@ -1440,7 +1440,7 @@
 
             <OuiStack gap="md" class="mt-6">
               <OuiText size="md" weight="semibold">Invite Member</OuiText>
-              <OuiGrid cols="1" colsLg="3" gap="md">
+              <OuiGrid :cols="{ sm: 1, lg: 3 }" gap="md">
                 <OuiInput
                   label="Email"
                   v-model="inviteEmail"
@@ -1536,7 +1536,7 @@
                 System roles appear first. Any custom roles you create follow
                 below.
               </OuiText>
-              <OuiGrid cols="1" colsLg="2" gap="md">
+              <OuiGrid :cols="{ sm: 1, lg: 2 }" gap="md">
                 <OuiCard v-for="item in roleItems" :key="item.value">
                   <OuiCardBody>
                     <OuiStack gap="xs">
diff --git a/apps/dashboard/app/pages/superadmin/abuse.vue b/apps/dashboard/app/pages/superadmin/abuse.vue
index 0b532c47..a08cf3a8 100644
--- a/apps/dashboard/app/pages/superadmin/abuse.vue
+++ b/apps/dashboard/app/pages/superadmin/abuse.vue
@@ -16,7 +16,7 @@
     </OuiFlex>
 
     <!-- Metrics Overview -->
-    <OuiGrid class="gap-4" cols="1" colsMd="2" colsXl="5" cols2xl="6">
+    <OuiGrid :cols="{ sm: 1, md: 2, xl: 5, '2xl': 6 }" gap="md">
       <OuiCard
         v-for="metric in metrics"
         :key="metric.label"
diff --git a/apps/dashboard/app/pages/superadmin/dns.vue b/apps/dashboard/app/pages/superadmin/dns.vue
index e6d1daaa..5713b200 100644
--- a/apps/dashboard/app/pages/superadmin/dns.vue
+++ b/apps/dashboard/app/pages/superadmin/dns.vue
@@ -261,7 +261,7 @@
             <!-- DNS Server Info -->
             <OuiStack gap="md">
               <OuiText size="lg" weight="semibold">DNS Server Info</OuiText>
-              <OuiGrid cols="1" colsMd="2" gap="md">
+              <OuiGrid :cols="{ sm: 1, md: 2 }" gap="md">
                 <div>
                   <OuiText
                     size="xs"
diff --git a/apps/dashboard/app/pages/superadmin/income.vue b/apps/dashboard/app/pages/superadmin/income.vue
index a4b04f68..ad2977c7 100644
--- a/apps/dashboard/app/pages/superadmin/income.vue
+++ b/apps/dashboard/app/pages/superadmin/income.vue
@@ -36,7 +36,7 @@
     </OuiFlex>
 
     <!-- Summary Metrics -->
-    <OuiGrid class="gap-4" cols="1" colsMd="2" colsXl="4">
+    <OuiGrid :cols="{ sm: 1, md: 2, xl: 4 }" gap="md">
       <OuiCard
         v-for="metric in summaryMetrics"
         :key="metric.label"
@@ -64,7 +64,7 @@
         <OuiText tag="h2" size="xl" weight="bold">Payment Metrics</OuiText>
       </OuiCardHeader>
       <OuiCardBody class="p-6">
-        <OuiGrid cols="1" colsMd="3" gap="md">
+        <OuiGrid :cols="{ sm: 1, md: 3 }" gap="md">
           <div>
             <OuiText size="sm" color="muted">Success Rate</OuiText>
             <OuiText size="2xl" weight="semibold">
diff --git a/apps/dashboard/app/pages/superadmin/index.vue b/apps/dashboard/app/pages/superadmin/index.vue
index 4f6c48cc..fda6e8f9 100644
--- a/apps/dashboard/app/pages/superadmin/index.vue
+++ b/apps/dashboard/app/pages/superadmin/index.vue
@@ -11,7 +11,7 @@
         >
       </OuiStack>
 
-      <OuiGrid class="gap-4" cols="1" colsMd="2" colsXl="4">
+      <OuiGrid :cols="{ sm: 1, md: 2, xl: 4 }" gap="md">
         <OuiCard
           v-for="metric in metrics"
           :key="metric.label"
@@ -132,7 +132,7 @@
           </OuiCardBody>
         </OuiCard>
 
-        <OuiGrid class="gap-6" cols="1" colsXl="2">
+        <OuiGrid :cols="{ sm: 1, xl: 2 }" gap="lg">
           <OuiCard
             class="border border-border-muted rounded-xl overflow-hidden"
           >
diff --git a/apps/dashboard/app/pages/superadmin/invoices.vue b/apps/dashboard/app/pages/superadmin/invoices.vue
index d4a83eaf..1e2c62b0 100644
--- a/apps/dashboard/app/pages/superadmin/invoices.vue
+++ b/apps/dashboard/app/pages/superadmin/invoices.vue
@@ -55,7 +55,7 @@
     </OuiFlex>
 
     <!-- Summary Metrics -->
-    <OuiGrid class="gap-4" cols="1" colsMd="2" colsXl="4">
+    <OuiGrid :cols="{ sm: 1, md: 2, xl: 4 }" gap="md">
       <OuiCard
         v-for="metric in metrics"
         :key="metric.label"
diff --git a/apps/dashboard/app/pages/superadmin/organizations/[orgId].vue b/apps/dashboard/app/pages/superadmin/organizations/[orgId].vue
index fe1bd0cb..4feeb820 100644
--- a/apps/dashboard/app/pages/superadmin/organizations/[orgId].vue
+++ b/apps/dashboard/app/pages/superadmin/organizations/[orgId].vue
@@ -18,7 +18,7 @@
         </OuiStack>
       </OuiFlex>
 
-      <OuiGrid cols="1" colsLg="3" gap="lg">
+      <OuiGrid :cols="{ sm: 1, lg: 3 }" gap="lg">
         <!-- Organization Info Card -->
         <OuiCard class="border border-border-muted rounded-xl">
           <OuiCardHeader class="px-6 py-4 border-b border-border-muted">
diff --git a/apps/dashboard/app/pages/superadmin/role-bindings.vue b/apps/dashboard/app/pages/superadmin/role-bindings.vue
index c101895d..b7ccbc56 100644
--- a/apps/dashboard/app/pages/superadmin/role-bindings.vue
+++ b/apps/dashboard/app/pages/superadmin/role-bindings.vue
@@ -9,7 +9,7 @@
       </OuiCardHeader>
       <OuiCardBody>
         <form @submit.prevent="createBinding">
-          <OuiGrid cols="1" colsMd="2" gap="md">
+          <OuiGrid :cols="{ sm: 1, md: 2 }" gap="md">
             <OuiStack gap="xs">
               <OuiText size="sm" weight="medium">User</OuiText>
               <OuiCombobox
diff --git a/apps/dashboard/app/pages/superadmin/users/[userId].vue b/apps/dashboard/app/pages/superadmin/users/[userId].vue
index fa029f84..e02fbf70 100644
--- a/apps/dashboard/app/pages/superadmin/users/[userId].vue
+++ b/apps/dashboard/app/pages/superadmin/users/[userId].vue
@@ -18,7 +18,7 @@
         </OuiStack>
       </OuiFlex>
 
-      <OuiGrid cols="1" colsLg="3" gap="lg">
+      <OuiGrid :cols="{ sm: 1, lg: 3 }" gap="lg">
         <!-- User Info Card -->
         <OuiCard class="border border-border-muted rounded-xl">
           <OuiCardHeader class="px-6 py-4 border-b border-border-muted">
diff --git a/apps/dashboard/app/pages/superadmin/vps/[vpsId].vue b/apps/dashboard/app/pages/superadmin/vps/[vpsId].vue
index 6fb09cf5..ffb861e0 100644
--- a/apps/dashboard/app/pages/superadmin/vps/[vpsId].vue
+++ b/apps/dashboard/app/pages/superadmin/vps/[vpsId].vue
@@ -27,7 +27,7 @@
         </OuiFlex>
       </OuiFlex>
 
-      <OuiGrid cols="1" colsLg="2" gap="lg">
+      <OuiGrid :cols="{ sm: 1, lg: 2 }" gap="lg">
         <!-- VPS Info & Specifications Card -->
         <OuiCard class="border border-border-muted rounded-xl">
           <OuiCardHeader class="px-6 py-4 border-b border-border-muted">
@@ -47,7 +47,7 @@
                 </OuiText>
               </OuiStack>
 
-              <OuiGrid cols="1" colsMd="2" gap="md" class="border-t border-border-muted pt-4">
+              <OuiGrid :cols="{ sm: 1, md: 2 }" gap="md" class="border-t border-border-muted pt-4">
                 <OuiStack gap="xs">
                   <OuiText size="sm" weight="medium" color="muted">Status</OuiText>
                   <SuperadminStatusBadge
@@ -136,7 +136,7 @@
             <OuiText tag="h2" size="lg" weight="bold">Specifications</OuiText>
           </OuiCardHeader>
           <OuiCardBody class="p-6">
-            <OuiGrid cols="1" colsMd="2" gap="md">
+            <OuiGrid :cols="{ sm: 1, md: 2 }" gap="md">
               <OuiStack gap="xs">
                 <OuiText size="sm" weight="medium" color="muted">Size</OuiText>
                 <OuiText>{{ vps?.size || "—" }}</OuiText>
@@ -167,14 +167,14 @@
       </OuiGrid>
 
       <!-- Network & Actions Row -->
-      <OuiGrid cols="1" colsLg="2" gap="lg">
+      <OuiGrid :cols="{ sm: 1, lg: 2 }" gap="lg">
         <!-- Network & SSH Card -->
         <OuiCard class="border border-border-muted rounded-xl">
           <OuiCardHeader class="px-6 py-4 border-b border-border-muted">
             <OuiText tag="h2" size="lg" weight="bold">Network & Access</OuiText>
           </OuiCardHeader>
           <OuiCardBody class="p-6">
-            <OuiGrid cols="1" colsMd="2" gap="md">
+            <OuiGrid :cols="{ sm: 1, md: 2 }" gap="md">
               <OuiStack gap="xs">
                 <OuiText size="sm" weight="medium" color="muted">IPv4 Addresses</OuiText>
                 <OuiStack gap="xs">
@@ -224,7 +224,7 @@
 
               <OuiStack gap="xs" v-if="hasMetadata" class="col-span-1 md:col-span-2">
                 <OuiText size="sm" weight="medium" color="muted">Metadata</OuiText>
-                <OuiGrid cols="1" colsMd="2" gap="xs">
+                <OuiGrid :cols="{ sm: 1, md: 2 }" gap="xs">
                   <OuiText
                     v-for="(value, key) in parsedMetadata"
                     :key="key"
diff --git a/apps/dashboard/app/pages/superadmin/webhook-events.vue b/apps/dashboard/app/pages/superadmin/webhook-events.vue
index f5086dd8..f9727fe9 100644
--- a/apps/dashboard/app/pages/superadmin/webhook-events.vue
+++ b/apps/dashboard/app/pages/superadmin/webhook-events.vue
@@ -36,7 +36,7 @@
     </OuiFlex>
 
     <!-- Summary Metrics -->
-    <OuiGrid class="gap-4" cols="1" colsMd="2" colsXl="4">
+    <OuiGrid :cols="{ sm: 1, md: 2, xl: 4 }" gap="md">
       <OuiCard
         v-for="metric in metrics"
         :key="metric.label"