diff --git a/package-lock.json b/package-lock.json
index ce3b812b..c3e9987f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6259,6 +6259,40 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/@emnapi/core": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
+      "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.1",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
+      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
+      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@emotion/is-prop-valid": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.4.0.tgz",
diff --git a/src/components/testimonials/TestimonialCard.tsx b/src/components/testimonials/TestimonialCard.tsx
index d20acf21..fea7aeca 100644
--- a/src/components/testimonials/TestimonialCard.tsx
+++ b/src/components/testimonials/TestimonialCard.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { motion } from "framer-motion";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
 import { useSafeColorMode } from "../../utils/useSafeColorMode";
-import { ExternalLink, Quote } from "lucide-react";
+
 
 interface TestimonialCardProps {
   name: string;
@@ -10,7 +10,8 @@ interface TestimonialCardProps {
   content: string;
   date: string;
   avatar: string;
-  link: string;
+  gradient?: string;
+  borderColor?: string;
 }
 
 const TestimonialCard: React.FC<TestimonialCardProps> = ({
@@ -19,17 +20,38 @@ const TestimonialCard: React.FC<TestimonialCardProps> = ({
   content,
   date,
   avatar,
-  link,
+  gradient,
+  borderColor,
 }) => {
   const { colorMode, isDark } = useSafeColorMode();
 
-  const formatLinkDisplay = (url: string) => {
-    try {
-      const urlObj = new URL(url);
-      return urlObj.hostname + urlObj.pathname;
-    } catch {
-      return url;
+  const getBackgroundStyle = () => {
+    let colorStop = "";
+    if (gradient === "bg-pink-100") {
+      colorStop = "rgba(244, 194, 214, 0.35)"; // Pink
+    } else if (gradient === "bg-purple-100") {
+      colorStop = "rgba(191, 190, 255, 0.35)"; // Blue/Lavender
+    } else {
+      colorStop = "rgba(165, 243, 252, 0.35)"; // Cyan
     }
+
+    return {
+      background: `
+        radial-gradient(
+          ellipse 600px 500px at 10% 85%,
+          ${colorStop} 0%,
+          rgba(255, 255, 255, 0) 70%
+        ),
+        linear-gradient(
+          135deg,
+          rgba(255, 255, 255, 0.95) 0%,
+          rgba(255, 255, 255, 0.9) 100%
+        )
+      `,
+      backdropFilter: "blur(4px)",
+      WebkitBackdropFilter: "blur(4px)",
+      border: "1px solid rgba(200, 200, 220, 0.4)",
+    };
   };
 
   return (
@@ -37,104 +59,60 @@ const TestimonialCard: React.FC<TestimonialCardProps> = ({
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: -20 }}
-      whileHover={{ y: -5 }}
+      whileHover={{ y: -8 }}
       transition={{ duration: 0.3 }}
-      className={`group relative h-full overflow-hidden rounded-2xl border backdrop-blur-sm transition-all duration-300 hover:shadow-2xl ${
-        isDark 
-          ? "border-gray-700/50 bg-gray-900/80 shadow-xl" 
-          : "border-gray-200/50 bg-white/90 shadow-lg"
-      }`}
+      className={`group relative h-full w-full overflow-hidden rounded-3xl min-h-[550px] flex flex-col justify-between p-8`}
+      style={getBackgroundStyle()}
     >
-      {/* Gradient Background */}
-      <div className="absolute inset-0 bg-gradient-to-br from-purple-500/5 via-blue-500/5 to-pink-500/5" />
-      
-      {/* Quote Icon */}
-      <div className="absolute top-4 right-4 opacity-20">
-        <Quote size={32} className="text-purple-500" />
-      </div>
+      {/* Subtle glossy overlay */}
+      <div
+        className="absolute inset-0 rounded-3xl pointer-events-none"
+        style={{
+          background: `linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 40%, transparent 70%)`,
+        }}
+      />
 
-      <div className="relative flex h-full flex-col p-6">
-        {/* Header */}
-        <div className="mb-6 flex items-center gap-4">
-          <div className="relative shrink-0">
-            <Avatar className="h-16 w-16 overflow-hidden border-2 border-gradient-to-r from-purple-500 to-pink-500 bg-white/90 shadow-md">
-              <AvatarImage src={avatar} className="h-full w-full scale-[2.3] object-cover transition-transform duration-500" />
-              <AvatarFallback className="bg-gradient-to-br from-purple-500 to-pink-500 text-white font-semibold">
-                {name.charAt(0)}
-              </AvatarFallback>
-            </Avatar>
-            <div className="absolute bottom-0 right-0 h-4 w-4 rounded-full border-2 border-white bg-green-500 shadow-sm" />
-          </div>
-          <div className="flex-1">
-            <h3 className={`text-lg font-bold ${
-              isDark ? "text-white" : "text-gray-900"
-            }`}>
-              {name}
-            </h3>
-            <p className={`text-sm ${
-              isDark ? "text-gray-400" : "text-gray-500"
-            }`}>
-              @{username}
-            </p>
-          </div>
-        </div>
+      {/* Soft shadow */}
+      <div className="absolute inset-0 rounded-3xl pointer-events-none shadow-lg shadow-black/5" />
 
-        {/* Content */}
-        <div className="flex-1">
-          <p className={`text-base leading-relaxed ${
-            isDark ? "text-gray-300" : "text-gray-700"
-          }`}>
-            {content.replace(/#\w+/g, '').trim()}
+      <div className="relative z-10 flex flex-col h-full">
+        {/* Testimonial Quote - Top Section */}
+        <div className="mb-12">
+          <p className="text-2xl leading-relaxed font-semibold text-gray-900 tracking-tight">
+            "{content.replace(/#\w+/g, '').trim()}"
           </p>
         </div>
 
-        {/* Footer */}
-        <div className={`mt-6 space-y-4 border-t pt-4 ${
-          isDark ? "border-gray-700/50" : "border-gray-200/50"
-        }`}>
-          {/* Hashtags */}
-          <div className="flex flex-wrap gap-2">
-            {content.match(/#\w+/g)?.map((hashtag, index) => (
-              <span
-                key={index}
-                className={`rounded-full px-3 py-1 text-xs font-medium transition-colors hover:scale-105 ${
-                  isDark
-                    ? "bg-blue-500/20 text-blue-400 hover:bg-blue-500/30"
-                    : "bg-blue-100 text-blue-600 hover:bg-blue-200"
-                }`}
-              >
-                {hashtag}
-              </span>
-            ))}
-          </div>
+        {/* Avatar and Info - Bottom Section */}
+        <div className="mt-auto">
+          <div className="flex items-center gap-6">
+            {/* Large Avatar with White Background */}
+            <Avatar className="h-20 w-20 overflow-hidden rounded-full border-3 border-white shadow-md flex-shrink-0 bg-white">
+              <AvatarImage src={avatar} className="h-full w-full object-cover scale-125" />
+              <AvatarFallback className="text-white font-bold text-lg bg-gradient-to-br from-purple-400 to-pink-400">
+                {name.charAt(0)}
+              </AvatarFallback>
+            </Avatar>
+
+            <div className="flex-1">
+              <h3 className="text-xl font-bold text-gray-900 mb-1 tracking-tight">
+                {name}
+              </h3>
+              {username !== "AryanGupta" && username !== "DonaldAnyamba" && (
+                <p className="text-sm text-gray-700 font-medium mb-3">
+                  {username === "VivienChen" ? "Founder @ Toastie (BC Y24)" :
+                    username === "DanielHan" ? "Founder @ Unsloth AI (YC W24, BC Y24)" :
+                      "AI Engineer @ Relevance AI"}
+                </p>
+              )}
 
-          {/* Link and Date */}
-          <div className="flex items-center justify-between">
-            <a
-              href={link}
-              target="_blank"
-              rel="noopener noreferrer"
-              className={`group/link flex items-center gap-2 text-sm font-medium transition-colors ${
-                isDark
-                  ? "text-purple-400 hover:text-purple-300"
-                  : "text-purple-600 hover:text-purple-700"
-              }`}
-            >
-              <span className="truncate">{formatLinkDisplay(link)}</span>
-              <ExternalLink size={14} className="transition-transform group-hover/link:translate-x-0.5 group-hover/link:-translate-y-0.5" />
-            </a>
-            <span className={`text-xs ${
-              isDark ? "text-gray-500" : "text-gray-400"
-            }`}>
-              {date}
-            </span>
+              <div className="flex items-center gap-3 text-xs text-gray-700">
+                <span className="font-medium">{date}</span>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-
-      {/* Hover Effect Border */}
-      <div className="absolute inset-0 rounded-2xl border-2 border-transparent bg-gradient-to-r from-purple-500/20 via-blue-500/20 to-pink-500/20 opacity-0 transition-opacity duration-300 group-hover:opacity-100" 
-           style={{ mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)', maskComposite: 'xor' }} />
     </motion.div>
   );
 };
diff --git a/src/components/testimonials/TestimonialCarousel.tsx b/src/components/testimonials/TestimonialCarousel.tsx
index db76a2f6..2b23f7fb 100644
--- a/src/components/testimonials/TestimonialCarousel.tsx
+++ b/src/components/testimonials/TestimonialCarousel.tsx
@@ -7,7 +7,6 @@ import {
   CarouselPrevious,
   type CarouselApi,
 } from "../ui/carousel";
-import { Button } from "../ui/button";
 import TestimonialCard from "./TestimonialCard";
 import Autoplay from "embla-carousel-autoplay";
 import { motion } from "framer-motion";
@@ -15,31 +14,54 @@ import { useSafeColorMode } from "../../utils/useSafeColorMode";
 
 const baseTestimonials = [
   {
-    name: "Rashi Chouhan",
-    username: "RashiChouhan",
+    name: "Ethan Trang",
+    username: "EthanTrang",
     content:
-      "Valuable insights shared, productive discussions, and actionable outcomes. Looking forward to implementing the strategies discussed.! #TechCommunity #WomenInTech",
+      "The Recode Hive team are amazing to work with, very responsive. I'm a newbie to AI and they stepped us through the process",
     date: "May 18, 2024",
-    avatar: "/icons/adobe.png",
-    link: "https://topmate.io/sanjaykv",
+    avatar: "/icons/ethan.png",
+    gradient: "bg-pink-100",
+    borderColor: "border-pink-200",
   },
   {
-    name: "Namith",
-    username: "namith",
+    name: "Vivien Chen",
+    username: "VivienChen",
     content:
-      "Gave remarkable insights on parts i have to improve and gave me new opportunities . cheers~! #TechCommunity #Grateful",
+      "The tech talent in Recode Hive is unparalleled. We worked with consultants who work in companies like Palantir, OpenAI, Relevance AI and more",
     date: "April 21, 2023",
-    avatar: "/icons/google.png",
-    link: "https://topmate.io/sanjaykv",
+    avatar: "/icons/vivien.png",
+    gradient: "bg-purple-100",
+    borderColor: "border-purple-200",
   },
   {
-    name: "Rajdeep Chakraborty",
-    username: "RajdeepChakraborty",
+    name: "Daniel Han",
+    username: "DanielHan",
     content:
-      "I appreciate Sanjay sir's insights on open source and his suggestions for improving my GitHub profile. I'm excited to hear more and discuss open source further.! #OpenSource #TechCommunity",
+      "We were able to get our project scoped, matched and kicked off in one day.Our invoicing is now 10x faster, thanks to Recode Hive's automation.",
     date: "Oct 18, 2024",
-    avatar: "/icons/amazon.png",
-    link: "https://topmate.io/sanjaykv",
+    avatar: "/icons/daniel.png",
+    gradient: "bg-cyan-100",
+    borderColor: "border-cyan-200",
+  },
+  {
+    name: "Aryan Gupta",
+    username: "AryanGupta",
+    content:
+      "you're constantly inspiring me to get applying for jobs and help me to improve my resume for 90+ ats score and improve my LinkedIn profile. you provided me detailed document analysis of my resume and video for me",
+    date: "Sept 17, 2024",
+    avatar: "/icons/aryan.png",
+    gradient: "bg-pink-100",
+    borderColor: "border-pink-200",
+  },
+  {
+    name: "Donald Anyamba",
+    username: "DonaldAnyamba",
+    content:
+      "Pointing out that my contributions all points back to my personal projects is an eye opener, especially now that I want to start building towards open source.",
+    date: "May 4, 2026",
+    avatar: "/icons/donald.png",
+    gradient: "bg-purple-100",
+    borderColor: "border-purple-200",
   },
 ];
 
@@ -65,35 +87,37 @@ export function TestimonialCarousel() {
   }, [api]);
 
   return (
-    <div className="relative w-full py-20">
-      {/* Background Elements */}
-      <div className="absolute inset-0 overflow-hidden">
-        <div className="absolute top-20 right-10 h-64 w-64 rounded-full bg-gradient-to-br from-purple-400/10 to-pink-600/10 blur-3xl" />
-        <div className="absolute bottom-20 left-10 h-64 w-64 rounded-full bg-gradient-to-tr from-blue-400/10 to-cyan-600/10 blur-3xl" />
+    <div className="relative w-full py-20 overflow-hidden">
+      {/* Dotted Grid Background Pattern */}
+      <div
+        className="absolute inset-0 opacity-20 pointer-events-none"
+        style={{
+          backgroundImage: 'radial-gradient(circle, #d1d5db 1px, transparent 1px)',
+          backgroundSize: '2rem 2rem',
+        }}
+      />
+
+      {/* Animated Gradient Orbs */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute top-20 right-10 h-72 w-72 rounded-full bg-gradient-to-br from-pink-400/15 to-purple-400/10 blur-3xl animate-pulse" />
+        <div className="absolute bottom-20 left-10 h-80 w-80 rounded-full bg-gradient-to-tr from-cyan-400/15 to-blue-400/10 blur-3xl animate-pulse" style={{ animationDelay: '1s' }} />
+        <div className="absolute top-1/2 left-1/3 h-64 w-64 rounded-full bg-gradient-to-br from-purple-400/10 to-pink-300/10 blur-3xl animate-pulse" style={{ animationDelay: '2s' }} />
       </div>
 
-      <div className="relative mx-auto max-w-7xl px-4">
-        <motion.div 
+      <div className="relative mx-auto max-w-7xl px-4 z-10">
+        <motion.div
           initial={{ opacity: 0, y: 30 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.6 }}
           className="mb-16 text-center"
         >
-          <div className="mb-4">
-            <span className={`inline-block rounded-full px-4 py-2 text-sm font-medium ${
-              colorMode === "dark" 
-                ? "bg-purple-500/10 text-purple-400 border border-purple-500/20" 
-                : "bg-purple-50 text-purple-600 border border-purple-200"
+          <h2 className={`mb-6 text-5xl md:text-6xl font-bold leading-tight ${colorMode === "dark" ? "text-white" : "text-gray-900"
             }`}>
-              ⭐ Client Testimonials
-            </span>
-          </div>
-          <h2 className={`mb-6 text-5xl font-bold leading-tight ${
-            colorMode === "dark" ? "text-white" : "text-gray-900"
-          }`}>
-            Loved by <span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">Many Users</span>
+            Builders <span className="mx-3">❤️</span> <span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">Recode Hive</span>
           </h2>
-
+          <p className={`text-xl font-medium ${colorMode === "dark" ? "text-gray-300" : "text-gray-600"}`}>
+            Our builders go on to do incredible things from working at OpenAI to becoming AI engineers and founders.
+          </p>
         </motion.div>
 
         <motion.div
@@ -116,7 +140,7 @@ export function TestimonialCarousel() {
               }),
             ]}
           >
-            <CarouselContent className="my-8 -ml-2 md:-ml-4 flex items-stretch">
+            <CarouselContent className="my-12 -ml-2 md:-ml-4 flex items-stretch">
               {testimonials.map((testimonial, index) => (
                 <CarouselItem
                   key={index}
@@ -129,34 +153,31 @@ export function TestimonialCarousel() {
 
             {/* Navigation */}
             <div className="mt-12 flex items-center justify-center gap-6">
-              <CarouselPrevious className={`static translate-y-0 h-12 w-12 ${
-                colorMode === "dark" 
-                  ? "border-gray-700 bg-gray-800 hover:bg-gray-700" 
-                  : "border-gray-200 bg-white hover:bg-gray-50"
-              }`} />
-              
+              <CarouselPrevious className={`static translate-y-0 h-12 w-12 ${colorMode === "dark"
+                ? "border-gray-700 bg-gray-800 hover:bg-gray-700"
+                : "border-gray-200 bg-white hover:bg-gray-50"
+                }`} />
+
               {/* Dots Indicator */}
               <div className="flex gap-2">
                 {Array.from({ length: count }).map((_, index) => (
                   <button
                     key={index}
                     onClick={() => api?.scrollTo(index)}
-                    className={`h-3 w-3 rounded-full transition-all duration-300 ${
-                      current === index + 1
-                        ? "bg-gradient-to-r from-purple-600 to-pink-600 scale-125"
-                        : colorMode === "dark"
+                    className={`h-3 w-3 rounded-full transition-all duration-300 ${current === index + 1
+                      ? "bg-gradient-to-r from-purple-600 to-pink-600 scale-125"
+                      : colorMode === "dark"
                         ? "bg-gray-600 hover:bg-gray-500"
                         : "bg-gray-300 hover:bg-gray-400"
-                    }`}
+                      }`}
                   />
                 ))}
               </div>
-              
-              <CarouselNext className={`static translate-y-0 h-12 w-12 ${
-                colorMode === "dark" 
-                  ? "border-gray-700 bg-gray-800 hover:bg-gray-700" 
-                  : "border-gray-200 bg-white hover:bg-gray-50"
-              }`} />
+
+              <CarouselNext className={`static translate-y-0 h-12 w-12 ${colorMode === "dark"
+                ? "border-gray-700 bg-gray-800 hover:bg-gray-700"
+                : "border-gray-200 bg-white hover:bg-gray-50"
+                }`} />
             </div>
           </Carousel>
         </motion.div>
diff --git a/static/icons/daniel.png b/static/icons/daniel.png
new file mode 100644
index 00000000..16670633
Binary files /dev/null and b/static/icons/daniel.png differ
diff --git a/static/icons/ethan.png b/static/icons/ethan.png
new file mode 100644
index 00000000..1b1590b1
Binary files /dev/null and b/static/icons/ethan.png differ
diff --git a/static/icons/vivien.png b/static/icons/vivien.png
new file mode 100644
index 00000000..9b82cc29
Binary files /dev/null and b/static/icons/vivien.png differ