diff --git a/app/components/About.tsx b/app/components/About.tsx
index 0db4a66..d847c07 100644
--- a/app/components/About.tsx
+++ b/app/components/About.tsx
@@ -175,7 +175,7 @@ const About = () => {
                               : itemIdx % 4 === 1
                                 ? "bg-liquid-lavender/10 border-liquid-lavender/30 hover:bg-liquid-lavender/20 hover:border-liquid-lavender/50"
                                 : itemIdx % 4 === 2
-                                  ? "bg-liquid-rose/10 border-liquid-rose/30 hover:bg-liquid-rose/20 hover:border-liquid-rose/50"
+                                  ? "bg-stone-100 border-stone-200 hover:bg-stone-200 hover:border-stone-300 shadow-sm"
                                   : "bg-liquid-sky/10 border-liquid-sky/30 hover:bg-liquid-sky/20 hover:border-liquid-sky/50"
                           }`}
                         >
diff --git a/app/components/Contact.tsx b/app/components/Contact.tsx
index cf853b5..4be310e 100644
--- a/app/components/Contact.tsx
+++ b/app/components/Contact.tsx
@@ -243,7 +243,7 @@ const Contact = () => {
                     htmlFor="name"
                     className="block text-sm font-medium text-stone-600 mb-2"
                   >
-                    Name <span className="text-liquid-rose">*</span>
+                    Name <span className="text-red-500">*</span>
                   </label>
                   <input
                     type="text"
@@ -278,7 +278,7 @@ const Contact = () => {
                     htmlFor="email"
                     className="block text-sm font-medium text-stone-600 mb-2"
                   >
-                    Email <span className="text-liquid-rose">*</span>
+                    Email <span className="text-red-500">*</span>
                   </label>
                   <input
                     type="email"
@@ -314,7 +314,7 @@ const Contact = () => {
                   htmlFor="subject"
                   className="block text-sm font-medium text-stone-600 mb-2"
                 >
-                  Subject <span className="text-liquid-rose">*</span>
+                  Subject <span className="text-red-500">*</span>
                 </label>
                 <input
                   type="text"
@@ -351,7 +351,7 @@ const Contact = () => {
                   htmlFor="message"
                   className="block text-sm font-medium text-stone-600 mb-2"
                 >
-                  Message <span className="text-liquid-rose">*</span>
+                  Message <span className="text-red-500">*</span>
                 </label>
                 <textarea
                   id="message"
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
index 953feaa..3c66a1c 100644
--- a/app/components/Footer.tsx
+++ b/app/components/Footer.tsx
@@ -39,15 +39,15 @@ const Footer = () => {
             <motion.div
               whileHover={{ rotate: 360, scale: 1.1 }}
               transition={{ duration: 0.5 }}
-              className="w-12 h-12 bg-gradient-to-br from-liquid-mint to-liquid-lavender rounded-xl flex items-center justify-center shadow-md"
+              className="w-12 h-12 bg-stone-100 rounded-xl flex items-center justify-center border border-stone-200 shadow-sm"
             >
               <Code className="w-6 h-6 text-stone-800" />
             </motion.div>
             <div>
-              <Link href="/" className="text-xl font-bold font-mono text-stone-800 hover:text-liquid-blue transition-colors">
-                dk<span className="text-liquid-rose">0</span>
+              <Link href="/" className="text-xl font-black font-sans text-stone-900 tracking-tighter transition-colors flex items-center">
+                dk<span className="text-red-500">0</span>
               </Link>
-              <p className="text-xs text-stone-500">Software Engineer</p>
+              <p className="text-[10px] font-bold text-stone-400 uppercase tracking-widest">Software Engineer</p>
             </div>
           </motion.div>
 
@@ -67,7 +67,7 @@ const Footer = () => {
                 rel="noopener noreferrer"
                 whileHover={{ scale: 1.15, y: -3 }}
                 whileTap={{ scale: 0.95 }}
-                className="p-3 bg-stone-50 hover:bg-white rounded-xl text-stone-600 hover:text-stone-900 transition-all duration-200 border border-stone-200 hover:border-stone-300 shadow-sm"
+                className="p-3 bg-white hover:bg-stone-50 rounded-xl text-stone-600 hover:text-stone-900 transition-all duration-200 border border-stone-200 hover:border-stone-300 shadow-sm"
                 aria-label={social.label}
               >
                 <social.icon size={18} />
@@ -83,14 +83,14 @@ const Footer = () => {
             transition={{ duration: 0.4, delay: 0.1 }}
             className="flex items-center space-x-2 text-stone-400 text-sm"
           >
-            <span>© {currentYear}</span>
+            <span className="font-medium">© {currentYear}</span>
             <motion.div
               animate={{ scale: [1, 1.2, 1] }}
               transition={{ duration: 1.5, repeat: Infinity }}
             >
-              <Heart size={14} className="text-liquid-rose fill-liquid-rose" />
+              <Heart size={14} className="text-red-500 fill-red-500" />
             </motion.div>
-            <span>Made in Germany</span>
+            <span className="font-medium text-stone-500">Made in Germany</span>
           </motion.div>
         </div>
 
diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx
index 1f71d64..cbb16fe 100644
--- a/app/components/Hero.tsx
+++ b/app/components/Hero.tsx
@@ -12,7 +12,7 @@ const Hero = () => {
   ];
 
   return (
-    <section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-32 pb-16 bg-gradient-to-br from-liquid-mint/10 via-liquid-lavender/10 to-liquid-rose/10">
+    <section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-32 pb-16 bg-gradient-to-br from-liquid-peach/10 via-amber-50/10 to-stone-100/10">
       <div className="relative z-10 text-center px-4 max-w-5xl mx-auto">
         {/* Profile Image with Organic Blob Mask */}
         <motion.div
@@ -24,7 +24,7 @@ const Hero = () => {
           <div className="relative w-64 h-64 md:w-80 md:h-80 flex items-center justify-center">
             {/* Large Rotating Liquid Blobs behind image - Very slow and smooth */}
             <motion.div
-              className="absolute w-[150%] h-[150%] bg-gradient-to-tr from-liquid-mint/40 via-liquid-blue/30 to-liquid-lavender/40 blur-3xl -z-10"
+              className="absolute w-[150%] h-[150%] bg-gradient-to-tr from-stone-200/40 via-amber-100/30 to-peach-100/40 blur-3xl -z-10"
               animate={{
                 borderRadius: [
                   "60% 40% 30% 70%/60% 30% 70% 40%",
@@ -42,7 +42,7 @@ const Hero = () => {
               }}
             />
             <motion.div
-              className="absolute w-[130%] h-[130%] bg-gradient-to-bl from-liquid-rose/35 via-purple-200/25 to-liquid-mint/35 blur-2xl -z-10"
+              className="absolute w-[130%] h-[130%] bg-gradient-to-bl from-red-100/35 via-orange-100/25 to-stone-200/35 blur-2xl -z-10"
               animate={{
                 borderRadius: [
                   "40% 60% 70% 30%/40% 50% 60% 50%",
@@ -137,7 +137,7 @@ const Hero = () => {
           transition={{ duration: 0.6, delay: 0.2, ease: [0.25, 0.1, 0.25, 1] }}
           className="mb-8 flex flex-col items-center justify-center relative"
         >
-          <h1 className="text-5xl md:text-8xl font-bold tracking-tighter text-stone-900 mb-2">
+          <h1 className="text-5xl md:text-8xl font-black tracking-tighter text-stone-900 mb-2">
             Dennis Konkol
           </h1>
           <h2 className="text-2xl md:text-4xl font-light tracking-wide text-stone-600 mt-2">
@@ -153,15 +153,15 @@ const Hero = () => {
           className="text-lg md:text-xl text-stone-700 mb-12 max-w-2xl mx-auto leading-relaxed"
         >
           Student and passionate{" "}
-          <span className="text-stone-900 font-semibold decoration-liquid-mint decoration-2 underline underline-offset-4">
+          <span className="text-stone-900 font-semibold decoration-stone-300 decoration-2 underline underline-offset-4">
             self-hoster
           </span>{" "}
           building full-stack web apps and mobile solutions. I run my own{" "}
-          <span className="text-stone-900 font-semibold decoration-liquid-lavender decoration-2 underline underline-offset-4">
+          <span className="text-stone-900 font-semibold decoration-stone-300 decoration-2 underline underline-offset-4">
             infrastructure
           </span>{" "}
           and love exploring{" "}
-          <span className="text-stone-900 font-semibold decoration-liquid-rose decoration-2 underline underline-offset-4">
+          <span className="text-stone-900 font-semibold decoration-red-400 decoration-2 underline underline-offset-4">
             DevOps
           </span>
           .
diff --git a/app/components/Projects.tsx b/app/components/Projects.tsx
index bcb1df9..e327234 100644
--- a/app/components/Projects.tsx
+++ b/app/components/Projects.tsx
@@ -98,14 +98,15 @@ const Projects = () => {
             <motion.div
               key={project.id}
               variants={fadeInUp}
-              whileHover={{
-                y: -8,
-                transition: { duration: 0.4, ease: "easeOut" },
-              }}
               className="group relative flex flex-col bg-white/40 backdrop-blur-xl backdrop-saturate-150 rounded-2xl overflow-hidden shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_20px_40px_rgba(0,0,0,0.06)] transition-all duration-500 ease-out border border-white/50 ring-1 ring-white/30"
             >
+              <Link
+                href={`/projects/${project.title.toLowerCase().replace(/\s+/g, "-")}`}
+                className="absolute inset-0 z-0"
+              />
+              
               {/* Project Cover / Image Area */}
-              <div className="relative aspect-[16/10] overflow-hidden bg-stone-100">
+              <div className="relative aspect-[16/10] overflow-hidden bg-stone-100 pointer-events-none">
                 {project.imageUrl ? (
                   <>
                     <Image
@@ -141,41 +142,16 @@ const Projects = () => {
                 {/* Featured Badge */}
                 {project.featured && (
                   <div className="absolute top-3 left-3 z-20">
-                    <div className="px-3 py-1 bg-red-500 text-white text-[10px] font-black uppercase tracking-widest rounded-full shadow-lg border border-red-400/50">
+                    <div className="px-3 py-1.5 bg-white/90 backdrop-blur-md text-stone-800 text-[10px] font-bold uppercase tracking-widest rounded-full shadow-lg border border-white/50 flex items-center gap-1.5">
+                      <span className="w-1.5 h-1.5 bg-red-500 rounded-full animate-pulse" />
                       Featured
                     </div>
                   </div>
                 )}
-
-                {/* Overlay Links */}
-                <div className="absolute inset-0 bg-stone-900/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 ease-out flex items-center justify-center gap-4 backdrop-blur-[2px] z-10">
-                  {project.github && (
-                    <a
-                      href={project.github}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50"
-                      aria-label="GitHub"
-                    >
-                      <Github size={20} />
-                    </a>
-                  )}
-                  {project.live && (
-                    <a
-                      href={project.live}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50"
-                      aria-label="Live Demo"
-                    >
-                      <ExternalLink size={20} />
-                    </a>
-                  )}
-                </div>
               </div>
 
               {/* Content */}
-              <div className="flex flex-col flex-1 p-6">
+              <div className="flex flex-col flex-1 p-6 relative z-10 pointer-events-none">
                 <div className="flex justify-between items-start mb-3">
                   <h3 className="text-xl font-bold text-stone-900 group-hover:text-stone-700 transition-colors duration-300 tracking-tight">
                     {project.title}
@@ -194,7 +170,7 @@ const Projects = () => {
                     {project.tags.slice(0, 3).map((tag, tIdx) => (
                       <span
                         key={`${project.id}-${tag}-${tIdx}`}
-                        className="text-xs px-2.5 py-1 bg-white/50 border border-white/60 rounded-md text-stone-700 font-medium hover:bg-white/80 hover:border-white transition-all duration-300 ease-out shadow-sm"
+                        className="text-xs px-2.5 py-1 bg-white/50 border border-white/60 rounded-md text-stone-700 font-medium transition-all duration-300 ease-out shadow-sm"
                       >
                         {tag}
                       </span>
@@ -206,20 +182,46 @@ const Projects = () => {
                     )}
                   </div>
 
-                  <Link
-                    href={`/projects/${project.title.toLowerCase().replace(/\s+/g, "-")}`}
-                    className="inline-flex items-center text-sm font-bold text-stone-800 hover:gap-3 transition-all duration-300 ease-out group/link"
-                  >
+                  <div className="inline-flex items-center text-sm font-bold text-stone-800 group-hover:gap-3 transition-all duration-300 ease-out group/link">
                     Read more{" "}
                     <ArrowRight
                       size={16}
                       className="ml-1 transition-transform duration-300 ease-out group-hover/link:translate-x-1"
                     />
-                  </Link>
+                  </div>
                 </div>
               </div>
+
+              {/* External Overlay Links - positioned above the main Link */}
+              <div className="absolute inset-0 bg-stone-900/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 ease-out flex items-center justify-center gap-4 backdrop-blur-[2px] z-20 pointer-events-none group-hover:pointer-events-auto">
+                {project.github && (
+                  <a
+                    href={project.github}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    onClick={(e) => e.stopPropagation()}
+                    className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50"
+                    aria-label="GitHub"
+                  >
+                    <Github size={20} />
+                  </a>
+                )}
+                {project.live && (
+                  <a
+                    href={project.live}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    onClick={(e) => e.stopPropagation()}
+                    className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50"
+                    aria-label="Live Demo"
+                  >
+                    <ExternalLink size={20} />
+                  </a>
+                )}
+              </div>
             </motion.div>
           ))}
+          ))}
         </motion.div>
 
         <motion.div
diff --git a/app/projects/page.tsx b/app/projects/page.tsx
index fc38cb1..df77e16 100644
--- a/app/projects/page.tsx
+++ b/app/projects/page.tsx
@@ -148,11 +148,15 @@ const ProjectsPage = () => {
               initial={{ opacity: 0, y: 30 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6, delay: index * 0.1 }}
-              whileHover={{ y: -8 }}
-              className="group flex flex-col bg-white/40 backdrop-blur-xl rounded-2xl overflow-hidden border border-white/60 shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_20px_40px_rgba(0,0,0,0.06)] transition-all duration-500"
+              className="group relative flex flex-col bg-white/40 backdrop-blur-xl rounded-2xl overflow-hidden border border-white/60 shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_20px_40px_rgba(0,0,0,0.06)] transition-all duration-500"
             >
+              <Link
+                href={`/projects/${project.title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`}
+                className="absolute inset-0 z-0"
+              />
+
               {/* Image / Fallback / Cover Area */}
-              <div className="relative aspect-[16/10] overflow-hidden bg-stone-100">
+              <div className="relative aspect-[16/10] overflow-hidden bg-stone-100 pointer-events-none">
                 {project.imageUrl ? (
                   <>
                     <img 
@@ -184,40 +188,15 @@ const ProjectsPage = () => {
 
                 {project.featured && (
                   <div className="absolute top-3 left-3 z-20">
-                    <div className="px-3 py-1 bg-red-500 text-white text-[10px] font-black uppercase tracking-widest rounded-full shadow-lg border border-red-400/50">
+                    <div className="px-3 py-1.5 bg-white/90 backdrop-blur-md text-stone-800 text-[10px] font-bold uppercase tracking-widest rounded-full shadow-lg border border-white/50 flex items-center gap-1.5">
+                      <span className="w-1.5 h-1.5 bg-red-500 rounded-full animate-pulse" />
                       Featured
                     </div>
                   </div>
                 )}
-
-                {/* Overlay Links */}
-                <div className="absolute inset-0 bg-stone-900/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 ease-out flex items-center justify-center gap-4 backdrop-blur-[2px] z-10">
-                  {project.github && (
-                    <a
-                      href={project.github}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50"
-                      aria-label="GitHub"
-                    >
-                      <Github size={20} />
-                    </a>
-                  )}
-                  {project.live && (
-                    <a
-                      href={project.live}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50"
-                      aria-label="Live Demo"
-                    >
-                      <ExternalLink size={20} />
-                    </a>
-                  )}
-                </div>
               </div>
 
-              <div className="p-6 flex flex-col flex-1">
+              <div className="p-6 flex flex-col flex-1 relative z-10 pointer-events-none">
                 <div className="flex items-center justify-between mb-3">
                   <h3 className="text-xl font-bold text-stone-900 group-hover:text-stone-600 transition-colors">
                     {project.title}
@@ -247,28 +226,53 @@ const ProjectsPage = () => {
                 </div>
 
                 <div className="mt-auto pt-4 border-t border-stone-100 flex items-center justify-between">
-                   <div className="flex gap-3">
+                   <div className="flex gap-3 pointer-events-auto">
                       {project.github && (
-                        <a href={project.github} target="_blank" rel="noopener noreferrer" className="text-stone-400 hover:text-stone-900 transition-colors">
+                        <a href={project.github} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()} className="text-stone-400 hover:text-stone-900 transition-colors">
                           <Github size={18} />
                         </a>
                       )}
                       {project.live && (
-                         <a href={project.live} target="_blank" rel="noopener noreferrer" className="text-stone-400 hover:text-stone-900 transition-colors">
+                         <a href={project.live} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()} className="text-stone-400 hover:text-stone-900 transition-colors">
                            <ExternalLink size={18} />
                          </a>
                       )}
                    </div>
 
-                  <Link
-                    href={`/projects/${project.title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`}
-                    className="inline-flex items-center space-x-1 text-sm font-bold text-stone-800 hover:gap-2 transition-all"
-                  >
+                  <div className="inline-flex items-center space-x-1 text-sm font-bold text-stone-800 hover:gap-2 transition-all">
                     <span>Read More</span>
                     <ArrowLeft size={16} className="rotate-180" />
-                  </Link>
+                  </div>
                 </div>
               </div>
+
+              {/* External Overlay Links for full width on hover if you want to keep that style */}
+              <div className="absolute inset-0 bg-stone-900/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 ease-out flex items-center justify-center gap-4 backdrop-blur-[2px] z-20 pointer-events-none group-hover:pointer-events-auto">
+                {project.github && (
+                  <a
+                    href={project.github}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    onClick={(e) => e.stopPropagation()}
+                    className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50"
+                    aria-label="GitHub"
+                  >
+                    <Github size={20} />
+                  </a>
+                )}
+                {project.live && (
+                  <a
+                    href={project.live}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    onClick={(e) => e.stopPropagation()}
+                    className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50"
+                    aria-label="Live Demo"
+                  >
+                    <ExternalLink size={20} />
+                  </a>
+                )}
+              </div>
             </motion.div>
           ))}
         </div>
diff --git a/components/BackgroundBlobs.tsx b/components/BackgroundBlobs.tsx
index 80b1a38..6bd8b41 100644
--- a/components/BackgroundBlobs.tsx
+++ b/components/BackgroundBlobs.tsx
@@ -84,7 +84,7 @@ const BackgroundBlobs = () => {
 
       {/* Rose blob - bottom left */}
       <motion.div
-        className="absolute bottom-[-5%] left-[15%] w-[45vw] h-[45vw] bg-liquid-rose/35 rounded-full blur-[100px] mix-blend-multiply"
+        className="absolute bottom-[-5%] left-[15%] w-[45vw] h-[45vw] bg-amber-100/35 rounded-full blur-[100px] mix-blend-multiply"
         style={{ x: x3, y: y3 }}
         animate={{
           scale: [1, 1.2, 1],