diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/subscription/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/subscription/page.tsx
new file mode 100644
index 000000000..983ebb85b
--- /dev/null
+++ b/src/app/dashboard/(admin)/admin/(settings)/settings/subscription/page.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const page = () => {
+  return (
+    <div>page</div>
+  )
+}
+
+export default page
\ No newline at end of file
diff --git a/src/components/layouts/homepage/HowItWorks.tsx b/src/components/layouts/homepage/HowItWorks.tsx
index 5bc3fb226..0b0656033 100644
--- a/src/components/layouts/homepage/HowItWorks.tsx
+++ b/src/components/layouts/homepage/HowItWorks.tsx
@@ -5,83 +5,98 @@ import { Easy, Prebuilt, Scalable } from "./svgs";
 const HowItWorks = () => {
   const t = useTranslations("howItWorks");
   return (
-    <div className="bg-[#ffffff] py-20">
-      <div className="mx-auto max-w-7xl px-5 md:px-10 lg:px-10 xl:px-10">
-        <div className="flex flex-col items-center lg:flex-row">
-          <div className="w-full md:pr-10 lg:w-3/5 lg:pr-20">
-            <h1 className="font-inter text-3xl font-bold leading-snug md:text-4xl md:leading-tight">
-              <span className="text-primary">{t("howItWorksTitlePrefix")}</span>{" "}
-              {t("howItWorksTitleHighlight")}
-            </h1>
-            <p className="font-inter mb-12 mt-6 text-lg font-normal">
-              {t("howItWorksDescription")}
-            </p>
-          </div>
-
-          <div className="flex w-full flex-col items-end md:items-start lg:w-2/5">
-            <div className="mb-9 flex space-x-5">
-              <div>
-                <Prebuilt />
-              </div>
-              <div>
-                <h3
-                  className="font-inter mb-2 text-lg font-bold md:text-xl"
-                  data-testid="prebuilt"
-                >
-                  {t("prebuiltTitle")}
-                </h3>
-                <small
-                  className="font-inter text-base font-normal"
-                  data-testid="section"
-                >
-                  {t("prebuiltDescription")}
-                </small>
-              </div>
+    <>
+      <video
+        src={
+          "https://res.cloudinary.com/dif45jmwd/video/upload/v1724572073/aivideo/nofcx7ddauggumuxhb3h.mp4"
+        }
+        controls
+        muted
+        autoPlay
+        loop
+        className="min-w-lg mx-auto my-[50px] w-full max-w-2xl rounded-lg"
+        style={{ height: "350px" }}
+      />
+      <div className="bg-[#ffffff] py-20">
+        <div className="mx-auto max-w-7xl px-5 md:px-10 lg:px-10 xl:px-10">
+          <div className="flex flex-col items-center lg:flex-row">
+            <div className="w-full md:pr-10 lg:w-3/5 lg:pr-20">
+              <h1 className="font-inter text-3xl font-bold leading-snug md:text-4xl md:leading-tight">
+                <span className="text-primary">
+                  {t("howItWorksTitlePrefix")}
+                </span>{" "}
+                {t("howItWorksTitleHighlight")}
+              </h1>
+              <p className="font-inter mb-12 mt-6 text-lg font-normal">
+                {t("howItWorksDescription")}
+              </p>
             </div>
 
-            <div className="mb-9 flex space-x-5">
-              <div>
-                <Scalable />
+            <div className="flex w-full flex-col items-end md:items-start lg:w-2/5">
+              <div className="mb-9 flex space-x-5">
+                <div>
+                  <Prebuilt />
+                </div>
+                <div>
+                  <h3
+                    className="font-inter mb-2 text-lg font-bold md:text-xl"
+                    data-testid="prebuilt"
+                  >
+                    {t("prebuiltTitle")}
+                  </h3>
+                  <small
+                    className="font-inter text-base font-normal"
+                    data-testid="section"
+                  >
+                    {t("prebuiltDescription")}
+                  </small>
+                </div>
               </div>
-              <div>
-                <h3
-                  className="font-inter mb-2 text-lg font-bold md:text-xl"
-                  data-testid="scalable"
-                >
-                  {t("scalableTitle")}
-                </h3>
-                <small
-                  className="font-inter text-base font-normal"
-                  data-testid="boilerplate"
-                >
-                  {t("scalableDescription")}
-                </small>
-              </div>
-            </div>
 
-            <div className="mb-9 flex space-x-5">
-              <div>
-                <Easy />
+              <div className="mb-9 flex space-x-5">
+                <div>
+                  <Scalable />
+                </div>
+                <div>
+                  <h3
+                    className="font-inter mb-2 text-lg font-bold md:text-xl"
+                    data-testid="scalable"
+                  >
+                    {t("scalableTitle")}
+                  </h3>
+                  <small
+                    className="font-inter text-base font-normal"
+                    data-testid="boilerplate"
+                  >
+                    {t("scalableDescription")}
+                  </small>
+                </div>
               </div>
-              <div>
-                <h3
-                  className="font-inter mb-2 text-lg font-bold md:text-xl"
-                  data-testid="easy"
-                >
-                  {t("easyTitle")}
-                </h3>
-                <small
-                  className="font-inter text-base font-normal"
-                  data-testid="tailor"
-                >
-                  {t("easyDescription")}
-                </small>
+
+              <div className="mb-9 flex space-x-5">
+                <div>
+                  <Easy />
+                </div>
+                <div>
+                  <h3
+                    className="font-inter mb-2 text-lg font-bold md:text-xl"
+                    data-testid="easy"
+                  >
+                    {t("easyTitle")}
+                  </h3>
+                  <small
+                    className="font-inter text-base font-normal"
+                    data-testid="tailor"
+                  >
+                    {t("easyDescription")}
+                  </small>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };