diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 79ce58d..c368a53 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -27,8 +27,8 @@
       },
       "devDependencies": {
         "@eslint/js": "^9.33.0",
-        "@types/react": "^19.1.10",
-        "@types/react-dom": "^19.1.7",
+        "@types/react": "^18.3.1",
+        "@types/react-dom": "^18.3.1",
         "@vitejs/plugin-react": "^5.0.0",
         "eslint": "^9.33.0",
         "eslint-plugin-react-hooks": "^5.2.0",
@@ -1752,23 +1752,30 @@
       "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
       "license": "MIT"
     },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.15",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "license": "MIT"
+    },
     "node_modules/@types/react": {
-      "version": "19.1.12",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.12.tgz",
-      "integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==",
+      "version": "18.3.31",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.31.tgz",
+      "integrity": "sha512-vfEqpXTvwT91yhmwdfouStN2hSKwTvyRs8qpLfADyrq/kxDw0hZM7Wk9Ug1FELj8hIby+S/+kQCSRFF32nv2Qw==",
       "license": "MIT",
       "dependencies": {
-        "csstype": "^3.0.2"
+        "@types/prop-types": "*",
+        "csstype": "^3.2.2"
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "19.1.9",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.9.tgz",
-      "integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==",
+      "version": "18.3.7",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
+      "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
-        "@types/react": "^19.0.0"
+        "@types/react": "^18.0.0"
       }
     },
     "node_modules/@types/trusted-types": {
@@ -2171,9 +2178,9 @@
       }
     },
     "node_modules/csstype": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
     },
     "node_modules/debug": {
diff --git a/frontend/src/LandingPage.jsx b/frontend/src/LandingPage.jsx
index 3f90794..45a6559 100644
--- a/frontend/src/LandingPage.jsx
+++ b/frontend/src/LandingPage.jsx
@@ -17,7 +17,19 @@ import SignUp from "./pages/Auth/SignUp";
 import { UserContext } from "./context/userContext";
 import { motion, AnimatePresence } from "framer-motion";
 import ServicesMarquee from "./components/ServicesMarquee";
-import { Star } from "lucide-react"; // Import Star icon for testimonials
+import {
+  Star,
+  Target,
+  Brain,
+  Zap,
+  BarChart3,
+  MessageSquare,
+  FileText,
+  Search,
+  SlidersHorizontal,
+  Briefcase,
+  Wrench,
+} from "lucide-react";
 
 
 /* ─────────────────────────────────────────────
@@ -496,22 +508,22 @@ const LandingPage = () => {
                 <div className="flex-1 p-10 flex flex-col gap-4">
                   {[
                     {
-                      icon: "🎯",
+                      icon: Target,
                       label: "Frontend Engineer Track",
                       sub: "React · TypeScript · Performance",
                     },
                     {
-                      icon: "🧠",
+                      icon: Brain,
                       label: "System Design Deep Dive",
                       sub: "HLD · LLD · Scalability",
                     },
                     {
-                      icon: "⚡",
+                      icon: Zap,
                       label: "DSA Mastery Sprint",
                       sub: "Arrays · Graphs · DP",
                     },
                     {
-                      icon: "📊",
+                      icon: BarChart3,
                       label: "Behavioral Interview Prep",
                       sub: "STAR · Leadership · Culture",
                     },
@@ -525,10 +537,10 @@ const LandingPage = () => {
                       }}
                     >
                       <div
-                        className="w-12 h-12 rounded-lg flex items-center justify-center text-2xl flex-shrink-0"
+                        className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
                         style={{ background: "rgba(139,92,246,0.15)" }}
                       >
-                        {item.icon}
+                        <item.icon className="w-6 h-6 text-violet-300" />
                       </div>
                       <div>
                         <p className="text-white text-base font-semibold leading-tight">
@@ -581,23 +593,23 @@ const LandingPage = () => {
                   {/* Orbiting tool icons */}
                   {[
                     {
-                      emoji: "💬",
+                      icon: MessageSquare,
                       top: "8%",
                       left: "50%",
                       transform: "translateX(-50%)",
                     },
                     {
-                      emoji: "📝",
+                      icon: FileText,
                       top: "50%",
                       right: "6%",
                       transform: "translateY(-50%)",
                     },
-                    { emoji: "🔍", bottom: "10%", left: "20%", transform: "" },
-                    { emoji: "📊", top: "20%", left: "8%", transform: "" },
+                    { icon: Search, bottom: "10%", left: "20%", transform: "" },
+                    { icon: BarChart3, top: "20%", left: "8%", transform: "" },
                   ].map((orb, i) => (
                     <div
                       key={i}
-                      className="absolute w-12 h-12 rounded-xl flex items-center justify-center text-2xl"
+                      className="absolute w-12 h-12 rounded-xl flex items-center justify-center"
                       style={{
                         top: orb.top,
                         left: orb.left,
@@ -609,7 +621,7 @@ const LandingPage = () => {
                         boxShadow: "0 0 12px rgba(139,92,246,0.2)",
                       }}
                     >
-                      {orb.emoji}
+                      <orb.icon className="w-6 h-6 text-violet-300" />
                     </div>
                   ))}
 
@@ -660,8 +672,9 @@ const LandingPage = () => {
                       border: "1px solid rgba(255,255,255,0.07)",
                     }}
                   >
-                    <p className="text-sm font-semibold text-gray-500 uppercase tracking-widest mb-3">
-                      🎚 Difficulty
+                    <p className="flex items-center gap-2 text-sm font-semibold text-gray-500 uppercase tracking-widest mb-3">
+                      <SlidersHorizontal className="w-4 h-4" />
+                      Difficulty
                     </p>
                     <div className="flex flex-wrap gap-2">
                       {["Easy", "Medium", "Hard", "Expert"].map((tag, i) => {
@@ -691,8 +704,9 @@ const LandingPage = () => {
                       border: "1px solid rgba(255,255,255,0.07)",
                     }}
                   >
-                    <p className="text-sm font-semibold text-gray-500 uppercase tracking-widest mb-3">
-                      💼 Role Type
+                    <p className="flex items-center gap-2 text-sm font-semibold text-gray-500 uppercase tracking-widest mb-3">
+                      <Briefcase className="w-4 h-4" />
+                      Role Type
                     </p>
                     <div className="flex flex-wrap gap-2">
                       {["Frontend", "Backend", "Full Stack", "DevOps"].map(
@@ -716,8 +730,9 @@ const LandingPage = () => {
                       border: "1px solid rgba(255,255,255,0.07)",
                     }}
                   >
-                    <p className="text-sm font-semibold text-gray-500 uppercase tracking-widest mb-3">
-                      🔧 Tech Stack
+                    <p className="flex items-center gap-2 text-sm font-semibold text-gray-500 uppercase tracking-widest mb-3">
+                      <Wrench className="w-4 h-4" />
+                      Tech Stack
                     </p>
                     <div className="flex flex-wrap gap-2">
                       {["React", "Node.js", "Python", "TypeScript"].map(
diff --git a/frontend/src/components/ServicesMarquee.jsx b/frontend/src/components/ServicesMarquee.jsx
index f500da0..eebb09b 100644
--- a/frontend/src/components/ServicesMarquee.jsx
+++ b/frontend/src/components/ServicesMarquee.jsx
@@ -1,4 +1,3 @@
-import { motion } from "framer-motion";
 import React, { useEffect, useState } from "react";
 
 export default function ServicesMarquee() {
@@ -24,15 +23,9 @@ export default function ServicesMarquee() {
 
   return (
     <div className="w-full overflow-hidden pb-6 sm:pb-10 relative">
-      <motion.div
-        className="flex gap-3 sm:gap-6 whitespace-nowrap"
-        animate={{ x: ["0%", "-100%"] }}
-        transition={{
-          repeat: Infinity,
-          repeatType: "loop",
-          duration,
-          ease: "linear",
-        }}
+      <div
+        className="flex gap-3 sm:gap-6 whitespace-nowrap animate-marquee-left"
+        style={{ animationDuration: `${duration}s` }}
       >
         {/* Duplicate services 3 times for seamless scroll on mobile */}
         {[...SERVICES, ...SERVICES, ...SERVICES].map((service, idx) => (
@@ -52,7 +45,7 @@ export default function ServicesMarquee() {
             </p>
           </div>
         ))}
-      </motion.div>
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 2c35d10..20c1125 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -212,6 +212,47 @@ html.dark {
     overflow: hidden;
   }
 
+  /* Testimonials auto-scroll (pauses on hover so users can read) */
+  @keyframes scroll-left {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(-50%);
+    }
+  }
+  .animate-scroll-left {
+    width: max-content;
+    animation: scroll-left 40s linear infinite;
+  }
+  .animate-scroll-left:hover {
+    animation-play-state: paused;
+  }
+
+  /* Services marquee (pauses on hover so users can read cards) */
+  @keyframes marquee-left {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(-33.333%);
+    }
+  }
+  .animate-marquee-left {
+    width: max-content;
+    animation: marquee-left linear infinite;
+  }
+  .animate-marquee-left:hover {
+    animation-play-state: paused;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .animate-scroll-left,
+    .animate-marquee-left {
+      animation: none;
+    }
+  }
+
   /* Stats number gradient */
   .stat-number {
     background: linear-gradient(