diff --git a/src/app/page.tsx b/src/app/page.tsx
index 884cfef..7fbb002 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -24,7 +24,7 @@ export default function Home() {
         {/* <div className=" bg-gradient-to-b bg-blackTheme from-blackTheme via-redTheme  to-blackTheme to-95%">
           <PreviousEdition />
         </div> */}
-        <div className="bg-blackTheme mb-[100vh] h-fit ">
+        <div className="bg-blackTheme mb-[100vh] h-fit mt-14">
           <h1 className="md:text-8xl text-4xl text-center font-black text-whiteTheme px-10">
             The Team
           </h1>
diff --git a/src/components/common/Team-Section.tsx b/src/components/common/Team-Section.tsx
index 65b6e8f..4ed56c9 100644
--- a/src/components/common/Team-Section.tsx
+++ b/src/components/common/Team-Section.tsx
@@ -1,4 +1,3 @@
-import CardHoverEffect from "@/components/edil-ozi/card-hover-effect";
 import { tedxsjecAssetsPrefix } from "@/lib/utils";
 import TeamCard from "./TeamCard";
 
@@ -63,8 +62,6 @@ const team = [
 const Team = () => {
   return (
     <div className="z-10 md:px-10 py-20 h-full  flex items-center justify-center">
-      {/* <CardHoverEffect members={team} /> */}
-
       <TeamCard members={team} />
     </div>
   );
diff --git a/src/components/common/TeamCard.tsx b/src/components/common/TeamCard.tsx
index c796990..cc14085 100644
--- a/src/components/common/TeamCard.tsx
+++ b/src/components/common/TeamCard.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import Image from "next/image";
 
 type Member = {
   title: string;
@@ -14,22 +15,27 @@ type Props = {
 const TeamCard: React.FC<Props> = ({ members }) => {
   return (
     <>
-      <div className="grid lg:grid-cols-2 xl:grid-cols-3  gap-x-14 gap-y-8 items-center justify-items-center md:px-8 md:pl-16 w-full">
+      <div className="grid lg:grid-cols-2 xl:grid-cols-3 gap-x-14 gap-y-8 items-center justify-items-center md:px-8 md:pl-16 w-full">
         {members.map(({ name, title, url }) => (
           <div
             key={url}
-            className="relative rounded-2xl md:h-[230px] md:w-[350px] h-[250px] w-[250px] my-4 bg-cover text-center flex content-center items-end bg-center bg-no-repeat text-white saturate-0 hover:saturate-100 group transition-all ease-in-out duration-500 hover:bg-scale-105"
-            style={{ backgroundImage: `url(${url})`, backgroundSize: "100%" }}
-            onMouseEnter={(e) =>
-              (e.currentTarget.style.backgroundSize = "105%")
-            }
-            onMouseLeave={(e) =>
-              (e.currentTarget.style.backgroundSize = "100%")
-            }
+            className="relative rounded-2xl md:h-[230px] md:w-[350px] h-[250px] w-[250px] my-4 bg-cover text-center flex content-center items-end bg-center text-white sm:saturate-0 hover:saturate-100 saturate-100 group transition-all ease-in-out duration-500 overflow-hidden"
           >
+            {/* Image as background */}
+            <div className="absolute inset-0 rounded-xl">
+              <Image
+                src={url}
+                alt={name}
+                fill
+                className="object-cover rounded-2xl transition-transform duration-500 group-hover:scale-105"
+              />
+            </div>
+
+            {/* Gradient overlay */}
             <div className="absolute inset-0 bg-gradient-to-tl from-redTheme from-15% via-transparent opacity-0 group-hover:opacity-70 transition-opacity duration-300 rounded-2xl"></div>
 
-            <div className="relative w-full py-6 bg-gradient-to-t from-blackTheme group-hover:from rounded-2xl transition duration-500">
+            {/* Text content */}
+            <div className="relative w-full py-6 bg-gradient-to-t from-blackTheme group-hover:from-blackTheme rounded-2xl transition duration-500">
               <h1 className="md:text-2xl text-lg font-black">{name}</h1>
               <h2 className="font-bold">{title}</h2>
             </div>
diff --git a/src/components/edil-ozi/card-hover-effect.tsx b/src/components/edil-ozi/card-hover-effect.tsx
deleted file mode 100644
index 290f896..0000000
--- a/src/components/edil-ozi/card-hover-effect.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { FC, useState } from "react";
-
-import { cn } from "@/lib/utils";
-import { AnimatePresence, motion } from "framer-motion";
-import Image from "next/image";
-
-interface Props {
-  members: { title: string; name: string; id: number; url: string }[];
-  wrapperClasses?: string;
-  itemClasses?: string;
-}
-
-const Index: FC<Props> = ({ members, itemClasses, wrapperClasses }) => {
-  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);
-
-  return (
-    <div
-      className={cn(
-        "grid lg:grid-cols-4 sm:grid-cols-2 space-x-4 min-h-fit",
-        itemClasses
-      )}
-    >
-      {members.map(({ name, title, url }, idx) => (
-        <div
-          key={idx}
-          className={cn(
-            "relative flex flex-col h-fit max-h-min items-center gap-3 p-4",
-            itemClasses
-          )}
-          onMouseEnter={() => setHoveredIdx(idx)}
-          onMouseLeave={() => setHoveredIdx(null)}
-        >
-          <AnimatePresence>
-            {hoveredIdx === idx && (
-              <motion.span
-                className={cn(
-                  "absolute inset-0 z-0 block h-full w-full  bg-redTheme bg-opacity-80",
-                  wrapperClasses
-                )}
-                layoutId="cardHoverEffect"
-                initial={{ opacity: 0 }}
-                animate={{
-                  opacity: 0.8,
-                  transition: { duration: 0.1 },
-                }}
-                exit={{
-                  opacity: 0,
-                  transition: { duration: 0.1, delay: 0.2 },
-                }}
-              >
-                {/* <Image
-                  src={
-                    "https://tedx-sjec.github.io/website-assets/logo/ActualLogo.PNG"
-                  }
-                  alt="logo"
-                  height={70}
-                  width={70}
-                  className="fixed px-4 right-0 items-center"
-                /> */}
-              </motion.span>
-            )}
-          </AnimatePresence>
-          <div className="z-[1] w-fit h-min space-y-2 flex flex-col md:items-start items-center">
-            <Image
-              src={url}
-              alt={name}
-              height={250}
-              width={250}
-              className="object-cover w-fit md:h-fit h-1/2"
-            />
-            <h1 className="font-black text-xl text-blackTheme">{name}</h1>
-            <p className="text-blackTheme ">{title}</p>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};
-export default Index;