diff --git a/packages/actify/src/components/Carousel/CarouselControl.tsx b/packages/actify/src/components/Carousel/CarouselControl.tsx
index dfdfaa3..ac00650 100644
--- a/packages/actify/src/components/Carousel/CarouselControl.tsx
+++ b/packages/actify/src/components/Carousel/CarouselControl.tsx
@@ -2,12 +2,12 @@
 
 import { Icon } from './../Icon'
 import { IconButton } from './../Buttons'
+import { PressEvent } from 'react-aria'
 import React from 'react'
 import clsx from 'clsx'
 import styles from './carousel-control.module.css'
 import { useCarousel } from './CarouselContext'
 import { useInterval } from './../../hooks'
-import { PressEvent } from 'react-aria-components'
 
 type CarouselControlProps = {
   control?: boolean
diff --git a/packages/actify/src/components/Carousel/carousel-indicator.module.css b/packages/actify/src/components/Carousel/carousel-indicator.module.css
index 3a59f6a..72b5166 100644
--- a/packages/actify/src/components/Carousel/carousel-indicator.module.css
+++ b/packages/actify/src/components/Carousel/carousel-indicator.module.css
@@ -17,11 +17,11 @@
   height: 0.75rem /* 12px */;
   border-radius: 9999px;
 }
-.inicator {
+.indicator {
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--md-sys-color-primary) / var(--tw-bg-opacity));
+  background-color: rgb(var(--md-sys-color-background) / var(--tw-bg-opacity));
 }
-.inicator:hover {
+.indicator:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--md-sys-color-on-primary) / var(--tw-bg-opacity));
 }