diff --git a/public/images/dashboard.png b/public/images/dashboard.png
new file mode 100644
index 0000000..85d6b5c
Binary files /dev/null and b/public/images/dashboard.png differ
diff --git a/src/components/FlitchPayFinal.tsx b/src/components/FlitchPayFinal.tsx
index 5dc77e5..5f9d806 100644
--- a/src/components/FlitchPayFinal.tsx
+++ b/src/components/FlitchPayFinal.tsx
@@ -6,7 +6,7 @@ import Link from "next/link";
 
 export function FlitchPayFinal() {
   return (
-    <section className="flex items-center">
+    <section className="flex md:pt-10 items-center">
       <div className="items-center md:mx-auto md:min-w-[768px] md:max-w-[1600px]">
         <div
           style={{
diff --git a/src/components/GradientPlatform.tsx b/src/components/GradientPlatform.tsx
index 66b5db1..5cf808e 100644
--- a/src/components/GradientPlatform.tsx
+++ b/src/components/GradientPlatform.tsx
@@ -3,6 +3,7 @@
 import ArrowIcon from "./ArrowIcon";
 import AnimatedGradient from "./gradients/AnimatedGradient";
 import React from "react";
+import dashboard from "@/public/images/dashboard.png";
 import { useMediaQuery } from "@mantine/hooks";
 import MobileAppDemo from "../../public/images/MobileAppDemo.webp";
 import AppDemo from "../../public/page3.png";
@@ -13,7 +14,6 @@ export default function GradientPlatform() {
 
   return (
     <div className="w-full bg-background py-8 ">
-
       <div className="relative">
         <div className="flex items-center justify-center px-4">
           <div
@@ -22,14 +22,7 @@ export default function GradientPlatform() {
               boxShadow: "0px 0px 9.5px 1px #ffffff33 inset",
             }}
           >
-            <div
-              style={{
-                borderRadius: "0.90906rem",
-                background: "linear-gradient(180deg, #EBEBEB 0%, #E1E1E1 100%)",
-                boxShadow:
-                  "0px 1.18388px 37.88403px -7.27255px #000, 0px 24.24183px 37.88403px -6.06046px rgba(0, 0, 0, 0.10)",
-              }}
-            >
+            <div>
               {isMobile ? (
                 <Image
                   src={MobileAppDemo}
@@ -37,7 +30,7 @@ export default function GradientPlatform() {
                   className="p-2 md:p-4"
                 />
               ) : (
-                <Image src={AppDemo} alt="App Demo" className="p-2 md:p-4" />
+                <Image src={dashboard} alt="App Demo" className="" />
               )}
             </div>
           </div>
diff --git a/src/components/WhatsFlitchPay2.tsx b/src/components/WhatsFlitchPay2.tsx
index e7d97b5..fffc885 100644
--- a/src/components/WhatsFlitchPay2.tsx
+++ b/src/components/WhatsFlitchPay2.tsx
@@ -12,183 +12,205 @@ import { Terminal } from "@/public/svgs/Terminal";
 import { useActivePage } from "../app/_context";
 
 export function WhatsFlitchPay2() {
-  const {activePage} = useActivePage();
-  if (activePage=="Personal"){
+  const { activePage } = useActivePage();
+  if (activePage == "Personal") {
     return;
   }
   return (
-    <section className="flex items-center bg-white py-12 text-black md:py-24 lg:pt-32 ">
-      <div className="container mx-auto flex flex-col items-center gap-16 md:gap-28 md:px-48 ">
-        <HeadComponent />
-        <div className="w-full">
-          <div className="flex items-center justify-between text-xs">
-            <div className="text-base font-semibold md:text-xl">
-              Inbound Payments
-            </div>
-            <div>
-              <Link
-                href="/"
-                className="items-center rounded-full bg-violet-600 px-4 py-2  text-[0.6rem] text-white backdrop-filter-none hover:bg-violet-700 md:text-base "
-              >
-                Create Inbound Payments
-              </Link>
+    <>
+    <section className="relative flex items-center bg-white md:my-20 my-10  py-12 text-black md:py-24 lg:pt-32 ">
+        <div
+          style={{
+            position: "absolute",
+            top: "-10px",
+            left: "0",
+            width: "100%",
+            height: "40px",
+            backdropFilter: "blur(5px)",
+          }}
+        ></div>
+        <div className="container mx-auto flex flex-col items-center gap-16 md:gap-28 md:px-48 ">
+          <HeadComponent />
+          <div className="w-full">
+            <div className="flex items-center justify-between text-xs">
+              <div className="text-base font-semibold md:text-xl">
+                Inbound Payments
+              </div>
+              <div>
+                <Link
+                  href="/"
+                  className="items-center rounded-full bg-violet-600 px-4 py-2  text-[0.6rem] text-white backdrop-filter-none hover:bg-violet-700 md:text-base "
+                >
+                  Create Inbound Payments
+                </Link>
+              </div>
             </div>
-          </div>
-          <div
-            className="mt-4 flex flex-wrap justify-between overflow-hidden rounded-[4rem] md:mt-14 md:flex-nowrap"
-            style={{ border: "1px solid hsla(234, 49%, 92%, 1)" }}
-          >
-            {/* card1 */}
             <div
-              className="flex flex-col gap-4 p-6 pt-8 md:w-1/2 md:p-9"
+              className="mt-4 flex flex-wrap justify-between overflow-hidden rounded-[4rem] md:mt-14 md:flex-nowrap"
               style={{ border: "1px solid hsla(234, 49%, 92%, 1)" }}
             >
-              <div className="text-lg font-medium">
-                Encrypt or Redact your Data
-              </div>
-              <div
-                className="text-sm "
-                style={{ color: "hsla(236, 16%, 20%, 1)" }}
-              >
-                Inbound Relay is a proxy that intercepts and encrypts or redacts
-                selected fields in an HTTPS request before forwarding the
-                request to its original destination.
-              </div>
+              {/* card1 */}
               <div
-                className="flex flex-wrap gap-4 rounded-[2rem] p-6 md:flex-nowrap"
+                className="flex flex-col gap-4 p-6 pt-8 md:w-1/2 md:p-9"
                 style={{ border: "1px solid hsla(234, 49%, 92%, 1)" }}
               >
-                <div className="text-[0.84rem] md:mt-8 md:w-1/2">
-                  <p style={{ color: "hsla(236, 16%, 20%, 1)" }}>
-                    Create an Inbound Relay with an onboarding tutorial.
-                  </p>
-                  <div className="mt-2">
-                    <Link
-                      href="/"
-                      className="items-center rounded-full bg-violet-600 px-2.5 py-1.5 text-[0.775rem]  text-white hover:bg-violet-700"
-                    >
-                      Get Started
-                    </Link>
-                  </div>
+                <div className="text-lg font-medium">
+                  Encrypt or Redact your Data
                 </div>
-                <Image className="md:w-1/2" src={inboundRelay} alt="" />
-              </div>
-              <div className="flex flex-wrap gap-2 md:flex-nowrap md:gap-4">
-                <Link
-                  href="/"
-                  className="flex w-full items-center justify-between rounded-full px-2.5 py-0.5 text-[0.7rem] hover:bg-gray-200 md:w-1/2 md:text-[0.775rem]"
-                  style={{ border: "1px solid hsla(234, 49%, 92%, 1)" }}
+                <div
+                  className="text-sm "
+                  style={{ color: "hsla(236, 16%, 20%, 1)" }}
                 >
-                  <div className="flex items-center gap-2 ">
-                    <span>
-                      <Book />
-                    </span>
-                    Get Started
-                  </div>
-                  <div
-                    className="font-semibold"
-                    style={{ color: "hsla(236, 16%, 20%, 1)" }}
-                  >
-                    {">"}
-                  </div>
-                </Link>
-                <Link
-                  href="/"
-                  className="flex w-full items-center justify-between rounded-full px-2.5 py-0.5 text-[0.7rem] hover:bg-gray-200 md:w-1/2 md:text-[0.775rem]"
+                  Inbound Relay is a proxy that intercepts and encrypts or
+                  redacts selected fields in an HTTPS request before forwarding
+                  the request to its original destination.
+                </div>
+                <div
+                  className="flex flex-wrap gap-4 rounded-[2rem] p-6 md:flex-nowrap"
                   style={{ border: "1px solid hsla(234, 49%, 92%, 1)" }}
                 >
-                  <div className="flex items-center gap-2 ">
-                    <span>
-                      <Rocket />
-                    </span>
-                    Follow a Quickstart
+                  <div className="text-[0.84rem] md:mt-8 md:w-1/2">
+                    <p style={{ color: "hsla(236, 16%, 20%, 1)" }}>
+                      Create an Inbound Relay with an onboarding tutorial.
+                    </p>
+                    <div className="mt-2">
+                      <Link
+                        href="/"
+                        className="items-center rounded-full bg-violet-600 px-2.5 py-1.5 text-[0.775rem]  text-white hover:bg-violet-700"
+                      >
+                        Get Started
+                      </Link>
+                    </div>
                   </div>
-                  <div
-                    className="font-semibold"
-                    style={{ color: "hsla(236, 16%, 20%, 1)" }}
+                  <Image className="md:w-1/2" src={inboundRelay} alt="" />
+                </div>
+                <div className="flex flex-wrap gap-2 md:flex-nowrap md:gap-4">
+                  <Link
+                    href="/"
+                    className="flex w-full items-center justify-between rounded-full px-2.5 py-0.5 text-[0.7rem] hover:bg-gray-200 md:w-1/2 md:text-[0.775rem]"
+                    style={{ border: "1px solid hsla(234, 49%, 92%, 1)" }}
                   >
-                    {">"}
-                  </div>
-                </Link>
-              </div>
-            </div>
-            {/* card2 */}
-            <div
-              className="flex w-full text-xs justify-between flex-col flex-wrap items-center gap-4 p-6 md:w-1/2 md:flex-row md:flex-nowrap md:p-10"
-              style={{
-                border: "1px solid hsla(234, 49%, 92%, 1)",
-                backgroundColor: "hsla(234, 49%, 92%, 1)",
-              }}
-            >
-              {/* card1 */}
-              <div className=" flex flex-wrap items-center md:flex-nowrap">
-                <div className=" flex-wrap items-center rounded-xl bg-white leading-none md:flex ">
-                  <div className="flex items-center">
+                    <div className="flex items-center gap-2 ">
+                      <span>
+                        <Book />
+                      </span>
+                      Get Started
+                    </div>
                     <div
-                      className="p-1.5"
-                      style={{
-                        borderRight: "2px solid hsla(234, 49%, 92%, 1)",
-                      }}
+                      className="font-semibold"
+                      style={{ color: "hsla(236, 16%, 20%, 1)" }}
                     >
-                      <Send />
+                      {">"}
                     </div>
-                    <div className="p-1.5">Client</div>
-                  </div>
-
-                  <div
-                    className="p-1.5 text-xs"
-                    style={{ borderTop: "2px solid hsla(234, 49%, 92%, 1)" }}
+                  </Link>
+                  <Link
+                    href="/"
+                    className="flex w-full items-center justify-between rounded-full px-2.5 py-0.5 text-[0.7rem] hover:bg-gray-200 md:w-1/2 md:text-[0.775rem]"
+                    style={{ border: "1px solid hsla(234, 49%, 92%, 1)" }}
                   >
-                    &nbsp;{'"name":"Claude"'}&nbsp;
-                  </div>
+                    <div className="flex items-center gap-2 ">
+                      <span>
+                        <Rocket />
+                      </span>
+                      Follow a Quickstart
+                    </div>
+                    <div
+                      className="font-semibold"
+                      style={{ color: "hsla(236, 16%, 20%, 1)" }}
+                    >
+                      {">"}
+                    </div>
+                  </Link>
                 </div>
               </div>
-              <div className="rotate-90 md:rotate-0">{">"}</div>
               {/* card2 */}
-              <div>
-                <div className=" flex-wrap items-center rounded-xl bg-white leading-none md:flex">
-                  <div className="flex items-center">
+              <div
+                className="flex w-full flex-col flex-wrap items-center justify-between gap-4 p-6 text-xs md:w-1/2 md:flex-row md:flex-nowrap md:p-10"
+                style={{
+                  border: "1px solid hsla(234, 49%, 92%, 1)",
+                  backgroundColor: "hsla(234, 49%, 92%, 1)",
+                }}
+              >
+                {/* card1 */}
+                <div className=" flex flex-wrap items-center md:flex-nowrap">
+                  <div className=" flex-wrap items-center rounded-xl bg-white leading-none md:flex ">
+                    <div className="flex items-center">
+                      <div
+                        className="p-1.5"
+                        style={{
+                          borderRight: "2px solid hsla(234, 49%, 92%, 1)",
+                        }}
+                      >
+                        <Send />
+                      </div>
+                      <div className="p-1.5">Client</div>
+                    </div>
+
                     <div
-                      className="p-2"
-                      style={{
-                        borderRight: "2px solid hsla(234, 49%, 92%, 1)",
-                      }}
+                      className="p-1.5 text-xs"
+                      style={{ borderTop: "2px solid hsla(234, 49%, 92%, 1)" }}
                     >
-                      <InboundRelay />
+                      &nbsp;{'"name":"Claude"'}&nbsp;
                     </div>
-                    <div className="p-2">Inbound Relay</div>
                   </div>
                 </div>
-              </div>
-              <div className="rotate-90 md:rotate-0 ">{">"}</div>
-              {/* card3 */}
-              <div>
-                <div className=" flex-wrap items-center rounded-xl bg-white leading-none md:flex ">
-                  <div className="flex items-center">
-                    <div
-                      className="p-1.5"
-                      style={{
-                        borderRight: "2px solid hsla(234, 49%, 92%, 1)",
-                      }}
-                    >
-                      <Terminal />
+                <div className="rotate-90 md:rotate-0">{">"}</div>
+                {/* card2 */}
+                <div>
+                  <div className=" flex-wrap items-center rounded-xl bg-white leading-none md:flex">
+                    <div className="flex items-center">
+                      <div
+                        className="p-2"
+                        style={{
+                          borderRight: "2px solid hsla(234, 49%, 92%, 1)",
+                        }}
+                      >
+                        <InboundRelay />
+                      </div>
+                      <div className="p-2">Inbound Relay</div>
                     </div>
-                    <div className="p-1.5">Server</div>
                   </div>
+                </div>
+                <div className="rotate-90 md:rotate-0 ">{">"}</div>
+                {/* card3 */}
+                <div>
+                  <div className=" flex-wrap items-center rounded-xl bg-white leading-none md:flex ">
+                    <div className="flex items-center">
+                      <div
+                        className="p-1.5"
+                        style={{
+                          borderRight: "2px solid hsla(234, 49%, 92%, 1)",
+                        }}
+                      >
+                        <Terminal />
+                      </div>
+                      <div className="p-1.5">Server</div>
+                    </div>
 
-                  <div
-                    className="p-1.5 text-xs"
-                    style={{ borderTop: "2px solid hsla(234, 49%, 92%, 1)" }}
-                  >
-                    {'"name":"ev:Tk9D"'}
+                    <div
+                      className="p-1.5 text-xs"
+                      style={{ borderTop: "2px solid hsla(234, 49%, 92%, 1)" }}
+                    >
+                      {'"name":"ev:Tk9D"'}
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-    </section>
+        <div
+          style={{
+            position: "absolute",
+            bottom: "-10px",
+            left: "0",
+            width: "100%",
+            height: "40px",
+            backdropFilter: "blur(5px)",
+          }}
+        ></div>
+      </section>
+    </>
   );
 }