diff --git a/frontend/src/components/ui/DesignSystemStyles.astro b/frontend/src/components/ui/DesignSystemStyles.astro
index 9197d68..3e98eca 100644
--- a/frontend/src/components/ui/DesignSystemStyles.astro
+++ b/frontend/src/components/ui/DesignSystemStyles.astro
@@ -548,7 +548,7 @@
     display: grid;
     grid-template-columns: var(--ui-toolbar-cols, 1.5fr 1fr 1fr);
     gap: 0.75rem;
-    align-items: end;
+    align-items: var(--ui-toolbar-align, end);
   }
 
   .ui-toolbar-label {
diff --git a/frontend/src/pages/communities.astro b/frontend/src/pages/communities.astro
index ba6aaaf..57838e6 100644
--- a/frontend/src/pages/communities.astro
+++ b/frontend/src/pages/communities.astro
@@ -17,8 +17,8 @@ import { API_BASE as apiBase } from '../lib/api';
         </div>
       </div>
 
-      <div class="communities-toolbar ui-card ui-card-glass">
-        <div class="toolbar-row">
+      <div class="communities-toolbar ui-toolbar ui-card ui-card-glass">
+        <div class="ui-toolbar-grid">
           <div class="toolbar-search">
             <input type="text" id="search-input" class="ui-input" placeholder="Search communities…" autocomplete="off" />
           </div>
@@ -231,16 +231,10 @@ import { API_BASE as apiBase } from '../lib/api';
   }
 
   .communities-toolbar {
-    padding: 1rem 1.25rem;
-    margin-bottom: 1.25rem;
-  }
-
-  .toolbar-row {
-    display: grid;
-    grid-template-columns: 1fr 220px;
-    gap: 0.75rem;
-    align-items: center;
-    margin-bottom: 0.75rem;
+    --ui-toolbar-pad: 1rem 1.25rem;
+    --ui-toolbar-mb: 1.25rem;
+    --ui-toolbar-cols: 1fr 220px;
+    --ui-toolbar-align: center;
   }
 
   .communities-grid {
@@ -256,7 +250,7 @@ import { API_BASE as apiBase } from '../lib/api';
   }
 
   @media (max-width: 640px) {
-    .toolbar-row {
+    .communities-toolbar .ui-toolbar-grid {
       grid-template-columns: 1fr;
     }