diff --git a/apps/www/src/content/docs/components/carousel.md b/apps/www/src/content/docs/components/carousel.md
index b758c24f..8283c076 100644
--- a/apps/www/src/content/docs/components/carousel.md
+++ b/apps/www/src/content/docs/components/carousel.md
@@ -1,7 +1,4 @@
 ---
-
-```
----
 title: Carousel
 description: A carousel with motion and swipe built using Embla.
 source: apps/www/src/lib/registry/default/ui/carousel
@@ -36,7 +33,6 @@ import {
 
 <template>
   <Carousel>
-    <CarouselDotButtons />
     <CarouselContent>
       <CarouselItem>...</CarouselItem>
       <CarouselItem>...</CarouselItem>
@@ -44,6 +40,8 @@ import {
     </CarouselContent>
     <CarouselPrevious />
     <CarouselNext />
+
+    <CarouselDotButtons />
   </Carousel>
 </template>
 ```
diff --git a/apps/www/src/lib/registry/default/example/CarouselDemo.vue b/apps/www/src/lib/registry/default/example/CarouselDemo.vue
index c6f52f76..ea0787f8 100644
--- a/apps/www/src/lib/registry/default/example/CarouselDemo.vue
+++ b/apps/www/src/lib/registry/default/example/CarouselDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
+import { Carousel, CarouselContent, CarouselDotButtons, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
 import { Card, CardContent } from '@/lib/registry/default/ui/card'
 </script>
 
@@ -18,5 +18,7 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
     </CarouselContent>
     <CarouselPrevious />
     <CarouselNext />
+
+    <CarouselDotButtons class="mt-4" />
   </Carousel>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselDotButtons.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselDotButtons.vue
index 08032bcd..866e44b4 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/CarouselDotButtons.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselDotButtons.vue
@@ -8,11 +8,13 @@ const { scrollTo, selectedIndex, scrollSnaps } = useCarousel()
 </script>
 
 <template>
-  <div
-    v-for="(_, index) in scrollSnaps"
-    :key="index"
-    class="sm:mt-0 first:ml-0 border-1 w-2 h-2 mt-2 ml-2 border-gray-200 border-solid rounded-full"
-    :class="[cn(props.class), index === selectedIndex ? 'border-transparent bg-blue-400' : 'bg-transparent']"
-    @click="scrollTo(index)"
-  />
+  <div class="flex gap-2 justify-center">
+    <div
+      v-for="(_, index) in scrollSnaps"
+      :key="index"
+      class="border-1 w-2 h-2 rounded-full"
+      :class="cn(index === selectedIndex ? 'border-transparent bg-primary' : 'bg-border', props.class)"
+      @click="scrollTo(index)"
+    />
+  </div>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/carousel/index.ts b/apps/www/src/lib/registry/default/ui/carousel/index.ts
index addfe036..185c6627 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/index.ts
+++ b/apps/www/src/lib/registry/default/ui/carousel/index.ts
@@ -3,6 +3,7 @@ export { default as CarouselContent } from './CarouselContent.vue'
 export { default as CarouselItem } from './CarouselItem.vue'
 export { default as CarouselPrevious } from './CarouselPrevious.vue'
 export { default as CarouselNext } from './CarouselNext.vue'
+export { default as CarouselDotButtons } from './CarouselDotButtons.vue'
 export { useCarousel } from './useCarousel'
 
 export type {
diff --git a/apps/www/src/lib/registry/new-york/example/CarouselDemo.vue b/apps/www/src/lib/registry/new-york/example/CarouselDemo.vue
index 53f117c4..85719f56 100644
--- a/apps/www/src/lib/registry/new-york/example/CarouselDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/CarouselDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/new-york/ui/carousel'
+import { Carousel, CarouselContent, CarouselDotButtons, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/new-york/ui/carousel'
 import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
 </script>
 
@@ -18,5 +18,7 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
     </CarouselContent>
     <CarouselPrevious />
     <CarouselNext />
+
+    <CarouselDotButtons class="mt-4" />
   </Carousel>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselDotButtons.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselDotButtons.vue
index d917b325..866e44b4 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselDotButtons.vue
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselDotButtons.vue
@@ -8,11 +8,13 @@ const { scrollTo, selectedIndex, scrollSnaps } = useCarousel()
 </script>
 
 <template>
-  <div
-    v-for="(item, index) in scrollSnaps"
-    :key="index"
-    class="sm:mt-0 first:ml-0 border-1 w-2 h-2 mt-2 ml-2 border-gray-200 border-solid rounded-full"
-    :class="[cn(props.class), index === selectedIndex ? 'border-transparent bg-blue-400' : 'bg-transparent']"
-    @click="scrollTo(index)"
-  />
+  <div class="flex gap-2 justify-center">
+    <div
+      v-for="(_, index) in scrollSnaps"
+      :key="index"
+      class="border-1 w-2 h-2 rounded-full"
+      :class="cn(index === selectedIndex ? 'border-transparent bg-primary' : 'bg-border', props.class)"
+      @click="scrollTo(index)"
+    />
+  </div>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/index.ts b/apps/www/src/lib/registry/new-york/ui/carousel/index.ts
index addfe036..185c6627 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/index.ts
@@ -3,6 +3,7 @@ export { default as CarouselContent } from './CarouselContent.vue'
 export { default as CarouselItem } from './CarouselItem.vue'
 export { default as CarouselPrevious } from './CarouselPrevious.vue'
 export { default as CarouselNext } from './CarouselNext.vue'
+export { default as CarouselDotButtons } from './CarouselDotButtons.vue'
 export { useCarousel } from './useCarousel'
 
 export type {