diff --git a/apps/frontend/src/layouts/Layout.astro b/apps/frontend/src/layouts/Layout.astro
index f4b703d..ab7a009 100644
--- a/apps/frontend/src/layouts/Layout.astro
+++ b/apps/frontend/src/layouts/Layout.astro
@@ -1,3 +1,7 @@
+---
+import '../styles/global.css';
+---
+
 <!doctype html>
 <html lang="en">
 	<head>
diff --git a/apps/frontend/src/pages/catalog.astro b/apps/frontend/src/pages/catalog.astro
index 0a7150c..97cb72b 100644
--- a/apps/frontend/src/pages/catalog.astro
+++ b/apps/frontend/src/pages/catalog.astro
@@ -9,12 +9,14 @@ const softwares = json.softwares;
 ---
 
 <Layout>
-  <header class="text-center py-16 bg-gradient-to-r from-purple-600 to-indigo-600 text-white">
-    <h1 class="text-5xl font-bold mb-4">Our Games</h1>
-    <p class="text-xl max-w-xl mx-auto">Discover games made for TIC-80 and other platforms, with versions playable directly in your browser!</p>
+  <header class="hero-section-gradient from-purple-600 to-indigo-600 py-16">
+    <div class="hero-container">
+      <h1 class="hero-title">Our Games</h1>
+      <p class="hero-subtitle text-purple-50">Discover games made for TIC-80 and other platforms, with versions playable directly in your browser!</p>
+    </div>
   </header>
 
-  <main class="max-w-6xl mx-auto py-12 px-4 grid grid-cols-1 gap-8">
+  <main class="main-container py-12 px-4 grid grid-cols-1 gap-8 mt-0">
     {softwares.map(({ software, releases, latestRelease }) => (
       <div class="bg-white shadow-lg relative rounded-xl overflow-hidden hover:shadow-2xl transition-shadow duration-300">
         <div class="p-6 pr-28 sm:pr-6">
diff --git a/apps/frontend/src/pages/code.astro b/apps/frontend/src/pages/code.astro
index 8fca7eb..a5ea0b2 100644
--- a/apps/frontend/src/pages/code.astro
+++ b/apps/frontend/src/pages/code.astro
@@ -117,23 +117,23 @@ const recentCommits = allCommits.slice(0, 20);
 ---
 
 <Layout>
-  <header class="text-center py-20 bg-gradient-to-r from-teal-600 to-green-600 text-white">
-    <div class="max-w-4xl mx-auto px-4">
-      <h1 class="text-5xl md:text-6xl font-extrabold mb-6">Codebase</h1>
-      <p class="text-xl md:text-2xl text-teal-50 mb-10 leading-relaxed">
+  <header class="hero-section-gradient from-teal-600 to-green-600 py-20">
+    <div class="hero-container max-w-4xl">
+      <h1 class="hero-title">Codebase</h1>
+      <p class="hero-subtitle text-teal-50 mb-10">
         Explore our collection of open-source projects, study our source code, and contribute to our independent game development tools.
       </p>
       <a 
         href="https://git.teletype.hu" 
         target="_blank" 
-        class="inline-flex items-center gap-3 bg-white text-teal-700 px-8 py-4 rounded-xl hover:bg-teal-50 transition-all font-bold shadow-xl hover:scale-105 active:scale-95"
+        class="btn-hero-teal"
       >
         Open Gitea
       </a>
     </div>
   </header>
 
-  <main class="max-w-6xl mx-auto py-12 px-4">
+  <main class="main-container">
     {error && (
       <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-8" role="alert">
         <strong class="font-bold">Error!</strong>
@@ -142,9 +142,9 @@ const recentCommits = allCommits.slice(0, 20);
     )}
 
     {!error && publicRepos.length > 0 && (
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-16">
+      <div class="card-grid mb-16">
         {publicRepos.map((repo) => (
-          <div class="bg-white shadow-lg rounded-lg p-4">
+          <div class="card-base">
             <h3 class="text-xl font-semibold mb-2">
               <a href={repo.html_url} target="_blank" class="text-blue-600 hover:text-blue-800">
                 {repo.owner.login}/{repo.name}
@@ -166,7 +166,7 @@ const recentCommits = allCommits.slice(0, 20);
 
     <div class="space-y-4 mb-12">
       {recentCommits.map((commit) => (
-        <div class="bg-white shadow-lg rounded-lg p-4 flex items-center space-x-4">
+        <div class="bg-white shadow-lg rounded-lg p-4 flex items-center space-x-4 border border-gray-100">
           <div class="flex-shrink-0 text-3xl">
             🚀
           </div>
diff --git a/apps/frontend/src/pages/index.astro b/apps/frontend/src/pages/index.astro
index bbb6c34..59f78d5 100644
--- a/apps/frontend/src/pages/index.astro
+++ b/apps/frontend/src/pages/index.astro
@@ -67,27 +67,27 @@ try {
 
 <Layout>
   <div class="bg-gray-50 min-h-screen pb-20">
-    <!-- Header Section (Inspired by News) -->
-    <header class="relative overflow-hidden bg-slate-900 py-24 text-white">
+    <!-- Header Section -->
+    <header class="hero-section-slate">
       <div class="absolute inset-0 opacity-30">
-        <div class="absolute -top-24 -left-24 h-96 w-96 rounded-full bg-indigo-600 blur-3xl"></div>
-        <div class="absolute -bottom-24 -right-24 h-96 w-96 rounded-full bg-purple-600 blur-3xl"></div>
+        <div class="hero-decor-blob -top-24 -left-24 h-96 w-96 bg-indigo-600"></div>
+        <div class="hero-decor-blob -bottom-24 -right-24 h-96 w-96 bg-purple-600"></div>
       </div>
       
-      <div class="relative max-w-5xl mx-auto px-4 text-center">
-        <div class="inline-block px-3 py-1 rounded-full bg-indigo-500/20 border border-indigo-400/30 text-indigo-300 text-sm font-medium mb-6 backdrop-blur-sm">
+      <div class="hero-container">
+        <div class="hero-badge">
           Welcome to
         </div>
-        <h1 class="text-5xl md:text-6xl font-extrabold tracking-tight mb-6">
+        <h1 class="hero-title">
           Teletype <span class="text-transparent bg-clip-text bg-gradient-to-r from-violet-400 to-fuchsia-400">Games</span>
         </h1>
-        <p class="text-lg md:text-xl text-slate-300 max-w-2xl mx-auto leading-relaxed">
+        <p class="hero-subtitle">
           Teletype Games is an independent game development community built on creative freedom, equality, and an open-source mindset. Our goal is to create experimental and full-fledged games with short development cycles.
         </p>
       </div>
     </header>
 
-    <main class="max-w-6xl mx-auto px-4 -mt-12 relative z-10">
+    <main class="main-container max-w-6xl">
       <!-- Countdown Section -->
       {nextEvent && (
         <section class="mb-12">
@@ -116,39 +116,39 @@ try {
       )}
 
       <!-- Navigation Grid -->
-      <section class="grid grid-cols-1 md:grid-cols-3 gap-8">
+      <section class="card-grid">
         <!-- Catalog Section -->
-        <div class="group bg-white p-8 rounded-2xl border border-gray-200 shadow-sm hover:shadow-xl hover:border-indigo-300 transition-all duration-300 flex flex-col h-full">
+        <div class="group card-interactive flex flex-col h-full">
           <div class="w-14 h-14 bg-purple-50 rounded-xl flex items-center justify-center mb-6 group-hover:bg-purple-100 transition-colors">
             <span class="text-3xl">🎮</span>
           </div>
           <h2 class="text-2xl font-bold text-gray-900 mb-3">Catalog</h2>
           <p class="text-gray-600 mb-6 flex-grow leading-relaxed">Here you can find our games. Discover our creations for TIC-80 and other platforms, many of which you can try directly in your browser.</p>
-          <a href="/catalog" class="inline-flex items-center justify-center bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-8 rounded-xl transition-all shadow-lg hover:shadow-purple-200">
+          <a href="/catalog" class="btn-primary bg-purple-600 hover:bg-purple-700 text-white hover:shadow-purple-200">
             Browse Games
           </a>
         </div>
 
         <!-- Wiki Section -->
-        <div class="group bg-white p-8 rounded-2xl border border-gray-200 shadow-sm hover:shadow-xl hover:border-green-300 transition-all duration-300 flex flex-col h-full">
+        <div class="group card-interactive flex flex-col h-full">
           <div class="w-14 h-14 bg-green-50 rounded-xl flex items-center justify-center mb-6 group-hover:bg-green-100 transition-colors">
             <span class="text-3xl">📚</span>
           </div>
           <h2 class="text-2xl font-bold text-gray-900 mb-3">Wiki</h2>
           <p class="text-gray-600 mb-6 flex-grow leading-relaxed">We gather our public interest development knowledge here. Read through technical descriptions and development logs.</p>
-          <a href="https://wiki.teletype.hu" target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-8 rounded-xl transition-all shadow-lg hover:shadow-green-200">
+          <a href="https://wiki.teletype.hu" target="_blank" rel="noopener noreferrer" class="btn-primary bg-green-600 hover:bg-green-700 text-white hover:shadow-green-200">
             Knowledge Base
           </a>
         </div>
 
         <!-- Git Section -->
-        <div class="group bg-white p-8 rounded-2xl border border-gray-200 shadow-sm hover:shadow-xl hover:border-slate-300 transition-all duration-300 flex flex-col h-full">
+        <div class="group card-interactive flex flex-col h-full">
           <div class="w-14 h-14 bg-slate-50 rounded-xl flex items-center justify-center mb-6 group-hover:bg-slate-100 transition-colors">
             <span class="text-3xl">💻</span>
           </div>
           <h2 class="text-2xl font-bold text-gray-900 mb-3">Git Repos</h2>
           <p class="text-gray-600 mb-6 flex-grow leading-relaxed">All our projects are open source. Browse our code, study our solutions, or even participate in the development.</p>
-          <a href="https://git.teletype.hu" target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center bg-slate-800 hover:bg-slate-900 text-white font-bold py-3 px-8 rounded-xl transition-all shadow-lg hover:shadow-slate-200">
+          <a href="https://git.teletype.hu" target="_blank" rel="noopener noreferrer" class="btn-primary bg-slate-800 hover:bg-slate-900 text-white hover:shadow-slate-200">
             Gitea
           </a>
         </div>
diff --git a/apps/frontend/src/pages/news.astro b/apps/frontend/src/pages/news.astro
index 674e7d2..dc40e83 100644
--- a/apps/frontend/src/pages/news.astro
+++ b/apps/frontend/src/pages/news.astro
@@ -95,34 +95,34 @@ function timeAgo(dateStr: string): string {
 
 <Layout>
   <div class="bg-gray-50 min-h-screen pb-20">
-    <header class="relative overflow-hidden bg-slate-900 py-24 text-white">
+    <header class="hero-section-slate">
       <!-- Decorative background elements -->
       <div class="absolute inset-0 opacity-30">
-        <div class="absolute -top-24 -left-24 h-96 w-96 rounded-full bg-indigo-600 blur-3xl"></div>
-        <div class="absolute -bottom-24 -right-24 h-96 w-96 rounded-full bg-purple-600 blur-3xl"></div>
+        <div class="hero-decor-blob -top-24 -left-24 h-96 w-96 bg-indigo-600"></div>
+        <div class="hero-decor-blob -bottom-24 -right-24 h-96 w-96 bg-purple-600"></div>
       </div>
       
-      <div class="relative max-w-5xl mx-auto px-4 text-center">
-        <div class="inline-block px-3 py-1 rounded-full bg-indigo-500/20 border border-indigo-400/30 text-indigo-300 text-sm font-medium mb-6 backdrop-blur-sm">
+      <div class="hero-container">
+        <div class="hero-badge">
           Latest Updates
         </div>
-        <h1 class="text-5xl md:text-6xl font-extrabold tracking-tight mb-6">
+        <h1 class="hero-title">
           Wiki <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400">News</span>
         </h1>
-        <p class="text-lg md:text-xl text-slate-300 max-w-2xl mx-auto leading-relaxed mb-10">
+        <p class="hero-subtitle mb-10">
           The latest documentation, technical guides, and development logs from our knowledge base.
         </p>
         <a 
           href={WIKIJS_BASE_URL} 
           target="_blank" 
-          class="inline-flex items-center gap-3 bg-white text-indigo-900 px-8 py-4 rounded-xl hover:bg-indigo-50 transition-all font-bold shadow-xl hover:scale-105 active:scale-95"
+          class="btn-hero-indigo"
         >
           Knowledge Base
         </a>
       </div>
     </header>
 
-    <main class="max-w-7xl mx-auto px-4 -mt-12 relative z-10">
+    <main class="main-container">
 
       {error && (
         <div class="bg-red-50 border-l-4 border-red-500 p-6 rounded-r-xl shadow-lg mb-12 flex items-start gap-4" role="alert">
@@ -143,7 +143,7 @@ function timeAgo(dateStr: string): string {
       )}
 
       {!error && recentPages.length > 0 && (
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div class="card-grid">
           {recentPages.map((page) => {
             const pageUrl = `${WIKIJS_BASE_URL}/${page.locale}/${page.path}`;
             const isNew = (new Date().getTime() - new Date(page.createdAt).getTime()) < 7 * 24 * 60 * 60 * 1000;
@@ -152,7 +152,7 @@ function timeAgo(dateStr: string): string {
               <a
                 href={pageUrl}
                 target="_blank"
-                class="group flex flex-col bg-white rounded-2xl border border-gray-200 p-6 shadow-sm hover:shadow-xl hover:border-indigo-300 transition-all duration-300 ease-out hover:-translate-y-1"
+                class="group card-interactive flex flex-col"
               >
                 <div class="flex items-center justify-end mb-4">
                   <div class="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-gray-400">
diff --git a/apps/frontend/src/styles/global.css b/apps/frontend/src/styles/global.css
new file mode 100644
index 0000000..9b2f52d
--- /dev/null
+++ b/apps/frontend/src/styles/global.css
@@ -0,0 +1,74 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  /* Hero Section */
+  .hero-section {
+    @apply relative overflow-hidden py-24 text-white text-center;
+  }
+
+  .hero-section-gradient {
+    @apply hero-section bg-gradient-to-r;
+  }
+
+  .hero-section-slate {
+    @apply hero-section bg-slate-900;
+  }
+
+  .hero-container {
+    @apply relative max-w-5xl mx-auto px-4 z-10;
+  }
+
+  .hero-badge {
+    @apply inline-block px-3 py-1 rounded-full bg-indigo-500/20 border border-indigo-400/30 text-indigo-300 text-sm font-medium mb-6 backdrop-blur-sm;
+  }
+
+  .hero-title {
+    @apply text-5xl md:text-6xl font-extrabold tracking-tight mb-6;
+  }
+
+  .hero-subtitle {
+    @apply text-lg md:text-xl text-slate-300 max-w-2xl mx-auto leading-relaxed;
+  }
+
+  /* Buttons */
+  .btn-hero {
+    @apply inline-flex items-center gap-3 bg-white px-8 py-4 rounded-xl transition-all font-bold shadow-xl hover:scale-105 active:scale-95;
+  }
+
+  .btn-hero-teal {
+    @apply btn-hero text-teal-700 hover:bg-teal-50;
+  }
+
+  .btn-hero-indigo {
+    @apply btn-hero text-indigo-900 hover:bg-indigo-50;
+  }
+
+  .btn-primary {
+    @apply inline-flex items-center justify-center font-bold py-3 px-8 rounded-xl transition-all shadow-lg;
+  }
+
+  /* Grid and Containers */
+  .main-container {
+    @apply max-w-7xl mx-auto px-4 -mt-12 relative z-10;
+  }
+
+  .card-grid {
+    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
+  }
+
+  /* Cards */
+  .card-base {
+    @apply bg-white rounded-2xl border border-gray-200 p-6 shadow-sm;
+  }
+
+  .card-interactive {
+    @apply card-base hover:shadow-xl transition-all duration-300 ease-out hover:-translate-y-1;
+  }
+
+  /* Decorative Background Elements */
+  .hero-decor-blob {
+    @apply absolute rounded-full blur-3xl opacity-30;
+  }
+}
