diff --git a/src/components/Card.astro b/src/components/Card.astro
new file mode 100644
index 0000000..6463cc6
--- /dev/null
+++ b/src/components/Card.astro
@@ -0,0 +1,24 @@
+---
+export interface Props {
+  title: string;
+  bigTech: string;
+  alternatives: Array<{ name: string; description: string; url: string }>;
+  bgClass: string;
+}
+
+const { title, bigTech, alternatives, bgClass } = Astro.props;
+---
+
+<div class={`border rounded-lg p-6 shadow-md ${bgClass} text-gray-900`}>
+  <h2 class="text-2xl font-semibold mb-4">{title}</h2>
+  <p class="text-xl mb-4">Big Tech Option: {bigTech}</p>
+  <ul class="space-y-4">
+    {alternatives.map(alt => (
+      <li>
+        <h3 class="text-lg font-bold underline">{alt.name}</h3>
+        <p>{alt.description}</p>
+        <a href={alt.url} class="text-blue-500 hover:text-blue-700">Website</a>
+      </li>
+    ))}
+  </ul>
+</div>
diff --git a/src/pages/WhatWereWorkingOnPages/Alternatives.astro b/src/pages/WhatWereWorkingOnPages/Alternatives.astro
index ed71973..36f55fe 100644
--- a/src/pages/WhatWereWorkingOnPages/Alternatives.astro
+++ b/src/pages/WhatWereWorkingOnPages/Alternatives.astro
@@ -3,6 +3,10 @@ import Navbar from "../../components/Navbar";
 import Footer from "../../components/Footer";
 import Layout from "../../layouts/Layout.astro";
 import "../../styles/globals.css";
+
+
+import Card from "../../components/Card.astro";
+
 ---
 
 <Layout>
@@ -14,131 +18,81 @@ import "../../styles/globals.css";
         <p class="mb-4">Explore open-source and privacy-focused alternatives to popular big tech software.</p>
         
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-          <div class="border rounded-lg p-6 shadow-md bg-blue-50 text-gray-900">
-            <h2 class="text-2xl font-semibold mb-4">Browsers</h2>
-            <p class="text-xl mb-4">Big Tech Option: Chrome (Google)</p>
-            <ul class="space-y-4">
-              <li>
-                <h3 class="text-lg font-bold">Firefox</h3>
-                <p>Privacy-focused browser.</p>
-                <a href="https://www.mozilla.org/firefox" class="text-blue-500 hover:text-blue-700">Website</a>
-              </li>
-              <li>
-                <h3 class="text-lg font-bold">Brave</h3>
-                <p>Ad-blocking browser.</p>
-                <a href="https://brave.com" class="text-blue-500 hover:text-blue-700">Website</a>
-              </li>
-            </ul>
-          </div>
+          <Card 
+            title="Browsers" 
+            bigTech="Chrome (Google)" 
+            alternatives={[
+              { name: 'Firefox', description: 'Privacy-focused browser.', url: 'https://www.mozilla.org/firefox' },
+              { name: 'Brave', description: 'Ad-blocking browser.', url: 'https://brave.com' }
+            ]}
+            bgClass="bg-blue-50" 
+          />
 
-          <div class="border rounded-lg p-6 shadow-md bg-green-50 text-gray-900">
-            <h2 class="text-2xl font-semibold mb-4">Search Engines</h2>
-            <p class="text-xl mb-4">Big Tech Option: Google Search</p>
-            <ul class="space-y-4">
-              <li>
-                <h3 class="text-lg font-bold">DuckDuckGo</h3>
-                <p>Privacy-protecting search.</p>
-                <a href="https://duckduckgo.com" class="text-blue-500 hover:text-blue-700">Website</a>
-              </li>
-              <li>
-                <h3 class="text-lg font-bold">Searx</h3>
-                <p>Metasearch engine.</p>
-                <a href="https://searx.space" class="text-blue-500 hover:text-blue-700">Website</a>
-              </li>
-            </ul>
-          </div>
+          <Card 
+            title="Cloud Storage" 
+            bigTech="Google Drive" 
+            alternatives={[
+              { name: 'Nextcloud', description: 'Self-hosted file sync and share.', url: 'https://nextcloud.com' }
+            ]}
+            bgClass="bg-indigo-50" 
+          />
 
-          <div class="border rounded-lg p-6 shadow-md bg-yellow-50 text-gray-900">
-            <h2 class="text-2xl font-semibold mb-4">Email</h2>
-            <p class="text-xl mb-4">Big Tech Option: Gmail (Google)</p>
-            <ul class="space-y-4">
-              <li>
-                <h3 class="text-lg font-bold">ProtonMail</h3>
-                <p>Encrypted email.</p>
-                <a href="https://protonmail.com" class="text-blue-500 hover:text-blue-700">Website</a>
-              </li>
-              <li>
-                <h3 class="text-lg font-bold">Tutanota</h3>
-                <p>Secure email service.</p>
-                <a href="https://tutanota.com" class="text-blue-500 hover:text-blue-700">Website</a>
-              </li>
-            </ul>
-          </div>
+          <Card 
+            title="Email" 
+            bigTech="Gmail (Google)" 
+            alternatives={[
+              { name: 'ProtonMail', description: 'Encrypted email.', url: 'https://protonmail.com' },
+            ]}
+            bgClass="bg-yellow-50" 
+          />
 
-          <div class="border rounded-lg p-6 shadow-md bg-purple-50 text-gray-900">
-            <h2 class="text-2xl font-semibold mb-4">Social Media</h2>
-            <p class="text-xl mb-4">Big Tech Options: Twitter (X), Facebook (Meta)</p>
-            <ul class="space-y-4">
-              <li>
-                <h3 class="text-lg font-bold">Mastodon</h3>
-                <p>Decentralized social network (alternative to Twitter).</p>
-                <a href="https://joinmastodon.org" class="text-blue-500 hover:text-blue-700">Website</a>
-              </li>
-              <li>
-                <h3 class="text-lg font-bold">Diaspora</h3>
-                <p>Decentralized social network (alternative to Facebook).</p>
-                <a href="https://diasporafoundation.org" class="text-blue-500 hover:text-blue-700">Website</a>
-              </li>
-            </ul>
-          </div>
+          <Card 
+            title="Maps" 
+            bigTech="Google Maps" 
+            alternatives={[
+              { name: 'OpenStreetMap', description: 'Community-driven maps.', url: 'https://www.openstreetmap.org' }
+            ]}
+            bgClass="bg-teal-50" 
+          />
 
-          <div class="border rounded-lg p-6 shadow-md bg-pink-50 text-gray-900">
-            <h2 class="text-2xl font-semibold mb-4">Video Platforms</h2>
-            <p class="text-xl mb-4">Big Tech Option: YouTube (Google)</p>
-            <ul class="space-y-4">
-              <li>
-                <h3 class="text-lg font-bold">PeerTube</h3>
-                <p>Decentralized video hosting.</p>
-                <a href="https://joinpeertube.org" class="text-blue-500 hover:text-blue-700">Website</a>
-              </li>
-              <li>
-                <h3 class="text-lg font-bold">Odysee</h3>
-                <p>Blockchain-based video platform.</p>
-                <a href="https://odysee.com" class="text-blue-500 hover:text-blue-700">Website</a>
-              </li>
-            </ul>
-          </div>
+          <Card 
+            title="Messaging" 
+            bigTech="WhatsApp (Meta), Slack" 
+            alternatives={[
+              { name: 'Signal', description: 'Encrypted messaging (alternative to WhatsApp).', url: 'https://signal.org' },
+              { name: 'Element', description: 'Matrix-based chat (alternative to Slack).', url: 'https://element.io' }
+            ]}
+            bgClass="bg-red-50" 
+          />
 
-          <div class="border rounded-lg p-6 shadow-md bg-indigo-50 text-gray-900">
-            <h2 class="text-2xl font-semibold mb-4">Cloud Storage</h2>
-            <p class="text-xl mb-4">Big Tech Option: Google Drive</p>
-            <ul class="space-y-4">
-              <li>
-                <h3 class="text-lg font-bold">Nextcloud</h3>
-                <p>Self-hosted file sync and share.</p>
-                <a href="https://nextcloud.com" class="text-blue-500 hover:text-blue-700">Website</a>
-              </li>
-            </ul>
-          </div>
+          <Card 
+            title="Search Engines" 
+            bigTech="Google Search" 
+            alternatives={[
+              { name: 'DuckDuckGo', description: 'Privacy-protecting search.', url: 'https://duckduckgo.com' },
+            ]}
+            bgClass="bg-green-50" 
+          />
 
-          <div class="border rounded-lg p-6 shadow-md bg-red-50 text-gray-900">
-            <h2 class="text-2xl font-semibold mb-4">Messaging</h2>
-            <p class="text-xl mb-4">Big Tech Options: WhatsApp (Meta), Slack</p>
-            <ul class="space-y-4">
-              <li>
-                <h3 class="text-lg font-bold">Signal</h3>
-                <p>Encrypted messaging (alternative to WhatsApp).</p>
-                <a href="https://signal.org" class="text-blue-500 hover:text-blue-700">Website</a>
-              </li>
-              <li>
-                <h3 class="text-lg font-bold">Element</h3>
-                <p>Matrix-based chat (alternative to Slack).</p>
-                <a href="https://element.io" class="text-blue-500 hover:text-blue-700">Website</a>
-              </li>
-            </ul>
-          </div>
+          <Card 
+            title="Social Media" 
+            bigTech="Twitter (X), Facebook (Meta)" 
+            alternatives={[
+              { name: 'Mastodon', description: 'Decentralized social network (alternative to Twitter).', url: 'https://joinmastodon.org' },
+              { name: 'Diaspora', description: 'Decentralized social network (alternative to Facebook).', url: 'https://diasporafoundation.org' }
+            ]}
+            bgClass="bg-purple-50" 
+          />
+
+          <Card 
+            title="Video Platforms" 
+            bigTech="YouTube (Google)" 
+            alternatives={[
+              { name: 'PeerTube', description: 'Decentralized video hosting.', url: 'https://joinpeertube.org' },
+            ]}
+            bgClass="bg-pink-50" 
+          />
 
-          <div class="border rounded-lg p-6 shadow-md bg-teal-50 text-gray-900">
-            <h2 class="text-2xl font-semibold mb-4">Maps</h2>
-            <p class="text-xl mb-4">Big Tech Option: Google Maps</p>
-            <ul class="space-y-4">
-              <li>
-                <h3 class="text-lg font-bold">OpenStreetMap</h3>
-                <p>Community-driven maps.</p>
-                <a href="https://www.openstreetmap.org" class="text-blue-500 hover:text-blue-700">Website</a>
-              </li>
-            </ul>
-          </div>
         </div>
       </div>
     </div>