diff --git a/components/src/components/molecules/CountdownCircle/CountdownCircle.tsx b/components/src/components/molecules/CountdownCircle/CountdownCircle.tsx
index dd467c25..a7b8ded2 100644
--- a/components/src/components/molecules/CountdownCircle/CountdownCircle.tsx
+++ b/components/src/components/molecules/CountdownCircle/CountdownCircle.tsx
@@ -81,7 +81,7 @@ const Circle = ({
             .otherwise(() => '4')}
         />
       )}
-      transition="all 1s linear, stroke-width 0.2s ease-in-out 1s"
+      className={styles.circle}
     />
   )
 }
diff --git a/components/src/components/molecules/CountdownCircle/styles.css.ts b/components/src/components/molecules/CountdownCircle/styles.css.ts
index 634b797a..177a85a0 100644
--- a/components/src/components/molecules/CountdownCircle/styles.css.ts
+++ b/components/src/components/molecules/CountdownCircle/styles.css.ts
@@ -1,4 +1,5 @@
 import { sprinkles } from '@/src/css/sprinkles.css'
+import { style } from '@vanilla-extract/css'
 import { recipe } from '@vanilla-extract/recipes'
 
 export const variants = recipe({
@@ -19,3 +20,7 @@ export const variants = recipe({
     },
   },
 })
+
+export const circle = style({
+  transition: 'all 1s linear, stroke-width 0.2s ease-in-out 1s',
+})
diff --git a/components/src/components/molecules/Dropdown/Dropdown.tsx b/components/src/components/molecules/Dropdown/Dropdown.tsx
index bab66ae8..0c57c0f9 100644
--- a/components/src/components/molecules/Dropdown/Dropdown.tsx
+++ b/components/src/components/molecules/Dropdown/Dropdown.tsx
@@ -21,6 +21,7 @@ import { ScrollBox } from '../../atoms/ScrollBox/ScrollBox'
 import * as styles from './styles.css'
 import { clsx } from 'clsx'
 import type { Color } from '@/src/interfaces/withColor'
+import { assignInlineVars } from '@vanilla-extract/dynamic'
 
 type Align = 'left' | 'right'
 type LabelAlign = 'flex-start' | 'flex-end' | 'center'
@@ -370,11 +371,12 @@ const Chevron = ({
       fill="currentColor"
       marginLeft="1"
       marginRight="0.5"
-      transform={rotation($direction, !!$open)}
       transitionDuration={200}
       transitionProperty="all"
       transitionTimingFunction="inOut"
       width="3"
+      className={styles.chevron}
+      style={assignInlineVars({ [styles.chevronTransform]: rotation($direction, !!$open) })}
     />
   )
 }
diff --git a/components/src/components/molecules/Dropdown/styles.css.ts b/components/src/components/molecules/Dropdown/styles.css.ts
index 40876485..99ea6eb8 100644
--- a/components/src/components/molecules/Dropdown/styles.css.ts
+++ b/components/src/components/molecules/Dropdown/styles.css.ts
@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css'
+import { createVar, style } from '@vanilla-extract/css'
 
 import { commonVars } from '@/src/css/theme.css'
 import { recipe } from '@vanilla-extract/recipes'
@@ -53,3 +53,9 @@ export const actionSheeItem = style({
 export const menuButtonIndicator = style({
   transform: 'translateY(-50%)',
 })
+
+export const chevronTransform = createVar()
+
+export const chevron = style({
+  transform: chevronTransform,
+})