diff --git a/.changeset/violet-needles-fly.md b/.changeset/violet-needles-fly.md
new file mode 100644
index 00000000000..dde5d8e50e6
--- /dev/null
+++ b/.changeset/violet-needles-fly.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix Spinner animation not working sometimes in Next.js
diff --git a/packages/thirdweb/src/react/web/ui/components/Spinner.tsx b/packages/thirdweb/src/react/web/ui/components/Spinner.tsx
index c4d541cfbc6..e89798b9f97 100644
--- a/packages/thirdweb/src/react/web/ui/components/Spinner.tsx
+++ b/packages/thirdweb/src/react/web/ui/components/Spinner.tsx
@@ -3,7 +3,7 @@ import { keyframes } from "@emotion/react";
 import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import type { Theme } from "../../../core/design-system/index.js";
 import { iconSize } from "../../../core/design-system/index.js";
-import { StyledCircle, StyledSvg } from "../design-system/elements.js";
+import { StyledSvg } from "../design-system/elements.js";
 
 /**
  * @internal
@@ -24,20 +24,25 @@ export const Spinner: React.FC<{
       viewBox="0 0 50 50"
       className="tw-spinner"
     >
-      <Circle
+      <circle
         cx="25"
         cy="25"
         fill="none"
         r="20"
+        style={{
+          strokeLinecap: "round",
+          animation: `tw-spinner-circle-dash 1.5s ease-in-out infinite`,
+        }}
         stroke={props.color ? theme.colors[props.color] : "currentColor"}
         strokeWidth={Number(iconSize[props.size]) > 64 ? "2" : "4"}
       />
+      <style>{dashAnimation}</style>
     </Svg>
   );
 };
-
 // animations
-const dashAnimation = keyframes`
+const dashAnimation = `
+@keyframes tw-spinner-circle-dash {
   0% {
     stroke-dasharray: 1, 150;
     stroke-dashoffset: 0;
@@ -63,8 +68,3 @@ const Svg = /* @__PURE__ */ StyledSvg({
   height: "1em",
   width: "1em",
 });
-
-const Circle = /* @__PURE__ */ StyledCircle({
-  animation: `${dashAnimation} 1.5s ease-in-out infinite`,
-  strokeLinecap: "round",
-});
diff --git a/packages/thirdweb/src/react/web/ui/design-system/elements.ts b/packages/thirdweb/src/react/web/ui/design-system/elements.ts
index 655aadde7ac..2d42438c10b 100644
--- a/packages/thirdweb/src/react/web/ui/design-system/elements.ts
+++ b/packages/thirdweb/src/react/web/ui/design-system/elements.ts
@@ -2,7 +2,6 @@ import styled from "@emotion/styled";
 
 export const StyledDiv = /* @__PURE__ */ styled.div;
 export const StyledSvg = /* @__PURE__ */ styled.svg;
-export const StyledCircle = /* @__PURE__ */ styled.circle;
 export const StyledSpan = /* @__PURE__ */ styled.span;
 export const StyledAnchor = /* @__PURE__ */ styled.a;
 export const StyledButton = /* @__PURE__ */ styled.button;