diff --git a/README.md b/README.md
index 1d2b28f..f1989f2 100644
--- a/README.md
+++ b/README.md
@@ -1,22 +1,22 @@
 <p align="center">
   <div align="center">
-    <a href="https://zenime.site/">
-      <img alt="AnimeHi" src="https://raw.githubusercontent.com/itzzzme/zenime/refs/heads/main/public/logo.png" width="220"/>
+    <a href="https://justanime.vercel.app">
+      <img alt="JustAnime" src="https://raw.githubusercontent.com/tejaspanchall/JustAnime/refs/heads/main/public/logo.png" width="220"/>
     </a>
   </div>
-    <h3 align="center">Zenime - Ad free anime streaming platform</h3>
+    <h3 align="center">JustAnime - Ad free anime streaming platform</h3>
     <p align="center">
-  <a href="https://github.com/itzzzme/zenime">
-      <img src="https://img.shields.io/github/stars/itzzzme/zenime" alt="Github Stars">
+  <a href="https://github.com/tejaspanchall/JustAnime">
+      <img src="https://img.shields.io/github/stars/tejaspanchall/JustAnime" alt="Github Stars">
     </a>
-      <img src="https://img.shields.io/github/issues/itzzzme/zenime" alt="Github Issues">
-     <a href="https://github.com/itzzzme/zenime">
-      <img src="https://img.shields.io/github/forks/itzzzme/zenime" alt="Github Forks" />
+      <img src="https://img.shields.io/github/issues/tejaspanchall/JustAnime" alt="Github Issues">
+     <a href="https://github.com/tejaspanchall/JustAnime">
+      <img src="https://img.shields.io/github/forks/tejaspanchall/JustAnime" alt="Github Forks" />
     </a>
 </p>
 </p>
 <p align="center">
-    <a href="https://zenime.site">Zenime</a> is an open-source anime streaming service that uses <a href="https://github.com/itzzzme/anime-api">custom</a> API, built using ReactJS with javascript and Tailwind CSS. It lets you easily find any anime with intuitive search & suggestion feature and stream without any ads.
+    <a href="https://justanime.vercel.app">JustAnime</a> is an open-source anime streaming service that uses <a href="https://github.com/itzzzme/anime-api">ANIME</a> API, built using ReactJS with javascript and Tailwind CSS. It lets you easily find any anime with intuitive search & suggestion feature and stream without any ads.
  </p>
 
 <details>
@@ -47,21 +47,21 @@
 ## Previews
 
 <div style="text-align: left;">
-  <img src="https://raw.githubusercontent.com/itzzzme/zenime/refs/heads/main/public/homepage.webp" alt="Home Page" style="max-width: 80%;" >
+  <img src="" alt="Home Page" style="max-width: 80%;" >
   <details>
   <summary style="margin-top:10px">View more screenshots</summary>
   <br/>
   AnimeInfo Page
-  <img style="margin-top:10px" src="https://raw.githubusercontent.com/itzzzme/zenime/refs/heads/main/public/animeinfo.webp" alt="AnimeInfo Page" style="max-width: 80%;">
+  <img style="margin-top:10px" src="" alt="AnimeInfo Page" style="max-width: 80%;">
   <br/>
   Searchbar
-  <img style="margin-top:10px" src="https://raw.githubusercontent.com/itzzzme/zenime/refs/heads/main/public/searchbar.webp" alt="Searchbar" style="max-width: 50%;">
+  <img style="margin-top:10px" src="" alt="Searchbar" style="max-width: 50%;">
   <br/>
   Character & Voice Actors
-  <img style="margin-top:10px" src="https://raw.githubusercontent.com/itzzzme/zenime/refs/heads/main/public/voiceactors.webp" alt="Character & Voice Actors" style="max-width: 80%;">
+  <img style="margin-top:10px" src="" alt="Character & Voice Actors" style="max-width: 80%;">
   <br/>
   Watch Page
-  <img style="margin-top:10px" src="https://raw.githubusercontent.com/itzzzme/zenime/refs/heads/main/public/watchpage.webp" alt="Watch Page" style="max-width: 80%;">
+  <img style="margin-top:10px" src="" alt="Watch Page" style="max-width: 80%;">
   <br/>
   </details>
 </div>
@@ -73,8 +73,8 @@
 ### 2. Run the following code to clone the repository and install all required dependencies
 
 ```bash
-git clone https://github.com/itzzzme/zenime.git
-cd zenime
+git clone https://github.com/tejaspanchall/JustAnime.git
+cd JustAnime
 npm install # or yarn
 ```
 
@@ -89,13 +89,13 @@ npm start # or npm run dev (to run develepment server)
 
 ### Vercel
 
-Host your own instance of <a href="https://zenime.site">Zenime</a>  on vercel
+Host your own instance of <a href="https://justanime.vercel.app">JustAnime</a>  on vercel
 
 [![Deploy to Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/itzzzme/zenime)
 
 ### Render
 
-Host your own instance of <a href="https://zenime.site">Zenime</a> on Render.
+Host your own instance of <a href="https://justanime.vercel.app">JustAnime</a> on Render.
 
 [![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/itzzzme/zenime)
 
@@ -114,6 +114,3 @@ If you discover any issues or have suggestions for improvement, please open an i
 ### Support
 
  If you like the project feel free to drop a star ✨. Your appreciation means a lot.
-
-<p align="center" style="text-decoration: none;">Made by <a href="https://github.com/itzzzme" tarGET="_blank">itzzzme 
-</a>🫰</p>
diff --git a/src/App.css b/src/App.css
index d608b5b..364fed3 100644
--- a/src/App.css
+++ b/src/App.css
@@ -14,8 +14,6 @@ body,
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  max-width: 2048px;
-  margin-inline: auto;
 }
 .content {
   width: 100%;
diff --git a/src/App.jsx b/src/App.jsx
index 65102a4..d359003 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -29,8 +29,8 @@ function App() {
 
   return (
     <HomeInfoProvider>
-      <div className="app-container">
-        <main className="content">
+      <div className="app-container px-4 lg:px-10">
+        <main className="content max-w-[2048px] mx-auto w-full">
           {!isSplashScreen && <Navbar />}
           <Routes>
             <Route path="/" element={<SplashScreen />} />
diff --git a/src/components/banner/Banner.css b/src/components/banner/Banner.css
index 599a1b4..f507cc8 100644
--- a/src/components/banner/Banner.css
+++ b/src/components/banner/Banner.css
@@ -12,28 +12,28 @@
   bottom:0;
   background: radial-gradient(
       circle at 130% center,
-      rgba(32, 31, 49, 0) 50%,
-      rgba(32, 31, 49, 0.5) 60%,
-      rgba(32, 31, 49, 1) 80%,
-      rgba(32, 31, 49, 1) 100%
+      rgba(10, 10, 10, 0) 50%,
+      rgba(10, 10, 10, 0.5) 60%,
+      rgba(10, 10, 10, 1) 80%,
+      rgba(10, 10, 10, 1) 100%
     ),
     linear-gradient(
       to top,
-      rgba(32, 31, 49, 1) 0%,
-      rgba(32, 31, 49, 0) 20%,
-      rgba(32, 31, 49, 0) 100%
+      rgba(10, 10, 10, 1) 0%,
+      rgba(10, 10, 10, 0) 20%,
+      rgba(10, 10, 10, 0) 100%
     ),
     linear-gradient(
       to left,
-      rgba(32, 31, 49, 1) 0%,
-      rgba(32, 31, 49, 0) 20%,
-      rgba(32, 31, 49, 0) 100%
+      rgba(10, 10, 10, 1) 0%,
+      rgba(10, 10, 10, 0) 20%,
+      rgba(10, 10, 10, 0) 100%
     ),
     linear-gradient(
-      to bottom,
-      rgba(32, 31, 49, 1) 0%,
-      rgba(32, 31, 49, 0) 20%,
-      rgba(32, 31, 49, 0) 100%
+      to bottom,m 
+      rgba(10, 10, 10, 1) 0%,
+      rgba(10, 10, 10, 0) 20%,
+      rgba(10, 10, 10, 0) 100%
     );
 
   z-index: 1;
@@ -42,28 +42,28 @@
   .spotlight-overlay {
     background: radial-gradient(
       circle at 130% center,
-      rgba(32, 31, 49, 0) 50%,
-      rgba(32, 31, 49, 0.5) 60%,
-      rgba(32, 31, 49, 1) 80%,
-      rgba(32, 31, 49, 1) 100%
+      rgba(10, 10, 10, 0) 50%,
+      rgba(10, 10, 10, 0.5) 60%,
+      rgba(10, 10, 10, 1) 80%,
+      rgba(10, 10, 10, 1) 100%
     ),
     linear-gradient(
       to top,
-      rgba(32, 31, 49, 1) 0%,
-      rgba(32, 31, 49, 0) 20%,
-      rgba(32, 31, 49, 0) 100%
+      rgba(10, 10, 10, 1) 0%,
+      rgba(10, 10, 10, 0) 20%,
+      rgba(10, 10, 10, 0) 100%
     ),
     linear-gradient(
       to left,
-      rgba(32, 31, 49, 1) 0%,
-      rgba(32, 31, 49, 0) 20%,
-      rgba(32, 31, 49, 0) 100%
+      rgba(10, 10, 10, 1) 0%,
+      rgba(10, 10, 10, 0) 20%,
+      rgba(10, 10, 10, 0) 100%
     ),
     linear-gradient(
       to bottom,
-      rgba(32, 31, 49, 1) 0%,
-      rgba(32, 31, 49, 0) 50%,
-      rgba(32, 31, 49, 0) 100%
+      rgba(10, 10, 10, 1) 0%,
+      rgba(10, 10, 10, 0) 50%,
+      rgba(10, 10, 10, 0) 100%
     );
   }
 }
@@ -71,28 +71,28 @@
   .spotlight-overlay {
     background: radial-gradient(
       circle at 100% center,
-      rgba(32, 31, 49, 0) 50%,
-      rgba(32, 31, 49, 0.5) 60%,
-      rgba(32, 31, 49, 1) 95%,
-      rgba(32, 31, 49, 1) 100%
+      rgba(10, 10, 10, 0) 50%,
+      rgba(10, 10, 10, 0.5) 60%,
+      rgba(10, 10, 10, 1) 95%,
+      rgba(10, 10, 10, 1) 100%
     ),
     linear-gradient(
       to top,
-      rgba(32, 31, 49, 1) 0%,
-      rgba(32, 31, 49, 0) 20%,
-      rgba(32, 31, 49, 0) 100%
+      rgba(10, 10, 10, 1) 0%,
+      rgba(10, 10, 10, 0) 20%,
+      rgba(10, 10, 10, 0) 100%
     ),
     linear-gradient(
       to left,
-      rgba(32, 31, 49, 1) 0%,
-      rgba(32, 31, 49, 0) 20%,
-      rgba(32, 31, 49, 0) 100%
+      rgba(10, 10, 10, 1) 0%,
+      rgba(10, 10, 10, 0) 20%,
+      rgba(10, 10, 10, 0) 100%
     ),
     linear-gradient(
       to bottom,
-      rgba(32, 31, 49, 1) 0%,
-      rgba(32, 31, 49, 0) 70%,
-      rgba(32, 31, 49, 0) 100%
+      rgba(10, 10, 10, 1) 0%,
+      rgba(10, 10, 10, 0) 70%,
+      rgba(10, 10, 10, 0) 100%
     );
   }
 }
@@ -100,34 +100,34 @@
   .spotlight-overlay {
     background: radial-gradient(
       circle at 60% center,
-      rgba(32, 31, 49, 0) 50%,
-      rgba(32, 31, 49, 0.5) 85%,
-      rgba(32, 31, 49, 1) 95%,
-      rgba(32, 31, 49, 1) 100%
+      rgba(10, 10, 10, 0) 50%,
+      rgba(10, 10, 10, 0.5) 85%,
+      rgba(10, 10, 10, 1) 95%,
+      rgba(10, 10, 10, 1) 100%
     ),
     linear-gradient(
       to top,
-      rgba(32, 31, 49, 1) 0%,
-      rgba(32, 31, 49, 0) 70%,
-      rgba(32, 31, 49, 0) 100%
+      rgba(10, 10, 10, 1) 0%,
+      rgba(10, 10, 10, 0) 70%,
+      rgba(10, 10, 10, 0) 100%
     ),
     linear-gradient(
       to left,
-      rgba(32, 31, 49, 1) 0%,
-      rgba(32, 31, 49, 0) 20%,
-      rgba(32, 31, 49, 0) 100%
+      rgba(10, 10, 10, 1) 0%,
+      rgba(10, 10, 10, 0) 20%,
+      rgba(10, 10, 10, 0) 100%
     ),
     linear-gradient(
       to bottom,
-      rgba(32, 31, 49, 1) 0%,
-      rgba(32, 31, 49, 0) 70%,
-      rgba(32, 31, 49, 0) 100%
+      rgba(10, 10, 10, 1) 0%,
+      rgba(10, 10, 10, 0) 70%,
+      rgba(10, 10, 10, 0) 100%
     ),
     linear-gradient(
       to right,
-      rgba(32, 31, 49, 1) 0%,
-      rgba(32, 31, 49, 0) 15%,
-      rgba(32, 31, 49, 0) 100%
+      rgba(10, 10, 10, 1) 0%,
+      rgba(10, 10, 10, 0) 15%,
+      rgba(10, 10, 10, 0) 100%
     );
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/banner/Banner.jsx b/src/components/banner/Banner.jsx
index b9e4e1d..b174130 100644
--- a/src/components/banner/Banner.jsx
+++ b/src/components/banner/Banner.jsx
@@ -6,7 +6,6 @@ import {
   faCalendar,
   faClock,
 } from "@fortawesome/free-solid-svg-icons";
-import { FaChevronRight } from "react-icons/fa";
 import { Link } from "react-router-dom";
 import { useLanguage } from "@/src/context/LanguageContext";
 import "./Banner.css";
@@ -14,30 +13,30 @@ import "./Banner.css";
 function Banner({ item, index }) {
   const { language } = useLanguage();
   return (
-    <section className="spotlight w-full h-full">
+    <section className="spotlight w-full h-full relative">
       <img
         src={`${item.poster}`}
         alt={item.title}
         className="absolute right-0 object-cover h-full w-[80%] bg-auto max-[1200px]:w-full max-[1200px]:bottom-0"
       />
       <div className="spotlight-overlay"></div>
-      <div className="absolute flex flex-col left-0 bottom-[50px] w-[55%] p-4 z-10 max-[1390px]:w-[45%] max-[1390px]:bottom-[10px] max-[1300px]:w-[600px] max-[1120px]:w-[60%] max-md:w-[90%] max-[300px]:w-full">
-        <p className="text-[#ffbade] font-semibold text-[20px] w-fit max-[1300px]:text-[15px]">
+      <div className="absolute flex flex-col left-0 bottom-[50px] w-[55%] p-4 z-10 max-[1390px]:w-[45%] max-[1390px]:bottom-[40px] max-[1300px]:w-[600px] max-[1120px]:w-[60%] max-md:w-[90%] max-md:bottom-[50px] max-[300px]:w-full">
+        <p className="text-transparent bg-clip-text bg-gradient-to-r from-[#ffbade] to-[#ff90c5] font-semibold text-[20px] w-fit max-[1300px]:text-[15px]">
           #{index + 1} Spotlight
         </p>
-        <h3 className="text-white line-clamp-2 text-5xl font-bold mt-6 text-left max-[1390px]:text-[45px] max-[1300px]:text-3xl max-[1300px]:mt-4 max-md:text-2xl max-md:mt-1 max-[575px]:text-[22px] max-sm:leading-6 max-sm:w-[80%] max-[320px]:w-full ">
+        <h3 className="text-white line-clamp-2 text-5xl font-bold mt-4 text-left max-[1390px]:text-[45px] max-[1300px]:text-3xl max-[1300px]:mt-3 max-md:text-2xl max-md:mt-1 max-[575px]:text-[22px] max-sm:leading-6 max-sm:w-[80%] max-[320px]:w-full ">
           {language === "EN" ? item.title : item.japanese_title}
         </h3>
-        <div className="flex h-fit justify-center items-center w-fit space-x-5 mt-8 max-[1300px]:mt-6 max-md:hidden">
+        <div className="flex h-fit justify-start items-center w-fit space-x-5 mt-5 max-[1300px]:mt-4 max-md:hidden">
           {item.tvInfo && (
             <>
               {item.tvInfo.showType && (
                 <div className="flex space-x-1 justify-center items-center">
                   <FontAwesomeIcon
                     icon={faPlay}
-                    className="text-[8px] bg-white px-[4px] py-[3px] rounded-full"
+                    className="text-[8px] bg-white/10 text-white px-[4px] py-[3px] rounded-full"
                   />
-                  <p className="text-white text-[16px]">
+                  <p className="text-white/70 text-[16px]">
                     {item.tvInfo.showType}
                   </p>
                 </div>
@@ -47,9 +46,9 @@ function Banner({ item, index }) {
                 <div className="flex space-x-1 justify-center items-center">
                   <FontAwesomeIcon
                     icon={faClock}
-                    className="text-white text-[14px]"
+                    className="text-white/70 text-[14px]"
                   />
-                  <p className="text-white text-[17px]">
+                  <p className="text-white/70 text-[17px]">
                     {item.tvInfo.duration}
                   </p>
                 </div>
@@ -59,9 +58,9 @@ function Banner({ item, index }) {
                 <div className="flex space-x-1 justify-center items-center">
                   <FontAwesomeIcon
                     icon={faCalendar}
-                    className="text-white text-[14px]"
+                    className="text-white/70 text-[14px]"
                   />
-                  <p className="text-white text-[16px]">
+                  <p className="text-white/70 text-[16px]">
                     {item.tvInfo.releaseDate}
                   </p>
                 </div>
@@ -69,30 +68,30 @@ function Banner({ item, index }) {
 
               <div className="flex space-x-3 w-fit">
                 {item.tvInfo.quality && (
-                  <div className="bg-[#ffbade] py-[1px] px-[6px] rounded-md w-fit text-[11px] font-bold h-fit">
+                  <div className="bg-white/10 py-[1px] px-[6px] rounded-md w-fit text-[11px] font-bold h-fit text-white">
                     {item.tvInfo.quality}
                   </div>
                 )}
                 <div className="flex space-x-[1px] rounded-r-[5px] rounded-l-[5px] w-fit py-[1px] overflow-hidden">
                   {item.tvInfo.episodeInfo?.sub && (
-                    <div className="flex space-x-1 justify-center items-center bg-[#B0E3AF] px-[4px]">
+                    <div className="flex space-x-1 justify-center items-center bg-white/10 px-[4px]">
                       <FontAwesomeIcon
                         icon={faClosedCaptioning}
-                        className="text-[12px]"
+                        className="text-[12px] text-white"
                       />
-                      <p className="text-[12px] font-bold">
+                      <p className="text-[12px] font-bold text-white">
                         {item.tvInfo.episodeInfo.sub}
                       </p>
                     </div>
                   )}
 
                   {item.tvInfo.episodeInfo?.dub && (
-                    <div className="flex space-x-1 justify-center items-center bg-[#B9E7FF] px-[4px]">
+                    <div className="flex space-x-1 justify-center items-center bg-white/20 px-[4px]">
                       <FontAwesomeIcon
                         icon={faMicrophone}
-                        className="text-[12px]"
+                        className="text-[12px] text-white"
                       />
-                      <p className="text-[12px] font-semibold">
+                      <p className="text-[12px] font-semibold text-white">
                         {item.tvInfo.episodeInfo.dub}
                       </p>
                     </div>
@@ -102,35 +101,30 @@ function Banner({ item, index }) {
             </>
           )}
         </div>
-        <p className="text-white text-[17px] font-sm mt-6 text-left line-clamp-3 max-[1200px]:line-clamp-2 max-[1300px]:w-[500px] max-[1120px]:w-[90%] max-md:hidden">
+        <p className="text-white/70 text-[17px] font-sm mt-4 text-left line-clamp-3 max-[1200px]:line-clamp-2 max-[1300px]:w-[500px] max-[1120px]:w-[90%] max-md:hidden">
           {item.description}
         </p>
-        <div className="flex gap-x-5 mt-10 max-md:mt-6 max-sm:w-full max-[320px]:flex-col max-[320px]:space-y-3">
-          <button className="flex justify-center items-center bg-[#ffbade] px-4 py-2 rounded-3xl gap-x-2 max-[320px]:w-fit ">
-            <FontAwesomeIcon
-              icon={faPlay}
-              className="text-[8px] bg-[#000000] px-[6px] py-[6px] rounded-full text-[#ffbade] max-[320px]:text-[6px]"
-            />
-            <Link
-              to={`/watch/${item.id}`}
-              className="max-[1000px]:text-[15px] font-semibold max-[320px]:text-[12px]"
-            >
-              Watch Now
-            </Link>
-          </button>
-          <Link
-            to={`/${item.id}`}
-            className="flex bg-[#3B3A52] justify-center items-center px-4 py-2 rounded-3xl gap-x-2 max-[320px]:w-fit max-[320px]:px-3"
-          >
-            <p className="text-white max-[1000px]:text-[15px] font-semibold max-[320px]:text-[12px]">
-              Detail
-            </p>
-            <FaChevronRight className="text-white max-[320px]:text-[10px]" />
-          </Link>
-        </div>
+      </div>
+      <div className="absolute bottom-[50px] right-[40px] flex gap-x-5 z-10 max-md:mt-6 max-sm:w-fit max-[320px]:flex-col max-[320px]:space-y-3">
+        <Link
+          to={`/watch/${item.id}`}
+          className="bg-white/90 hover:bg-white text-black font-medium px-7 py-3 rounded-lg transition-all duration-200 flex items-center gap-x-2.5 shadow-lg shadow-black/10 backdrop-blur-sm hover:translate-y-[-1px]"
+        >
+          <FontAwesomeIcon
+            icon={faPlay}
+            className="text-[10px]"
+          />
+          <span>Watch Now</span>
+        </Link>
+        <Link
+          to={`/${item.id}`}
+          className="bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/20 text-white font-medium px-7 py-3 rounded-lg transition-all duration-200 flex items-center gap-x-2.5 backdrop-blur-sm hover:translate-y-[-1px]"
+        >
+          <span>Details</span>
+        </Link>
       </div>
     </section>
   );
 }
 
-export default Banner;
+export default Banner;
\ No newline at end of file
diff --git a/src/components/splashscreen/SplashScreen.css b/src/components/splashscreen/SplashScreen.css
index 26bf168..7040ad2 100644
--- a/src/components/splashscreen/SplashScreen.css
+++ b/src/components/splashscreen/SplashScreen.css
@@ -98,18 +98,23 @@ body {
 
 /* Enter button */
 .enter-button {
-  background: white;
+  background: rgba(255, 255, 255, 0.9);
   color: black;
-  padding: 12px 24px;
+  padding: 14px 28px;
   border-radius: 8px;
   text-decoration: none;
   font-weight: 500;
   margin: 8px 0 60px;
-  transition: background-color 0.2s;
+  transition: all 0.2s ease;
+  backdrop-filter: blur(8px);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .enter-button:hover {
-  background: #ffbade;
+  background: white;
+  transform: translateY(-1px);
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
 }
 
 /* FAQ Section */
@@ -133,10 +138,11 @@ body {
 }
 
 .faq-item {
-  background: #141414;
+  background: rgba(255, 255, 255, 0.03);
   border-radius: 12px;
   overflow: hidden;
-  border: 1px solid #1a1a1a;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(8px);
 }
 
 .faq-question {
@@ -155,18 +161,18 @@ body {
 }
 
 .faq-question:hover {
-  background: #1a1a1a;
+  background: rgba(255, 255, 255, 0.05);
 }
 
 .faq-toggle {
   font-size: 16px;
-  color: white;
-  opacity: 0.8;
-  transition: transform 0.2s ease;
+  color: rgba(255, 255, 255, 0.7);
+  transition: all 0.2s ease;
 }
 
 .faq-toggle.rotate {
   transform: rotate(180deg);
+  color: white;
 }
 
 .faq-answer {
diff --git a/src/components/spotlight/Spotlight.css b/src/components/spotlight/Spotlight.css
index 01d867e..639a04d 100644
--- a/src/components/spotlight/Spotlight.css
+++ b/src/components/spotlight/Spotlight.css
@@ -13,56 +13,99 @@
 }
 .button-prev,
 .button-next {
-  width: 40px;
-  height: 40px;
-  color: white;
-  background-color: #383747;
-  border-radius: 7px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  width: 32px;
+  height: 32px;
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(8px);
+  border-radius: 6px;
   cursor: pointer;
-  transition: all 0.3s ease-out;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
 }
+
 .button-prev:hover,
 .button-next:hover {
-  background-color: #ffbade;
-  color: #383747;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.2);
+  transform: translateY(-1px);
+}
+
+.button-prev::after,
+.button-next::after {
+  content: '';
+  width: 7px;
+  height: 7px;
+  border: 1.5px solid rgba(255, 255, 255, 0.8);
+  border-left: 0;
+  border-bottom: 0;
 }
 
 .button-prev::after {
-  font-family: "Font Awesome 5 Free";
-  content: "\f053";
-  font-weight: 900;
-  font-size: 14px;
+  transform: rotate(-135deg);
+  margin-left: 3px;
 }
 
 .button-next::after {
-  font-family: "Font Awesome 5 Free";
-  content: "\f054";
-  font-weight: 900;
-  font-size: 14px;
+  transform: rotate(45deg);
+  margin-right: 3px;
 }
 
 .swiper-horizontal > .swiper-pagination-bullets {
-  display: none;
+  bottom: 20px !important;
+  left: 50% !important;
+  transform: translateX(-50%) !important;
+  width: auto !important;
+  display: flex !important;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
 }
+
+.swiper-pagination-bullet {
+  width: 8px !important;
+  height: 8px !important;
+  border-radius: 50% !important;
+  background-color: rgba(255, 255, 255, 0.5) !important;
+  opacity: 1 !important;
+}
+
 .swiper-pagination-bullet-active {
-  background-color: rgb(239, 213, 22) !important;
+  background-color: #ffbade !important;
+  width: 24px !important;
+  border-radius: 12px !important;
 }
+
+.swiper-pagination {
+  bottom: 15px !important;
+}
+
+.swiper-pagination-bullet {
+  background: white !important;
+  opacity: 0.5;
+}
+
+.swiper-pagination-bullet-active {
+  opacity: 1;
+}
+
 @media only screen and (max-width: 575px) {
   .swiper-horizontal > .swiper-pagination-bullets {
-    /* bottom: var(--swiper-pagination-bottom, 8px); */
-    bottom: 0;
-    right: 10px !important ;
-    left: auto !important;
-    width: 20px !important;
-    bottom: 5px !important;
+    bottom: 10px !important;
+    left: 50% !important;
+    transform: translateX(-50%) !important;
+    width: auto !important;
     display: flex !important;
-    gap: 18px;
+    gap: 6px;
     align-items: center;
     justify-content: center;
-    height: 80%;
-    flex-direction: column;
+    flex-direction: row !important;
+    height: auto !important;
   }
-}
+  .button-prev,
+  .button-next {
+    display: none;
+  }
+}
\ No newline at end of file
diff --git a/src/components/spotlight/Spotlight.jsx b/src/components/spotlight/Spotlight.jsx
index 94e2e7a..54e5a1a 100644
--- a/src/components/spotlight/Spotlight.jsx
+++ b/src/components/spotlight/Spotlight.jsx
@@ -1,18 +1,19 @@
 import { Swiper, SwiperSlide } from "swiper/react";
-import { Navigation, Autoplay } from "swiper/modules";
+import { Navigation, Autoplay, Pagination } from "swiper/modules";
 import "swiper/css";
 import "swiper/css/autoplay";
 import "swiper/css/navigation";
+import "swiper/css/pagination";
 import "./Spotlight.css";
 import Banner from "../banner/Banner";
 
 const Spotlight = ({ spotlights }) => {
   return (
     <>
-      <div className="relative h-[600px] max-[1390px]:h-[530px] max-[1300px]:h-[500px] max-md:h-[420px]">
-        <div className="absolute right-[10px] bottom-0 flex flex-col space-y-2 z-10 max-[575px]:hidden">
-          <div className="button-next"></div>
+      <div className="relative h-[450px] max-[1390px]:h-[400px] max-[1300px]:h-[350px] max-md:h-[300px] pt-[20px]">
+        <div className="absolute right-[10px] top-[30px] flex space-x-2 z-10 max-[575px]:hidden">
           <div className="button-prev"></div>
+          <div className="button-next"></div>
         </div>
         {spotlights && spotlights.length > 0 ? (
           <>
@@ -25,14 +26,18 @@ const Spotlight = ({ spotlights }) => {
                 nextEl: ".button-next",
                 prevEl: ".button-prev",
               }}
+              pagination={{
+                clickable: true,
+                dynamicBullets: false,
+              }}
               autoplay={{
                 delay: 3000,
                 disableOnInteraction: false,
               }}
-              modules={[Navigation, Autoplay]}
-              className="h-[600px] max-[1390px]:h-full"
+              modules={[Navigation, Autoplay, Pagination]}
+              className="h-[450px] max-[1390px]:h-full"
               style={{
-                "--swiper-pagination-bullet-inactive-color": "#ffffff",
+                "--swiper-pagination-bullet-inactive-color": "rgba(255, 255, 255, 0.5)",
                 "--swiper-pagination-bullet-inactive-opacity": "1",
               }}
             >
@@ -51,4 +56,4 @@ const Spotlight = ({ spotlights }) => {
   );
 };
 
-export default Spotlight;
+export default Spotlight;
\ No newline at end of file