diff --git a/src/Components/Artist/ArtistCard.jsx b/src/Components/Artist/ArtistCard.jsx
index 3282d7b..e2ffce8 100644
--- a/src/Components/Artist/ArtistCard.jsx
+++ b/src/Components/Artist/ArtistCard.jsx
@@ -1,14 +1,21 @@
 import React from "react";
 
-const ArtistCard = ({ clickk, setClickk, setCross, name }) => {
+const ArtistCard = ({
+  clickk,
+  setClickk,
+  setCross,
+  photoLink = "https://res.cloudinary.com/dhpqjrbha/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1710876326/sf7py4kekiyxmzcndxqp.jpg?_s=public-apps",
+  name,
+  profession = "Singer",
+}) => {
   //  const [clickk, setClickk] = useState(false);
   // console.log(clickk);
   const backFrame =
     "https://res.cloudinary.com/dhpqjrbha/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1711056518/Frame_2608596_hzjumh.jpg?_s=public-apps";
   const frame =
     "https://res.cloudinary.com/dhpqjrbha/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1711056519/Group_2608667_reshtk.jpg?_s=public-apps";
-  const photoLink =
-    "https://res.cloudinary.com/dhpqjrbha/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1710876326/sf7py4kekiyxmzcndxqp.jpg?_s=public-apps";
+  // const photoLink =
+  //   "https://res.cloudinary.com/dhpqjrbha/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1710876326/sf7py4kekiyxmzcndxqp.jpg?_s=public-apps";
   return (
     <div
       className={`flex items-center transition-all duration-[1000ms] ease-in-out ${clickk ? "w-[95vw] md:w-[60rem] h-[25rem] border-[.5rem] shadow-md justify-between" : "w-[12.8rem] h-[16rem] justify-center"}`}
@@ -30,7 +37,7 @@ const ArtistCard = ({ clickk, setClickk, setCross, name }) => {
           <img src={photoLink} alt="" className="w-full h-full object-cover" />
         </div>
         <div
-          className={`absolute w-[100%] h-[100%] flex flex-col justify-center items-center  z-[20]  ${clickk ? "top-[6.7rem] leading-[1.3rem]" : "top-[4.9rem] leading-[1rem]"}`}
+          className={`absolute w-[100%] h-[100%] flex flex-col justify-center items-center  z-[20]  ${clickk ? "top-[6.7rem] leading-[1.3rem]" : "top-[4.9rem] leading-[1.1rem]"}`}
         >
           <div
             className={`font-semibold ${clickk ? "text-[1.3rem]" : "text-[1rem]"}`}
@@ -38,8 +45,8 @@ const ArtistCard = ({ clickk, setClickk, setCross, name }) => {
           >
             {name}
           </div>
-          <div className="text-[.8rem]" style={{ color: "#B02227" }}>
-            Singer
+          <div className="text-[.7rem]" style={{ color: "#B02227" }}>
+            {profession}
           </div>
         </div>
       </div>
diff --git a/src/Components/Artist/ArtistPageAnimation.jsx b/src/Components/Artist/ArtistPageAnimation.jsx
index 50a742f..b7ccb21 100644
--- a/src/Components/Artist/ArtistPageAnimation.jsx
+++ b/src/Components/Artist/ArtistPageAnimation.jsx
@@ -16,7 +16,7 @@ const ArtistPageAnimation = ({ first, second, third, setfirst, setsecond, setthi
       className={`relative w-[100%] transition-all duration-[1000ms] ease-in-out ${first || second || third ? "h-[50rem]" : " h-[25rem]"}`}
     >
       <div
-        className={`flex h-[30rem] w-[100%] justify-center gap-[7rem] transition-all duration-[1500] ease-in-out ${first || second || third ? "top-[30rem]" : "top-[0rem]"} absolute`}
+        className={`flex h-[30rem] w-[100%] justify-center gap-[8rem] transition-all duration-[1500] ease-in-out ${first || second || third ? "top-[30rem]" : "top-[0rem]"} absolute`}
       >
         <div
           className={`transition-all duration-[1500ms] ease-in-out ${first ? "absolute top-[-30rem]" : "top-[0rem]"}`}
diff --git a/src/Components/Loader/Loading.jsx b/src/Components/Loader/Loading.jsx
index 546983d..53d6eec 100644
--- a/src/Components/Loader/Loading.jsx
+++ b/src/Components/Loader/Loading.jsx
@@ -1,20 +1,22 @@
 import React from "react";
-import { Player } from "@lottiefiles/react-lottie-player";
+// import { Player } from "@lottiefiles/react-lottie-player";
 import styles from "./Loading.module.scss";
 // import loaderlottie from './posua24loaderjson.json'
-import projector from "../../assets/lottie/projector.json";
+// import projector from "../../assets/lottie/projector.json";
+import loader1 from "./loader1.gif";
 
 const Loading = () => {
   return (
     <main id={styles.loadingtopmain}>
-      <Player
+      {/* <Player
         className={styles.butterfly}
         autoplay
         loop
         src={projector}
         id={styles.lottie}
-        // style={{ height: "auto", width: "100px" }}
-      ></Player>
+        style={{ height: "auto", width: "100px" }}
+      ></Player> */}
+      <img src={loader1} alt="Loading..." className="" />
       {/* <p>Loading...</p> */}
     </main>
   );
diff --git a/src/Components/Loader/Loading.module.scss b/src/Components/Loader/Loading.module.scss
index da60379..a949cd5 100644
--- a/src/Components/Loader/Loading.module.scss
+++ b/src/Components/Loader/Loading.module.scss
@@ -13,4 +13,5 @@
   justify-content: center;
   align-items: center;
   overflow-x: hidden;
+  overflow-y: hidden;
 }
diff --git a/src/Components/Loader/loader1.gif b/src/Components/Loader/loader1.gif
new file mode 100644
index 0000000..9d0a4b2
Binary files /dev/null and b/src/Components/Loader/loader1.gif differ
diff --git a/src/Pages/Artist/ArtistPage.jsx b/src/Pages/Artist/ArtistPage.jsx
index 4697b75..8d35e6c 100644
--- a/src/Pages/Artist/ArtistPage.jsx
+++ b/src/Pages/Artist/ArtistPage.jsx
@@ -26,7 +26,7 @@ const ArtistPage = () => {
   const jaapi =
     "https://res.cloudinary.com/dhpqjrbha/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1711053903/OBJECTS_1_gvgj7g.jpg?_s=public-apps";
 
-  const prevArtistData = [
+  const UpArtistData = [
     {
       id: 1,
       name: "Zubeen Garg",
@@ -46,25 +46,69 @@ const ArtistPage = () => {
         "https://res.cloudinary.com/dhpqjrbha/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1710876326/sf7py4kekiyxmzcndxqp.jpg?_s=public-apps",
     },
   ];
-
-  const UpArtistData = [
+  const prevArtistData = [
     {
       id: 1,
-      name: "Zubeen Garg",
+      name: "Dikshu Sharma",
+      profession: "Singer",
       photoLink:
-        "https://res.cloudinary.com/dhpqjrbha/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1710876326/sf7py4kekiyxmzcndxqp.jpg?_s=public-apps",
+        "https://res.cloudinary.com/dp92qug2f/image/upload/c_scale,w_760,f_auto,fl_lossy/v1677782744/posua/WhatsApp_Image_2023-03-03_at_00.15.12_nhe9xz.jpg",
     },
     {
       id: 2,
-      name: "Zubeen Garg",
+      name: "Ranjit Gogoi",
+      profession: "Bihu Samrat",
       photoLink:
-        "https://res.cloudinary.com/dhpqjrbha/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1710876326/sf7py4kekiyxmzcndxqp.jpg?_s=public-apps",
+        "https://res.cloudinary.com/dp92qug2f/image/upload/c_scale,w_360,f_auto,fl_lossy/v1677783229/posua/DSC_0102_1_-min_obvt2f.jpg",
     },
     {
       id: 3,
+      name: "Deusila",
+      profession: "Bihu Dol",
+      photoLink:
+        "https://assets.sentinelassam.com/h-upload/c_scale,w_360,f_auto,fl_lossy/2021/04/14/218865-bihu.webp?w=940&dpr=1.3",
+    },
+    {
+      id: 4,
+      name: "Priyanka Bharali",
+      profession: "Singer",
+      photoLink:
+        "https://res.cloudinary.com/dp92qug2f/image/upload/c_scale,w_360,f_auto,fl_lossy/v1677513050/WhatsApp_Image_2023-02-27_at_20.35.22_ai2wby.jpg",
+    },
+    {
+      id: 5,
+      name: "Tezpuriya Thespian",
+      profession: "Band",
+      photoLink:
+        "https://res.cloudinary.com/dp92qug2f/image/upload/v1677787106/posua/maxresdefault_edezq4.jpg",
+    },
+    {
+      id: 6,
       name: "Zubeen Garg",
+      profession: "Singer",
       photoLink:
-        "https://res.cloudinary.com/dhpqjrbha/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1710876326/sf7py4kekiyxmzcndxqp.jpg?_s=public-apps",
+        "https://res.cloudinary.com/dp92qug2f/image/upload/c_scale,w_360,f_auto,fl_lossy/v1677785093/posua/Zubeen-Hospitalized-Shifted-to-ICU-for-24-Hours_1658305106491_1658305113562_1658305113562_fgv1gr.webp",
+    },
+    {
+      id: 7,
+      name: "Neel Akash",
+      profession: "Singer",
+      photoLink:
+        "https://res.cloudinary.com/dp92qug2f/image/upload/c_scale,w_360,f_auto,fl_lossy/v1677785486/posua/278904714_3139465349627002_1271890122984205712_n.jpg_nmumpg.jpg",
+    },
+    {
+      id: 8,
+      name: "Simanta Shekhar",
+      profession: "Singer",
+      photoLink:
+        "https://res.cloudinary.com/dp92qug2f/image/upload/c_scale,w_360,f_auto,fl_lossy/v1677785795/posua/artist_4642892-1500240408_vtmltu.jpg",
+    },
+    {
+      id: 9,
+      name: "Manash Robin",
+      profession: "Singer",
+      photoLink:
+        "https://res.cloudinary.com/dp92qug2f/image/upload/v1677786083/posua/manas_sr8oab.jpg",
     },
   ];
 
@@ -72,7 +116,7 @@ const ArtistPage = () => {
     <main className="min-h-full min-w-full flex flex-col relative justify-center items-center overflow-hidden mb-[4rem]">
       <ArtistAnimation imgUrl={artImg} jaapi={jaapi} text="UPCOMING ARTISTS" />
 
-      {/* ************Previous Artist desktop view start1***************** */}
+      {/* ************Upcoming Artist desktop view start1***************** */}
       <div className="mt-[5rem] z-[50] hidden md:block">
         <ArtistPageAnimation
           first={first}
@@ -83,16 +127,16 @@ const ArtistPage = () => {
           setthird={setthird}
         />
       </div>
-      {/* ************Previous Artist desktop view end1***************** */}
+      {/* ************Upcoming Artist desktop view end1***************** */}
 
-      {/* ************Previous Artist mobile view start2***************** */}
+      {/* ************Upcoming Artist mobile view start2***************** */}
 
       <div
         className="my-[4rem] w-[100%] z-[10] flex justify-center relative items-center md:hidden"
         style={{ overflowX: "unset" }}
       >
         <Swiper spaceBetween={100} slidesPerView={1}>
-          {prevArtistData.map((profile) => {
+          {UpArtistData.map((profile) => {
             return (
               <SwiperSlide key={profile.id}>
                 {({ isActive }) => (
@@ -110,63 +154,67 @@ const ArtistPage = () => {
         </Swiper>
         <div className="flex w-[100%] justify-center items-center absolute bottom-[-2rem] z-[1000]">
           <div
-            className={`${active1 === 1 ? "rounded-l-lg" : "rounded-lg"} w-[.8rem] h-[.8rem] transition-all duration-300 ease-in-out`}
+            className={`${active1 === 1 ? "rounded-l-lg" : "rounded-lg"} w-[.7rem] h-[.7rem] transition-all duration-300 ease-in-out`}
             style={{ backgroundColor: active1 === 1 ? "white" : "#F2C18D" }}
           ></div>
           <div
-            className="w-[.8rem] h-[.8rem] transition-all duration-300 ease-in-out"
+            className="w-[.7rem] h-[.7rem] transition-all duration-300 ease-in-out"
             style={{ backgroundColor: active1 === 1 ? "white" : "" }}
           ></div>
           <div
-            className={`transition-all duration-300 ease-in-out ${active1 === 1 ? "rounded-r-lg" : ""} ${active1 === 2 ? "rounded-l-lg" : ""} ${active1 !== 1 && active1 !== 2 ? "rounded-lg" : ""} w-[.8rem] h-[.8rem]`}
+            className={`transition-all duration-300 ease-in-out ${active1 === 1 ? "rounded-r-lg" : ""} ${active1 === 2 ? "rounded-l-lg" : ""} ${active1 !== 1 && active1 !== 2 ? "rounded-lg" : ""} w-[.7rem] h-[.7rem]`}
             style={{
               backgroundColor: active1 === 1 || active1 === 2 ? "white" : "#F2C18D",
             }}
           ></div>
           <div
-            className="transition-all duration-300 ease-in-out w-[.8rem] h-[.8rem]"
+            className="transition-all duration-300 ease-in-out w-[.7rem] h-[.7rem]"
             style={{ backgroundColor: active1 === 2 ? "white" : "" }}
           ></div>
           <div
-            className={`transition-all duration-300 ease-in-out ${active1 === 2 ? "rounded-r-lg" : ""} ${active1 === 3 ? "rounded-l-lg" : ""} ${active1 !== 2 && active1 !== 3 ? "rounded-lg" : ""} w-[.8rem] h-[.8rem]`}
+            className={`transition-all duration-300 ease-in-out ${active1 === 2 ? "rounded-r-lg" : ""} ${active1 === 3 ? "rounded-l-lg" : ""} ${active1 !== 2 && active1 !== 3 ? "rounded-lg" : ""} w-[.7rem] h-[.7rem]`}
             style={{
               backgroundColor: active1 === 2 || active1 === 3 ? "white" : "#F2C18D",
             }}
           ></div>
           <div
-            className="transition-all duration-300 ease-in-out w-[.8rem] h-[.8rem]"
+            className="transition-all duration-300 ease-in-out w-[.7rem] h-[.7rem]"
             style={{ backgroundColor: active1 === 3 ? "white" : "" }}
           ></div>
           <div
-            className={`transition-all duration-300 ease-in-out ${active1 === 3 ? "rounded-r-lg" : "rounded-lg"} w-[.8rem] h-[.8rem]`}
+            className={`transition-all duration-300 ease-in-out ${active1 === 3 ? "rounded-r-lg" : "rounded-lg"} w-[.7rem] h-[.7rem]`}
             style={{ backgroundColor: active1 === 3 ? "white" : "#F2C18D" }}
           ></div>
         </div>
       </div>
 
-      {/* ************Previous Artist mobile view end2***************** */}
+      {/* ************Upcoming Artist mobile view end2***************** */}
 
-      {/* <div className=" h-[3.5rem] md:h-[7rem] mt-[4rem] mb-[3rem] flex z-[50]">
-        <img src={artImg2} alt="Art" className="w-full h-full object-cover" />
-      </div> */}
       <ArtistAnimation imgUrl={artImg} jaapi={jaapi} text="PREVIOUS ARTISTS" />
 
-      {/* ************Upcoming Artist desktop start***************** */}
-      <div className="my-[5rem] md:flex gap-[7rem] hidden">
-        <ArtistCard name="Rob JackSon" />
-        <ArtistCard name="Rob JackSon" />
-        <ArtistCard name="Rob JackSon" />
+      {/* ************Previous Artist desktop start***************** */}
+      <div className="my-[5rem] md:flex justify-center items-center flex-wrap hidden w-[60%] gap-[8rem]">
+        {prevArtistData.map((profile) => {
+          return (
+            <ArtistCard
+              name={profile.name}
+              key={profile.id}
+              profession={profile.profession}
+              photoLink={profile.photoLink}
+            />
+          );
+        })}
       </div>
-      {/* ************Upcoming Artist desktop end***************** */}
+      {/* ************Previous Artist desktop end***************** */}
 
-      {/* ************Upcoming Artist mobile start***************** */}
+      {/* ************Previous Artist mobile start***************** */}
 
       <div
         className="my-[4rem] w-[100%] z-[10] flex justify-center relative items-center md:hidden"
         style={{ overflowX: "unset" }}
       >
         <Swiper spaceBetween={100} slidesPerView={1}>
-          {UpArtistData.map((profile) => {
+          {prevArtistData.map((profile) => {
             return (
               <SwiperSlide key={profile.id}>
                 {({ isActive }) => (
@@ -175,50 +223,116 @@ const ArtistPage = () => {
                     style={{ overflowX: "unset" }}
                   >
                     {isActive ? setActive2(profile.id) : ""}
-                    <ArtistCard photoLink={profile.photoLink} name={profile.name} />
+                    <ArtistCard
+                      photoLink={profile.photoLink}
+                      name={profile.name}
+                      profession={profile.profession}
+                    />
                   </div>
                 )}
               </SwiperSlide>
             );
           })}
         </Swiper>
-        <div className="flex w-[100%] justify-center items-center absolute bottom-[-2rem] z-[1000]">
+        <div className="flex w-[100%] justify-center items-center absolute bottom-[-2.5rem] z-[1000]">
           <div
-            className={`${active2 === 1 ? "rounded-l-lg" : "rounded-lg"} w-[.8rem] h-[.8rem] transition-all duration-300 ease-in-out`}
+            className={`${active2 === 1 ? "rounded-l-lg" : "rounded-lg"} w-[.7rem] h-[.7rem] transition-all duration-300 ease-in-out`}
             style={{ backgroundColor: active2 === 1 ? "white" : "#F2C18D" }}
           ></div>
           <div
-            className="w-[.8rem] h-[.8rem] transition-all duration-300 ease-in-out"
+            className="w-[.7rem] h-[.7rem] transition-all duration-300 ease-in-out"
             style={{ backgroundColor: active2 === 1 ? "white" : "" }}
           ></div>
           <div
-            className={`transition-all duration-300 ease-in-out ${active2 === 1 ? "rounded-r-lg" : ""} ${active2 === 2 ? "rounded-l-lg" : ""} ${active2 !== 1 && active2 !== 2 ? "rounded-lg" : ""} w-[.8rem] h-[.8rem]`}
+            className={`transition-all duration-300 ease-in-out ${active2 === 1 ? "rounded-r-lg" : ""} ${active2 === 2 ? "rounded-l-lg" : ""} ${active2 !== 1 && active2 !== 2 ? "rounded-lg" : ""} w-[.7rem] h-[.7rem]`}
             style={{
               backgroundColor: active2 === 1 || active2 === 2 ? "white" : "#F2C18D",
             }}
           ></div>
           <div
-            className="transition-all duration-300 ease-in-out w-[.8rem] h-[.8rem]"
+            className="transition-all duration-300 ease-in-out w-[.7rem] h-[.7rem]"
             style={{ backgroundColor: active2 === 2 ? "white" : "" }}
           ></div>
           <div
-            className={`transition-all duration-300 ease-in-out ${active2 === 2 ? "rounded-r-lg" : ""} ${active2 === 3 ? "rounded-l-lg" : ""} ${active2 !== 2 && active2 !== 3 ? "rounded-lg" : ""} w-[.8rem] h-[.8rem]`}
+            className={`transition-all duration-300 ease-in-out ${active2 === 2 ? "rounded-r-lg" : ""} ${active2 === 3 ? "rounded-l-lg" : ""} ${active2 !== 2 && active2 !== 3 ? "rounded-lg" : ""} w-[.7rem] h-[.7rem]`}
             style={{
               backgroundColor: active2 === 2 || active2 === 3 ? "white" : "#F2C18D",
             }}
           ></div>
           <div
-            className="transition-all duration-300 ease-in-out w-[.8rem] h-[.8rem]"
+            className="transition-all duration-300 ease-in-out w-[.7rem] h-[.7rem]"
             style={{ backgroundColor: active2 === 3 ? "white" : "" }}
           ></div>
           <div
-            className={`transition-all duration-300 ease-in-out ${active2 === 3 ? "rounded-r-lg" : "rounded-lg"} w-[.8rem] h-[.8rem]`}
-            style={{ backgroundColor: active2 === 3 ? "white" : "#F2C18D" }}
+            className={`transition-all duration-300 ease-in-out ${active2 === 3 ? "rounded-r-lg" : ""} ${active2 === 4 ? "rounded-l-lg" : ""} ${active2 !== 3 && active2 !== 4 ? "rounded-lg" : ""} w-[.7rem] h-[.7rem]`}
+            style={{
+              backgroundColor: active2 === 3 || active2 === 4 ? "white" : "#F2C18D",
+            }}
+          ></div>
+          <div
+            className="transition-all duration-300 ease-in-out w-[.7rem] h-[.7rem]"
+            style={{ backgroundColor: active2 === 4 ? "white" : "" }}
+          ></div>
+          <div
+            className={`transition-all duration-300 ease-in-out ${active2 === 4 ? "rounded-r-lg" : ""} ${active2 === 5 ? "rounded-l-lg" : ""} ${active2 !== 4 && active2 !== 5 ? "rounded-lg" : ""} w-[.7rem] h-[.7rem]`}
+            style={{
+              backgroundColor: active2 === 4 || active2 === 5 ? "white" : "#F2C18D",
+            }}
+          ></div>
+          <div
+            className="transition-all duration-300 ease-in-out w-[.7rem] h-[.7rem]"
+            style={{ backgroundColor: active2 === 5 ? "white" : "" }}
+          ></div>
+          <div
+            className={`transition-all duration-300 ease-in-out ${active2 === 5 ? "rounded-r-lg" : ""} ${active2 === 6 ? "rounded-l-lg" : ""} ${active2 !== 5 && active2 !== 6 ? "rounded-lg" : ""} w-[.7rem] h-[.7rem]`}
+            style={{
+              backgroundColor: active2 === 5 || active2 === 6 ? "white" : "#F2C18D",
+            }}
+          ></div>
+          <div
+            className="transition-all duration-300 ease-in-out w-[.7rem] h-[.7rem]"
+            style={{ backgroundColor: active2 === 6 ? "white" : "" }}
+          ></div>
+          <div
+            className={`transition-all duration-300 ease-in-out ${active2 === 6 ? "rounded-r-lg" : ""} ${active2 === 7 ? "rounded-l-lg" : ""} ${active2 !== 6 && active2 !== 7 ? "rounded-lg" : ""} w-[.7rem] h-[.7rem]`}
+            style={{
+              backgroundColor: active2 === 6 || active2 === 7 ? "white" : "#F2C18D",
+            }}
+          ></div>
+          <div
+            className="transition-all duration-300 ease-in-out w-[.7rem] h-[.7rem]"
+            style={{ backgroundColor: active2 === 7 ? "white" : "" }}
+          ></div>
+          <div
+            className={`transition-all duration-300 ease-in-out ${active2 === 7 ? "rounded-r-lg" : ""} ${active2 === 8 ? "rounded-l-lg" : ""} ${active2 !== 7 && active2 !== 8 ? "rounded-lg" : ""} w-[.7rem] h-[.7rem]`}
+            style={{
+              backgroundColor: active2 === 7 || active2 === 8 ? "white" : "#F2C18D",
+            }}
+          ></div>
+          <div
+            className="transition-all duration-300 ease-in-out w-[.7rem] h-[.7rem]"
+            style={{ backgroundColor: active2 === 8 ? "white" : "" }}
+          ></div>
+          <div
+            className={`transition-all duration-300 ease-in-out ${active2 === 8 ? "rounded-r-lg" : ""} ${active2 === 9 ? "rounded-l-lg" : ""} ${active2 !== 8 && active2 !== 9 ? "rounded-lg" : ""} w-[.7rem] h-[.7rem]`}
+            style={{
+              backgroundColor: active2 === 8 || active2 === 9 ? "white" : "#F2C18D",
+            }}
+          ></div>
+          <div
+            className="transition-all duration-300 ease-in-out w-[.7rem] h-[.7rem]"
+            style={{ backgroundColor: active2 === 9 ? "white" : "" }}
+          ></div>
+          <div
+            className={`transition-all duration-300 ease-in-out ${active2 === 9 ? "rounded-r-lg" : "rounded-lg"} w-[.7rem] h-[.7rem]`}
+            style={{
+              backgroundColor: active2 === 9 ? "white" : "#F2C18D",
+            }}
           ></div>
         </div>
       </div>
 
-      {/* ************Upcoming Artist mobile start***************** */}
+      {/* ************Previous Artist mobile start***************** */}
 
       {/* *************Flower section start************** */}
       <div