diff --git a/src/assets/style/global.css b/src/assets/style/global.css
index 0bc9581..fe97efb 100644
--- a/src/assets/style/global.css
+++ b/src/assets/style/global.css
@@ -12,6 +12,7 @@ html {
 body {
   max-width: 95vw; /* leave some space in the end by default */
   margin: auto;
+  padding: 15px 0;
 }
 
 section:not(:first-child) {
@@ -45,3 +46,17 @@ section:not(:first-child) {
     max-width: 1536px;
   }
 }
+
+a {
+  color: var(--prj-link-text);
+}
+
+ul {
+  /* Make the marker position is inside the container */
+  list-style-position: inside;
+  margin: 0;
+}
+
+li:not(:last-child) {
+  margin-bottom: var(--prj-spacing-1);
+}
diff --git a/src/assets/style/utils.css b/src/assets/style/utils.css
index e9b276c..db3c2cc 100644
--- a/src/assets/style/utils.css
+++ b/src/assets/style/utils.css
@@ -97,3 +97,15 @@
   text-align: justify;
   text-justify: inter-word;
 }
+
+.text-start {
+  text-align: start;
+}
+
+.text-middle {
+  text-align: middle;
+}
+
+.text-end {
+  text-align: end;
+}
diff --git a/src/components/Card.astro b/src/components/Card.astro
index c68fa2a..0cbd2be 100644
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -1,63 +1,36 @@
 ---
 export interface Props {
-	title: string;
-	body: string;
-	href: string;
+  title: string;
+  body: string;
+  href: string;
 }
 
 const { href, title, body } = Astro.props;
 ---
 
-<li class="link-card">
-	<a href={href}>
-		<h2>
-			{title}
-			<span>&rarr;</span>
-		</h2>
-		<p>
-			{body}
-		</p>
-	</a>
-</li>
-<style>
-	.link-card {
-		list-style: none;
-		display: flex;
-		padding: 0.25rem;
-		background-color: white;
-		background-image: none;
-		background-size: 400%;
-		border-radius: 0.6rem;
-		background-position: 100%;
-		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-	}
+<div class="card">
+  <div class="title">
+    <slot name="title" />
+  </div>
 
-	.link-card > a {
-		width: 100%;
-		text-decoration: none;
-		line-height: 1.4;
-		padding: 1rem 1.3rem;
-		border-radius: 0.35rem;
-		color: #111;
-		background-color: white;
-		opacity: 0.8;
-	}
-	h2 {
-		margin: 0;
-		font-size: 1.25rem;
-		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-	}
-	p {
-		margin-top: 0.5rem;
-		margin-bottom: 0;
-		color: #444;
-	}
-	.link-card:is(:hover, :focus-within) {
-		background-position: 0;
-		background-image: var(--accent-gradient);
-	}
-	.link-card:is(:hover, :focus-within) h2 {
-		color: rgb(var(--accent));
-	}
+  <div class="content">
+    <slot />
+  </div>
+
+  <div class="footer">
+    <slot name="footer" />
+  </div>
+</div>
+
+<style>
+  .card {
+    border: 1px solid var(--prj-accent-bg);
+    border-radius: 8px;
+
+    padding: var(--prj-spacing-2) var(--prj-spacing-3);
+  }
+
+  .title > :global(:last-child) {
+    margin-bottom: var(--prj-spacing-2);
+  }
 </style>
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index f60e074..35bb261 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -26,12 +26,11 @@ const links = [
 
 <script>
   // Add active class to the current link
- const link = document.querySelector(`a[href='${location.pathname}']`);
-
- if (link) {
-   link.classList.add("active");
- }
+  const link = document.querySelector(`a[href='${location.pathname}']`);
 
+  if (link) {
+    link.classList.add('active');
+  }
 </script>
 
 <style>
@@ -39,13 +38,16 @@ const links = [
     width: fit-content;
   }
 
+  ul {
+    padding: 0;
+  }
+
   li > a {
     padding: 0.25rem 0.5rem;
   }
 
   a {
     --boder-color: transparent;
-    color: var(--prj-link-text);
     border: 1px solid var(--boder-color);
     border-radius: 4px;
     text-decoration: none;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index b36b7a1..cfb5734 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -20,6 +20,56 @@ import portrait from '../assets/images/portrait.jpg';
     </div>
 
     <p class="text-justify">
+      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil ea rerum
+      doloremque numquam hic eius culpa nesciunt maiores repellat assumenda
+      incidunt, molestias odit perspiciatis dolore reiciendis praesentium
+      itaque! Et, ad!
+    </p>
+  </section>
+
+  <section>
+    <div class="grid grid-cols-3">
+      <Card>
+        <h3 slot="title">Portafolio</h3>
+        <ul>
+          <li><a href="">Entry 1</a></li>
+          <li><a href="">Entry 2</a></li>
+          <li><a href="">Entry 3</a></li>
+        </ul>
+        <div slot="footer" class="text-end">
+          <a href="">See more...</a>
+        </div>
+      </Card>
+
+      <Card>
+        <h3 slot="title">Blog</h3>
+        <ul>
+          <li><a href="">Entry 1</a></li>
+          <li><a href="">Entry 2</a></li>
+          <li><a href="">Entry 3</a></li>
+        </ul>
+        <div slot="footer" class="text-end">
+          <a href="">See more...</a>
+        </div>
+      </Card>
+
+      <Card>
+        <h3 slot="title">Games</h3>
+        <ul>
+          <li><a href="">Entry 1</a></li>
+          <li><a href="">Entry 2</a></li>
+          <li><a href="">Entry 3</a></li>
+        </ul>
+        <div slot="footer" class="text-end">
+          <a href="">See more...</a>
+        </div>
+      </Card>
+    </div>
+  </section>
+
+  <section>
+    <h2>About me</h2>
+    <p>
       Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim
       labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet.
       Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum
@@ -32,14 +82,6 @@ import portrait from '../assets/images/portrait.jpg';
       ut ea consectetur et est culpa et culpa duis.
     </p>
   </section>
-
-  <section>
-    <div class="grid grid-cols-3">
-      <Card />
-      <Card />
-      <Card />
-    </div>
-  </section>
 </Layout>
 
 <style>