diff --git a/.svelte-kit/generated/server/internal.js b/.svelte-kit/generated/server/internal.js
index 752cd3d4..6971a55b 100644
--- a/.svelte-kit/generated/server/internal.js
+++ b/.svelte-kit/generated/server/internal.js
@@ -21,7 +21,7 @@ export const options = {
 		app: ({ head, body, assets, nonce, env }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<link rel=\"icon\" href=\"" + assets + "/favicon.png\" />\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n\t\t" + head + "\n\t</head>\n\t<body data-sveltekit-preload-data=\"hover\" class=\"bg-cover\" style=\"background-image: url('https://i.imgur.com/JOEUn40.png')\">\n\t\t<div>" + body + "</div>\n\t</body>\n</html>\n",
 		error: ({ status, message }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>" + message + "</title>\n\n\t\t<style>\n\t\t\tbody {\n\t\t\t\t--bg: white;\n\t\t\t\t--fg: #222;\n\t\t\t\t--divider: #ccc;\n\t\t\t\tbackground: var(--bg);\n\t\t\t\tcolor: var(--fg);\n\t\t\t\tfont-family:\n\t\t\t\t\tsystem-ui,\n\t\t\t\t\t-apple-system,\n\t\t\t\t\tBlinkMacSystemFont,\n\t\t\t\t\t'Segoe UI',\n\t\t\t\t\tRoboto,\n\t\t\t\t\tOxygen,\n\t\t\t\t\tUbuntu,\n\t\t\t\t\tCantarell,\n\t\t\t\t\t'Open Sans',\n\t\t\t\t\t'Helvetica Neue',\n\t\t\t\t\tsans-serif;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\theight: 100vh;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tmax-width: 32rem;\n\t\t\t\tmargin: 0 1rem;\n\t\t\t}\n\n\t\t\t.status {\n\t\t\t\tfont-weight: 200;\n\t\t\t\tfont-size: 3rem;\n\t\t\t\tline-height: 1;\n\t\t\t\tposition: relative;\n\t\t\t\ttop: -0.05rem;\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tborder-left: 1px solid var(--divider);\n\t\t\t\tpadding: 0 0 0 1rem;\n\t\t\t\tmargin: 0 0 0 1rem;\n\t\t\t\tmin-height: 2.5rem;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.message h1 {\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t@media (prefers-color-scheme: dark) {\n\t\t\t\tbody {\n\t\t\t\t\t--bg: #222;\n\t\t\t\t\t--fg: #ddd;\n\t\t\t\t\t--divider: #666;\n\t\t\t\t}\n\t\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div class=\"error\">\n\t\t\t<span class=\"status\">" + status + "</span>\n\t\t\t<div class=\"message\">\n\t\t\t\t<h1>" + message + "</h1>\n\t\t\t</div>\n\t\t</div>\n\t</body>\n</html>\n"
 	},
-	version_hash: "1urwbmj"
+	version_hash: "12pkw8k"
 };
 
 export async function get_hooks() {
diff --git a/src/lib/components/projects.svelte b/src/lib/components/projects.svelte
index ffe9fd1f..7caab466 100644
--- a/src/lib/components/projects.svelte
+++ b/src/lib/components/projects.svelte
@@ -3,39 +3,40 @@
     import NexoCard from "./nexo_card.svelte";
     import SbauCard from "./sbau_card.svelte";
     import StrayvoidCard from "./strayvoid_card.svelte";
-    import LifeMapCard from "./lifemap_card.svelte"
+    import LifeMapCard from "./lifemap_card.svelte";
 </script>
 
-
-<div class="min-h-[calc(100vh-80px)] flex flex-col items-center py-8 pb-[calc(80px+2rem)]"> <!-- Account for dock height -->
+<div class="min-h-screen flex flex-col items-center justify-center py-8 pb-[80px] md:pb-8 w-full">
     <BlurFade delay={0.10}>
         <h1 class="text-4xl mb-8 md:mb-12 px-4 text-center">Projects I'm working on:</h1>
     </BlurFade>
 
     <BlurFade delay={0.20}>
-        <div class="siatka grid gap-8 w-full px-4 flex-grow"
-             style="scroll-padding-bottom: 80px">
-            <NexoCard />
-            <SbauCard />
-            <StrayvoidCard />
-            <LifeMapCard />
-            <div class="h-12"></div>
+        <div class="w-full flex justify-center items-center px-4">
+            <div class="siatka grid gap-8 w-full max-w-[800px]">
+                <NexoCard />
+                <SbauCard />
+                <StrayvoidCard />
+                <LifeMapCard />
+            </div>
         </div>
     </BlurFade>
 </div>
 
-
 <style>
     .siatka {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-        max-width: 1200px;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 2rem;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
     }
-    
-    @media screen and (max-width: 640px) {
+
+    @media screen and (max-width: 768px) {
         .siatka {
             grid-template-columns: 1fr;
-            padding: 0;
-            padding-bottom: env(safe-area-inset-bottom);
+            width: 100%;
         }
     }
-</style>
\ No newline at end of file
+</style>
