diff --git a/package-lock.json b/package-lock.json
index 4f4f8e1..314dddb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,8 @@
       "name": "@example/basics",
       "version": "0.0.1",
       "dependencies": {
-        "astro": "^1.2.6"
+        "astro": "^1.2.6",
+        "astro-github-stats": "^0.1.4"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -970,6 +971,14 @@
         "npm": ">=6.14.0"
       }
     },
+    "node_modules/astro-github-stats": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/astro-github-stats/-/astro-github-stats-0.1.4.tgz",
+      "integrity": "sha512-pUVH6czewlTrpO0I+q4oAYLwxXH2lflZ8t/O04z5GuxSQh1hEHXdcTdoyWb039PVYwGoWx/Ziye6loT4472YTQ==",
+      "peerDependencies": {
+        "astro": "^1.0.0"
+      }
+    },
     "node_modules/bail": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
@@ -6534,6 +6543,12 @@
         "zod": "^3.17.3"
       }
     },
+    "astro-github-stats": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/astro-github-stats/-/astro-github-stats-0.1.4.tgz",
+      "integrity": "sha512-pUVH6czewlTrpO0I+q4oAYLwxXH2lflZ8t/O04z5GuxSQh1hEHXdcTdoyWb039PVYwGoWx/Ziye6loT4472YTQ==",
+      "requires": {}
+    },
     "bail": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
diff --git a/package.json b/package.json
index 5e0cb9a..736a1af 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^1.2.6"
+    "astro": "^1.2.6",
+    "astro-github-stats": "^0.1.4"
   }
 }
diff --git a/src/components/Back.astro b/src/components/Back.astro
index e93ae47..363e9ef 100644
--- a/src/components/Back.astro
+++ b/src/components/Back.astro
@@ -1,4 +1,7 @@
-<nav><a href="/">&larr; Back</a></nav>
+---
+const {url}= Astro.props;
+---
+<nav><a href={url}>&larr; Back</a></nav>
 
 <style>
   nav {
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 25cdb51..f26a64d 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -64,9 +64,16 @@ import Footer from '../components/Footer.astro';
 		}
 	}
 
+
 </style>
 
 <style is:global>
+	main {
+		margin: auto;
+		padding: 1em;
+		max-width: var(--content-width);
+	}
+
 	h1 {
 		font-size: var(--font-size-xl);
 	}
@@ -80,10 +87,23 @@ import Footer from '../components/Footer.astro';
 			Bitstream Vera Sans Mono, Courier New, monospace;
 	}
 
-        a {
-            font-weight: 900;
-            color: var(--color-link);
-            border-radius: 0.4rem;
-        }
+	a {
+			font-weight: 900;
+			color: var(--color-link);
+			border-radius: 0.4rem;
+	}
+
+	.text-gradient {
+		font-weight: 900;
+		background-image: var(--ayo-gradient);
+		animation: pulse 4s ease-in-out infinite;
+                background-size: 500% 500%;
+		-webkit-background-clip: text;
+		-webkit-text-fill-color: transparent;
+		background-size: 100% 200%;
+		background-position-y: 100%;
+		border-radius: 0.4rem;
+	}
+
 
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 7b59c3c..57f0e91 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -34,6 +34,11 @@ import Footer from "../components/Footer.astro";
           title="Github"
           body="See my public projects over at Github. ❤️"
         />
+        <!--Card
+          href="/showcase"
+          title="Showcase"
+          body="Try out some components I made recently."
+        /-->
         <Card
           href="/social"
           title="Social"
@@ -61,6 +66,10 @@ import Footer from "../components/Footer.astro";
     color: white;
   }
 
+  main {
+    max-width: 100% !important;
+  }
+
   .highlighted-section__content {
     margin: auto;
     padding: 1em;
diff --git a/src/pages/now.astro b/src/pages/now.astro
index e7a6f11..d245ce7 100644
--- a/src/pages/now.astro
+++ b/src/pages/now.astro
@@ -7,7 +7,7 @@ import Back from '../components/Back.astro';
 
 <Layout title="Ayo Ayco | Software Engineer + Web Developer">
 	<main>
-		<Back />
+		<Back url="/" />
             <h1><span class="text-gradient">Now</span></h1>
 						<em>What am I currently up to?</em>
 						<p>This year (2022) I have moved to The Netherlands with my family; specifically to the northern area of Amsterdam.</p>
diff --git a/src/pages/showcase.astro b/src/pages/showcase.astro
new file mode 100644
index 0000000..5474c61
--- /dev/null
+++ b/src/pages/showcase.astro
@@ -0,0 +1,21 @@
+---
+import Layout from "../layouts/Layout.astro";
+import Footer from "../components/Footer.astro";
+import Card from "../components/Card.astro";
+import Back from "../components/Back.astro";
+---
+
+<Layout>
+  <main>
+    <Back url="/" />
+    <h1>Showcase <span class="text-gradient">Components</span></h1>
+    <ul list=role>
+      <Card
+        href="/showcase/astro-github-stats"
+        title="Astro Github Stats"
+        body="Embed github stats on your Astro page ✨"
+        />
+    </ul>
+    <Footer />
+  </main>
+</Layout>
diff --git a/src/pages/showcase/astro-github-stats.astro b/src/pages/showcase/astro-github-stats.astro
new file mode 100644
index 0000000..9faa1a4
--- /dev/null
+++ b/src/pages/showcase/astro-github-stats.astro
@@ -0,0 +1,23 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import Footer from "../../components/Footer.astro";
+import Back from "../../components/Back.astro";
+import GithubStats from "astro-github-stats";
+---
+<Layout>
+  <main>
+    <Back url="/showcase" />
+    <h1>Astro Github Stats</h1>
+    <GithubStats username="ayoayco" />
+    <h2>Links</h2>
+    <ol>
+      <li>
+        Github repo: <a href="https://github.com/ayoayco/astro-github-stats">astro-github-stats</a>
+      </li>
+      <li>
+        NPM registry: <a href="https://npmjs.org/astro-github-stats">astro-github-stats</a>
+      </li>
+    </ol>
+    <Footer />
+  </main>
+</Layout>
diff --git a/src/pages/social.astro b/src/pages/social.astro
index a699a8d..a3b4f00 100644
--- a/src/pages/social.astro
+++ b/src/pages/social.astro
@@ -7,27 +7,27 @@ import Back from '../components/Back.astro';
 
 <Layout title="Ayo Ayco | Software Engineer + Web Developer">
 	<main>
-		<Back />
-            <h1>Social <span class="text-gradient">Links</span></h1>
-            <ul role="list" class="link-card-grid">
-                <Card
-                        href="https://twitter.com/ayoayco/"
-                        title="Twitter"
-                        body="Tweets about my takes on technology and current events"
-                />
-                <Card
-                        href="https://www.linkedin.com/in/ayoayco/"
-                        title="LinkedIn"
-                        body="Connect with me and my professional network"
-                />
-                <Card
-                        href="https://soundcloud.com/ayoayco/"
-                        title="SoundCloud"
-                        body="Some music I made as a hobby"
-                />
-            </ul>
-            <Footer />
-        </main>
+    <Back url="/" />
+			<h1>Social <span class="text-gradient">Links</span></h1>
+			<ul role="list" class="link-card-grid">
+					<Card
+									href="https://twitter.com/ayoayco/"
+									title="Twitter"
+									body="Tweets about my takes on technology and current events"
+					/>
+					<Card
+									href="https://www.linkedin.com/in/ayoayco/"
+									title="LinkedIn"
+									body="Connect with me and my professional network"
+					/>
+					<Card
+									href="https://soundcloud.com/ayoayco/"
+									title="SoundCloud"
+									body="Some music I made as a hobby"
+					/>
+			</ul>
+			<Footer />
+	</main>
 </Layout>
 
 <style>
@@ -35,24 +35,6 @@ import Back from '../components/Back.astro';
 		margin: 2rem 0;
 	}
 
-	main {
-		margin: auto;
-		padding: 1em;
-		max-width: var(--content-width);
-	}
-
-	.text-gradient {
-		font-weight: 900;
-		background-image: var(--ayo-gradient);
-		animation: pulse 4s ease-in-out infinite;
-                background-size: 500% 500%;
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-size: 100% 200%;
-		background-position-y: 100%;
-		border-radius: 0.4rem;
-	}
-
 	.highlighted-content {
 		line-height: 1.6;
 		margin: 1rem 0;