diff --git a/src/components/About.tsx b/src/components/About.tsx
index c84a90d..24db50e 100644
--- a/src/components/About.tsx
+++ b/src/components/About.tsx
@@ -2,14 +2,16 @@ export default function About() {
   return (
     <section
       id="aboutme"
-      className="relative py-8 px-6 md:px-12 max-w-5xl mx-auto border-t border-slate-900/50 scroll-mt-20"
+      className="relative py-6 px-4 md:px-6 max-w-5xl mx-auto border-t border-slate-900/50 scroll-mt-15"
     >
       {/* Titel */}
-      <div className="flex items-center gap-4 mb-6">
+      <div className="mb-6 space-y-1">
+        <p className="text-xs font-mono text-blue-500 tracking-wider uppercase">
+          // 01. Introduction
+        </p>
         <h2 className="text-3xl font-bold text-white tracking-tight">
           About me<span className="text-blue-500">.</span>
         </h2>
-        <div className="h-px bg-slate-800 grow max-w-md" />
       </div>
 
       <div className="grid grid-cols-1 md:grid-cols-12 gap-12 items-start">
@@ -52,49 +54,61 @@ export default function About() {
 
         {/* Right column */}
         <div className="md:col-span-5">
-          <div className="relative group p-6 rounded-2xl border border-slate-800 bg-slate-900/50 backdrop-blur-sm space-y-6 hover:border-slate-700/80 transition-colors duration-300">
-            <div className="absolute top-0 right-0 w-24 h-24 bg-blue-500/5 rounded-full blur-2xl pointer-events-none group-hover:bg-blue-500/10 transition-colors duration-300" />
+          <div
+            className="group relative p-6 rounded-2xl border border-slate-800/80 bg-slate-900/40 backdrop-blur-sm 
+                       hover:border-blue-500/30 hover:bg-slate-900/80 hover:shadow-xl hover:shadow-blue-500/5 
+                       transition-all duration-300 flex flex-col justify-between overflow-hidden space-y-6"
+          >
+            <div className="absolute -top-12 -right-12 w-24 h-24 bg-blue-500/10 rounded-full blur-xl group-hover:bg-blue-500/20 transition-all duration-500 pointer-events-none" />
 
-            <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
-              <span className="text-blue-500 font-mono text-sm">//</span> Quick
-              Facts
-            </h3>
+            <div>
+              {/* Header Titel */}
+              <div className="flex items-center justify-between mb-6">
+                <h3 className="text-lg font-semibold text-white flex items-center gap-2">
+                  <span className="text-blue-500 font-mono text-sm">//</span>{" "}
+                  Quick Facts
+                </h3>
+              </div>
 
-            <ul className="space-y-4 text-sm">
-              <li className="flex items-center gap-3">
-                <span className="text-blue-500 font-mono">▸</span>
-                <span className="text-slate-400 font-medium">Location:</span>
-                <span className="text-slate-200 ml-auto">Germany</span>
-              </li>
-              <li className="flex items-center gap-3">
-                <span className="text-blue-500 font-mono">▸</span>
-                <span className="text-slate-400 font-medium">Languages:</span>
-                <span className="text-slate-200 ml-auto">German, English</span>
-              </li>
-              <li className="flex items-center gap-3">
-                <span className="text-blue-500 font-mono">▸</span>
-                <span className="text-slate-400 font-medium">Core Stack:</span>
-                <span className="text-slate-200 ml-auto text-right">
-                  Angular (TS), React (Next.js)
-                </span>
-              </li>
-              <li className="flex items-center gap-3">
-                <span className="text-blue-500 font-mono">▸</span>
-                <span className="text-slate-400 font-medium">Core Focus:</span>
-                <span className="text-slate-200 ml-auto">
-                  Clean Code & Architecture
-                </span>
-              </li>
-              <li className="flex items-center gap-3">
-                <span className="text-blue-500 font-mono">▸</span>
-                <span className="text-slate-400 font-medium">Status:</span>
-                <span className="text-emerald-400 font-medium ml-auto flex items-center gap-1.5">
-                  <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
-                  Available for projects
-                </span>
-              </li>
-            </ul>
+              {/* List Container */}
+              <ul className="space-y-4 text-sm">
+                <li className="flex items-center gap-3">
+                  <span className="text-blue-500 font-mono">▸</span>
+                  <span className="text-slate-400 font-medium">Languages:</span>
+                  <span className="text-slate-200 ml-auto text-right font-mono text-xs">
+                    German, English
+                  </span>
+                </li>
+                <li className="flex items-center gap-3">
+                  <span className="text-blue-500 font-mono">▸</span>
+                  <span className="text-slate-400 font-medium">
+                    Core Stack:
+                  </span>
+                  <span className="text-slate-200 ml-auto text-right font-mono text-xs">
+                    Angular&nbsp;(TS), React&nbsp;(Next.js)
+                  </span>
+                </li>
+                <li className="flex items-center gap-3">
+                  <span className="text-blue-500 font-mono">▸</span>
+                  <span className="text-slate-400 font-medium">
+                    Core Focus:
+                  </span>
+                  <span className="text-slate-200 ml-auto text-right font-mono text-xs">
+                    Clean&nbsp;Code & Architecture
+                  </span>
+                </li>
+                <li className="flex items-center gap-3">
+                  <span className="text-blue-500 font-mono">▸</span>
+                  <span className="text-slate-400 font-medium">Status:</span>
+                  <span className="text-emerald-400 ml-auto text-right flex items-center gap-1.5 font-mono text-xs">
+                    <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
+                    Available for projects
+                  </span>
+                </li>
+              </ul>
+            </div>
 
+            {/* Footer Quote */}
             <div className="pt-4 border-t border-slate-800/80 text-xs text-slate-500 font-mono text-center">
               `Keep it simple, keep it clean.`
             </div>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index b920511..2ee3359 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -14,8 +14,8 @@ export default function Header() {
   ];
 
   return (
-    <header className="fixed top-0 left-0 w-full bg-slate-900/90 backdrop-blur-md border-b border-slate-800 z-50 px-6 py-4">
-      <div className="max-w-5xl mx-auto flex justify-between items-center">
+    <header className="fixed top-0 left-0 w-full bg-slate-900/90 backdrop-blur-md border-b border-slate-800 z-50 py-4">
+      <div className="max-w-5xl mx-auto flex justify-between items-center px-4 md:px-6">
         <Link
           href="/"
           className="text-xl font-bold text-white hover:text-blue-400 transition-colors tracking-wider z-50"
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 2c1c424..2a907c4 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -2,14 +2,10 @@ import Link from "next/link";
 
 export default function Hero() {
   return (
-    <section className="relative flex items-start pt-32 py-8 px-6 md:px-12 max-w-5xl mx-auto overflow-hidden">
-      {/* Blue background glow */}
-      <div className="absolute top-2/4 left-1/6 -translate-x-1/2 -translate-y-1/2 w-72 h-72 bg-blue-500/10 rounded-full blur-3xl pointer-events-none" />
-      <div className="absolute bottom-2/4 right-2/4 translate-x-1/2 translate-y-1/2 w-96 h-96 bg-blue-600/5 rounded-full blur-3xl pointer-events-none" />
-
+    <section className="relative pt-20 py-6 px-4 md:px-6 md:pt-24 max-w-5xl mx-auto border-t border-slate-900/50">
       <div className="grid grid-cols-1 md:grid-cols-12 gap-12 items-center z-10 w-full">
         {/* Left column */}
-        <div className="md:col-span-7 space-y-6 text-left">
+        <div className="md:col-span-7 lg:space-y-5 md:space-y-4 space-y-3 text-left">
           <span className="text-blue-500 font-mono text-sm tracking-wider uppercase">
             // Hi, my name is
           </span>
@@ -18,8 +14,9 @@ export default function Hero() {
             André Kempf<span className="text-blue-500">.</span>
           </h1>
 
-          <h2 className="text-3xl sm:text-5xl font-semibold text-slate-400">
-            Full-Stack Developer
+          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-semibold text-slate-400 tracking-tight">
+            Full-Stack{" "}
+            <span className="text-blue-400/80 font-medium">Developer</span>
           </h2>
 
           <p className="text-base sm:text-lg text-slate-200 leading-relaxed max-w-xl">
@@ -35,10 +32,10 @@ export default function Hero() {
           </p>
 
           {/* Buttons */}
-          <div className="flex flex-wrap gap-4 pt-4">
+          <div className="flex flex-wrap gap-4">
             <Link
               href="#contactme"
-              className="px-6 py-3 border border-blue-700/30 hover:bg-blue-500 active:bg-blue-700 text-white font-semibold rounded-lg shadow-lg shadow-blue-500/40 transition-all hover:-translate-y-0.5 duration-200"
+              className="px-6 py-3 bg-slate-900 text-blue-500 font-semibold rounded-lg border border-blue-500/40 hover:border-blue-400 hover:bg-blue-600 hover:text-white shadow-md shadow-blue-950/50 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-blue-500/20"
             >
               Contact me
             </Link>
@@ -53,12 +50,12 @@ export default function Hero() {
 
         {/* Right column */}
         <div className="md:col-span-5 flex justify-center">
-          <div className="relative group w-64 md:w-74 aspect-5/6">
+          <div className="relative group h-auto w-64 aspect-5/6">
             <div className="relative w-full h-full rounded-2xl border-5 border-slate-800 bg-slate-900 overflow-hidden flex items-center justify-center group-hover:border-blue-500/50 transition-colors duration-300">
               <img
                 src="/me.png"
                 alt="André Kempf"
-                className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+                className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-102"
               />
             </div>
           </div>
diff --git a/src/components/Skills.tsx b/src/components/Skills.tsx
index a87ed9f..9033005 100644
--- a/src/components/Skills.tsx
+++ b/src/components/Skills.tsx
@@ -2,11 +2,13 @@ export default function Skills() {
   return (
     <section
       id="myskills"
-      className="relative py-6 px-6 md:px-12 max-w-5xl mx-auto border-t border-slate-900/50 scroll-mt-20"
+      className="relative py-6 px-4 md:px-6 max-w-5xl mx-auto border-t border-slate-900/50 scroll-mt-15"
     >
       {/* Titel */}
-      <div className="flex items-center justify-end gap-4 mb-6">
-        <div className="h-px bg-slate-800 grow max-w-md" />
+      <div className="mb-6 space-y-1 text-right flex flex-col items-end">
+        <p className="text-xs font-mono text-blue-500 tracking-wider uppercase">
+          // 02. Technical Stack
+        </p>
         <h2 className="text-3xl font-bold text-white tracking-tight">
           My Skills<span className="text-blue-500">.</span>
         </h2>