diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index c04ab5d..7a5a65c 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -34,26 +34,27 @@ export default function Home() {
             here (github)
           </a>
         </Typewriter>
-        <div class="pt-[10%] text-center">
-          Some of my recent projects:
-          <div class="flex flex-col items-center justify-center gap-4 2xl:flex-row">
-            <div class="border-surface0 flex flex-col gap-2 rounded-md border-2 p-4 text-center">
-              My mobile game:
+        <div class="pt-8 text-center">
+          <div class="pb-4">Some of my recent projects:</div>
+          <div class="flex flex-col items-center gap-6 2xl:flex-row 2xl:items-start 2xl:justify-center">
+            {/* Life and Lineage */}
+            <div class="border-surface0 flex w-full max-w-2xl flex-col gap-2 rounded-md border-2 p-4 text-center">
+              <div>My mobile game:</div>
               <a
                 class="text-blue hover-underline-animation"
                 href="https://apps.apple.com/us/app/life-and-lineage/id6737252442"
               >
-                Life and Lineage{" "}
+                Life and Lineage
               </a>
-              <div class="flex flex-col items-center justify-center gap-2 xl:flex-row">
-                <div class="aspect-auto w-36 overflow-hidden rounded-lg md:w-52 xl:w-64">
+              <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+                <div class="aspect-auto w-full overflow-hidden rounded-lg">
                   <img
                     src="/lineage-home.png"
-                    alt="Work sample 1"
+                    alt="Life and Lineage Home"
                     class="h-full w-full object-cover"
                   />
                 </div>
-                <div class="aspect-auto w-36 overflow-hidden rounded-lg md:w-52 xl:w-80">
+                <div class="aspect-auto w-full overflow-hidden rounded-lg">
                   <video
                     src="/lineage-preview.mp4"
                     class="h-full w-full object-cover"
@@ -63,52 +64,56 @@ export default function Home() {
                     playsinline
                   />
                 </div>
-                <div class="aspect-auto w-36 overflow-hidden rounded-lg md:w-52 xl:w-64">
+                <div class="aspect-auto w-full overflow-hidden rounded-lg">
                   <img
                     src="/lineage-shops.png"
-                    alt="Work sample 2"
+                    alt="Life and Lineage Shops"
                     class="h-full w-full object-cover"
                   />
                 </div>
               </div>
             </div>
-            <div class="border-surface0 flex flex-col gap-2 rounded-md border-2 p-4 text-center">
-              My LÖVE UI library{" "}
+
+            {/* FlexLöve */}
+            <div class="border-surface0 flex w-full max-w-md flex-col gap-2 rounded-md border-2 p-4 text-center">
+              <div>My LÖVE UI library</div>
               <a
                 href="https://github.com/mikefreno/flexlove"
                 class="text-blue hover-underline-animation"
               >
                 FlexLöve
               </a>
-              <div class="aspect-auto w-48 overflow-hidden rounded-lg md:w-64 xl:w-80">
-                <video
-                  src="/flexlove-scrollable.mp4"
-                  class="h-full w-full object-cover"
-                  autoplay
-                  loop
-                  muted
-                  playsinline
-                />
-              </div>
-              <div class="aspect-auto w-48 overflow-hidden rounded-lg md:w-64 xl:w-80">
-                <video
-                  src="/flexlove-input.mp4"
-                  class="h-full w-full object-cover"
-                  autoplay
-                  loop
-                  muted
-                  playsinline
-                />
-              </div>
-              <div class="aspect-auto w-48 overflow-hidden rounded-lg md:w-64 xl:w-80">
-                <video
-                  src="/flexlove-slider.mp4"
-                  class="h-full w-full object-cover"
-                  autoplay
-                  loop
-                  muted
-                  playsinline
-                />
+              <div class="flex flex-col gap-4">
+                <div class="aspect-auto w-full overflow-hidden rounded-lg">
+                  <video
+                    src="/flexlove-scrollable.mp4"
+                    class="h-full w-full object-cover"
+                    autoplay
+                    loop
+                    muted
+                    playsinline
+                  />
+                </div>
+                <div class="aspect-auto w-full overflow-hidden rounded-lg">
+                  <video
+                    src="/flexlove-input.mp4"
+                    class="h-full w-full object-cover"
+                    autoplay
+                    loop
+                    muted
+                    playsinline
+                  />
+                </div>
+                <div class="aspect-auto w-full overflow-hidden rounded-lg">
+                  <video
+                    src="/flexlove-slider.mp4"
+                    class="h-full w-full object-cover"
+                    autoplay
+                    loop
+                    muted
+                    playsinline
+                  />
+                </div>
               </div>
             </div>
           </div>