diff --git a/packages/ui/src/components/Organisms/Carousel/Carousel.tsx b/packages/ui/src/components/Organisms/Carousel/Carousel.tsx
index ead6bf630..60d8cda40 100644
--- a/packages/ui/src/components/Organisms/Carousel/Carousel.tsx
+++ b/packages/ui/src/components/Organisms/Carousel/Carousel.tsx
@@ -1,18 +1,14 @@
-import React, {
-  ReactComponentElement,
-  ReactElement,
-  ReactNode,
-  useEffect,
-} from 'react';
-import { DotButton, useDotButton } from './CarouselDotButton';
+import clsx from 'clsx';
+import { EmblaOptionsType } from 'embla-carousel';
+import useEmblaCarousel from 'embla-carousel-react';
+import React, { ReactNode, useEffect } from 'react';
+
 import {
-  PrevButton,
   NextButton,
+  PrevButton,
   usePrevNextButtons,
 } from './CarouselArrowButtons';
-import useEmblaCarousel from 'embla-carousel-react';
-import { EmblaOptionsType } from 'embla-carousel';
-import clsx from 'clsx';
+import { DotButton, useDotButton } from './CarouselDotButton';
 
 export function Carousel({
   children,
@@ -47,7 +43,7 @@ export function Carousel({
       <div className="embla__viewport overflow-hidden" ref={emblaRef}>
         <div
           className={clsx(
-            'embla__container grid grid-flow-col gap-4 touch-pan-y touch-pinch-zoom',
+            'embla__container grid touch-pan-y touch-pinch-zoom grid-flow-col gap-4',
             {
               'auto-cols-[100%]': visibleSlides === 1,
               'auto-cols-[50%]': visibleSlides === 2,
@@ -64,19 +60,19 @@ export function Carousel({
         </div>
       </div>
 
-      <div className="embla__controls grid grid-cols-[auto_1fr] justify-between gap-4 mt-4">
+      <div className="embla__controls mt-4 grid grid-cols-[auto_1fr] justify-between gap-4">
         <div className="embla__buttons grid grid-cols-[repeat(2,1fr)] gap-2">
           <PrevButton onClick={onPrevButtonClick} disabled={prevBtnDisabled} />
           <NextButton onClick={onNextButtonClick} disabled={nextBtnDisabled} />
         </div>
 
-        <div className="embla__dots flex flex-wrap gap-2 justify-end align-center">
+        <div className="embla__dots align-center flex flex-wrap justify-end gap-2">
           {scrollSnaps.map((_: unknown, index: number) => (
             <DotButton
               key={index}
               onClick={() => onDotButtonClick(index)}
               className={clsx(
-                'embla__dot touch-manipulation cursor-pointer w-6 h-6 inline-flex items-center justify-center rounded-[50%] text-gray-400',
+                'embla__dot inline-flex h-6 w-6 cursor-pointer touch-manipulation items-center justify-center rounded-[50%] text-gray-400',
                 {
                   'embla__dot--selected bg-gray-800': index === selectedIndex,
                   'bg-gray-200': index !== selectedIndex,
diff --git a/packages/ui/src/components/Organisms/Carousel/CarouselArrowButtons.tsx b/packages/ui/src/components/Organisms/Carousel/CarouselArrowButtons.tsx
index 783d0f56b..a7916318d 100644
--- a/packages/ui/src/components/Organisms/Carousel/CarouselArrowButtons.tsx
+++ b/packages/ui/src/components/Organisms/Carousel/CarouselArrowButtons.tsx
@@ -1,10 +1,10 @@
+import { EmblaCarouselType } from 'embla-carousel';
 import React, {
   ComponentPropsWithRef,
   useCallback,
   useEffect,
   useState,
 } from 'react';
-import { EmblaCarouselType } from 'embla-carousel';
 
 type UsePrevNextButtonsType = {
   prevBtnDisabled: boolean;
@@ -56,11 +56,11 @@ export const PrevButton: React.FC<PropType> = (props) => {
 
   return (
     <button
-      className="embla__button embla__button--prev touch-manipulation inline-flex cursor-pointer items-center justify-center w-8 h-8 text-gray-400"
+      className="embla__button embla__button--prev inline-flex h-8 w-8 cursor-pointer touch-manipulation items-center justify-center text-gray-400"
       type="button"
       {...restProps}
     >
-      <svg className="embla__button__svg w-[35%] h-[35%]" viewBox="0 0 532 532">
+      <svg className="embla__button__svg h-[35%] w-[35%]" viewBox="0 0 532 532">
         <path
           fill="currentColor"
           d="M355.66 11.354c13.793-13.805 36.208-13.805 50.001 0 13.785 13.804 13.785 36.238 0 50.034L201.22 266l204.442 204.61c13.785 13.805 13.785 36.239 0 50.044-13.793 13.796-36.208 13.796-50.002 0a5994246.277 5994246.277 0 0 0-229.332-229.454 35.065 35.065 0 0 1-10.326-25.126c0-9.2 3.393-18.26 10.326-25.2C172.192 194.973 332.731 34.31 355.66 11.354Z"
@@ -76,11 +76,11 @@ export const NextButton: React.FC<PropType> = (props) => {
 
   return (
     <button
-      className="embla__button embla__button--next touch-manipulation inline-flex cursor-pointer items-center justify-center w-8 h-8 text-gray-400"
+      className="embla__button embla__button--next inline-flex h-8 w-8 cursor-pointer touch-manipulation items-center justify-center text-gray-400"
       type="button"
       {...restProps}
     >
-      <svg className="embla__button__svg w-[35%] h-[35%]" viewBox="0 0 532 532">
+      <svg className="embla__button__svg h-[35%] w-[35%]" viewBox="0 0 532 532">
         <path
           fill="currentColor"
           d="M176.34 520.646c-13.793 13.805-36.208 13.805-50.001 0-13.785-13.804-13.785-36.238 0-50.034L330.78 266 126.34 61.391c-13.785-13.805-13.785-36.239 0-50.044 13.793-13.796 36.208-13.796 50.002 0 22.928 22.947 206.395 206.507 229.332 229.454a35.065 35.065 0 0 1 10.326 25.126c0 9.2-3.393 18.26-10.326 25.2-45.865 45.901-206.404 206.564-229.332 229.52Z"
diff --git a/packages/ui/src/components/Organisms/Carousel/CarouselDotButton.tsx b/packages/ui/src/components/Organisms/Carousel/CarouselDotButton.tsx
index c5c924193..86c6d98b1 100644
--- a/packages/ui/src/components/Organisms/Carousel/CarouselDotButton.tsx
+++ b/packages/ui/src/components/Organisms/Carousel/CarouselDotButton.tsx
@@ -1,10 +1,10 @@
+import { EmblaCarouselType } from 'embla-carousel';
 import React, {
   ComponentPropsWithRef,
   useCallback,
   useEffect,
   useState,
 } from 'react';
-import { EmblaCarouselType } from 'embla-carousel';
 
 type UseDotButtonType = {
   selectedIndex: number;