diff --git a/public/satisfied-no.webp b/public/satisfied-no.webp
new file mode 100644
index 0000000..6f62a08
Binary files /dev/null and b/public/satisfied-no.webp differ
diff --git a/src/components/pages/ABDesign/v1/pages/Satisfied/index.tsx b/src/components/pages/ABDesign/v1/pages/Satisfied/index.tsx
index 919c79f..96033d2 100644
--- a/src/components/pages/ABDesign/v1/pages/Satisfied/index.tsx
+++ b/src/components/pages/ABDesign/v1/pages/Satisfied/index.tsx
@@ -42,7 +42,7 @@ function Satisfied() {
     <section
       className={`${styles.page} page`}
       style={{
-        backgroundImage: `url(/satisfied-${satisfied}.png)`,
+        backgroundImage: `url(/satisfied-${satisfied}.webp)`,
       }}
     >
       <Header
@@ -50,12 +50,13 @@ function Satisfied() {
         isBackButtonVisible={false}
       />
       {satisfied === "yes" && (
-        <div
-          style={{
-            width: "100%",
-            aspectRatio: "337 / 406",
-          }}
-        >
+        // <div
+        //   style={{
+        //     width: "100%",
+        //     aspectRatio: "337 / 406",
+        //   }}
+        // >
+        <>
           {animationSun && (
             <DotLottieReact
               className={`${styles["lottie-animation"]} ym-hide-content`}
@@ -64,7 +65,8 @@ function Satisfied() {
               loop={false}
             />
           )}
-        </div>
+        </>
+        // </div>
       )}
       {satisfied === "no" && (
         <div
diff --git a/src/components/pages/ABDesign/v1/pages/Satisfied/styles.module.css b/src/components/pages/ABDesign/v1/pages/Satisfied/styles.module.css
index 3fe2606..6ee8191 100644
--- a/src/components/pages/ABDesign/v1/pages/Satisfied/styles.module.css
+++ b/src/components/pages/ABDesign/v1/pages/Satisfied/styles.module.css
@@ -75,3 +75,8 @@
   background-color: #fff;
   color: #0f1323;
 }
+
+.lottie-animation {
+  width: 100%;
+  aspect-ratio: 337 / 406;
+}
\ No newline at end of file