diff --git a/src/components/topmate/TopMateCard.tsx b/src/components/topmate/TopMateCard.tsx
index 1bc69696..772c1aca 100644
--- a/src/components/topmate/TopMateCard.tsx
+++ b/src/components/topmate/TopMateCard.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { ArrowUpRight, Clock } from 'lucide-react';
-import { useColorMode } from '@docusaurus/theme-common';
+import React from "react";
+import { motion } from "framer-motion";
+import { ArrowUpRight, Clock } from "lucide-react";
+import { useColorMode } from "@docusaurus/theme-common";
 
 interface TopMateCardProps {
   title: string;
@@ -9,6 +9,7 @@ interface TopMateCardProps {
   duration: string;
   profileImage: string;
   username: string;
+  setShowTopmate: (value: boolean) => void;
 }
 
 const TopMateCard: React.FC<TopMateCardProps> = ({
@@ -17,9 +18,10 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
   duration,
   profileImage,
   username,
+  setShowTopmate,
 }) => {
   const { colorMode } = useColorMode();
-  const isDark = colorMode === 'dark';
+  const isDark = colorMode === "dark";
 
   return (
     <motion.div
@@ -27,7 +29,7 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.5 }}
       className={`relative w-full max-w-md mx-auto rounded-3xl shadow-2xl overflow-hidden hover:shadow-3xl transition-all duration-300 transform hover:-translate-y-1 ${
-        isDark ? 'bg-[#1a1a1a] text-white' : 'bg-white text-black'
+        isDark ? "bg-[#1a1a1a] text-white" : "bg-white text-black"
       }`}
     >
       {/* Decorative Arrows */}
@@ -50,28 +52,47 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
         {/* Header */}
         <div className="flex items-center justify-between mb-4">
           <div className="flex items-center gap-2">
-            <span className={`text-sm font-medium ${isDark ? 'text-gray-300' : 'text-gray-600'}`}>
+            <span
+              className={`text-sm font-medium ${
+                isDark ? "text-gray-300" : "text-gray-600"
+              }`}
+            >
               1:1 CALL
             </span>
-            <div className={`flex items-center gap-1 ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>
+            <div
+              className={`flex items-center gap-1 ${
+                isDark ? "text-gray-400" : "text-gray-500"
+              }`}
+            >
               <Clock size={16} />
               <span className="text-sm">{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'}`}
+            className={`text-xl font-semibold ${
+              isDark
+                ? "text-gray-500 hover:text-gray-300"
+                : "text-gray-400 hover:text-gray-600"
+            }`}
+            onClick={() => setShowTopmate(false)}
           >
             <span className="sr-only">Close</span>×
           </button>
         </div>
 
         {/* Title */}
-        <h2 className={`text-2xl font-bold mb-4 ${isDark ? 'text-white' : 'text-gray-900'}`}>
+        <h2
+          className={`text-2xl font-bold mb-4 ${
+            isDark ? "text-white" : "text-gray-900"
+          }`}
+        >
           {title}
         </h2>
 
         {/* Description */}
-        <p className={`${isDark ? 'text-gray-300' : 'text-gray-600'} mb-6`}>{description}</p>
+        <p className={`${isDark ? "text-gray-300" : "text-gray-600"} mb-6`}>
+          {description}
+        </p>
 
         {/* Profile Section */}
         <div className="flex items-center justify-between flex-wrap md:flex-nowrap gap-y-3">
@@ -82,7 +103,11 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
               className="w-12 h-12 rounded-full object-cover border-2 border-purple-200"
             />
             <div className="flex flex-col">
-              <span className={`text-sm ${isDark ? 'text-gray-300' : 'text-gray-600'}`}>
+              <span
+                className={`text-sm ${
+                  isDark ? "text-gray-300" : "text-gray-600"
+                }`}
+              >
                 Book a slot at
               </span>
               <a
@@ -106,7 +131,13 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
               />
             </div>
             {/* Theme-aware text to ensure readability on dark backgrounds */}
-            <span className={`text-sm font-semibold shrink-0 ${isDark ? 'text-gray-200' : 'text-gray-700'}`}>topmate</span>
+            <span
+              className={`text-sm font-semibold shrink-0 ${
+                isDark ? "text-gray-200" : "text-gray-700"
+              }`}
+            >
+              topmate
+            </span>
           </div>
         </div>
       </div>
diff --git a/src/components/topmate/TopMateSection.tsx b/src/components/topmate/TopMateSection.tsx
index eabc0a71..8a42e1ba 100644
--- a/src/components/topmate/TopMateSection.tsx
+++ b/src/components/topmate/TopMateSection.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import TopMateCard from './TopMateCard';
-import { useColorMode } from '@docusaurus/theme-common';
+import React from "react";
+import TopMateCard from "./TopMateCard";
+import { useColorMode } from "@docusaurus/theme-common";
 
-const TopMateSection = () => {
+const TopMateSection = ({ setShowTopmate }) => {
   const { colorMode } = useColorMode(); // Get current theme: 'light' or 'dark'
 
   const profileData = {
@@ -10,7 +10,7 @@ const TopMateSection = () => {
     description: "Book a slot, Free for Hive Community Members",
     duration: "30 mins",
     profileImage: "/sanjay.png",
-    username: "sanjaykv"
+    username: "sanjaykv",
   };
 
   return (
@@ -19,14 +19,14 @@ const TopMateSection = () => {
         <div className="mx-auto text-center mb-16">
           <h1
             className={`text-4xl font-bold mb-4 ${
-              colorMode === 'dark' ? 'text-white' : 'text-gray-900'
+              colorMode === "dark" ? "text-white" : "text-gray-900"
             }`}
           >
             Book a Session
           </h1>
           <p
             className={`text-lg ${
-              colorMode === 'dark' ? 'text-gray-300' : 'text-gray-600'
+              colorMode === "dark" ? "text-gray-300" : "text-gray-600"
             }`}
           >
             Get personalized guidance and feedback through one-on-one sessions
@@ -34,7 +34,7 @@ const TopMateSection = () => {
         </div>
 
         <div>
-          <TopMateCard {...profileData} />
+          <TopMateCard {...profileData} setShowTopmate={setShowTopmate} />
         </div>
       </div>
     </div>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index fab42a62..12665676 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
 import type { ReactNode } from "react";
@@ -18,23 +18,25 @@ import FAQs from "../components/faqs/faqs";
 
 export default function Home(): ReactNode {
   const { siteConfig } = useDocusaurusContext();
-  
+  const [showTopmate, setShowTopmate] = useState(true);
+
   useEffect(() => {
     // Add page transition animation on mount
-    const mainElement = document.querySelector('main');
+    const mainElement = document.querySelector("main");
     if (mainElement) {
-      mainElement.style.opacity = '0';
-      mainElement.style.transform = 'translateY(20px)';
-      mainElement.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out';
-      
+      mainElement.style.opacity = "0";
+      mainElement.style.transform = "translateY(20px)";
+      mainElement.style.transition =
+        "opacity 0.6s ease-out, transform 0.6s ease-out";
+
       // Trigger animation after a brief delay
       setTimeout(() => {
-        mainElement.style.opacity = '1';
-        mainElement.style.transform = 'translateY(0)';
+        mainElement.style.opacity = "1";
+        mainElement.style.transform = "translateY(0)";
       }, 100);
     }
   }, []);
-  
+
   return (
     <Layout
       title={`${siteConfig.title}`}
@@ -49,9 +51,21 @@ export default function Home(): ReactNode {
       </Head>
 
       {/* ✅ Wrap in solid background to fix light mode */}
-      <div className="transition-colors duration-300" style={{ backgroundColor: "var(--ifm-background-color)", color: "var(--ifm-font-color-base)" }}>
-      <main className="transition-colors duration-300 page-enter" style={{ backgroundColor: "var(--ifm-background-color)", color: "var(--ifm-font-color-base)" }}>
-      <div className="m-4">
+      <div
+        className="transition-colors duration-300"
+        style={{
+          backgroundColor: "var(--ifm-background-color)",
+          color: "var(--ifm-font-color-base)",
+        }}
+      >
+        <main
+          className="transition-colors duration-300 page-enter"
+          style={{
+            backgroundColor: "var(--ifm-background-color)",
+            color: "var(--ifm-font-color-base)",
+          }}
+        >
+          <div className="m-4">
             <Header />
           </div>
 
@@ -75,10 +89,12 @@ export default function Home(): ReactNode {
           </div>
 
           <div className="m-4 grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-8">
-            <div className="col-span-1">
-              <TopMateSection />
-            </div>
-            <div className="col-span-2">
+            {showTopmate && (
+              <div className="col-span-1">
+                <TopMateSection setShowTopmate={setShowTopmate} />
+              </div>
+            )}
+            <div className={showTopmate ? `col-span-2` : `col-span-3`}>
               <TestimonialCarousel />
             </div>
           </div>