diff --git a/src/components/Carousel/Carousel.stories.ts b/src/components/Carousel/Carousel.stories.ts
index e23bf89cd3531a874bc000abb122408986b32a5f..0bd8f47e32defcae329d66169b6a3669750f555a 100644
--- a/src/components/Carousel/Carousel.stories.ts
+++ b/src/components/Carousel/Carousel.stories.ts
@@ -109,5 +109,6 @@ export const Full: Story = {
     ],
 
     buttonsBelow: true,
+    theme: 'sky',
   },
 };
diff --git a/src/components/Carousel/CarouselArrowContainer.vue b/src/components/Carousel/CarouselButtonContainer.vue
similarity index 82%
rename from src/components/Carousel/CarouselArrowContainer.vue
rename to src/components/Carousel/CarouselButtonContainer.vue
index 4e1583779ef914f99a33f6431651294388eb6c86..4f53d8b2704809731de486e66c7c535c3525a5bf 100644
--- a/src/components/Carousel/CarouselArrowContainer.vue
+++ b/src/components/Carousel/CarouselButtonContainer.vue
@@ -3,6 +3,8 @@ defineProps<{
   disable?: boolean;
   textColor: string;
   color: string;
+  width: string;
+  borderRadius: string;
 }>();
 </script>
 
@@ -32,12 +34,13 @@ defineProps<{
 <style scoped>
 .arrowContainer {
   position: relative;
-  min-width: 50px;
-  min-height: 100%;
+  width: v-bind(width);
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
+  background-color: v-bind(color);
+  border-radius: v-bind(borderRadius);
 }
 .icon {
   display: flex;
@@ -47,7 +50,6 @@ defineProps<{
   color: v-bind(textColor);
 }
 .arrowContainer:hover > .bg {
-  background-color: v-bind(textColor);
   opacity: 0.1;
 }
 .arrowContainer:active > .bg {
@@ -57,11 +59,9 @@ defineProps<{
   width: 100%;
   height: 100%;
   position: absolute;
-  padding: 10px;
-  z-index: 5;
   opacity: 0;
-  border-radius: 5px;
-  background-color: transparent;
+  border-radius: v-bind(borderRadius);
+  background-color: black;
   transition: all 0.2s ease;
 }
 .disable {