diff --git a/src/components/Sponsor.jsx b/src/components/Sponsor.jsx
index d48b46c..fb986ad 100644
--- a/src/components/Sponsor.jsx
+++ b/src/components/Sponsor.jsx
@@ -35,15 +35,6 @@ const SponsorsSection = () => {
     return Math.ceil(sponsors.length / visibleCount);
   };
 
-  const autoScroll = () => {
-    const container = scrollRef.current;
-    if (!container) return;
-
-    const pages = totalPages();
-    pageIndex.current = (pageIndex.current + 1) % pages;
-    scrollToPage(pageIndex.current);
-  };
-
   const handleManualScroll = (direction) => {
     const pages = totalPages();
     if (direction === "left") {
@@ -56,28 +47,48 @@ const SponsorsSection = () => {
   };
 
   useEffect(() => {
+    const autoScroll = () => {
+      const container = scrollRef.current;
+      if (!container) return;
+
+      const pages = totalPages();
+      pageIndex.current = (pageIndex.current + 1) % pages;
+      scrollToPage(pageIndex.current);
+    };
+
     let interval;
     if (!isHovered) {
-      interval = setInterval(autoScroll, 3000);
+      interval = setInterval(autoScroll, 5000);
     }
     return () => clearInterval(interval);
   }, [isHovered, visibleCount]);
 
   return (
     <section className="bg-white py-10 relative overflow-hidden">
-      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
-        <h2 className="text-3xl sm:text-4xl font-bold text-slate-900 mb-4">
-          Our Sponsors and Partners
-        </h2>
-        <p className="text-gray-700 text-lg mb-8">
-          We are proudly supported by our amazing sponsors and partners.
-        </p>
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:pl-0">
+        <div className="mb-8">
+          <h2 className="text-3xl sm:text-4xl font-bold text-slate-900 mb-2">
+            Our Sponsors and Partners
+          </h2>
+          <p className="text-gray-700 text-lg">
+            We are proudly supported by our amazing sponsors and partners.
+          </p>
+        </div>
 
         <div
-          className="relative overflow-hidden"
+          className="relative"
           onMouseEnter={() => setIsHovered(true)}
           onMouseLeave={() => setIsHovered(false)}
         >
+          {/* Left Arrow */}
+          <button
+            onClick={() => handleManualScroll("left")}
+            className="absolute left-0 sm:left-0 top-1/2 -translate-y-1/2 sm:-translate-x-3 bg-[#00163A] rounded-full p-2 sm:p-2.5 shadow z-10 cursor-pointer hover:bg-[#2563eb]"
+          >
+            <ArrowLeft className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
+          </button>
+
+          {/* Sponsor Scroll Area */}
           <div
             ref={scrollRef}
             className="flex overflow-x-auto scroll-smooth hide-scrollbar"
@@ -91,31 +102,23 @@ const SponsorsSection = () => {
                 className="flex-shrink-0 px-2 box-border"
                 style={{ width: `${100 / visibleCount}%` }}
               >
-                <div className="h-64 bg-white flex items-center justify-center rounded transition duration-300 transform hover:shadow-xl cursor-pointer border-2">
+                <div className="h-64 bg-white flex items-center justify-center rounded-xl transition duration-300 transform hover:shadow-xl cursor-pointer border-2">
                   <img
                     src={sponsor.image}
                     alt={sponsor.name}
-                    className="object-contain h-32"
+                    className="object-contain h-32 "
                   />
                 </div>
               </a>
             ))}
           </div>
 
-          <div className="flex justify-center space-x-4 mt-6">
-            <button
-              onClick={() => handleManualScroll("left")}
-              className="p-2 border-2 rounded-full bg-white shadow hover:bg-black-100"
-            >
-              <ArrowLeft />
-            </button>
-            <button
-              onClick={() => handleManualScroll("right")}
-              className="p-2 border-2 rounded-full bg-white shadow hover:bg-black-100"
-            >
-              <ArrowRight />
-            </button>
-          </div>
+          <button
+            onClick={() => handleManualScroll("right")}
+            className="absolute right-0 sm:right-0 top-1/2 -translate-y-1/2 sm:translate-x-3 bg-[#00163A] cursor-pointer rounded-full p-2 sm:p-2.5 shadow z-10 hover:bg-[#2563eb]"
+          >
+            <ArrowRight className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
+          </button>
         </div>
       </div>
     </section>
diff --git a/src/components/Team.jsx b/src/components/Team.jsx
index 144b337..234b345 100644
--- a/src/components/Team.jsx
+++ b/src/components/Team.jsx
@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
 import teamMembers from "../config/teammate";
+import { ArrowLeft, ArrowRight } from "lucide-react";
 import { FaLinkedin, FaXTwitter } from "react-icons/fa6";
 
 const TeamSlider = () => {
@@ -38,23 +39,36 @@ const TeamSlider = () => {
     setCurrentIndex((prev) => Math.max(prev - visibleCount, 0));
   };
 
-  const pageCount = Math.ceil(teamMembers.length / visibleCount);
-  const activeDot = Math.round(currentIndex / visibleCount);
-
   return (
     <section className="bg-[#00163A] text-white px-4 sm:px-6 py-16 relative overflow-hidden">
       <div className="max-w-7xl mx-auto">
         <div className="mb-10">
-          <h2 className="text-3xl font-bold mb-2">Our team</h2>
-          <p className="text-lg text-gray-300">
+          <h2 className="text-3xl font-bold mb-2 ml-3">Our team</h2>
+          <p className="text-xl text-gray-300 ml-3">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit.
           </p>
-          <button className="mt-4 border border-white text-white py-2 px-4 rounded hover:bg-white hover:text-[#00163A] transition">
+          <button className="mt-4 border border-white text-white py-2 px-4 ml-3 rounded hover:bg-white hover:text-[#00163A] transition cursor-pointer">
             View all team members
           </button>
         </div>
 
         <div className="relative">
+          <button
+            onClick={prevSlide}
+            className="absolute left-0 top-1/3 -translate-y-1/2 -translate-x-3 z-10 p-1.5 sm:p-2 border-2 rounded-full bg-white border-gray-300 shadow-lg hover:bg-gray-100 flex items-center justify-center cursor-pointer"
+            aria-label="Previous"
+          >
+            <ArrowLeft className="w-6 h-6" color="#00163A" />
+          </button>
+
+          <button
+            onClick={nextSlide}
+            className="absolute right-0 top-1/3 -translate-y-1/2 translate-x-3 z-10 p-1.5 sm:p-2 border-2 rounded-full bg-white border-gray-300 shadow-lg hover:bg-gray-100 flex items-center justify-center cursor-pointer"
+            aria-label="Next"
+          >
+            <ArrowRight className=" w-5 h-5 sm:w-6 sm:h-6" color="#00163A" />
+          </button>
+
           <div className="overflow-hidden">
             <div
               className="flex transition-transform duration-700 ease-in-out"
@@ -71,7 +85,7 @@ const TeamSlider = () => {
                     <img
                       src={member.img}
                       alt={member.name}
-                      className="w-full h-68 object-cover rounded-md"
+                      className="w-full h-68 object-cover rounded-lg"
                     />
                     <div className="mt-3 px-2">
                       <p className="font-semibold text-white">{member.name}</p>
@@ -103,40 +117,14 @@ const TeamSlider = () => {
               ))}
             </div>
           </div>
-
-          <div className="absolute -bottom-12 right-4 flex items-center gap-3 z-10">
-            <button
-              onClick={prevSlide}
-              className="bg-white text-[#00163A] w-10 h-10 rounded-full flex items-center justify-center text-xl font-bold"
-            >
-              {"<"}
-            </button>
-            <button
-              onClick={nextSlide}
-              className="bg-white text-[#00163A] w-10 h-10 rounded-full flex items-center justify-center text-xl font-bold"
-            >
-              {">"}
-            </button>
-          </div>
-
-          <div className="absolute -bottom-6 left-2 gap-2 hidden sm:flex">
-            {Array.from({ length: pageCount }).map((_, idx) => (
-              <span
-                key={idx}
-                className={`w-2 h-2 rounded-full ${
-                  idx === activeDot ? "bg-white" : "bg-gray-500"
-                }`}
-              ></span>
-            ))}
-          </div>
         </div>
 
-        <div className="mt-24">
-          <h3 className="text-xl font-bold mb-1">Join Us Today!</h3>
-          <p className="text-base text-gray-300 mb-3">
+        <div className="mt-16">
+          <h3 className="text-xl font-bold mb-1 ml-3">Join Us Today!</h3>
+          <p className="text-base text-gray-300 mb-3 ml-3">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit.
           </p>
-          <button className="border border-white text-white py-2 px-4 rounded hover:bg-white hover:text-[#00163A] transition">
+          <button className="border border-white text-white py-2 px-4 ml-3 rounded hover:bg-white hover:text-[#00163A] transition cursor-pointer">
             Apply here
           </button>
         </div>
diff --git a/src/pages/team/TeamPage.jsx b/src/pages/team/TeamPage.jsx
index 09270a7..83d9795 100644
--- a/src/pages/team/TeamPage.jsx
+++ b/src/pages/team/TeamPage.jsx
@@ -1,8 +1,8 @@
 import { useState } from "react";
 import { FaLinkedin, FaXTwitter } from "react-icons/fa6";
-import container from "../../assets/Frame 142.png";
+import teamMembers from "../../config/teammate";
 
-const TeamPage = ({ teamMembers = [] }) => {
+const TeamPage = () => {
   const [activeTeam, setActiveTeam] = useState("All");
 
   const teams = ["All", "Team 1", "Team 2", "Team 3", "Team 4"];
@@ -14,24 +14,15 @@ const TeamPage = ({ teamMembers = [] }) => {
 
   return (
     <section className="bg-white text-black">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-28">
-        <img
-          src={container}
-          alt="Team Cover"
-          className="w-full h-auto object-contain rounded-lg"
-        />
-      </div>
-
-      <div className="text-center py-10 px-4 max-w-4xl mx-auto">
+      <div className="text-center px-4 max-w-4xl mx-auto scroll-mt-24 pt-20 lg:pt-8">
         <h2 className="text-3xl sm:text-4xl font-bold text-[#021640] mb-4">
           Meet Our Team
         </h2>
-        <p className="text-gray-700 text-lg">
+        <p className="text-gray-700 pb-6 text-lg">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit...
         </p>
       </div>
 
-      {/* Tabs */}
       <div className="flex justify-center flex-wrap gap-4 mb-10">
         {teams.map((team) => (
           <button
@@ -48,7 +39,6 @@ const TeamPage = ({ teamMembers = [] }) => {
         ))}
       </div>
 
-      {/* Team Cards */}
       <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 pb-16 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
         {filteredMembers.map((member, index) => (
           <div key={index} className="flex flex-col items-center text-center">