diff --git a/apps/web/src/components/AdPanel/CardLayouts.tsx b/apps/web/src/components/AdPanel/CardLayouts.tsx
index da332684870b3..d2715aa57fc36 100644
--- a/apps/web/src/components/AdPanel/CardLayouts.tsx
+++ b/apps/web/src/components/AdPanel/CardLayouts.tsx
@@ -54,13 +54,9 @@ const AdSlides = memo(({ forceMobile, isDismissible = true }: AdPlayerProps) =>
     resetAllExpanded()
   }, [route, resetAllExpanded])
 
-  const handlePause = () => {
-    pauseAni()
-  }
-
-  const handleResume = () => {
+  const handleResume = useCallback(() => {
     if (!isAnySlideExpanded) resumeAni()
-  }
+  }, [isAnySlideExpanded, resumeAni])
 
   useEffect(() => {
     if (swiperRef.current) {
@@ -94,7 +90,7 @@ const AdSlides = memo(({ forceMobile, isDismissible = true }: AdPlayerProps) =>
       pagination={{ clickable: true, enabled: !isAnySlideExpanded }}
       $showPagination={!isAnySlideExpanded}
       modules={[Autoplay, Pagination, EffectFade]}
-      onAutoplayPause={handlePause}
+      onAutoplayPause={pauseAni}
       onAutoplayResume={handleResume}
       loop
       observer
diff --git a/apps/web/src/components/AdPanel/CarrouselWithSlider.tsx b/apps/web/src/components/AdPanel/CarrouselWithSlider.tsx
index f776d1f3280b7..176f5a4593a09 100644
--- a/apps/web/src/components/AdPanel/CarrouselWithSlider.tsx
+++ b/apps/web/src/components/AdPanel/CarrouselWithSlider.tsx
@@ -32,7 +32,7 @@ export const StyledSwiper = styled(Swiper)<{ $showPagination?: boolean }>`
   .swiper-pagination-bullet {
     display: ${({ $showPagination = true }) => ($showPagination ? 'block' : 'none')};
     position: relative;
-    background-color: ${({ theme }) => theme.colors.inputSecondary};
+    background-color: ${({ theme }) => (theme.isDark ? '#55496E' : '#D7CAEC')};
     margin: 0 !important;
     flex-grow: 1;
     border-radius: 4px;
diff --git a/apps/web/src/components/AdPanel/config.tsx b/apps/web/src/components/AdPanel/config.tsx
index 41edf2e052c8b..cc97fd5e1ce45 100644
--- a/apps/web/src/components/AdPanel/config.tsx
+++ b/apps/web/src/components/AdPanel/config.tsx
@@ -1,4 +1,5 @@
 import { useMatchBreakpoints } from '@pancakeswap/uikit'
+import { useMemo } from 'react'
 import { AdCakeStaking } from './Ads/AdCakeStaking'
 import { AdMevProtection } from './Ads/AdMevProtection'
 import { AdOptionsTrading } from './Ads/AdOptionsTrading'
@@ -20,6 +21,7 @@ enum Priority {
 
 export const useAdConfig = () => {
   const { isDesktop } = useMatchBreakpoints()
+  const shouldRenderOnPage = shouldRenderOnPages(['/buy-crypto', '/', '/prediction'])
   const MAX_ADS = isDesktop ? 6 : 4
 
   const adList: Array<{
@@ -27,48 +29,55 @@ export const useAdConfig = () => {
     component: JSX.Element
     shouldRender?: Array<boolean>
     priority?: number
-  }> = [
-    {
-      id: 'expandable-ad',
-      component: <ExpandableAd />,
-      priority: Priority.FIRST_AD,
-      shouldRender: [shouldRenderOnPages(['/buy-crypto', '/', '/prediction'])],
-    },
-    {
-      id: 'ad-springboard',
-      component: <AdSpringboard />,
-    },
-    {
-      id: 'ad-mev',
-      component: <AdMevProtection />,
-    },
-    {
-      id: 'prediction-telegram-bot',
-      component: <AdTelegramBot />,
-    },
-    {
-      id: 'pcsx',
-      component: <AdPCSX />,
-    },
-    {
-      id: 'cake-staking',
-      component: <AdCakeStaking />,
-    },
-    {
-      id: 'clamm-options-trading',
-      component: <AdOptionsTrading />,
-    },
+  }> = useMemo(
+    () => [
+      {
+        id: 'expandable-ad',
+        component: <ExpandableAd />,
+        priority: Priority.FIRST_AD,
+        shouldRender: [shouldRenderOnPage],
+      },
+      {
+        id: 'ad-springboard',
+        component: <AdSpringboard />,
+      },
+      {
+        id: 'ad-mev',
+        component: <AdMevProtection />,
+      },
+      {
+        id: 'prediction-telegram-bot',
+        component: <AdTelegramBot />,
+      },
+      {
+        id: 'pcsx',
+        component: <AdPCSX />,
+      },
+      {
+        id: 'cake-staking',
+        component: <AdCakeStaking />,
+      },
+      {
+        id: 'clamm-options-trading',
+        component: <AdOptionsTrading />,
+      },
 
-    {
-      id: 'rocker-meme-career',
-      component: <AdRocker />,
-    },
-  ]
+      {
+        id: 'rocker-meme-career',
+        component: <AdRocker />,
+      },
+    ],
+    [shouldRenderOnPage],
+  )
 
-  return adList
-    .filter((ad) => ad.shouldRender === undefined || ad.shouldRender.every(Boolean))
-    .sort((a, b) => (b.priority || Priority.VERY_LOW) - (a.priority || Priority.VERY_LOW))
-    .slice(0, MAX_ADS)
+  return useMemo(
+    () =>
+      adList
+        .filter((ad) => ad.shouldRender === undefined || ad.shouldRender.every(Boolean))
+        .sort((a, b) => (b.priority || Priority.VERY_LOW) - (a.priority || Priority.VERY_LOW))
+        .slice(0, MAX_ADS),
+    [adList, MAX_ADS],
+  )
 }
 
 // Array of strings or regex patterns