diff --git a/src/pages/index.astro b/src/pages/index.astro
index 89f6a37..af040fc 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,13 +2,11 @@
 import { getCollection } from 'astro:content';
 import Layout from '../layouts/Layout.astro';
 import Card from '../components/Card.astro';
+import Button from '../components/Button/Button.astro';
+import BackgroundImageDiv from '../components/BackgroundImageDiv.astro';
 import { Image } from 'astro:assets';
 
 import portrait from '../assets/images/portrait.jpg';
-let games = await getCollection('games', ({ data }) => data.has_content);
-games = games.sort(
-  (a, b) => b.data.date_added.getTime() - a.data.date_added.getTime(),
-);
 
 const blog = await getCollection('blog', ({ data }) =>
   import.meta.env.PROD ? data.draft !== true : true,
@@ -29,106 +27,229 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
       <!--   loading="eager" -->
       <!--   width={200} -->
       <!-- /> -->
-      <h1>Alexander Navarro</h1>
-    </div>
-
-    <p class="text-justify">
-      This site is a <u><strong>Work In Progress</strong></u>, It is meant to be
-      a place where I can collect the content I produce. For now it only focused
-      on storage and display of the raw content of the categories especified
-      below.
-    </p>
-
-    <p class="text-justify">
-      The first version of this project was developed as a <a
-        href="https://en.wikipedia.org/wiki/Minimum_viable_product">MVP</a
-      >. So this sites lacks many features I would like to add over time. For an
-      up to date roadmap, please visit the <a
-        href="https://codeberg.org/aleidk/personal-page">project README</a
-      >.
-    </p>
-  </section>
-
-  <section>
-    <div class="grid grid-cols-3">
-      <Card>
-        <h3 slot="title">Portafolio</h3>
-        <ul>
-          {
-            portafolio.slice(0, 3).map((item) => (
-              <li>
-                <a href={`portafolio/${item.slug}`}>{item.data.title}</a>
-              </li>
-            ))
-          }
-        </ul>
-        <div slot="footer" class="text-end">
-          <a href="/portafolio">See more...</a>
-        </div>
-      </Card>
-
-      <Card>
-        <h3 slot="title">Blog</h3>
-        <ul>
-          {
-            blog.slice(0, 3).map((item) => (
-              <li>
-                <a href={`blog/${item.slug}`}>{item.data.title}</a>
-              </li>
-            ))
-          }
-        </ul>
-        <div slot="footer" class="text-end">
-          <a href="/blog">See more...</a>
-        </div>
-      </Card>
-
-      <Card>
-        <h3 slot="title">Games</h3>
-        <ul>
-          {
-            games.slice(0, 3).map((item) => (
-              <li>
-                <a href={`games/${item.slug}`}>{item.data.title}</a>
-              </li>
-            ))
-          }
-        </ul>
-        <div slot="footer" class="text-end">
-          <a href="/games">See more...</a>
-        </div>
-      </Card>
+      <div>
+        <h1 class="my-0">Alexander Navarro</h1>
+        <p>
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet,
+          repudiandae veritatis totam animi ut facere omnis. Quasi, tempore
+          porro, neque officia nisi error quia deleniti nesciunt provident vitae
+          consequuntur quod?
+        </p>
+      </div>
     </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
-      Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident.
-      Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex
-      occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat
-      officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in
-      Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non
-      excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco
-      ut ea consectetur et est culpa et culpa duis.
-    </p>
+    <h2 class="text-center">Featured Work</h2>
+
+    <div class="grid grid-cols-3 gap-4">
+      <Card>
+        <img src="https://placehold.co/600x400" alt="project img" />
+        <h3 class="fs-4 text-center my-1">Project N°1</h3>
+        <p class="text-justify">
+          Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
+          cillum sint consectetur cupidatat.
+        </p>
+
+        <div class="text-end">
+          <a href="">See more...</a>
+        </div>
+      </Card>
+
+      <Card>
+        <img src="https://placehold.co/600x400" alt="project img" />
+        <h3 class="fs-4 text-center my-1">Project N°1</h3>
+        <p class="text-justify">
+          Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
+          cillum sint consectetur cupidatat.
+        </p>
+
+        <div class="text-end">
+          <a href="">See more...</a>
+        </div>
+      </Card>
+
+      <Card>
+        <img src="https://placehold.co/600x400" alt="project img" />
+        <h3 class="fs-4 text-center my-1">Project N°1</h3>
+        <p class="text-justify">
+          Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
+          cillum sint consectetur cupidatat.
+        </p>
+
+        <div class="text-end">
+          <a href="">See more...</a>
+        </div>
+      </Card>
+    </div>
+
+    <div class="mt-4 text-center">
+      <Button className="px-4 py-2 fs-5">View Work</Button>
+    </div>
   </section>
+
+  <section class:list={[{ 'd-none': import.meta.env.PROD }]}>
+    <h2 class="mb-4">What I've been up to...</h2>
+
+    <div class="hstack flex-eq">
+      <div class="vstack justify-content-center">
+        <h4 class="text-center">Blog</h4>
+        <ol class="list-unstyle mt-0 fs-5">
+          <li class="mb-3">
+            <a href="#"
+              >Qui minim labore adipisicing minim sint cillum sint consectetur
+              cupidatat.</a
+            >
+          </li>
+          <li class="mb-3">
+            <a href="#"
+              >Qui minim labore adipisicing minim sint cillum sint consectetur
+              cupidatat.</a
+            >
+          </li>
+          <li class="mb-3">
+            <a href="#"
+              >Qui minim labore adipisicing minim sint cillum sint consectetur
+              cupidatat.</a
+            >
+          </li>
+        </ol>
+      </div>
+
+      <div>
+        <div class="text-center mb-2">
+          <img class="" src="https://placehold.co/400x200" alt="project img" />
+        </div>
+        <p class="text-justify">
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse
+          consequatur iste molestiae blanditiis eligendi consectetur ullam.
+          Excepturi quasi sed est animi laudantium necessitatibus, tempore
+          delectus nulla aspernatur quod nesciunt fugiat.
+        </p>
+      </div>
+    </div>
+
+    <div class="mt-5 hstack-reverse flex-eq">
+      <div class="vstack justify-content-center">
+        <h4 class="text-center">Games</h4>
+        <ol class="list-unstyle mt-0 fs-5">
+          <li class="mb-3">
+            <a href="#"
+              >Qui minim labore adipisicing minim sint cillum sint consectetur
+              cupidatat.</a
+            >
+          </li>
+          <li class="mb-3">
+            <a href="#"
+              >Qui minim labore adipisicing minim sint cillum sint consectetur
+              cupidatat.</a
+            >
+          </li>
+          <li class="mb-3">
+            <a href="#"
+              >Qui minim labore adipisicing minim sint cillum sint consectetur
+              cupidatat.</a
+            >
+          </li>
+        </ol>
+      </div>
+
+      <div>
+        <div class="text-center mb-2">
+          <img class="" src="https://placehold.co/400x200" alt="project img" />
+        </div>
+        <p class="text-justify">
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse
+          consequatur iste molestiae blanditiis eligendi consectetur ullam.
+          Excepturi quasi sed est animi laudantium necessitatibus, tempore
+          delectus nulla aspernatur quod nesciunt fugiat.
+        </p>
+      </div>
+    </div>
+  </section>
+
+  <section>
+    <BackgroundImageDiv
+      src="https://placehold.co/600x400"
+      width={600}
+      height={400}
+    >
+      <h2 class="text-center">Who am I?</h2>
+
+      <p class="w-70 mx-auto text-justify">
+        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 Lorem est aliquip amet voluptate voluptate dolor
+        minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure
+        elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor
+        Lorem duis laboris cupidatat officia voluptate. Culpa proident
+        adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod.
+        Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim.
+        Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa
+        et culpa duis.
+      </p>
+
+      <div class="text-center fs-4 mb-0">
+        <a href="">
+          <Button>View full curriculum</Button>
+        </a>
+      </div>
+    </BackgroundImageDiv>
+  </section>
+
+  <section>
+    <h2>Contact</h2>
+
+    <div class="grid grid-cols-2">
+      <div>
+        <div class="text-center">
+          <img
+            class="respect-width"
+            src="https://placehold.co/500x300"
+            alt="project img"
+          />
+        </div>
+        <p class="text-justify">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
+          reprehenderit, porro dolorem cumque suscipit accusantium officiis eius
+          exercitationem harum itaque perferendis praesentium asperiores vitae
+          pariatur ad culpa mollitia necessitatibus hic!
+        </p>
+      </div>
+
+      <div class="vstack justify-content-center">
+        <ul class="list-unstyle fs-5 ml-5">
+          <li class="mb-3">
+            <a href="" class="hstack gap-2"
+              ><img src="https://placehold.co/60" alt="" /><span>Github</span
+              ></a
+            >
+          </li>
+          <li class="mb-3">
+            <a href="" class="hstack gap-2"
+              ><img src="https://placehold.co/60" alt="" /><span>Linkedin</span
+              ></a
+            >
+          </li>
+          <li class="mb-3">
+            <a href="" class="hstack gap-2"
+              ><img src="https://placehold.co/60" alt="" /><span>Email</span></a
+            >
+          </li>
+        </ul>
+      </div>
+    </div>
+  </section>
+
+  <style>
+    #portrait {
+      border-radius: 50%;
+      border: 5px solid var(--prj-text);
+    }
+
+    section {
+      /* outline: 1px solid var(--prj-accent-bg); */
+    }
+  </style>
 </Layout>
-
-<style>
-  #portrait {
-    border-radius: 50%;
-    border: 5px solid var(--prj-text);
-  }
-
-  h1 {
-    font-size: 3rem;
-  }
-
-  p {
-    margin-top: var(--prj-spacing-3);
-  }
-</style>