diff --git a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/code/page.tsx b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/code/page.tsx
index b19b61ce..36f50a3f 100644
--- a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/code/page.tsx
+++ b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/code/page.tsx
@@ -390,7 +390,7 @@ const leftCol: React.CSSProperties = {
   flexDirection: "column",
   gap: 24,
   borderRight: `1px solid ${THEME.borderSoft}`,
-  paddingRight: 24,
+  padding: "20px",
 };
 
 const rightCol: React.CSSProperties = {
@@ -412,20 +412,20 @@ const railGroupHeader: React.CSSProperties = {
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
-  padding: "0 4px 8px",
+  paddingBottom: 12,
 };
 const railGroupTitle: React.CSSProperties = {
-  fontSize: "0.9rem",
+  fontSize: "0.95rem",
   fontWeight: 600,
   color: THEME.ink,
 };
 const countPill: React.CSSProperties = {
-  fontSize: "0.7rem",
+  fontSize: "0.75rem",
   fontWeight: 600,
   color: THEME.mid,
-  padding: "1px 7px",
+  padding: "2px 8px",
   borderRadius: 999,
-  background: "#f3eee4",
+  background: THEME.borderSoft,
 };
 const railItems: React.CSSProperties = {
   display: "flex",
diff --git a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/hosting/page.tsx b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/hosting/page.tsx
index e41f7932..2be78722 100644
--- a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/hosting/page.tsx
+++ b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/hosting/page.tsx
@@ -16,6 +16,7 @@ import {
   Terminal,
   Server,
 } from "lucide-react";
+import { THEME } from "@/components/project/dashboard-ui";
 import { useAnatomy, type Anatomy } from "@/components/project/use-anatomy";
 
 /**
@@ -524,12 +525,12 @@ const sectionTitle: React.CSSProperties = {
   marginBottom: 8,
 };
 const countPill: React.CSSProperties = {
-  fontSize: "0.7rem",
+  fontSize: "0.75rem",
   fontWeight: 600,
-  color: INK.mid,
-  padding: "1px 7px",
+  color: THEME.mid,
+  padding: "2px 8px",
   borderRadius: 999,
-  background: "#f3eee4",
+  background: THEME.borderSoft,
 };
 const card: React.CSSProperties = {
   background: INK.cardBg,
diff --git a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/infrastructure/page.tsx b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/infrastructure/page.tsx
index bc9c722f..af15bb29 100644
--- a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/infrastructure/page.tsx
+++ b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/infrastructure/page.tsx
@@ -22,7 +22,7 @@ import {
 import { useAnatomy, type Anatomy } from "@/components/project/use-anatomy";
 import { DatabaseTableTree } from "@/components/project/database-table-tree";
 import { TableViewer } from "@/components/project/table-viewer";
-import { KvRow } from "@/components/project/dashboard-ui";
+import { THEME, KvRow } from "@/components/project/dashboard-ui";
 
 /**
  * Infrastructure tab — supporting plumbing the product runs on.
@@ -1135,24 +1135,20 @@ const railGroupHeader: React.CSSProperties = {
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
-  padding: "6px 8px",
-  borderRadius: 6,
-  cursor: "pointer",
-  font: "inherit",
-  color: "inherit",
+  paddingBottom: 12,
 };
 const railGroupTitle: React.CSSProperties = {
-  fontSize: "0.9rem",
+  fontSize: "0.95rem",
   fontWeight: 600,
   color: THEME.ink,
 };
 const countPill: React.CSSProperties = {
-  fontSize: "0.7rem",
+  fontSize: "0.75rem",
   fontWeight: 600,
-  color: INK.mid,
-  padding: "1px 7px",
+  color: THEME.mid,
+  padding: "2px 8px",
   borderRadius: 999,
-  background: "#f3eee4",
+  background: THEME.borderSoft,
 };
 const railItems: React.CSSProperties = {
   display: "flex",
diff --git a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/overview/page.tsx b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/overview/page.tsx
index 83468dbf..0b6beda4 100644
--- a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/overview/page.tsx
+++ b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/overview/page.tsx
@@ -640,12 +640,12 @@ const sectionTitle: React.CSSProperties = {
   marginBottom: 8,
 };
 const countPill: React.CSSProperties = {
-  fontSize: "0.7rem",
+  fontSize: "0.75rem",
   fontWeight: 600,
-  color: INK.mid,
-  padding: "1px 7px",
+  color: THEME.mid,
+  padding: "2px 8px",
   borderRadius: 999,
-  background: "#f3eee4",
+  background: THEME.borderSoft,
 };
 const card: React.CSSProperties = {
   background: INK.cardBg,
diff --git a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/plan/page.tsx b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/plan/page.tsx
index cd82d84e..783a3dab 100644
--- a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/plan/page.tsx
+++ b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/plan/page.tsx
@@ -796,10 +796,10 @@ const railGroupHeader: React.CSSProperties = {
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
-  padding: "0 4px 8px",
+  paddingBottom: 12,
 };
 const railGroupTitle: React.CSSProperties = {
-  fontSize: "0.9rem",
+  fontSize: "0.95rem",
   fontWeight: 600,
   color: THEME.ink,
 };
diff --git a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/product/page.tsx b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/product/page.tsx
index 49c3b6de..cbba7d66 100644
--- a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/product/page.tsx
+++ b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/product/page.tsx
@@ -13,6 +13,7 @@ import {
 } from "lucide-react";
 import { GiteaFileTree } from "@/components/project/gitea-file-tree";
 import { GiteaFileViewer } from "@/components/project/gitea-file-viewer";
+import { THEME } from "@/components/project/dashboard-ui";
 import { useAnatomy, type Anatomy } from "@/components/project/use-anatomy";
 
 /**
@@ -448,20 +449,20 @@ const railGroupHeader: React.CSSProperties = {
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
-  padding: "0 4px 8px",
+  paddingBottom: 12,
 };
 const railGroupTitle: React.CSSProperties = {
-  fontSize: "0.9rem",
+  fontSize: "0.95rem",
   fontWeight: 600,
   color: THEME.ink,
 };
 const countPill: React.CSSProperties = {
-  fontSize: "0.7rem",
+  fontSize: "0.75rem",
   fontWeight: 600,
-  color: INK.mid,
-  padding: "1px 7px",
+  color: THEME.mid,
+  padding: "2px 8px",
   borderRadius: 999,
-  background: "#f3eee4",
+  background: THEME.borderSoft,
 };
 const railItems: React.CSSProperties = {
   display: "flex",
diff --git a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/services/page.tsx b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/services/page.tsx
index 019ff641..47c28f1d 100644
--- a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/services/page.tsx
+++ b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/services/page.tsx
@@ -17,13 +17,11 @@ import {
   Server,
 } from "lucide-react";
 import { useAnatomy, type Anatomy } from "@/components/project/use-anatomy";
-import {
-  THEME,
+import { THEME,
   PageHeader,
   Card,
   SectionHeader,
-  EmptyState,
-} from "@/components/project/dashboard-ui";
+  EmptyState, } from "@/components/project/dashboard-ui";
 
 /**
  * Hosting tab — user-facing: "Is my thing live? How do I reach it?"
@@ -573,12 +571,12 @@ const sectionTitle: React.CSSProperties = {
   marginBottom: 8,
 };
 const countPill: React.CSSProperties = {
-  fontSize: "0.7rem",
+  fontSize: "0.75rem",
   fontWeight: 600,
-  color: INK.mid,
-  padding: "1px 7px",
+  color: THEME.mid,
+  padding: "2px 8px",
   borderRadius: 999,
-  background: "#f3eee4",
+  background: THEME.borderSoft,
 };
 const card: React.CSSProperties = {
   background: INK.cardBg,