diff --git a/layers/assets/css/components/_splide.css b/layers/assets/css/components/_splide.css
index 61111f7..8aae5ef 100644
--- a/layers/assets/css/components/_splide.css
+++ b/layers/assets/css/components/_splide.css
@@ -9,7 +9,7 @@
   }
 
   .splide-pagination-bullet {
-    @apply relative w-2 h-2 rounded-full opacity-100 md:w-3 md:h-3 transition-all duration-300 ease-in-out;
+    @apply relative w-2 h-2 rounded-full opacity-100 md:w-3 md:h-3 transition-all duration-200 ease-in-out;
     background-color: var(--pagination-disabled);
   }
 
diff --git a/layers/components/blocks/slide/Thumbnail.vue b/layers/components/blocks/slide/Thumbnail.vue
index d35e8e1..c423d5a 100644
--- a/layers/components/blocks/slide/Thumbnail.vue
+++ b/layers/components/blocks/slide/Thumbnail.vue
@@ -185,8 +185,8 @@ onBeforeUnmount(() => {
   @apply md:w-[calc(100%-16px)];
 }
 .thumbnail-slide {
-  @apply overflow-hidden relative mr-[12px] !border-none rounded-[4px] bg-[var(--pagination-disabled)] md:mr-[16px]
-  after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:border after:rounded-[4px];
+  @apply overflow-hidden relative mr-[12px] !border-none rounded-[4px] bg-[var(--pagination-disabled)] md:mr-[16px] transition-opacity duration-200 ease-in-out
+  after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:border after:rounded-[4px] after:transition-all after:duration-200 after:ease-in-out;
 }
 .thumbnail-slide:hover,
 .thumbnail-slide.is-active {