diff --git a/src/runtime/components/elements/Carousel.vue b/src/runtime/components/elements/Carousel.vue
index b8e00abc..6f3fa82f 100644
--- a/src/runtime/components/elements/Carousel.vue
+++ b/src/runtime/components/elements/Carousel.vue
@@ -56,7 +56,7 @@
 </template>
 
 <script lang="ts">
-import { ref, toRef, toRefs, computed, defineComponent } from 'vue'
+import { ref, toRef, computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge } from 'tailwind-merge'
 import { mergeConfig } from '../../utils'
@@ -112,10 +112,9 @@ export default defineComponent({
     const carouselRef = ref<HTMLElement>()
     const itemWidth = ref(0)
 
-    const { x, arrivedState } = useScroll(carouselRef, { behavior: 'smooth' })
-    const { width: carouselWidth } = useElementSize(carouselRef)
+    const { x } = useScroll(carouselRef, { behavior: 'smooth' })
 
-    const { left: isFirst, right: isLast } = toRefs(arrivedState)
+    const { width: carouselWidth } = useElementSize(carouselRef)
 
     useCarouselScroll(carouselRef)
 
@@ -125,7 +124,13 @@ export default defineComponent({
       itemWidth.value = entry?.target?.firstElementChild?.clientWidth || 0
     })
 
-    const currentPage = computed(() => Math.round(x.value / itemWidth.value) + 1)
+    const currentPage = computed(() => {
+      if (!itemWidth.value) {
+        return 0
+      }
+
+      return Math.round(x.value / itemWidth.value) + 1
+    })
 
     const pages = computed(() => {
       if (!itemWidth.value) {
@@ -135,6 +140,9 @@ export default defineComponent({
       return props.items.length - Math.round(carouselWidth.value / itemWidth.value) + 1
     })
 
+    const isFirst = computed(() => currentPage.value <= 1)
+    const isLast = computed(() => currentPage.value === pages.value)
+
     function onClickNext () {
       x.value += itemWidth.value
     }