diff --git a/src/components/Arrow/Arrow.svelte b/src/components/Arrow/Arrow.svelte
index 610b0d7..f4ec94b 100644
--- a/src/components/Arrow/Arrow.svelte
+++ b/src/components/Arrow/Arrow.svelte
@@ -13,7 +13,7 @@
 </script>
 
 <button
-  class="sc-carousel-arrow__circle"
+  class="sc-carousel-button sc-carousel-arrow__circle"
   class:sc-carousel-arrow__circle_disabled={disabled}
   on:click
 >
diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index fe07283..5b7fb3b 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -368,4 +368,11 @@
     position: absolute;
     bottom: 0;
   }
+  :global(.sc-carousel-button) {
+    all: unset;
+    cursor: pointer;
+  }
+  :global(.sc-carousel-button:focus) {
+    outline: 5px auto;
+  }
 </style>
diff --git a/src/components/Dot/Dot.svelte b/src/components/Dot/Dot.svelte
index 0d34c7b..f15a8fa 100644
--- a/src/components/Dot/Dot.svelte
+++ b/src/components/Dot/Dot.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <button
-  class="sc-carousel-dot__dot"
+  class="sc-carousel-button sc-carousel-dot__dot"
   class:sc-carousel-dot__dot_active={active}
   on:click
 ></button>
@@ -18,16 +18,6 @@
     --sc-dot-size-animation-time: 250ms;
   }
 
-  button {
-    all: unset;
-    cursor: pointer;
-  }
-
-  button:focus {
-    outline: 1px dotted #212121;
-    outline: 5px auto -webkit-focus-ring-color;
-  }
-
   .sc-carousel-dot__dot {
     background-color: var(--sc-color-rgb-light);
     border-radius: 50%;