diff --git a/src/molecules/PaginationDots.svelte b/src/molecules/PaginationDots.svelte
index 39f150a..eb55bdc 100644
--- a/src/molecules/PaginationDots.svelte
+++ b/src/molecules/PaginationDots.svelte
@@ -3,11 +3,12 @@
     const dispatch = createEventDispatcher()
 
     // Props
+    export let className = ''
     export let photos
     export let currentIndex
 </script>
 
-<ol class="carousel__dots">
+<ol class={className}>
     {#each photos as dot, index}
     <li
         class:active={index === currentIndex}
diff --git a/src/organisms/Carousel.svelte b/src/organisms/Carousel.svelte
index 98ec575..c673a53 100644
--- a/src/organisms/Carousel.svelte
+++ b/src/organisms/Carousel.svelte
@@ -203,7 +203,7 @@
         </div>
     </div>
 
-    <PaginationDots {photos} {currentIndex}
+    <PaginationDots className="carousel__dots" {photos} {currentIndex}
         on:goToIndex={event => currentIndex = event.detail.index}
     />
 </div>