diff --git a/src/components/partials/Button.astro b/src/components/partials/Button.astro
new file mode 100644
index 0000000..8d92cb9
--- /dev/null
+++ b/src/components/partials/Button.astro
@@ -0,0 +1,4 @@
+---
+let link: string
+let action: ()=>{}
+---
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 1e3a42f..dbf1377 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -38,15 +38,15 @@ const projects: Project[] = [
             class="flex justify-center items-center w-3/5 border-4 border-emerald-500 aspect-square rounded-2xl overflow-hidden"
           >
             <img
-              class="aspect-square object-contain"
+              class="aspect-square object-contain w-full"
               src="/img/me.jpg"
               alt=""
             />
           </div>
           <p class="text-2xl">Das bin ich!</p>
         </div>
-        <div class="flex flex-col gap-1 items-center text-center">
-          <p>Hi, ich bin Dominik</p>
+        <div class="flex flex-col gap-1 max-md:items-center text-center md:text-left md:text-2xl w-full">
+          <p class="md:text-3xl md:underline">Hi, ich bin Dominik</p>
           <p>
             Ein <span class="text-emerald-300">Full-Stack</span> Web-Developer aus
             München
@@ -57,17 +57,17 @@ const projects: Project[] = [
           </p>
         </div>
       </div>
-      <img class="animate-bounce h-7" src="/img/arrowDown.svg" alt="" />
+      <img class="animate-bounce h-7 sm:hidden" src="/img/arrowDown.svg" alt="" />
     </div>
     <section
       class="py-5 w-screen h-[66vh] bg-zinc-50 text-zinc-900"
     >
       <div class="w-5/6 flex flex-col justify-around items-center h-full mx-auto gap-2">
         <p class="text-2xl underline">Meine Projekte</p>
-        <div class="max-sm:flex-1 border-2 sm:grid sm:grid-cols-2 sm:grid-rows-1 py-5 gap-6 flex flex-col rounded-2xl border-zinc-900 border-dashed w-5/6 overflow-hidden px-3">
+        <div class="max-sm:flex-1 border-2 sm:grid sm:grid-cols-2 sm:gap-4 sm:grid-rows-1 py-3 justify-around flex flex-col rounded-2xl border-zinc-900 border-dashed w-5/6 overflow-hidden px-3">
           {projects.slice(0, 4).map((project, i)=>{
             return (
-              <div class={`sm:flex-col sm:justify-center sm:items-center sm:h-auto h-1/6 flex justify-between sm:py-3 ${i % 2 === 0 ? 'flex-row-reverse bg-emerald-200' : 'flex-row bg-zinc-900 text-zinc-100'}  rounded-lg px-2 py-1 gap-5` }>
+              <div class={`sm:flex-col sm:justify-center sm:items-center sm:h-auto h-1/5 flex justify-between sm:py-3 ${i % 2 === 0 ? 'flex-row-reverse bg-emerald-200' : 'flex-row bg-zinc-900 text-zinc-100'}  rounded-lg px-2 py-2 gap-5` }>
                 <div class="max-sm:flex-1 min-w-[2.5rem] flex justify-center">
                 <img class={`w-10 ${i % 2 === 0 ? '' : 'invert'}`} src={project.icon} alt={`img of ${project.icon}`} /></div>
                 <div class="flex flex-col justify-center">
@@ -77,9 +77,9 @@ const projects: Project[] = [
               </div>
             )
           })}
-          <div class={`col-span-2 border-2 border-zinc-900 bg-emerald-500 px-2 py-1 rounded-lg flex` }>
-            <p class="m-auto">Mehr</p>
-          </div>
+          <a href="/projects" class={`col-span-2 text-center justify-center border-2 shadow-md shadow-zinc-500 border-none bg-emerald-200 px-2 py-1 rounded-lg flex` }>
+            Mehr
+          </a>
         </div>
       </div>
     </section>