diff --git a/app/components/About.tsx b/app/components/About.tsx
index 306b85e..0db4a66 100644
--- a/app/components/About.tsx
+++ b/app/components/About.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { useState, useEffect } from "react";
 import { motion, Variants } from "framer-motion";
 import { Globe, Server, Wrench, Shield, Gamepad2, Code, Activity, Lightbulb } from "lucide-react";
 
@@ -16,24 +15,18 @@ const staggerContainer: Variants = {
 };
 
 const fadeInUp: Variants = {
-  hidden: { opacity: 0, y: 30 },
+  hidden: { opacity: 0, y: 20 },
   visible: {
     opacity: 1,
     y: 0,
     transition: {
-      duration: 1,
+      duration: 0.5,
       ease: [0.25, 0.1, 0.25, 1],
     },
   },
 };
 
 const About = () => {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
   const techStack = [
     {
       category: "Frontend & Mobile",
@@ -64,8 +57,6 @@ const About = () => {
     { icon: Activity, text: "Jogging to clear my mind and stay active" },
   ];
 
-  if (!mounted) return null;
-
   return (
     <section
       id="about"
diff --git a/app/components/Contact.tsx b/app/components/Contact.tsx
index 4fce26a..cf853b5 100644
--- a/app/components/Contact.tsx
+++ b/app/components/Contact.tsx
@@ -155,10 +155,10 @@ const Contact = () => {
       <div className="max-w-7xl mx-auto">
         {/* Section Header */}
         <motion.div
-          initial={{ opacity: 0, y: 30 }}
+          initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true, margin: "-100px" }}
-          transition={{ duration: 1, ease: [0.25, 0.1, 0.25, 1] }}
+          viewport={{ once: true, margin: "-50px" }}
+          transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}
           className="text-center mb-16"
         >
           <h2 className="text-4xl md:text-5xl font-bold mb-6 text-stone-900">
@@ -173,10 +173,10 @@ const Contact = () => {
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
           {/* Contact Information */}
           <motion.div
-            initial={{ opacity: 0, x: -30 }}
+            initial={{ opacity: 0, x: -20 }}
             whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true, margin: "-100px" }}
-            transition={{ duration: 1, ease: [0.25, 0.1, 0.25, 1] }}
+            viewport={{ once: true, margin: "-50px" }}
+            transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}
             className="space-y-8"
           >
             <div>
@@ -196,12 +196,12 @@ const Contact = () => {
                 <motion.a
                   key={info.title}
                   href={info.href}
-                  initial={{ opacity: 0, x: -20 }}
+                  initial={{ opacity: 0, x: -10 }}
                   whileInView={{ opacity: 1, x: 0 }}
-                  viewport={{ once: true }}
+                  viewport={{ once: true, margin: "-50px" }}
                   transition={{
-                    duration: 0.8,
-                    delay: index * 0.15,
+                    duration: 0.5,
+                    delay: index * 0.1,
                     ease: [0.25, 0.1, 0.25, 1],
                   }}
                   whileHover={{
@@ -226,10 +226,10 @@ const Contact = () => {
 
           {/* Contact Form */}
           <motion.div
-            initial={{ opacity: 0, x: 30 }}
+            initial={{ opacity: 0, x: 20 }}
             whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true, margin: "-100px" }}
-            transition={{ duration: 1, ease: [0.25, 0.1, 0.25, 1] }}
+            viewport={{ once: true, margin: "-50px" }}
+            transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}
             className="glass-card p-8 rounded-3xl bg-white/50 border border-white/70"
           >
             <h3 className="text-2xl font-bold text-gray-800 mb-6">
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
index edf55b4..953feaa 100644
--- a/app/components/Footer.tsx
+++ b/app/components/Footer.tsx
@@ -30,10 +30,10 @@ const Footer = () => {
         <div className="flex flex-col md:flex-row justify-between items-center space-y-6 md:space-y-0">
           {/* Brand */}
           <motion.div
-            initial={{ opacity: 0, y: 20 }}
+            initial={{ opacity: 0, y: 10 }}
             whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.6 }}
+            viewport={{ once: true, margin: "-50px" }}
+            transition={{ duration: 0.4 }}
             className="flex items-center space-x-3"
           >
             <motion.div
@@ -53,10 +53,10 @@ const Footer = () => {
 
           {/* Social Links */}
           <motion.div
-            initial={{ opacity: 0, y: 20 }}
+            initial={{ opacity: 0, y: 10 }}
             whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.6, delay: 0.1 }}
+            viewport={{ once: true, margin: "-50px" }}
+            transition={{ duration: 0.4, delay: 0.05 }}
             className="flex space-x-3"
           >
             {socialLinks.map((social) => (
@@ -77,10 +77,10 @@ const Footer = () => {
 
           {/* Copyright */}
           <motion.div
-            initial={{ opacity: 0, y: 20 }}
+            initial={{ opacity: 0, y: 10 }}
             whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.6, delay: 0.2 }}
+            viewport={{ once: true, margin: "-50px" }}
+            transition={{ duration: 0.4, delay: 0.1 }}
             className="flex items-center space-x-2 text-stone-400 text-sm"
           >
             <span>© {currentYear}</span>
@@ -96,10 +96,10 @@ const Footer = () => {
 
         {/* Legal Links */}
         <motion.div
-          initial={{ opacity: 0, y: 20 }}
+          initial={{ opacity: 0, y: 10 }}
           whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.6, delay: 0.3 }}
+          viewport={{ once: true, margin: "-50px" }}
+          transition={{ duration: 0.4, delay: 0.15 }}
           className="mt-8 pt-6 border-t border-stone-100 flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0"
         >
           <div className="flex space-x-6 text-sm">
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index 1957cbf..ec7059e 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -12,7 +12,10 @@ const Header = () => {
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
-    setMounted(true);
+    // Use requestAnimationFrame to ensure smooth transition
+    requestAnimationFrame(() => {
+      setMounted(true);
+    });
   }, []);
 
   useEffect(() => {
@@ -41,17 +44,16 @@ const Header = () => {
     { icon: Mail, href: "mailto:contact@dk0.dev", label: "Email" },
   ];
 
-  if (!mounted) {
-    return null;
-  }
+  // Always render to prevent flash, but use opacity transition
 
   return (
     <>
       <motion.header
-        initial={{ y: -100, opacity: 0 }}
-        animate={{ y: 0, opacity: 1 }}
-        transition={{ duration: 0.8, ease: "easeOut" }}
+        initial={false}
+        animate={{ y: 0, opacity: mounted ? 1 : 0 }}
+        transition={{ duration: 0.3, ease: "easeOut" }}
         className="fixed top-6 left-0 right-0 z-50 flex justify-center px-4 pointer-events-none"
+        style={{ opacity: mounted ? 1 : 0 }}
       >
         <div
           className={`pointer-events-auto transition-all duration-500 ease-out ${
@@ -59,9 +61,9 @@ const Header = () => {
           }`}
         >
           <motion.div
-            initial={{ opacity: 0, y: -20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6, delay: 0.2, ease: "easeOut" }}
+            initial={false}
+            animate={{ opacity: mounted ? 1 : 0, y: 0 }}
+            transition={{ duration: 0.3, ease: "easeOut" }}
             className={`
             backdrop-blur-xl transition-all duration-500
             ${
diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx
index 457f492..77a7b5c 100644
--- a/app/components/Hero.tsx
+++ b/app/components/Hero.tsx
@@ -1,27 +1,16 @@
 "use client";
 
-import { useState, useEffect } from "react";
 import { motion } from "framer-motion";
 import { ArrowDown, Code, Zap, Rocket } from "lucide-react";
 import Image from "next/image";
 
 const Hero = () => {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
   const features = [
     { icon: Code, text: "Next.js & Flutter" },
     { icon: Zap, text: "Docker Swarm & CI/CD" },
     { icon: Rocket, text: "Self-Hosted Infrastructure" },
   ];
 
-  if (!mounted) {
-    return null;
-  }
-
   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">
       <div className="relative z-10 text-center px-4 max-w-5xl mx-auto">
@@ -29,7 +18,7 @@ const Hero = () => {
         <motion.div
           initial={{ opacity: 0, scale: 0.9 }}
           animate={{ opacity: 1, scale: 1 }}
-          transition={{ duration: 1.2, delay: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
+          transition={{ duration: 0.6, delay: 0.1, ease: [0.25, 0.1, 0.25, 1] }}
           className="mb-12 flex justify-center relative z-20"
         >
           <div className="relative w-64 h-64 md:w-80 md:h-80 flex items-center justify-center">
@@ -111,7 +100,7 @@ const Hero = () => {
             <motion.div
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 1, delay: 0.8, ease: "easeOut" }}
+              transition={{ duration: 0.6, delay: 0.3, ease: "easeOut" }}
               className="absolute -bottom-8 left-1/2 -translate-x-1/2 z-30"
             >
               <div className="px-6 py-2.5 rounded-full glass-panel text-stone-700 font-mono text-sm tracking-wider shadow-lg backdrop-blur-xl border border-white/50">
@@ -123,7 +112,7 @@ const Hero = () => {
             <motion.div
               initial={{ scale: 0, opacity: 0 }}
               animate={{ scale: 1, opacity: 1 }}
-              transition={{ delay: 1.2, duration: 0.8, ease: "easeOut" }}
+              transition={{ delay: 0.4, duration: 0.5, ease: "easeOut" }}
               whileHover={{ scale: 1.1, rotate: 5 }}
               className="absolute -top-4 right-0 md:-right-4 p-3 bg-white/95 backdrop-blur-md shadow-lg rounded-full text-stone-700 z-30"
             >
@@ -132,7 +121,7 @@ const Hero = () => {
             <motion.div
               initial={{ scale: 0, opacity: 0 }}
               animate={{ scale: 1, opacity: 1 }}
-              transition={{ delay: 1.4, duration: 0.8, ease: "easeOut" }}
+              transition={{ delay: 0.5, duration: 0.5, ease: "easeOut" }}
               whileHover={{ scale: 1.1, rotate: -5 }}
               className="absolute bottom-4 -left-4 md:-left-8 p-3 bg-white/95 backdrop-blur-md shadow-lg rounded-full text-stone-700 z-30"
             >
@@ -145,7 +134,7 @@ const Hero = () => {
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 1, delay: 0.6, ease: [0.25, 0.1, 0.25, 1] }}
+          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">
@@ -160,7 +149,7 @@ const Hero = () => {
         <motion.p
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 1, delay: 0.9, ease: [0.25, 0.1, 0.25, 1] }}
+          transition={{ duration: 0.6, delay: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
           className="text-lg md:text-xl text-stone-700 mb-12 max-w-2xl mx-auto leading-relaxed"
         >
           Student and passionate{" "}
@@ -182,7 +171,7 @@ const Hero = () => {
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 1, delay: 1.1, ease: [0.25, 0.1, 0.25, 1] }}
+          transition={{ duration: 0.6, delay: 0.4, ease: [0.25, 0.1, 0.25, 1] }}
           className="flex flex-wrap justify-center gap-4 mb-12"
         >
           {features.map((feature, index) => (
@@ -191,8 +180,8 @@ const Hero = () => {
               initial={{ opacity: 0, scale: 0.9 }}
               animate={{ opacity: 1, scale: 1 }}
               transition={{
-                duration: 0.8,
-                delay: 1.3 + index * 0.15,
+                duration: 0.5,
+                delay: 0.5 + index * 0.1,
                 ease: [0.25, 0.1, 0.25, 1],
               }}
               whileHover={{ scale: 1.03, y: -3 }}
@@ -210,7 +199,7 @@ const Hero = () => {
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 1, delay: 1.6, ease: [0.25, 0.1, 0.25, 1] }}
+          transition={{ duration: 0.6, delay: 0.6, ease: [0.25, 0.1, 0.25, 1] }}
           className="flex flex-col sm:flex-row gap-5 justify-center items-center"
         >
           <motion.a
diff --git a/app/components/Projects.tsx b/app/components/Projects.tsx
index 5600f94..52fef42 100644
--- a/app/components/Projects.tsx
+++ b/app/components/Projects.tsx
@@ -7,12 +7,12 @@ import Link from "next/link";
 import Image from "next/image";
 
 const fadeInUp: Variants = {
-  hidden: { opacity: 0, y: 40 },
+  hidden: { opacity: 0, y: 20 },
   visible: {
     opacity: 1,
     y: 0,
     transition: {
-      duration: 0.8,
+      duration: 0.5,
       ease: [0.25, 0.1, 0.25, 1],
     },
   },
@@ -44,11 +44,9 @@ interface Project {
 }
 
 const Projects = () => {
-  const [mounted, setMounted] = useState(false);
   const [projects, setProjects] = useState<Project[]>([]);
 
   useEffect(() => {
-    setMounted(true);
     const loadProjects = async () => {
       try {
         const response = await fetch(
@@ -58,7 +56,7 @@ const Projects = () => {
           const data = await response.json();
           setProjects(data.projects || []);
         }
-      } catch (error) {
+        } catch (error) {
         if (process.env.NODE_ENV === "development") {
           console.error("Error loading projects:", error);
         }
@@ -67,8 +65,6 @@ const Projects = () => {
     loadProjects();
   }, []);
 
-  if (!mounted) return null;
-
   return (
     <section
       id="projects"
@@ -78,7 +74,7 @@ const Projects = () => {
         <motion.div
           initial="hidden"
           whileInView="visible"
-          viewport={{ once: true, margin: "-100px" }}
+          viewport={{ once: true, margin: "-50px" }}
           variants={fadeInUp}
           className="text-center mb-20"
         >
@@ -94,7 +90,7 @@ const Projects = () => {
         <motion.div
           initial="hidden"
           whileInView="visible"
-          viewport={{ once: true, margin: "-100px" }}
+          viewport={{ once: true, margin: "-50px" }}
           variants={staggerContainer}
           className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
         >