diff --git a/src/app/components/Home.jsx b/src/app/components/Home.jsx
index 9ccde9d..a32af80 100644
--- a/src/app/components/Home.jsx
+++ b/src/app/components/Home.jsx
@@ -7,6 +7,7 @@ import { EffectComposer, Bloom } from "@react-three/postprocessing";
 import { motion } from "framer-motion";
 import Navbar from "./Navbar";
 import { ChevronRight } from "lucide-react";
+import * as THREE from "three";
 
 const Glow = ({ className = "" }) => (
   <div
@@ -15,20 +16,71 @@ const Glow = ({ className = "" }) => (
   />
 );
 
-function AnimatedNeuralNode({ position, color, size = 0.08, delay = 0 }) {
+// Optimized animation progress hook
+function useAnimationProgress(duration = 2000, delay = 500) {
+  const [progress, setProgress] = useState(0);
+  const [isComplete, setIsComplete] = useState(false);
+  const rafRef = useRef();
+
+  useEffect(() => {
+    let startTime = null;
+    let animationFrameId = null;
+
+    const animate = (timestamp) => {
+      if (!startTime) startTime = timestamp;
+      const elapsed = timestamp - startTime;
+      const rawProgress = Math.min(elapsed / duration, 1);
+      
+      // Smooth easing function
+      const easedProgress = 1 - Math.pow(1 - rawProgress, 3);
+      setProgress(easedProgress);
+
+      if (rawProgress < 1) {
+        animationFrameId = requestAnimationFrame(animate);
+      } else {
+        setIsComplete(true);
+      }
+    };
+
+    const startAnimation = () => {
+      startTime = null;
+      animationFrameId = requestAnimationFrame(animate);
+    };
+
+    const timeoutId = setTimeout(startAnimation, delay);
+
+    return () => {
+      clearTimeout(timeoutId);
+      if (animationFrameId) cancelAnimationFrame(animationFrameId);
+    };
+  }, [duration, delay]);
+
+  return { progress, isComplete };
+}
+
+function AnimatedNeuralNode({ position, color, size = 0.08, delay = 0, animationProgress = 1 }) {
   const ref = useRef();
+  const initialPos = useMemo(() => new THREE.Vector3(0, 0, 0), []);
+  const targetPos = useMemo(() => new THREE.Vector3(...position), [position]);
 
   useFrame((state) => {
     if (ref.current) {
-      const time = state.clock.elapsedTime + delay;
-      ref.current.scale.x = 1 + Math.sin(time * 2) * 0.15;
-      ref.current.scale.y = 1 + Math.sin(time * 2) * 0.15;
-      ref.current.scale.z = 1 + Math.sin(time * 2) * 0.15;
+      // Position animation
+      ref.current.position.lerpVectors(initialPos, targetPos, animationProgress);
+      
+      // Scale animation only when animation is mostly complete
+      if (animationProgress > 0.8) {
+        const time = state.clock.elapsedTime + delay;
+        const scale = 1 + Math.sin(time * 2) * 0.15;
+        ref.current.scale.setScalar(scale);
+      } else {
+        ref.current.scale.setScalar(1);
+      }
     }
   });
 
   return (
-    <Sphere ref={ref} args={[size, 32, 32]} position={position}>
+    <Sphere ref={ref} args={[size, 16, 16]}>
       <meshStandardMaterial
         color={color}
         emissive={color}
@@ -43,10 +95,15 @@ function NeuralStructure({
   position = [0, 0, 0],
   color = "#00faff",
   structureIndex = 0,
+  animationProgress = 1,
 }) {
+  const groupRef = useRef();
+  const initialPos = useMemo(() => new THREE.Vector3(0, 0, 0), []);
+  const targetPos = useMemo(() => new THREE.Vector3(...position), [position]);
+
   const nodes = useMemo(() => {
     const nodePositions = [];
-    const nodeCount = 12;
+    const nodeCount = 8; // Reduced for performance
     const radius = 1.2;
     
     for (let i = 0; i < nodeCount; i++) {
@@ -66,50 +123,58 @@ function NeuralStructure({
     const conns = [];
     const nodeCount = nodes.length;
     
+    // Simplified connection logic
     for (let i = 0; i < nodeCount; i++) {
-      const distances = nodes.map((node, j) => ({
-        index: j,
-        distance: Math.hypot(
-          node[0] - nodes[i][0],
-          node[1] - nodes[i][1],
-          node[2] - nodes[i][2]
-        ),
-      }));
-      
-      distances.sort((a, b) => a.distance - b.distance);
-      
-      for (let j = 1; j <= 3 && j < distances.length; j++) {
-        const targetIndex = distances[j].index;
-        if (i < targetIndex) {
-          conns.push([i, targetIndex]);
-        }
+      for (let j = i + 1; j < Math.min(i + 3, nodeCount); j++) {
+        conns.push([i, j]);
       }
     }
     return conns;
   }, [nodes]);
 
+  useFrame(() => {
+    if (groupRef.current) {
+      groupRef.current.position.lerpVectors(initialPos, targetPos, animationProgress);
+    }
+  });
+
   return (
-    <group position={position}>
+    <group ref={groupRef}>
       {nodes.map((pos, i) => (
         <AnimatedNeuralNode 
           key={i} 
           position={pos} 
           color={color}
-          delay={i * 0.1}
+          delay={i * 0.05} // Reduced delay
+          animationProgress={animationProgress}
         />
       ))}
 
-      {connections.map(([start, end], i) => (
-        <Line
-          key={i}
-          points={[nodes[start], nodes[end]]}
-          color={color}
-          lineWidth={1.5}
-          transparent
-          opacity={0.4}
-          toneMapped={false}
-        />
-      ))}
+      {connections.map(([start, end], i) => {
+        // Calculate positions based on animation progress
+        const startPos = [
+          nodes[start][0] * animationProgress,
+          nodes[start][1] * animationProgress,
+          nodes[start][2] * animationProgress
+        ];
+        const endPos = [
+          nodes[end][0] * animationProgress,
+          nodes[end][1] * animationProgress,
+          nodes[end][2] * animationProgress
+        ];
+        
+        return (
+          <Line
+            key={i}
+            points={[startPos, endPos]}
+            color={color}
+            lineWidth={1}
+            transparent
+            opacity={0.3 * animationProgress}
+            toneMapped={false}
+          />
+        );
+      })}
     </group>
   );
 }
@@ -181,6 +246,11 @@ export default function Home() {
   ];
 
   const [isMobile, setIsMobile] = useState(false);
+  const [showText, setShowText] = useState(false);
+  const [showButton, setShowButton] = useState(false);
+  
+  // Use optimized animation hook
+  const { progress: animationProgress, isComplete } = useAnimationProgress(2000, 300);
 
   useEffect(() => {
     const checkMobile = () => {
@@ -189,8 +259,21 @@ export default function Home() {
     
     checkMobile();
     window.addEventListener('resize', checkMobile);
+
+    // Show text when animation is complete
+    if (isComplete) {
+      const textTimeout = setTimeout(() => {
+        setShowText(true);
+        const buttonTimeout = setTimeout(() => {
+          setShowButton(true);
+        }, 800);
+        return () => clearTimeout(buttonTimeout);
+      }, 200);
+      return () => clearTimeout(textTimeout);
+    }
+
     return () => window.removeEventListener('resize', checkMobile);
-  }, []);
+  }, [isComplete]);
 
   const structures = useMemo(() => {
     const positions = [
@@ -227,20 +310,21 @@ export default function Home() {
       [0, -5, -4],
     ];
 
-    return positions.map((position, i) => ({
+    // Reduce structures on mobile for performance
+    const filteredPositions = isMobile ? positions.slice(0, 15) : positions;
+    
+    return filteredPositions.map((position, i) => ({
       position,
       color: colors[i % colors.length],
       structureIndex: i,
     }));
-  }, [colors]);
+  }, [colors, isMobile]);
 
   const handleExploreClick = () => {
-    // Dispatch custom event to open navbar
     if (typeof window !== "undefined") {
       window.dispatchEvent(new CustomEvent("open-navigation"));
     }
     
-    // Also scroll to next section if needed
     window.scrollTo({
       top: window.innerHeight,
       behavior: 'smooth'
@@ -256,66 +340,49 @@ export default function Home() {
         <div className={`absolute inset-0 flex ${isMobile ? 'items-start pt-32' : 'items-center justify-center'} z-10 pointer-events-none`}>
           <Glow />
           
-          {/* Main Content Container */}
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 1.5, ease: "easeOut", delay: 0.5 }}
-            className={`flex flex-col items-center justify-center px-8 py-6 rounded-2xl bg-slate-900/40 backdrop-blur-xl border border-cyan-500/30 shadow-2xl text-center pointer-events-auto mx-4 ${isMobile ? 'mt-8 max-w-[90%]' : 'max-w-4xl'}`}
-          >
-            <motion.div
-              initial="hidden"
-              animate="visible"
-              variants={{
-                hidden: { opacity: 0 },
-                visible: {
-                  opacity: 1,
-                  transition: {
-                    staggerChildren: 0.3,
-                    delayChildren: 0.2
-                  }
-                }
-              }}
-              className="flex flex-col items-center"
-            >
-              <motion.h1
-                variants={{
-                  hidden: { opacity: 0, y: -20 },
-                  visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } }
-                }}
-                className={`${isMobile ? 'text-4xl' : 'text-3xl md:text-7xl'} font-bold text-cyan-200 drop-shadow-[0_0_20px_#00faff] mb-4 special-font`}
-                style={{ fontFamily: "Orbitron, sans-serif" }}
-              >
-                <b>MACHINE LEARNING FOR EVERYONE</b>
-              </motion.h1>
-              
-              <motion.div
-                variants={{
-                  hidden: { opacity: 0, scale: 0.9 },
-                  visible: { opacity: 1, scale: 1, transition: { duration: 0.8, ease: "easeOut" } }
-                }}
-                className={`${isMobile ? 'text-xl' : 'text-2xl md:text-5xl'} font-bold text-cyan-300 drop-shadow-[0_0_15px_#00d9ff] mb-4`}
-                style={{ fontFamily: "Orbitron, sans-serif" }}
-              >
-                (ML4E)
-              </motion.div>
+          {/* Main Content Container - Animation controlled by showText state */}
+          <div className={`flex flex-col items-center justify-center px-8 py-6 rounded-2xl bg-slate-900/40 backdrop-blur-xl border border-cyan-500/30 shadow-2xl text-center pointer-events-auto mx-4 ${isMobile ? 'mt-8 max-w-[90%]' : 'max-w-4xl'}`}>
+            {/* Text appears only after neural networks spread */}
+            {showText && (
+              <div className="flex flex-col items-center">
+                <motion.h1
+                  initial={{ opacity: 0, y: -20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.8, ease: "easeOut" }}
+                  className={`${isMobile ? 'text-4xl' : 'text-3xl md:text-7xl'} font-bold text-cyan-200 drop-shadow-[0_0_20px_#00faff] mb-4 special-font`}
+                  style={{ fontFamily: "Orbitron, sans-serif" }}
+                >
+                  <b>MACHINE LEARNING FOR EVERYONE</b>
+                </motion.h1>
+                
+                <motion.div
+                  initial={{ opacity: 0, scale: 0.9 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  transition={{ duration: 0.8, ease: "easeOut", delay: 0.2 }}
+                  className={`${isMobile ? 'text-xl' : 'text-2xl md:text-5xl'} font-bold text-cyan-300 drop-shadow-[0_0_15px_#00d9ff] mb-4`}
+                  style={{ fontFamily: "Orbitron, sans-serif" }}
+                >
+                  (ML4E)
+                </motion.div>
 
-              <motion.p
-                variants={{
-                  hidden: { opacity: 0, y: 20 },
-                  visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } }
-                }}
-                className={`mt-2 ${isMobile ? 'text-sm' : 'text-base md:text-xl'} text-blue-300 drop-shadow-[0_0_10px_#00d9ff] mb-8 md:mb-12`}
-                style={{ fontFamily: "Roboto, sans-serif" }}
-              >
-                THE OFFICIAL MACHINE LEARNING CLUB OF NIT ROURKELA
-              </motion.p>
+                <motion.p
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.8, ease: "easeOut", delay: 0.4 }}
+                  className={`mt-2 ${isMobile ? 'text-sm' : 'text-base md:text-xl'} text-blue-300 drop-shadow-[0_0_10px_#00d9ff] mb-8 md:mb-12`}
+                  style={{ fontFamily: "Roboto, sans-serif" }}
+                >
+                  THE OFFICIAL MACHINE LEARNING CLUB OF NIT ROURKELA
+                </motion.p>
+              </div>
+            )}
 
-              {/* Eye-catching Learn More Button */}
+            {/* Button appears after text animation */}
+            {showButton && (
               <motion.button
                 initial={{ opacity: 0, y: 30 }}
                 animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.8, delay: 1.5, ease: "easeOut" }}
+                transition={{ duration: 0.8, ease: "easeOut" }}
                 onClick={handleExploreClick}
                 className="group relative overflow-hidden px-8 md:px-12 py-3 md:py-4 rounded-full bg-gradient-to-r from-cyan-500/20 via-cyan-600/30 to-blue-500/20 border border-cyan-400/50 hover:border-cyan-300 transition-all duration-300 cursor-pointer shadow-[0_0_30px_rgba(0,245,255,0.3)] hover:shadow-[0_0_40px_rgba(0,245,255,0.5)]"
               >
@@ -340,32 +407,35 @@ export default function Home() {
                 <div className="absolute -top-1 -left-1 w-2 h-2 rounded-full bg-cyan-400 opacity-70 group-hover:opacity-100 group-hover:animate-ping" />
                 <div className="absolute -bottom-1 -right-1 w-2 h-2 rounded-full bg-blue-400 opacity-70 group-hover:opacity-100 group-hover:animate-ping delay-75" />
               </motion.button>
-            </motion.div>
-          </motion.div>
+            )}
+          </div>
         </div>
 
-        {/* 3D Canvas with touch event handling */}
+        {/* 3D Canvas */}
         <div className="fixed inset-0 z-0">
           <Canvas 
             camera={{ position: [0, 0, 15], fov: 60 }}
-            style={{ touchAction: isMobile ? 'none' : 'auto' }}
+            dpr={[1, isMobile ? 1 : 1.5]}
+            performance={{ min: 0.8 }}
+            gl={{ antialias: false }}
           >
             <color attach="background" args={["#000000"]} />
-            <CyberGridBackground />
-            <ambientLight intensity={0.5} />
-            <pointLight position={[10, 10, 10]} intensity={1.5} />
-            <pointLight position={[-10, -10, -10]} intensity={0.8} color="#00faff" />
+            <CyberGridBackground animationProgress={animationProgress} />
+            <ambientLight intensity={0.5 * animationProgress} />
+            <pointLight position={[10, 10, 10]} intensity={1.5 * animationProgress} />
+            <pointLight position={[-10, -10, -10]} intensity={0.8 * animationProgress} color="#00faff" />
 
             {structures.map((props, i) => (
-              <NeuralStructure key={i} {...props} />
+              <NeuralStructure key={i} {...props} animationProgress={animationProgress} />
             ))}
 
-            {!isMobile && (
+            {!isMobile && animationProgress > 0.8 && (
               <OrbitControls
                 enableZoom={false}
                 autoRotate={false}
                 enablePan={false}
-                enableRotate={false}
+                enableRotate={true}
+                rotateSpeed={0.3}
                 minPolarAngle={Math.PI / 2}
                 maxPolarAngle={Math.PI / 2}
                 minDistance={10}
@@ -375,10 +445,10 @@ export default function Home() {
 
             <EffectComposer>
               <Bloom
-                intensity={2}
-                kernelSize={3}
-                luminanceThreshold={0.1}
-                luminanceSmoothing={0.9}
+                intensity={2 * animationProgress}
+                kernelSize={2}
+                luminanceThreshold={0.2}
+                luminanceSmoothing={0.8}
               />
             </EffectComposer>
           </Canvas>