diff --git a/package.json b/package.json
index 3da8fbc5..6d97e93a 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
     "axios": "^1.6.8",
     "date-fns": "^3.6.0",
     "firebase": "^10.12.4",
-    "lottie-web": "^5.12.2",
+    "lottie-react": "^2.4.0",
     "nanoid": "^5.0.7",
     "react": "^18.2.0",
     "react-daum-postcode": "^3.1.3",
diff --git a/src/views/loadings/BigLoding/index.tsx b/src/views/loadings/BigLoding/index.tsx
index 0c3b29aa..b476febc 100644
--- a/src/views/loadings/BigLoding/index.tsx
+++ b/src/views/loadings/BigLoding/index.tsx
@@ -1,5 +1,5 @@
 import { container, loadingText, wrapper } from './style.css';
-import Lottie from '../Lottie';
+import Lottie from 'lottie-react';
 import mainLoading from '../lotties/mainLoading.json';
 
 const BigLoading = () => {
diff --git a/src/views/loadings/ButtonLoading/index.tsx b/src/views/loadings/ButtonLoading/index.tsx
index 392c90b7..9f5b4c34 100644
--- a/src/views/loadings/ButtonLoading/index.tsx
+++ b/src/views/loadings/ButtonLoading/index.tsx
@@ -1,4 +1,4 @@
-import Lottie from '../Lottie';
+import Lottie from 'lottie-react';
 import buttonLoadingWhite from '../lotties/buttonLoadingWhite.json';
 
 const ButtonLoading = ({ width, height = 28 }: { width: number | undefined; height?: number }) => {
diff --git a/src/views/loadings/Lottie/index.tsx b/src/views/loadings/Lottie/index.tsx
deleted file mode 100644
index 8ecac4d0..00000000
--- a/src/views/loadings/Lottie/index.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { type AnimationConfigWithData, type AnimationItem } from 'lottie-web';
-import lottie from 'lottie-web/build/player/lottie_light';
-import { type CSSProperties, useEffect, useRef } from 'react';
-
-const Lottie = ({ animationData, style }: { animationData: unknown; style?: CSSProperties }) => {
-  const animationInstanceRef = useRef<AnimationItem>();
-  const animationContainer = useRef<HTMLDivElement>(null);
-
-  const loadAnimation = () => {
-    // Return if the container ref is null
-    if (!animationContainer.current) {
-      return;
-    }
-
-    // Destroy any previous instance
-    animationInstanceRef.current?.destroy();
-
-    // Build the animation configuration
-    const config: AnimationConfigWithData = {
-      animationData,
-      container: animationContainer.current,
-    };
-
-    // Save the animation instance
-    animationInstanceRef.current = lottie.loadAnimation(config);
-
-    // Return a function that will clean up
-    return () => {
-      animationInstanceRef.current?.destroy();
-      animationInstanceRef.current = undefined;
-    };
-  };
-
-  useEffect(() => {
-    const onUnmount = loadAnimation();
-
-    // Clean up on unmount
-    return () => onUnmount?.();
-    // eslint-disable-next-line
-  }, [animationData]);
-
-  return <div ref={animationContainer} style={style} />;
-};
-
-export default Lottie;
diff --git a/yarn.lock b/yarn.lock
index b51e9b9e..3f033d81 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3936,7 +3936,14 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
-lottie-web@^5.12.2:
+lottie-react@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/lottie-react/-/lottie-react-2.4.0.tgz#f7249eee2b1deee70457a2d142194fdf2456e4bd"
+  integrity sha512-pDJGj+AQlnlyHvOHFK7vLdsDcvbuqvwPZdMlJ360wrzGFurXeKPr8SiRCjLf3LrNYKANQtSsh5dz9UYQHuqx4w==
+  dependencies:
+    lottie-web "^5.10.2"
+
+lottie-web@^5.10.2:
   version "5.12.2"
   resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.12.2.tgz#579ca9fe6d3fd9e352571edd3c0be162492f68e5"
   integrity sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==