diff --git a/src/components/Carousel/components/Controls/BaseButton.module.css b/src/components/Carousel/components/Controls/BaseButton.module.css
index 356009c0..3756f608 100644
--- a/src/components/Carousel/components/Controls/BaseButton.module.css
+++ b/src/components/Carousel/components/Controls/BaseButton.module.css
@@ -10,4 +10,7 @@
     drop-shadow(2px 0px 40px rgba(61, 11, 111, 0.4))
     drop-shadow(2px 0px 32px rgba(61, 11, 111, 0.7))
     drop-shadow(2px 0px 8px rgba(61, 11, 111, 0.5));
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
diff --git a/src/components/Carousel/components/Controls/BaseButton.tsx b/src/components/Carousel/components/Controls/BaseButton.tsx
index 93b7974f..66823e83 100644
--- a/src/components/Carousel/components/Controls/BaseButton.tsx
+++ b/src/components/Carousel/components/Controls/BaseButton.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react'
+import { PropsWithChildren } from 'react'
 
 import styles from './BaseButton.module.css'
 
diff --git a/src/components/Carousel/components/Controls/LeftButton.tsx b/src/components/Carousel/components/Controls/LeftButton.tsx
index bd8f5656..505443b5 100644
--- a/src/components/Carousel/components/Controls/LeftButton.tsx
+++ b/src/components/Carousel/components/Controls/LeftButton.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { ChevronLeft } from '@/assets/images'
 
 import BaseButton, { BaseButtonProps } from './BaseButton'
diff --git a/src/components/Carousel/index.tsx b/src/components/Carousel/index.tsx
index 790d2add..ed6166d3 100644
--- a/src/components/Carousel/index.tsx
+++ b/src/components/Carousel/index.tsx
@@ -8,7 +8,7 @@ import Controller from './components/Controller'
 import styles from './index.module.scss'
 
 export interface SlideData {
-  title: string
+  title?: string
   slideElement: JSX.Element
   thumbnail?: JSX.Element
   disableGradient?: boolean
@@ -22,11 +22,13 @@ export interface Carouselv2Props {
   controllerLayout?: 'attached' | 'detached'
   canAutoRotate?: boolean
   onThumbnailHandler?: (index: number) => void
+  onSlideChange?: (index: number) => void
 }
 
 const Carouselv2 = ({
   canAutoRotate = true,
   onThumbnailHandler,
+  onSlideChange,
   ...props
 }: Carouselv2Props) => {
   const [activeIndex, setActiveIndex] = useState(0)
@@ -54,7 +56,7 @@ const Carouselv2 = ({
       >
         {item.slideElement}
         <div className={styles.title}>
-          <div className={styles.titleText}>{item.title}</div>
+          {item.title && <div className={styles.titleText}>{item.title}</div>}
           {item.button ?? null}
         </div>
       </Carousel.Slide>
@@ -71,13 +73,11 @@ const Carouselv2 = ({
         }}
         plugins={[autoplay.current]}
         onMouseEnter={() => {
-          console.log('canAutoRotate onMouseEnter', canAutoRotate)
           if (canAutoRotate) {
             autoplay.current.stop()
           }
         }}
         onMouseLeave={() => {
-          console.log('canAutoRotate onMouseLeave', canAutoRotate)
           if (canAutoRotate) {
             // Internally it is checking if timer is set, and since it can be, it will make .reset() never work
             autoplay.current.stop()
@@ -85,8 +85,8 @@ const Carouselv2 = ({
           }
         }}
         onSlideChange={(index) => {
-          console.log('onSlideChange', index)
           setActiveIndex(index)
+          onSlideChange?.(index)
         }}
         loop={true}
         withControls={false}