diff --git a/web/apps/cast/src/components/FilledCircleCheck.tsx b/web/apps/cast/src/components/FilledCircleCheck.tsx
new file mode 100644
index 000000000..c0635f138
--- /dev/null
+++ b/web/apps/cast/src/components/FilledCircleCheck.tsx
@@ -0,0 +1,64 @@
+import { styled } from "@mui/material";
+
+const FilledCircleCheck = () => {
+    return (
+        <Container>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
+                <circle cx="26" cy="26" r="25" fill="green" />
+                <path fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
+            </svg>
+        </Container>
+    );
+};
+
+export default FilledCircleCheck;
+
+const Container = styled("div")`
+    width: 100px;
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    overflow: hidden;
+    animation: scaleIn 0.3s ease-in-out forwards;
+
+    @keyframes scaleIn {
+        0% {
+            transform: scale(0);
+        }
+        50% {
+            transform: scale(1.1);
+        }
+        100% {
+            transform: scale(1);
+        }
+    }
+
+    svg {
+        width: 100px;
+        height: 100px;
+
+        circle {
+            fill: green;
+        }
+
+        path {
+            transform-origin: 50% 50%;
+            stroke-dasharray: 48;
+            stroke-dashoffset: 48;
+            animation: strokeCheck 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s
+                forwards;
+            stroke: white;
+            stroke-width: 2;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+        }
+    }
+
+    @keyframes strokeCheck {
+        100% {
+            stroke-dashoffset: 0;
+        }
+    }
+`;
diff --git a/web/apps/cast/src/components/FilledCircleCheck/FilledCircleCheck.module.scss b/web/apps/cast/src/components/FilledCircleCheck/FilledCircleCheck.module.scss
deleted file mode 100644
index 535a2448a..000000000
--- a/web/apps/cast/src/components/FilledCircleCheck/FilledCircleCheck.module.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-.circle {
-    width: 100px;
-    height: 100px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 50%;
-    overflow: hidden;
-
-    &.animate {
-        animation: scaleIn 0.3s ease-in-out forwards;
-    }
-}
-
-@keyframes scaleIn {
-    0% {
-        transform: scale(0);
-    }
-    50% {
-        transform: scale(1.1);
-    }
-    100% {
-        transform: scale(1);
-    }
-}
-
-.checkmark {
-    width: 100px;
-    height: 100px;
-
-    &__circle {
-        fill: green;
-    }
-
-    &__check {
-        transform-origin: 50% 50%;
-        stroke-dasharray: 48;
-        stroke-dashoffset: 48;
-        animation: strokeCheck 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
-        stroke: white;
-        stroke-width: 2;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-    }
-}
-
-@keyframes strokeCheck {
-    100% {
-        stroke-dashoffset: 0;
-    }
-}
diff --git a/web/apps/cast/src/components/FilledCircleCheck/index.tsx b/web/apps/cast/src/components/FilledCircleCheck/index.tsx
deleted file mode 100644
index cce8c935f..000000000
--- a/web/apps/cast/src/components/FilledCircleCheck/index.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { useEffect, useState } from "react";
-import styles from "./FilledCircleCheck.module.scss"; // Import our CSS module
-
-const FilledCircleCheck = () => {
-    const [animate, setAnimate] = useState(false);
-
-    useEffect(() => {
-        setAnimate(true);
-    }, []);
-
-    return (
-        <div className={`${styles.circle} ${animate ? styles.animate : ""}`}>
-            <svg
-                className={styles.checkmark}
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 52 52"
-            >
-                <circle
-                    className={styles.checkmark__circle}
-                    cx="26"
-                    cy="26"
-                    r="25"
-                    fill="green"
-                />
-                <path
-                    className={styles.checkmark__check}
-                    fill="none"
-                    d="M14.1 27.2l7.1 7.2 16.7-16.8"
-                />
-            </svg>
-        </div>
-    );
-};
-
-export default FilledCircleCheck;