diff --git a/src/components/AIQueryInterface.astro b/src/components/AIQueryInterface.astro
index 66e0412..fb1a523 100644
--- a/src/components/AIQueryInterface.astro
+++ b/src/components/AIQueryInterface.astro
@@ -10,7 +10,7 @@ const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
 
 <section id="ai-interface" class="ai-interface" style="display: none;">
   <div class="ai-query-section">
-    <div style="text-align: center; margin-bottom: 2rem;">
+    <div class="content-center-lg">
       <h2 style="margin-bottom: 1rem; color: var(--color-primary);">
         <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.75rem; vertical-align: middle;">
           <path d="M9 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-4"/>
diff --git a/src/components/ToolFilters.astro b/src/components/ToolFilters.astro
index 052e818..014ecc7 100644
--- a/src/components/ToolFilters.astro
+++ b/src/components/ToolFilters.astro
@@ -65,7 +65,7 @@ const sortedTags = Object.entries(tagFrequency)
       <label for="include-proprietary">Proprietäre Software mit einschließen</label>
     </div>
     
-    <div style="margin-bottom: 1rem;">
+    <div class="mb-4">
       <div class="tag-header">
         <label style="font-weight: 500;">
           Nach Tags filtern
diff --git a/src/pages/contribute/index.astro b/src/pages/contribute/index.astro
index bf88ba3..c2eaffa 100644
--- a/src/pages/contribute/index.astro
+++ b/src/pages/contribute/index.astro
@@ -14,7 +14,7 @@ const { authenticated, userEmail, userId } = authResult;
 ---
 
 <BaseLayout title="Contribute" description="Inhalte zum ForensicPathways beitragen">
-  <section style="padding: 2rem 0;">
+  <section class="section-padding">
     <div style="text-align: center; margin-bottom: 3rem; padding: 2rem; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); color: white; border-radius: 1rem; border: 1px solid var(--color-border);">
       <h1 style="margin-bottom: 1rem; font-size: 2.5rem;">
         <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.75rem; vertical-align: middle;">
diff --git a/src/pages/contribute/knowledgebase.astro b/src/pages/contribute/knowledgebase.astro
index a8bcc4d..d74b6bb 100644
--- a/src/pages/contribute/knowledgebase.astro
+++ b/src/pages/contribute/knowledgebase.astro
@@ -20,7 +20,7 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
 <BaseLayout title="Contribute Knowledge Base Article">
   <div class="container" style="max-width: 900px; margin: 0 auto; padding: 2rem 1rem;">
     
-    <div style="text-align: center; margin-bottom: 2rem; padding: 2rem; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); color: white; border-radius: 1rem;">
+    <div class="header-center header-primary rounded-xl">
       <h1 style="margin-bottom: 1rem; font-size: 2rem;">Knowledgebase-Artikel</h1>
       <p style="margin: 0.5rem 0; opacity: 0.9;">Danke für deinen Beitrag!</p>
       {userEmail && <p style="margin: 0.5rem 0; opacity: 0.8;"><strong>Eingeloggt als:</strong> {userEmail}</p>}
diff --git a/src/pages/contribute/tool.astro b/src/pages/contribute/tool.astro
index ceec1ca..35a2e72 100644
--- a/src/pages/contribute/tool.astro
+++ b/src/pages/contribute/tool.astro
@@ -27,7 +27,7 @@ const isEdit = !!editTool;
 <BaseLayout title={isEdit ? `Edit ${editTool?.name}` : 'Contribute Tool'}>
   <div class="container" style="max-width: 900px; margin: 0 auto; padding: 2rem 1rem;">
     
-    <div style="text-align: center; margin-bottom: 2rem; padding: 2rem; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); color: white; border-radius: 1rem;">
+    <div class="header-center header-primary rounded-xl">
       <h1 style="margin-bottom: 1rem; font-size: 2rem;">{isEdit ? `Edit: ${editTool?.name}` : 'Tool / Methode / Konzept beitragen'}</h1>
       <p style="margin: 0.5rem 0; opacity: 0.9;">
         {isEdit 
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 7847987..1f53f83 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -144,7 +144,7 @@ const phases = data.phases;
 <TargetedScenarios />
 
   <section id="filters-section" style="padding: 2rem 0;">
-    <div style="text-align: center; margin-bottom: 2rem;">
+    <div class="content-center-lg">
       <h3 style="color: var(--color-text); margin-bottom: 0.5rem;">Alle verfügbaren Werkzeuge durchsuchen</h3>
       <p style="color: var(--color-text-secondary); margin: 0;">
         Nutzen Sie die erweiterten Filter und Kategorien für eine detaillierte Suche
diff --git a/src/pages/knowledgebase.astro b/src/pages/knowledgebase.astro
index 6ac39b9..0de513a 100644
--- a/src/pages/knowledgebase.astro
+++ b/src/pages/knowledgebase.astro
@@ -42,7 +42,7 @@ knowledgebaseEntries.sort((a: any, b: any) => a.title.localeCompare(b.title));
 ---
 
 <BaseLayout title="Knowledgebase" description="Extended documentation and insights for DFIR tools">
-  <section style="padding: 2rem 0;">
+  <section class="section-padding">
     <div class="text-center mb-8 p-8 bg-secondary rounded-lg border">
       <h1 class="mb-4 text-2xl text-primary">Knowledgebase</h1>
       <p class="text-lg text-secondary mb-4">
diff --git a/src/pages/status.astro b/src/pages/status.astro
index 13f1e34..9f73b55 100644
--- a/src/pages/status.astro
+++ b/src/pages/status.astro
@@ -14,8 +14,8 @@ const hostedServices = data.tools.filter((tool: any) => {
 ---
 
 <BaseLayout title="Service Status">
-  <section style="padding: 2rem 0;">
-    <h1 style="text-align: center; margin-bottom: 1rem;">Service Status</h1>
+  <section class="section-padding">
+    <h1 class="content-center">Service Status</h1>
     <p class="text-muted" style="text-align: center; max-width: 600px; margin: 0 auto 3rem;">
       Live-Monitoring zum Onlinestatus der Dienste.
     </p>
diff --git a/src/styles/global.css b/src/styles/global.css
index 5470c26..e64a374 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -497,6 +497,10 @@ a:hover {
 /* Cursor Utilities */
 .cursor-pointer { cursor: pointer; }
 
+.h-12 { height: 3rem; }
+.align-middle { vertical-align: middle; }
+
+
 /* ===================================================================
    7. NAVIGATION
    ================================================================= */