diff --git a/app/components/TeamCard.jsx b/app/components/TeamCard.jsx
new file mode 100644
index 0000000..49afead
--- /dev/null
+++ b/app/components/TeamCard.jsx
@@ -0,0 +1,26 @@
+import React from "react";
+import Image from "next/image";
+import { FaXTwitter } from "react-icons/fa6";
+import { FaGithub, FaLinkedin ,FaInstagram  } from "react-icons/fa";
+export const TeamCard = (props) => {
+  return (
+   <>
+    <div className="max-w-sm rounded-[1.2rem] overflow-hidden shadow-lg border-[#0077B6] border-4 resize-none w-55 dark:bg-gray-800">
+    <Image className="inline-block rounded-[2rem] p-3 " src={props.images} alt="person" height={150}  effect="blur"/>
+    <div className="px-6">
+    <div className="font-bold text-xl">{props.name}</div>
+    <p className="text-gray-700 text-base dark:text-gray-100">
+     {props.role}<br/>
+     {props.stack}
+    </p>
+  </div> 
+  <div className="px-6 pt-4 pb-2 flex justify-center gap-4">
+  <div className=" bg-white-200 text-sm font-semibold text-gray-700 mr-2 mb-2 "><a href={props.github} className="text-gray-600 dark:text-white transition-colors duration-300 hover:text-black"><FaGithub size={20}></FaGithub></a></div>
+    <div className=" bg-white-200 text-sm font-semibold text-gray-700 mr-2 mb-2"><a href={props.linkdin} className="text-gray-600 dark:text-white transition-colors duration-300 hover:text-black"><FaLinkedin size={20}></FaLinkedin></a></div>
+    <div className=" bg-white-200 text-sm font-semibold text-gray-700 mr-2 mb-2"><a href={props.twiter} className="text-gray-600 dark:text-white transition-colors duration-300 hover:text-black"><FaXTwitter  size={20}></FaXTwitter ></a></div>
+    <div className=" bg-white-200 text-sm font-semibold text-gray-700 mr-2 mb-2"><a href={props.instragram} className="text-gray-600 dark:text-white transition-colors duration-300 hover:text-black"><FaInstagram  size={20}></FaInstagram ></a></div>
+  </div>
+</div>
+</>
+  );
+};
\ No newline at end of file
diff --git a/app/components/navbar.tsx b/app/components/navbar.tsx
index d91662b..d22f3ec 100644
--- a/app/components/navbar.tsx
+++ b/app/components/navbar.tsx
@@ -16,7 +16,7 @@ function Navbar() {
     <nav className="fixed top-0 left-0 w-full z-50">
       <div className="mx-auto w-[1152px] h-[76px] flex justify-between items-center px-6 bg-white/30 dark:bg-white/10 backdrop-blur-md rounded-b-xl shadow-md border border-b-gray-200 dark:border-b-white/20 transition-all duration-300">
         <div className="flex items-center gap-x-2">
-          <Image src={"/logo.svg"} width={44} height={44} alt="logo" />
+          <Image src={"/logo.svg"} width={44}  height={44} style={{ width: "auto", height: "auto" }} alt="Logo" priority/>
           <span className="font-bold text-[#0077B6] dark:text-[#0077B6]/70 text-xl lg:text-2xl">
             HACKAUT
           </span>
diff --git a/app/components/teamdetails.js b/app/components/teamdetails.js
new file mode 100644
index 0000000..91db7c0
--- /dev/null
+++ b/app/components/teamdetails.js
@@ -0,0 +1,69 @@
+import saikat from "@/public/1.jpg";
+import joy from "@/public/1.jpg";
+import sougata from "@/public/1.jpg"
+import ishita from "@/public/1.jpg"
+import achintya from "@/public/1.jpg"
+import taha from "@/public/1.jpg"
+export const teamDetails = {
+    SaikatBasu: {
+        name: "Saikat Basu",
+        image: saikat
+    },
+
+    JoySamadder: {
+        name: "Joy Samadder",
+        image: joy
+    },
+    Sougata: {
+        name: "Sougata Jana",
+        image: sougata
+    },
+
+    Ishita: {
+        name: "Ishita Maji",
+        image: ishita
+    },
+
+    Achintya : {
+        name: "Achintya Barman",
+        image: achintya,
+    },
+
+    Taha : {
+        name: "Taha Yasmin",
+        image: taha
+    },
+}
+export const slideData = [
+    {
+      src: "/1.jpg",
+    },
+    {
+      src: "/1.jpg",
+    },
+    {
+      src: "/1.jpg",
+    },
+    {
+      src: "/1.jpg",
+    },
+    {
+      src: "/1.jpg",
+    },
+    {
+      src: "/1.jpg",
+    },
+    {
+      src: "/1.jpg",
+    },
+    {
+      src: "/1.jpg",
+    },
+    {
+      src: "/1.jpg",
+    },
+    {
+      src: "/1.jpg",
+    },
+   
+];
diff --git a/app/globals.css b/app/globals.css
index c9381ac..8cfae3d 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -2,7 +2,9 @@
 @import "tw-animate-css";
 
 @custom-variant dark (&:is(.dark *));
-
+.post{
+  position: sticky;
+}
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
diff --git a/app/team/page.jsx b/app/team/page.jsx
new file mode 100644
index 0000000..c479297
--- /dev/null
+++ b/app/team/page.jsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { TeamCard } from "@/app/components/TeamCard";
+import { teamDetails,slideData } from "@/app/components/teamdetails"; 
+import Carousel from "@/components/ui/Carousel";
+export default function TeamPage() {
+    return(
+    <>
+     <div className="w-full flex flex-col justify-center items-center gap-16  ">
+     <div className=" w-full max-w-[1152px] mt-24 px-6 py-5 bg-white/40  dark:bg-white/5 backdrop-blur-lg rounded-xl border border-gray-300/60 dark:border-white/20 shadow-md transition-all duration-300">
+     <h1 className="text-6xl font-extrabold text-[#0077B6] mb-4 ">OUR TEAM</h1>
+     <p className="font-bold text-xl mb-10">Meet our team, which aims at cultivating, drilling & growing our community to enrich & prosper the overall tech culture, be a member and contribute to be include in our team.</p>
+    <section className="text-center"><p className="inline-block text-xxl px-3 py-px font-semibold text-white uppercase rounded-full bg-[#0077B6] mb-8">Faculties</p>
+    <div className="flex flex-wrap gap-16 justify-center mb-10">
+          <TeamCard name={teamDetails.SaikatBasu.name} role="Principal Advisor (HOD of CSE)" stack="ML, IOT, Cryptography" images={teamDetails.SaikatBasu.image}/>
+          <TeamCard name={teamDetails.JoySamadder.name} role="Chairman" stack="IoT, Full Stack Development, Web Analytics, Cybersecurity" images={teamDetails.JoySamadder.image}/>
+    </div>
+    </section>
+    <section className="text-center"><p className="inline-block text-xxl px-3 py-px font-semibold text-white uppercase rounded-full bg-[#0077B6] mb-8">Leaders</p>
+    <div className="flex flex-wrap gap-16 justify-center mb-20">
+          <TeamCard name={teamDetails. Sougata.name} role="President" stack="Golang,Python,ML" images={teamDetails.Sougata.image}/>
+          <TeamCard name={teamDetails.Ishita.name} role="Vice President" stack="AI,Python,Javascript" images={teamDetails.Ishita.image}/>
+          <TeamCard name={teamDetails.Achintya.name} role="General Secretary" stack="Java,Kotlin,Flutter" images={teamDetails.Achintya.image}/>
+          <TeamCard name={teamDetails.Taha.name} role="Secretary" stack="JavaScript,Design" images={teamDetails.Taha.image}/>
+    </div>
+    </section>
+    <section className="text-center overflow-hidden"><p className="inline-block text-xxl px-3 font-semibold text-white uppercase rounded-full bg-[#0077B6] mb-10 ">Core Members</p>
+    <Carousel slides={slideData } />
+    </section>
+    </div>
+    <div className="w-[90px] h-[10px] bg-[#0077B6] dark:bg-[#0077B6]/70 "/>
+    </div>
+    </>
+  )}
\ No newline at end of file
diff --git a/components/ui/Carousel.jsx b/components/ui/Carousel.jsx
new file mode 100644
index 0000000..6991af6
--- /dev/null
+++ b/components/ui/Carousel.jsx
@@ -0,0 +1,183 @@
+"use client";;
+import { IconArrowNarrowRight } from "@tabler/icons-react";
+import { useState, useRef, useId, useEffect } from "react";
+const Slide = ({
+  slide,
+  index,
+  current,
+  handleSlideClick
+}) => {
+  const slideRef = useRef(null);
+
+  const xRef = useRef(0);
+  const yRef = useRef(0);
+  const frameRef = useRef();
+
+  useEffect(() => {
+    const animate = () => {
+      if (!slideRef.current) return;
+
+      const x = xRef.current;
+      const y = yRef.current;
+
+      slideRef.current.style.setProperty("--x", `${x}px`);
+      slideRef.current.style.setProperty("--y", `${y}px`);
+
+      frameRef.current = requestAnimationFrame(animate);
+    };
+
+    frameRef.current = requestAnimationFrame(animate);
+
+    return () => {
+      if (frameRef.current) {
+        cancelAnimationFrame(frameRef.current);
+      }
+    };
+  }, []);
+
+  const handleMouseMove = (event) => {
+    const el = slideRef.current;
+    if (!el) return;
+
+    const r = el.getBoundingClientRect();
+    xRef.current = event.clientX - (r.left + Math.floor(r.width / 2));
+    yRef.current = event.clientY - (r.top + Math.floor(r.height / 2));
+  };
+
+  const handleMouseLeave = () => {
+    xRef.current = 0;
+    yRef.current = 0;
+  };
+
+  const imageLoaded = (event) => {
+    event.currentTarget.style.opacity = "1";
+  };
+
+  const { src, button, title } = slide;
+
+  return (
+    <div className="[perspective:1200px] [transform-style:preserve-3d]">
+      <li
+        ref={slideRef}
+        className="flex flex-1 flex-col items-center justify-center relative text-center text-white opacity-100 transition-all duration-300 ease-in-out w-[20vmin] h-[20vmin] mx-[-1vmin] z-10 "
+        onClick={() => handleSlideClick(index)}
+        onMouseMove={handleMouseMove}
+        onMouseLeave={handleMouseLeave}
+        style={{
+          transform:
+            current !== index
+              ? "scale(0.98) rotateX(8deg)"
+              : "scale(1) rotateX(0deg)",
+          transition: "transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
+          transformOrigin: "bottom",
+        }}>
+        <div className="absolute top-0 left-0 w-full h-full bg-[#1D1F2F] rounded-[50%] overflow-hidden transition-all duration-150 ease-out border-[#0077B6] border-4 "
+          style={{
+            transform:
+              current === index
+                ? "translate3d(calc(var(--x) / 30), calc(var(--y) / 30), 0)"
+                : "none",
+          }}>
+          <img
+            className="absolute inset-0 w-[120%] h-[120%] object-cover opacity-100 transition-opacity duration-600 ease-in-out"
+            style={{
+              opacity: current === index ? 1 : 0.9,
+            }}
+            alt={title}
+            src={src}
+            onLoad={imageLoaded}
+            loading="eager"
+            decoding="sync" />
+          {current === index && (
+            <div className="absolute inset-0 bg-black/30 transition-all duration-1000" />
+          )}
+        </div>
+
+        <article
+          className={`relative p-[4vmin] transition-opacity duration-1000 ease-in-out ${
+            current === index ? "opacity-100 visible" : "opacity-0 invisible"
+          }`}>
+          {/* <h2 className="text-lg md:text-2xl lg:text-4xl font-semibold  relative">
+            {title}
+          </h2> */}
+          <div className="flex justify-center">
+            {/* <button
+              className="mt-6  px-4 py-2 w-fit mx-auto sm:text-sm text-black bg-white h-12 border border-transparent text-xs flex justify-center items-center rounded-2xl hover:shadow-lg transition duration-200 shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),0px_1px_0px_0px_rgba(25,28,33,0.02),0px_0px_0px_1px_rgba(25,28,33,0.08)]">
+              {button}
+            </button> */}
+          </div>
+       </article> 
+      </li>
+    </div>
+  );
+};
+
+const CarouselControl = ({
+  type,
+  title,
+  handleClick
+}) => {
+  return (
+    <button
+      className={`w-10 h-10 flex items-center mx-4 justify-center bg-neutral-200 dark:bg-neutral-800 border-3 border-transparent rounded-full focus:border-[#6D64F7] focus:outline-none hover:-translate-y-0.5 active:translate-y-0.5 transition duration-200 ${
+        type === "previous" ? "rotate-180" : ""
+      }`}
+      title={title}
+      onClick={handleClick}>
+      <IconArrowNarrowRight className="text-neutral-600 dark:text-neutral-200" />
+    </button>
+  );
+};
+
+export default function Carousel({
+  slides
+}) {
+  const [current, setCurrent] = useState(0);
+
+  const handlePreviousClick = () => {
+    const previous = current - 1;
+    setCurrent(previous < 0 ? slides.length - 1 : previous);
+  };
+
+  const handleNextClick = () => {
+    const next = current + 1;
+    setCurrent(next === slides.length ? 0 : next);
+  };
+
+  const handleSlideClick = (index) => {
+    if (current !== index) {
+      setCurrent(index);
+    }
+  };
+
+  const id = useId();
+
+  return (
+    <div
+      className="relative w-[100%] h-[50vmin] mx-auto overflow-hidden"
+      aria-labelledby={`carousel-heading-${id}`}>
+      <ul
+        className="absolute flex transition-transform duration-1000 ease-in-out "
+        style={{
+          transform: `translateX(-${current * (100 / slides.length)}%)`,
+        }}>
+        {slides.map((slide, index) => (
+          <Slide
+            key={index}
+            slide={slide}
+            index={index}
+            current={current}
+            handleSlideClick={handleSlideClick} />
+        ))}
+      </ul>
+      <div className="absolute flex justify-between w-full top-[calc(60%+1rem)]">
+        <CarouselControl
+          type="previous"
+          title="Go to previous slide"
+          handleClick={handlePreviousClick} />
+
+        <CarouselControl type="next" title="Go to next slide" handleClick={handleNextClick} />
+      </div>
+    </div>
+  );
+}
diff --git a/package-lock.json b/package-lock.json
index 2554ab1..4a09a31 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,13 +10,16 @@
       "dependencies": {
         "@radix-ui/react-dropdown-menu": "^2.1.7",
         "@radix-ui/react-slot": "^1.2.0",
+        "@tabler/icons-react": "^3.31.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "embla-carousel-react": "^8.6.0",
         "lucide-react": "^0.487.0",
         "next": "15.3.0",
         "next-themes": "^0.4.6",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-icons": "^5.5.0",
         "tailwind-merge": "^3.2.0",
         "tw-animate-css": "^1.2.5"
       },
@@ -941,6 +944,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.0.tgz",
       "integrity": "sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w==",
+      "license": "MIT",
       "dependencies": {
         "@radix-ui/react-compose-refs": "1.1.2"
       },
@@ -1068,6 +1072,32 @@
         "tslib": "^2.8.0"
       }
     },
+    "node_modules/@tabler/icons": {
+      "version": "3.31.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.31.0.tgz",
+      "integrity": "sha512-dblAdeKY3+GA1U+Q9eziZ0ooVlZMHsE8dqP0RkwvRtEsAULoKOYaCUOcJ4oW1DjWegdxk++UAt2SlQVnmeHv+g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      }
+    },
+    "node_modules/@tabler/icons-react": {
+      "version": "3.31.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.31.0.tgz",
+      "integrity": "sha512-2rrCM5y/VnaVKnORpDdAua9SEGuJKVqPtWxeQ/vUVsgaUx30LDgBZph7/lterXxDY1IKR6NO//HDhWiifXTi3w==",
+      "license": "MIT",
+      "dependencies": {
+        "@tabler/icons": "3.31.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      },
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@tailwindcss/node": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.3.tgz",
@@ -1444,6 +1474,34 @@
       "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
       "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
     },
+    "node_modules/embla-carousel": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
+      "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
+      "license": "MIT"
+    },
+    "node_modules/embla-carousel-react": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.6.0.tgz",
+      "integrity": "sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==",
+      "license": "MIT",
+      "dependencies": {
+        "embla-carousel": "8.6.0",
+        "embla-carousel-reactive-utils": "8.6.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/embla-carousel-reactive-utils": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.6.0.tgz",
+      "integrity": "sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "embla-carousel": "8.6.0"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.18.1",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz",
@@ -1880,6 +1938,15 @@
         "react": "^19.1.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-remove-scroll": {
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.3.tgz",
diff --git a/package.json b/package.json
index 55e2ad7..c82a260 100644
--- a/package.json
+++ b/package.json
@@ -11,13 +11,16 @@
   "dependencies": {
     "@radix-ui/react-dropdown-menu": "^2.1.7",
     "@radix-ui/react-slot": "^1.2.0",
+    "@tabler/icons-react": "^3.31.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "embla-carousel-react": "^8.6.0",
     "lucide-react": "^0.487.0",
     "next": "15.3.0",
     "next-themes": "^0.4.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0",
     "tailwind-merge": "^3.2.0",
     "tw-animate-css": "^1.2.5"
   },
diff --git a/public/1.jpg b/public/1.jpg
new file mode 100644
index 0000000..d96139e
Binary files /dev/null and b/public/1.jpg differ
diff --git a/tsconfig.json b/tsconfig.json
index d8b9323..05444dc 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,6 +22,6 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "components/ui/Carousel.jsx"],
   "exclude": ["node_modules"]
 }