diff --git a/src/pages/products.astro b/src/pages/products.astro
index 77d6f2d..0dacb28 100644
--- a/src/pages/products.astro
+++ b/src/pages/products.astro
@@ -6,16 +6,16 @@ import Footer from "../views/Footer.astro";
 <Navigation />
 <div class="h-screen w-screen flex flex-col">
   <div class="flex-1 w-screen bg-zinc-900 flex justify-center items-center py-8 px-12">
-    <div class="grid grid-cols-2 grid-rows-3 w-1/2 h-full gap-7">
+    <div class="grid grid-cols-1 2xl:grid-cols-2 grid-rows-3 xl:w-1/2 h-full gap-7">
       <div
-        class="col-span-1 row-span-2 bg-yellow-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
+        class="col-span-1 2xl:row-span-2 bg-yellow-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
       >
         <a target="_blank" class="group" href="https://github.com/ZktSn0w/ColrJS">
           <p class="text-2xl underline font-bold font-mono group-hover:text-emerald-500 text-emerald-800 transition">
             Web-Entwicklung
           </p>
         </a>
-        <div class="flex flex-col gap-4">
+        <div class="flex flex-col gap-4 max-xl:hidden">
           <p class="font-mono text-lg break-words">
             Als Webentwickler nutze ich moderne Frameworks, um erstklassige Websites mit einem herausragenden
             Nutzererlebnis zu gestalten. Meine Leidenschaft gilt der Schaffung ansprechender Online-Präsenzen.
@@ -24,12 +24,11 @@ import Footer from "../views/Footer.astro";
             Gerne unterstütze ich dich dabei, deine Online-Präsenz zu entwickeln.
           </p>
         </div>
-
-        <p class="font-mono font-bold text-zinc-700">
-          Colaborated with: <span class="text-emerald-700 underline"
-            ><a target="_blank" href="https://iamsebastian.dev/">IamSebastianDev</a></span
-          >
+        <p class="xl:hidden font-mono break-words">
+          Ich bin Webentwickler und erstelle großartige Websites mit modernen Frameworks, um ein beeindruckendes
+          Nutzererlebnis zu bieten. Lass mich dir bei deiner Online-Präsenz helfen.
         </p>
+        <p></p>
       </div>
       <div
         class="col-span-1 row-span-1 bg-purple-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
@@ -41,7 +40,7 @@ import Footer from "../views/Footer.astro";
         <p class="ont-mono text-sm break-words">Weitere verwendete Technologien: TailwindCSS, SolidJS</p>
       </div>
       <div
-        class="col-span-1 row-start-2 col-start-2 bg-orange-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
+        class="col-span-1 2xl:row-start-2 2xl:col-start-2 bg-orange-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
       >
         <div>
           <p class="font-mono font-bold text-2xl">Server-Deployment</p>
@@ -53,7 +52,7 @@ import Footer from "../views/Footer.astro";
         <p></p>
       </div>
       <div
-        class="col-span-2 row-start-3 bg-red-500 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 grid grid-rows-3 grid-cols-1"
+        class="2xl:col-span-2 2xl:row-start-3 bg-red-500 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 grid grid-rows-3 grid-cols-1"
       >
         <div>
           <p class="font-mono font-bold text-2xl">WICHTIG!</p>
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index 625ebd7..d70bb55 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -6,9 +6,9 @@ import Footer from "../views/Footer.astro";
 <Navigation />
 <div class="h-screen w-screen flex flex-col">
   <div class="flex-1 w-screen bg-zinc-900 flex justify-center items-center py-8 px-12">
-    <div class="grid grid-cols-2 grid-rows-3 w-1/2 h-full gap-7">
+    <div class="grid grid-cols-1 2xl:grid-cols-2 grid-rows-3 xl:w-1/2 h-full gap-7">
       <div
-        class="col-span-1 row-span-2 bg-purple-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
+        class="col-span-1 2xl:row-span-2 bg-purple-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
       >
         <a target="_blank" class="group" href="https://github.com/ZktSn0w/ColrJS">
           <p class="text-2xl underline font-bold font-mono group-hover:text-emerald-500 text-emerald-800 transition">
@@ -43,7 +43,7 @@ import Footer from "../views/Footer.astro";
         <p class="ont-mono text-sm break-words">Weitere verwendete Technologien: TailwindCSS, SolidJS</p>
       </div>
       <div
-        class="col-span-1 row-start-2 col-start-2 bg-yellow-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
+        class="col-span-1 2xl:row-start-2 2xl:col-start-2 bg-yellow-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
       >
         <div>
           <p class="font-mono font-bold text-2xl">SolidJS Component Library</p>
@@ -56,7 +56,7 @@ import Footer from "../views/Footer.astro";
         <p></p>
       </div>
       <div
-        class="col-span-2 row-start-3 bg-emerald-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 grid grid-rows-3 grid-cols-1"
+        class="c2xl:col-span-2 2xl:row-start-3 bg-emerald-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 grid grid-rows-3 grid-cols-1"
       >
         <div>
           <p class="font-mono font-bold text-2xl">Weitere Projekte</p>