diff --git a/src/components/pages/ABDesign/v1/pages/AlmostThere/index.tsx b/src/components/pages/ABDesign/v1/pages/AlmostThere/index.tsx
index 2f322e7..3e1c5a4 100644
--- a/src/components/pages/ABDesign/v1/pages/AlmostThere/index.tsx
+++ b/src/components/pages/ABDesign/v1/pages/AlmostThere/index.tsx
@@ -4,7 +4,8 @@ import MainButton from "@/components/MainButton";
 import { useNavigate } from "react-router-dom";
 import routes from "@/routes";
 import Header from "../../components/Header";
-import { DotLottiePlayer } from "@dotlottie/react-player";
+import LottieAnimation from "@/lotties/v1/magnifyingGlassAndPlanet.json";
+import Lottie from "lottie-react";
 
 function AlmostTherePage() {
   const navigate = useNavigate();
@@ -25,11 +26,7 @@ function AlmostTherePage() {
         isBackButtonVisible={false}
         classNameTitle={styles["header-title"]}
       />
-      <DotLottiePlayer
-        src="https://lottie.host/7e1e77e6-46a3-4122-8584-7555539d1b15/ASrDx8yoMC.lottie"
-        autoplay
-        loop={false}
-      />
+      <Lottie animationData={LottieAnimation} loop={false} />
       <div>
         <Title variant="h1" className={styles.title}>
           Almost there! <br /> Now let's tailor your plan by understanding the{" "}
diff --git a/src/components/pages/ABDesign/v1/pages/Both/index.tsx b/src/components/pages/ABDesign/v1/pages/Both/index.tsx
index 9e49c33..c90cd38 100644
--- a/src/components/pages/ABDesign/v1/pages/Both/index.tsx
+++ b/src/components/pages/ABDesign/v1/pages/Both/index.tsx
@@ -9,7 +9,8 @@ import { getZodiacSignByDate } from "@/services/zodiac-sign";
 import { useDynamicSize } from "@/hooks/useDynamicSize";
 import Header from "../../components/Header";
 import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
-import { DotLottiePlayer } from "@dotlottie/react-player";
+import LottieScalesNeutral from "@/lotties/v1/scales-neutral.json";
+import Lottie from "lottie-react";
 
 function BothPage() {
   const navigate = useNavigate();
@@ -34,11 +35,10 @@ function BothPage() {
       />
       <Header isBackButtonVisible={false} />
       <div className={styles["image-container"]}>
-        <DotLottiePlayer
+        <Lottie
           className={styles["lottie-animation"]}
-          src="https://lottie.host/ddd2cb46-d62f-4808-a10d-1dd5ce8d42d2/6hgUBBGjaJ.lottie"
-          autoplay
           loop={false}
+          animationData={LottieScalesNeutral}
         />
       </div>
       <div>
diff --git a/src/components/pages/ABDesign/v1/pages/EmailConfirm/index.tsx b/src/components/pages/ABDesign/v1/pages/EmailConfirm/index.tsx
index eb7ecb7..b252b03 100644
--- a/src/components/pages/ABDesign/v1/pages/EmailConfirm/index.tsx
+++ b/src/components/pages/ABDesign/v1/pages/EmailConfirm/index.tsx
@@ -6,7 +6,8 @@ import Header from "../../components/Header";
 import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
 import { useDynamicSize } from "@/hooks/useDynamicSize";
 import QuestionnaireGreenButton from "../../ui/GreenButton";
-import { DotLottiePlayer } from "@dotlottie/react-player";
+import LottieAnimation from "@/lotties/v1/hand-and-stars.json";
+import Lottie from "lottie-react";
 
 function EmailConfirmPage() {
   const navigate = useNavigate();
@@ -25,11 +26,10 @@ function EmailConfirmPage() {
       />
       <Header className={styles.header} />
       <div className={styles["top-section"]}>
-        <DotLottiePlayer
+        <Lottie
           className={styles["lottie-animation"]}
-          src="https://lottie.host/25105d46-cc0a-4f76-9ad0-5e64e3eb0e52/OenfEsMruV.lottie"
-          autoplay
           loop={false}
+          animationData={LottieAnimation}
         />
         <Title className={styles.title}>
           Get access to your{" "}
diff --git a/src/components/pages/ABDesign/v1/pages/GoalSetup/index.tsx b/src/components/pages/ABDesign/v1/pages/GoalSetup/index.tsx
index 6fa2487..50b715b 100644
--- a/src/components/pages/ABDesign/v1/pages/GoalSetup/index.tsx
+++ b/src/components/pages/ABDesign/v1/pages/GoalSetup/index.tsx
@@ -6,7 +6,8 @@ import routes from "@/routes";
 import { useDynamicSize } from "@/hooks/useDynamicSize";
 import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
 import Header from "../../components/Header";
-import { DotLottiePlayer } from "@dotlottie/react-player";
+import LottieAnimation from "@/lotties/v1/zodiac-signs-map.json";
+import Lottie from "lottie-react";
 
 function GoalSetupPage() {
   const navigate = useNavigate();
@@ -29,9 +30,9 @@ function GoalSetupPage() {
       />
       <Header isBackButtonVisible={false} />
       <div className={styles["image-container"]}>
-        <DotLottiePlayer
+        <Lottie
+          animationData={LottieAnimation}
           className={styles["lottie-animation"]}
-          src="https://lottie.host/a86e1531-7028-4688-a836-ea9d71dafa3b/Pe5G1g9s9L.lottie"
           autoplay
           loop={false}
         />
diff --git a/src/components/pages/ABDesign/v1/pages/GoalSetup/styles.module.css b/src/components/pages/ABDesign/v1/pages/GoalSetup/styles.module.css
index f3ad55d..72873c7 100644
--- a/src/components/pages/ABDesign/v1/pages/GoalSetup/styles.module.css
+++ b/src/components/pages/ABDesign/v1/pages/GoalSetup/styles.module.css
@@ -76,9 +76,6 @@
 
 .text-container {
     margin-top: 68px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
 }
 
 .lottie-animation {
diff --git a/src/components/pages/ABDesign/v1/pages/NotAlone/index.tsx b/src/components/pages/ABDesign/v1/pages/NotAlone/index.tsx
index db758bb..0675d82 100644
--- a/src/components/pages/ABDesign/v1/pages/NotAlone/index.tsx
+++ b/src/components/pages/ABDesign/v1/pages/NotAlone/index.tsx
@@ -7,7 +7,8 @@ import { selectors } from "@/store";
 import { useSelector } from "react-redux";
 import { getZodiacSignByDate } from "@/services/zodiac-sign";
 import Header from "../../components/Header";
-import { DotLottiePlayer } from "@dotlottie/react-player";
+import Lottie from "lottie-react";
+import LottieUmbrella from "@/lotties/v1/umbrella.json";
 
 function NotAlonePage() {
   const navigate = useNavigate();
@@ -28,11 +29,7 @@ function NotAlonePage() {
         isBackButtonVisible={false}
         classNameTitle={styles["header-title"]}
       />
-      <DotLottiePlayer
-        src="https://lottie.host/e353e80c-fd4a-4eca-a930-d9bf923466e0/G4sxbtkhIA.lottie"
-        autoplay
-        loop={false}
-      />
+      <Lottie loop={false} animationData={LottieUmbrella} />
       <div>
         <Title variant="h1" className={styles.title}>
           You’re not alone.
diff --git a/src/components/pages/ABDesign/v1/pages/PartnerThing/index.tsx b/src/components/pages/ABDesign/v1/pages/PartnerThing/index.tsx
index 5603f07..29d013b 100644
--- a/src/components/pages/ABDesign/v1/pages/PartnerThing/index.tsx
+++ b/src/components/pages/ABDesign/v1/pages/PartnerThing/index.tsx
@@ -9,7 +9,8 @@ import { getZodiacSignByDate } from "@/services/zodiac-sign";
 import { useDynamicSize } from "@/hooks/useDynamicSize";
 import Header from "../../components/Header";
 import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
-import { DotLottiePlayer } from "@dotlottie/react-player";
+import LottieScalesHeart from "@/lotties/v1/compass.json";
+import Lottie from "lottie-react";
 
 function PartnerThingPage() {
   const navigate = useNavigate();
@@ -34,11 +35,7 @@ function PartnerThingPage() {
       />
       <Header isBackButtonVisible={false} />
       <div className={styles.circle}>
-        <DotLottiePlayer
-          src="https://lottie.host/15b235d7-b8c9-487f-8d65-73143afc9ecc/czTjX9Lwp1.lottie"
-          autoplay
-          loop={false}
-        />
+        <Lottie loop={false} animationData={LottieScalesHeart} />
       </div>
       <div>
         <Title variant="h1" className={styles.title}>
diff --git a/src/components/pages/ABDesign/v1/pages/QuestionnaireIntermediate/index.tsx b/src/components/pages/ABDesign/v1/pages/QuestionnaireIntermediate/index.tsx
index 99a6fbe..2f579ad 100644
--- a/src/components/pages/ABDesign/v1/pages/QuestionnaireIntermediate/index.tsx
+++ b/src/components/pages/ABDesign/v1/pages/QuestionnaireIntermediate/index.tsx
@@ -5,9 +5,10 @@ import { useNavigate } from "react-router-dom";
 import routes from "@/routes";
 import { useSelector } from "react-redux";
 import { selectors } from "@/store";
+import LottieKey from "@/lotties/v1/key.json";
 import Header from "../../components/Header";
 import { textVariables } from "../../data/textVariables";
-import { DotLottiePlayer } from "@dotlottie/react-player";
+import Lottie from "lottie-react";
 
 function QuestionnaireIntermediatePage() {
   const navigate = useNavigate();
@@ -44,11 +45,7 @@ function QuestionnaireIntermediatePage() {
         isBackButtonVisible={false}
         classNameTitle={styles["header-title"]}
       />
-      <DotLottiePlayer
-        src="https://lottie.host/a80ec293-6f3d-4d21-a19e-9dfb40b86a14/clQys1OEAL.lottie"
-        autoplay
-        loop={false}
-      />
+      <Lottie loop={false} animationData={LottieKey} />
       <div>
         {path && (
           <Title variant="h1" className={styles.title}>
diff --git a/src/components/pages/ABDesign/v1/pages/RelationshipAlmostThere/index.tsx b/src/components/pages/ABDesign/v1/pages/RelationshipAlmostThere/index.tsx
index 49ce487..0091303 100644
--- a/src/components/pages/ABDesign/v1/pages/RelationshipAlmostThere/index.tsx
+++ b/src/components/pages/ABDesign/v1/pages/RelationshipAlmostThere/index.tsx
@@ -4,7 +4,8 @@ import MainButton from "@/components/MainButton";
 import { useNavigate } from "react-router-dom";
 import routes from "@/routes";
 import Header from "../../components/Header";
-import { DotLottiePlayer } from "@dotlottie/react-player";
+import LottieAnimation from "@/lotties/v1/magnifyingGlassAndPlanet.json";
+import Lottie from "lottie-react";
 
 function RelationshipAlmostTherePage() {
   const navigate = useNavigate();
@@ -23,11 +24,7 @@ function RelationshipAlmostTherePage() {
         classNameTitle={styles["header-title"]}
         isBackButtonVisible={false}
       />
-      <DotLottiePlayer
-        src="https://lottie.host/7e1e77e6-46a3-4122-8584-7555539d1b15/ASrDx8yoMC.lottie"
-        autoplay
-        loop={false}
-      />
+      <Lottie animationData={LottieAnimation} loop={false} />
       <div>
         <Title variant="h1" className={styles.title}>
           <strong>Almost there!</strong> <br /> Now let's begin tailoring your
diff --git a/src/components/pages/ABDesign/v1/pages/Satisfied/index.tsx b/src/components/pages/ABDesign/v1/pages/Satisfied/index.tsx
index b7327a3..f0faa7e 100644
--- a/src/components/pages/ABDesign/v1/pages/Satisfied/index.tsx
+++ b/src/components/pages/ABDesign/v1/pages/Satisfied/index.tsx
@@ -7,7 +7,9 @@ import { selectors } from "@/store";
 import { useSelector } from "react-redux";
 import { getZodiacSignByDate } from "@/services/zodiac-sign";
 import Header from "../../components/Header";
-import { DotLottiePlayer } from "@dotlottie/react-player";
+import LottieSun from "@/lotties/v1/sun.json";
+import LottieUmbrella from "@/lotties/v1/umbrella.json";
+import Lottie from "lottie-react";
 
 function Satisfied() {
   const navigate = useNavigate();
@@ -40,19 +42,9 @@ function Satisfied() {
         classNameTitle={styles["header-title"]}
         isBackButtonVisible={false}
       />
-      {satisfied === "yes" && (
-        <DotLottiePlayer
-          src="https://lottie.host/da11de16-a8a4-47f3-bf0c-36302131f174/hdmkQ2wPxz.lottie"
-          autoplay
-          loop={false}
-        />
-      )}
+      {satisfied === "yes" && <Lottie loop={false} animationData={LottieSun} />}
       {satisfied === "no" && (
-        <DotLottiePlayer
-          src="https://lottie.host/e353e80c-fd4a-4eca-a930-d9bf923466e0/G4sxbtkhIA.lottie"
-          autoplay
-          loop={false}
-        />
+        <Lottie loop={false} animationData={LottieUmbrella} />
       )}
       <div>
         {satisfied === "yes" && (
diff --git a/src/components/pages/ABDesign/v1/pages/WithHead/index.tsx b/src/components/pages/ABDesign/v1/pages/WithHead/index.tsx
index 0bdb819..a6f3f75 100644
--- a/src/components/pages/ABDesign/v1/pages/WithHead/index.tsx
+++ b/src/components/pages/ABDesign/v1/pages/WithHead/index.tsx
@@ -9,7 +9,8 @@ import { getZodiacSignByDate } from "@/services/zodiac-sign";
 import { useDynamicSize } from "@/hooks/useDynamicSize";
 import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
 import Header from "../../components/Header";
-import { DotLottiePlayer } from "@dotlottie/react-player";
+import LottieScalesWithHead from "@/lotties/v1/scales-head.json";
+import Lottie from "lottie-react";
 
 function WithHeadPage() {
   const navigate = useNavigate();
@@ -34,11 +35,10 @@ function WithHeadPage() {
       />
       <Header isBackButtonVisible={false} />
       <div className={styles["image-container"]}>
-        <DotLottiePlayer
+        <Lottie
           className={styles["lottie-animation"]}
-          src="https://lottie.host/19fe41d7-d26f-431c-b063-8e123ce3d57a/HiucMMidQT.lottie"
-          autoplay
           loop={false}
+          animationData={LottieScalesWithHead}
         />
       </div>
       <div>
diff --git a/src/components/pages/ABDesign/v1/pages/WithHeart/index.tsx b/src/components/pages/ABDesign/v1/pages/WithHeart/index.tsx
index 6a213fa..b54291f 100644
--- a/src/components/pages/ABDesign/v1/pages/WithHeart/index.tsx
+++ b/src/components/pages/ABDesign/v1/pages/WithHeart/index.tsx
@@ -9,7 +9,8 @@ import { getZodiacSignByDate } from "@/services/zodiac-sign";
 import { useDynamicSize } from "@/hooks/useDynamicSize";
 import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
 import Header from "../../components/Header";
-import { DotLottiePlayer } from "@dotlottie/react-player";
+import LottieScalesHeart from "@/lotties/v1/scales-heart.json";
+import Lottie from "lottie-react";
 
 function WithHeartPage() {
   const navigate = useNavigate();
@@ -34,12 +35,7 @@ function WithHeartPage() {
       />
       <Header isBackButtonVisible={false} />
       <div className={styles["image-container"]}>
-        <DotLottiePlayer
-          className={styles["lottie-animation"]}
-          src="https://lottie.host/9eb3f7a1-83c2-495a-9342-c234bfebc40c/0T90l2xSWl.lottie"
-          autoplay
-          loop={false}
-        />
+        <Lottie className={styles["lottie-animation"]} loop={false} animationData={LottieScalesHeart} />
       </div>
       <div>
         <Title variant="h1" className={styles.title}>