diff --git a/src/App.tsx b/src/App.tsx
index a3a8218..1c8b7e2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -23,28 +23,28 @@ export function App() {
 
       <div className="grid gap-4 md:grid-cols-2">
         <div>
-          <h2 className="text-2xl font-semibold text-white/70 mb-4">
+          <h2 className="section-heading mb-3">
             Lobsters
           </h2>
           <Lobsters />
         </div>
 
         <div>
-          <h2 className="text-2xl font-semibold text-white/70 mb-4">
+          <h2 className="section-heading mb-3">
             Hacker News
           </h2>
           <HackerNews />
         </div>
       </div>
-      <h2 className="text-2xl font-semibold text-white/70 mt-8 mb-4">
+      <h2 className="section-heading mt-10 mb-3">
         Websites
       </h2>
       <ServiceGrid services={websites} columns={2} />
-      <h2 className="text-2xl font-semibold text-white/70 mt-8 mb-4">
+      <h2 className="section-heading mt-10 mb-3">
         Public Apps
       </h2>
       <ServiceGrid services={apps} columns={4} />
-      <h2 className="text-2xl font-semibold text-white/70 mt-8 mb-4">
+      <h2 className="section-heading mt-10 mb-3">
         Tailnet Apps
       </h2>
       <ServiceGrid services={privateApps} columns={4} />
diff --git a/src/index.css b/src/index.css
index 46cf7c8..3e84bdc 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,6 +4,9 @@
     .card {
         @apply bg-white/[0.03] border border-white/10 rounded-2xl shadow-lg shadow-black/20 backdrop-blur-sm;
     }
+    .section-heading {
+        @apply text-xs uppercase tracking-[0.25em] text-zinc-400 font-semibold;
+    }
 }
 
 body {