diff --git a/src/components/testimonials/TestimonialCard.tsx b/src/components/testimonials/TestimonialCard.tsx
index 7c378a85..d9e5be27 100644
--- a/src/components/testimonials/TestimonialCard.tsx
+++ b/src/components/testimonials/TestimonialCard.tsx
@@ -2,6 +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;
@@ -22,92 +23,120 @@ const TestimonialCard: React.FC<TestimonialCardProps> = ({
 }) => {
   const { colorMode, isDark } = useSafeColorMode();
 
-  // Function to format the link display
   const formatLinkDisplay = (url: string) => {
     try {
       const urlObj = new URL(url);
       return urlObj.hostname + urlObj.pathname;
     } catch {
-      // If URL parsing fails, return the original link
       return url;
     }
   };
 
   return (
     <motion.div
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      exit={{ opacity: 0 }}
-      className={`flex h-[250px] flex-col justify-between rounded-2xl p-6 shadow-lg transition-shadow duration-300 hover:shadow-xl ${
-        isDark ? "bg-[#1a1a1a] text-white" : "bg-white text-gray-900"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -20 }}
+      whileHover={{ y: -5 }}
+      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"
       }`}
     >
-      {/* Header with Avatar and Name */}
-      <div className="flex items-center gap-4">
-        <Avatar className="h-24 w-24 rounded-full">
-          <AvatarImage src={avatar} className="object-contain" />
-          <AvatarFallback>CN</AvatarFallback>
-        </Avatar>
-        <div>
-          <h3
-            className={`text-lg font-semibold ${isDark ? "text-white" : "text-gray-900"}`}
-          >
-            {name}
-          </h3>
-          <p
-            className={`text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`}
-          >
-            @{username}
+      {/* 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>
+
+      <div className="relative flex h-full flex-col p-6">
+        {/* Header */}
+        <div className="mb-6 flex items-center gap-4">
+          <div className="relative">
+            <Avatar className="h-16 w-16 border-2 border-gradient-to-r from-purple-500 to-pink-500">
+              <AvatarImage src={avatar} className="object-contain" />
+              <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-1 -right-1 h-5 w-5 rounded-full bg-green-500 border-2 border-white" />
+          </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>
+
+        {/* Content */}
+        <div className="flex-1">
+          <p className={`text-base leading-relaxed ${
+            isDark ? "text-gray-300" : "text-gray-700"
+          }`}>
+            {content.replace(/#\w+/g, '').trim()}
           </p>
         </div>
-      </div>
 
-      {/* Content */}
-      <p
-        className={`my-4 line-clamp-3 flex-grow ${isDark ? "text-gray-300" : "text-gray-700"}`}
-      >
-        {content}
-      </p>
+        {/* 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>
 
-      {/* Footer with Hashtags and Date */}
-      <div
-        className={`flex flex-col gap-2 border-t pt-2 text-sm ${
-          isDark ? "border-gray-700" : "border-gray-100"
-        }`}
-      >
-        {/* Hashtags */}
-        <div className="flex flex-wrap gap-2">
-          {content.match(/#\w+/g)?.map((hashtag, index) => (
-            <span
-              key={index}
-              className="cursor-pointer text-blue-500 hover:text-blue-600"
+          {/* 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"
+              }`}
             >
-              {hashtag}
+              <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>
-
-        {/* Link and Date Row */}
-        <div className="flex items-center justify-between">
-          <a
-            href={link}
-            target="_blank"
-            rel="noopener noreferrer"
-            className={`cursor-pointer hover:underline ${
-              isDark
-                ? "text-blue-400 hover:text-blue-300"
-                : "text-blue-600 hover:text-blue-700"
-            }`}
-          >
-            {formatLinkDisplay(link)}
-          </a>
-          <span className={isDark ? "text-gray-500" : "text-gray-400"}>
-            {date}
-          </span>
+          </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>
   );
 };
 
-export default TestimonialCard;
+export default TestimonialCard;
\ No newline at end of file
diff --git a/src/components/testimonials/TestimonialCarousel.tsx b/src/components/testimonials/TestimonialCarousel.tsx
index 01acbb0d..db76a2f6 100644
--- a/src/components/testimonials/TestimonialCarousel.tsx
+++ b/src/components/testimonials/TestimonialCarousel.tsx
@@ -10,9 +10,10 @@ import {
 import { Button } from "../ui/button";
 import TestimonialCard from "./TestimonialCard";
 import Autoplay from "embla-carousel-autoplay";
+import { motion } from "framer-motion";
+import { useSafeColorMode } from "../../utils/useSafeColorMode";
 
-// Sample testimonial data
-const testimonials = [
+const baseTestimonials = [
   {
     name: "Rashi Chouhan",
     username: "RashiChouhan",
@@ -42,10 +43,13 @@ const testimonials = [
   },
 ];
 
+const testimonials = [...baseTestimonials, ...baseTestimonials];
+
 export function TestimonialCarousel() {
   const [api, setApi] = useState<CarouselApi>();
   const [current, setCurrent] = useState(0);
   const [count, setCount] = useState(0);
+  const { colorMode } = useSafeColorMode();
 
   useEffect(() => {
     if (!api) {
@@ -61,52 +65,102 @@ export function TestimonialCarousel() {
   }, [api]);
 
   return (
-    <div className="w-full">
-      <div className="mb-10 text-center">
-        <h2 className="mb-2 text-3xl font-bold">Loved by Many Users</h2>
-        <div className="mx-auto h-1 w-32 rounded-full bg-blue-500"></div>
+    <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>
 
-      <Carousel
-        setApi={setApi}
-        className="w-full"
-        opts={{
-          align: "start",
-          loop: true,
-        }}
-        plugins={[
-          Autoplay({
-            delay: 4000,
-          }),
-        ]}
-      >
-        <CarouselContent className="my-16 -ml-2 md:-ml-4">
-          {testimonials.map((testimonial, index) => (
-            <CarouselItem
-              key={index}
-              className="h-full pl-2 md:basis-1/2 md:pl-4"
-            >
-              <TestimonialCard {...testimonial} />
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-
-        <div className="mt-8 flex items-center justify-center gap-2">
-          <CarouselPrevious className="static translate-y-0" />
-          <div className="flex gap-2">
-            {Array.from({ length: count }).map((_, index) => (
-              <Button
-                key={index}
-                variant={current === index + 1 ? "default" : "outline"}
-                size="icon"
-                className="h-2 w-2 rounded-full p-0"
-                onClick={() => api?.scrollTo(index)}
-              />
-            ))}
+      <div className="relative mx-auto max-w-7xl px-4">
+        <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"
+            }`}>
+              ⭐ Client Testimonials
+            </span>
           </div>
-          <CarouselNext className="static translate-y-0" />
-        </div>
-      </Carousel>
+          <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>
+          </h2>
+
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 40 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.2 }}
+        >
+          <Carousel
+            setApi={setApi}
+            className="w-full"
+            opts={{
+              align: "center",
+              loop: true,
+            }}
+            plugins={[
+              Autoplay({
+                delay: 2500,
+                stopOnInteraction: false,
+                stopOnMouseEnter: false,
+              }),
+            ]}
+          >
+            <CarouselContent className="my-8 -ml-2 md:-ml-4 flex items-stretch">
+              {testimonials.map((testimonial, index) => (
+                <CarouselItem
+                  key={index}
+                  className="flex pl-2 md:basis-1/2 lg:basis-1/3 md:pl-4"
+                >
+                  <TestimonialCard {...testimonial} />
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+
+            {/* 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"
+              }`} />
+              
+              {/* 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"
+                        ? "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"
+              }`} />
+            </div>
+          </Carousel>
+        </motion.div>
+      </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/topmate/TopMateCard.tsx b/src/components/topmate/TopMateCard.tsx
index faba360b..be68d0f6 100644
--- a/src/components/topmate/TopMateCard.tsx
+++ b/src/components/topmate/TopMateCard.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { motion } from "framer-motion";
-import { ArrowUpRight, Clock } from "lucide-react";
+import { ArrowUpRight, Clock, Calendar, Star } from "lucide-react";
 import { useSafeColorMode } from "../../utils/useSafeColorMode";
 
 interface TopMateCardProps {
@@ -24,120 +24,131 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
 
   return (
     <motion.div
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.5 }}
-      className={`hover:shadow-3xl relative mx-auto w-full max-w-md transform overflow-hidden rounded-3xl shadow-2xl transition-all duration-300 hover:-translate-y-1 ${isDark ? "bg-[#1a1a1a] text-white" : "bg-white text-black"
-        }`}
+      initial={{ opacity: 0, y: 30, scale: 0.95 }}
+      animate={{ opacity: 1, y: 0, scale: 1 }}
+      transition={{ duration: 0.6, type: "spring", stiffness: 100 }}
+      className={`group relative mx-auto w-full max-w-lg overflow-hidden rounded-2xl border backdrop-blur-sm transition-all duration-500 hover:scale-[1.02] hover:shadow-2xl ${
+        isDark 
+          ? "border-gray-700/50 bg-gray-900/80 shadow-xl" 
+          : "border-gray-200/50 bg-white/80 shadow-lg"
+      }`}
     >
-      {/* Decorative Arrows */}
-      <div className="absolute -top-4 -left-4 flex gap-2">
-        {[...Array(3)].map((_, i) => (
-          <motion.div
-            key={i}
-            initial={{ opacity: 0, x: -10 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ delay: i * 0.1 }}
-            className="text-purple-500"
-          >
-            <ArrowUpRight size={24} className="rotate-45 transform" />
-          </motion.div>
-        ))}
-      </div>
+      {/* Gradient Background */}
+      <div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 via-purple-500/5 to-pink-500/5" />
+      
+      {/* Floating Elements */}
+      <div className="absolute -top-2 -right-2 h-20 w-20 rounded-full bg-gradient-to-br from-blue-400/20 to-purple-600/20 blur-xl" />
+      <div className="absolute -bottom-2 -left-2 h-16 w-16 rounded-full bg-gradient-to-tr from-green-400/20 to-blue-600/20 blur-xl" />
 
-      {/* Card Content */}
-      <div className="p-6">
-        {/* Header */}
-        <div className="mb-4 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <span
-              className={`text-sm font-medium ${isDark ? "text-gray-300" : "text-gray-600"
-                }`}
-            >
-              1:1 CALL
+      <div className="relative p-8">
+        {/* Header Badge */}
+        <div className="mb-6 flex items-center justify-between">
+          <div className={`flex items-center gap-3 rounded-full px-4 py-2 ${
+            isDark ? "bg-blue-500/10 border border-blue-500/20" : "bg-blue-50 border border-blue-200"
+          }`}>
+            <Calendar size={16} className="text-blue-500" />
+            <span className={`text-sm font-medium ${
+              isDark ? "text-blue-400" : "text-blue-600"
+            }`}>
+              1:1 MENTORSHIP
             </span>
-            <div
-              className={`flex items-center gap-1 ${isDark ? "text-gray-400" : "text-gray-500"
-                }`}
-            >
-              <Clock size={16} />
-              <span className="text-sm">{duration}</span>
+            <div className="flex items-center gap-1 text-amber-500">
+              <Clock size={14} />
+              <span className="text-xs font-medium">{duration}</span>
             </div>
           </div>
           <button
-            className={`text-xl font-semibold ${isDark
-                ? "text-gray-500 hover:text-gray-300"
-                : "text-gray-400 hover:text-gray-600"
-              }`}
             onClick={() => setShowTopmate(false)}
+            className={`rounded-full p-2 transition-colors ${
+              isDark 
+                ? "hover:bg-gray-700 text-gray-400 hover:text-gray-200" 
+                : "hover:bg-gray-100 text-gray-500 hover:text-gray-700"
+            }`}
           >
-            <span className="sr-only">Close</span>×
+            <ArrowUpRight size={18} className="rotate-45" />
           </button>
         </div>
 
         {/* Title */}
-        <h2
-          className={`mb-4 text-2xl font-bold ${isDark ? "text-white" : "text-gray-900"
-            }`}
-        >
+        <h2 className={`mb-4 text-3xl font-bold leading-tight ${
+          isDark ? "text-white" : "text-gray-900"
+        }`}>
           {title}
         </h2>
 
         {/* Description */}
-        <p className={`${isDark ? "text-gray-300" : "text-gray-600"} mb-6`}>
+        <p className={`mb-8 text-lg leading-relaxed ${
+          isDark ? "text-gray-300" : "text-gray-600"
+        }`}>
           {description}
         </p>
 
         {/* Profile Section */}
-        <div className="flex flex-wrap items-center justify-between gap-y-3 md:flex-nowrap">
-          <div className="flex min-w-0 items-center gap-3">
-            <img
-              src={profileImage}
-              alt="Profile"
-              className="h-12 w-12 rounded-full border-2 border-purple-200 object-cover"
-            />
-            <div className="flex flex-col">
-              <span
-                className={`text-sm ${isDark ? "text-gray-300" : "text-gray-600"
-                  }`}
-              >
-                Book a slot at
-              </span>
-              <a
-                href={`https://topmate.io/${username}`}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex items-center gap-1 truncate font-semibold text-purple-500 transition-colors hover:text-purple-600"
-              >
-                <span className="truncate">topmate.io/{username}</span>
-                <ArrowUpRight size={16} />
-              </a>
+        <div className={`rounded-xl border p-4 ${
+          isDark ? "border-gray-700/50 bg-gray-800/30" : "border-gray-200/50 bg-gray-50/50"
+        }`}>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-4">
+              <div className="relative">
+                <img
+                  src={profileImage}
+                  alt="Profile"
+                  className="h-14 w-14 rounded-full border-2 border-gradient-to-r from-blue-500 to-purple-500 object-cover"
+                />
+                <div className="absolute -bottom-1 -right-1 rounded-full bg-green-500 p-1">
+                  <div className="h-2 w-2 rounded-full bg-white" />
+                </div>
+              </div>
+              <div>
+                <p className={`text-sm font-medium ${
+                  isDark ? "text-gray-400" : "text-gray-500"
+                }`}>
+                  Book your session at
+                </p>
+                <a
+                  href={`https://topmate.io/${username}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="group/link flex items-center gap-2 font-semibold text-blue-500 transition-colors hover:text-blue-600"
+                >
+                  <span>topmate.io/{username}</span>
+                  <ArrowUpRight size={16} className="transition-transform group-hover/link:translate-x-0.5 group-hover/link:-translate-y-0.5" />
+                </a>
+              </div>
             </div>
-          </div>
-          <div className="flex shrink-0 items-center gap-2">
-            {/* Show only the circular icon part of the Topmate logo */}
-            <div className="h-4 w-4 flex-shrink-0 overflow-hidden rounded-sm">
-              <img
-                src="/icons/topmate.png"
-                alt="Topmate icon"
-                className="h-4 w-auto object-cover object-left opacity-90"
-              />
+            
+            {/* Rating */}
+            <div className="flex flex-col items-end">
+              <div className="flex items-center gap-1">
+                {[...Array(5)].map((_, i) => (
+                  <Star key={i} size={14} className="fill-amber-400 text-amber-400" />
+                ))}
+              </div>
+              <span className={`text-xs ${
+                isDark ? "text-gray-400" : "text-gray-500"
+              }`}>
+                5.0 rating
+              </span>
             </div>
-            {/* Theme-aware text to ensure readability on dark backgrounds */}
-            <span
-              className={`shrink-0 text-sm font-semibold ${isDark ? "text-gray-200" : "text-gray-700"
-                }`}
-            >
-              topmate
-            </span>
           </div>
         </div>
-      </div>
 
-      {/* Gradient Border Effect */}
-      <div className="absolute inset-0 -z-10 rounded-3xl border-2 border-transparent bg-gradient-to-br from-purple-500/20 to-pink-500/20" />
+        {/* CTA Button */}
+        <motion.a
+          href={`https://topmate.io/${username}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          whileHover={{ scale: 1.02 }}
+          whileTap={{ scale: 0.98 }}
+          className="mt-6 flex w-full items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-blue-600 to-purple-600 px-6 py-4 font-semibold text-white shadow-lg transition-all duration-300 hover:shadow-xl hover:from-blue-700 hover:to-purple-700"
+        >
+          <Calendar size={18} />
+          <span>Schedule Now</span>
+          <ArrowUpRight size={18} />
+        </motion.a>
+      </div>
     </motion.div>
   );
 };
 
-export default TopMateCard;
+export default TopMateCard;
\ No newline at end of file
diff --git a/src/components/topmate/TopMateSection.tsx b/src/components/topmate/TopMateSection.tsx
index 91d48fce..4502bc7e 100644
--- a/src/components/topmate/TopMateSection.tsx
+++ b/src/components/topmate/TopMateSection.tsx
@@ -1,9 +1,10 @@
 import React from "react";
 import TopMateCard from "./TopMateCard";
 import { useSafeColorMode } from "../../utils/useSafeColorMode";
+import { motion } from "framer-motion";
 
 const TopMateSection = ({ setShowTopmate }) => {
-  const { colorMode } = useSafeColorMode(); // Get current theme: 'light' or 'dark'
+  const { colorMode } = useSafeColorMode();
 
   const profileData = {
     title: "1:1 Mentorship Call",
@@ -14,28 +15,49 @@ const TopMateSection = ({ setShowTopmate }) => {
   };
 
   return (
-    <div className="px-4">
-      <div className="mx-auto">
-        <div className="mx-auto mb-16 text-center">
-          <h1
-            className={`mb-4 text-4xl font-bold ${
-              colorMode === "dark" ? "text-white" : "text-gray-900"
-            }`}
-          >
-            Book a Session
+    <div className="relative px-4 pt-0 pb-20">
+      {/* Background Elements */}
+      <div className="absolute inset-0 overflow-hidden">
+        <div className="absolute -top-40 -right-40 h-80 w-80 rounded-full bg-gradient-to-br from-blue-400/10 to-purple-600/10 blur-3xl" />
+        <div className="absolute -bottom-40 -left-40 h-80 w-80 rounded-full bg-gradient-to-tr from-green-400/10 to-blue-600/10 blur-3xl" />
+      </div>
+      
+      <div className="relative mx-auto max-w-6xl">
+        <motion.div 
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className="mx-auto 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-blue-500/10 text-blue-400 border border-blue-500/20" 
+                : "bg-blue-50 text-blue-600 border border-blue-200"
+            }`}>
+              ✨ Personal Mentorship
+            </span>
+          </div>
+          <h1 className={`mb-6 text-5xl font-bold leading-tight ${
+            colorMode === "dark" ? "text-white" : "text-gray-900"
+          }`}>
+            Book a <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">Session</span>
           </h1>
-          <p
-            className={`text-lg ${
-              colorMode === "dark" ? "text-gray-300" : "text-gray-600"
-            }`}
-          >
-            Get personalized guidance and feedback through one-on-one sessions
+          <p className={`mx-auto max-w-2xl text-xl leading-relaxed ${
+            colorMode === "dark" ? "text-gray-300" : "text-gray-600"
+          }`}>
+            Get personalized guidance and feedback through one-on-one sessions with industry experts
           </p>
-        </div>
+        </motion.div>
 
-        <div>
+        <motion.div
+          initial={{ opacity: 0, y: 40 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.2 }}
+          className="flex justify-center"
+        >
           <TopMateCard {...profileData} setShowTopmate={setShowTopmate} />
-        </div>
+        </motion.div>
       </div>
     </div>
   );
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 2a8a456d..e3368cbf 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -87,13 +87,13 @@ export default function Home(): ReactNode {
             <OurProjects />
           </div>
 
-          <div className="m-4 grid grid-cols-1 gap-4 md:grid-cols-3 md:gap-8">
+          <div className="m-4 grid grid-cols-1 gap-4 lg:grid-cols-3 lg:gap-8 items-start">
             {showTopmate && (
-              <div className="col-span-1">
+              <div className="lg:col-span-1">
                 <TopMateSection setShowTopmate={setShowTopmate} />
               </div>
             )}
-            <div className={showTopmate ? `col-span-2` : `col-span-3`}>
+            <div className={showTopmate ? `lg:col-span-2` : `lg:col-span-3`}>
               <TestimonialCarousel />
             </div>
           </div>