diff --git a/.changeset/wicked-sloths-agree.md b/.changeset/wicked-sloths-agree.md
new file mode 100644
index 00000000..83310810
--- /dev/null
+++ b/.changeset/wicked-sloths-agree.md
@@ -0,0 +1,5 @@
+---
+'@devup-ui/components': patch
+---
+
+Hotfix button keyframe
diff --git a/packages/components/src/components/Button/IconSpinner.tsx b/packages/components/src/components/Button/IconSpinner.tsx
index b372ba4a..f5bb7b3f 100644
--- a/packages/components/src/components/Button/IconSpinner.tsx
+++ b/packages/components/src/components/Button/IconSpinner.tsx
@@ -1,20 +1,23 @@
 import { Box, keyframes } from '@devup-ui/react'
 import { SVGProps } from 'react'
 
-const spin = keyframes({
-  '0%': {
-    transform: 'rotateZ(0deg)',
-  },
-  '100%': {
-    transform: 'rotateZ(360deg)',
-  },
-})
-
 interface IconSpinnerProps extends SVGProps<SVGSVGElement> {
   type?: 'whole' | 'partial'
 }
 
 export function IconSpinner({ type = 'whole', ...props }: IconSpinnerProps) {
+  /**
+   * TODO: After fixing the keyframes issue, keyframe must be moved to outside function
+   */
+  const spin = keyframes({
+    '0%': {
+      transform: 'rotateZ(0deg)',
+    },
+    '100%': {
+      transform: 'rotateZ(360deg)',
+    },
+  })
+
   if (type === 'partial') {
     return (
       <Box