diff --git a/apps/hub/src/app/pools/PoolsPageContent.tsx b/apps/hub/src/app/pools/PoolsPageContent.tsx
index 7783c1553..2db8496c4 100755
--- a/apps/hub/src/app/pools/PoolsPageContent.tsx
+++ b/apps/hub/src/app/pools/PoolsPageContent.tsx
@@ -5,6 +5,7 @@ import Image from "next/image";
 import { useSearchParams } from "next/navigation";
 import { SWRFallback } from "@bera/berajs";
 import { cloudinaryUrl } from "@bera/config";
+import { Icons } from "@bera/ui/icons";
 import { unstable_serialize } from "swr";
 
 import { PoolSearch } from "./PoolsTable";
@@ -17,41 +18,53 @@ export function PoolsPageContent({ pools }: { pools?: any }) {
     <SWRFallback
       fallback={{ [unstable_serialize(["useAllPools", ""])]: pools }}
     >
-      <div className="mx-auto flex w-full flex-col items-center justify-center gap-8">
-        {/* Large Screen */}
-        <div className="relative w-full">
-          <Image
-            src={`${cloudinaryUrl}/station/ctshf1lmqqpyyxkssclz.png`}
-            alt="Large Screen Image"
-            width={1200}
-            height={600}
-            className="h-auto w-full object-cover"
-          />
+      <div className="relative mx-auto flex w-full flex-col items-center gap-1 pt-0 md:gap-2 lg:gap-4">
+        {/* Full-Width Banner Section */}
+        <div className="relative top-[-32px] w-screen">
+          <div className="relative h-[200px] w-full sm:h-[300px] lg:h-[492px]">
+            <div className="pointer-events-none absolute left-0 top-0 z-10 hidden h-16 w-full bg-gradient-to-b from-black via-transparent to-transparent sm:h-24 sm:via-black md:h-16 md:via-transparent lg:block lg:via-black" />
+            <div className="pointer-events-none absolute bottom-0 left-0 z-10 h-16 w-full bg-gradient-to-t from-black via-transparent to-transparent lg:via-black" />
+            <div className="pointer-events-none absolute left-0 top-0 z-10 hidden h-full w-16 bg-gradient-to-r from-black via-transparent to-transparent lg:block lg:via-black" />
+            <div className="pointer-events-none absolute right-0 top-0 z-10 hidden h-full w-16 bg-gradient-to-l from-black via-transparent to-transparent lg:block lg:via-black" />
+
+            <Image
+              src={`${cloudinaryUrl}/station/pools-bg.png`}
+              alt="Pools Banner"
+              layout="fill"
+              objectFit="cover"
+              objectPosition="center"
+              className="z-0 mx-auto"
+            />
+          </div>
+
+          {/* Text Overlay */}
+          <div className="absolute inset-0 flex items-center justify-center pt-28 text-[#E9D9B2] sm:pt-0">
+            {/* NOTE: these breakpoints are set in the parent container, but to inset this like the table ~and~ overlay it we need them here */}
+            <div className="w-full px-4 text-white sm:max-w-xl md:max-w-2xl lg:max-w-4xl xl:max-w-6xl 2xl:max-w-7xl">
+              <div className="flex flex-col items-center text-center md:items-start md:text-start">
+                <div className="z-20 flex flex-row space-x-4 text-[#F9F4D5]">
+                  <Icons.logo className="w-[47px] pl-0 md:w-[47px] md:pl-1 lg:w-[57px] lg:pl-2" />
+                  <p className="text-xl font-bold tracking-wider md:text-xl lg:text-2xl">
+                    POOLS
+                  </p>
+                </div>
+
+                <h1 className="z-20 mt-1 text-5xl font-extrabold leading-none tracking-tight text-foreground sm:mt-2 sm:leading-tight md:mt-4 md:text-4xl lg:text-6xl">
+                  Add <span className="text-[#E9D9B2]">liquidity</span> <br />{" "}
+                  or <span className="text-[#E9D9B2]">Create a pool</span>
+                </h1>
+                <p className="z-20 mt-6 max-w-44 text-lg font-medium leading-relaxed text-muted-foreground sm:max-w-fit md:mt-2 md:text-base lg:mt-4 lg:text-lg">
+                  Earn swap fees and BGT incentives
+                </p>
+              </div>
+            </div>
+          </div>
         </div>
 
-        {/* Tablet Screen
-      <div className="hidden md:block lg:hidden">
-        <Image
-          src={`${cloudinaryUrl}/DEX/zxxnwkdhfjcikwwgtqpc.png`}
-          alt="Tablet Screen Image"
-          width={800}
-          height={400}
-          className="w-full h-auto  object-cover"
-        />
-      </div> */}
-
-        {/* Mobile Screen */}
-        {/* <div className="block xs:hidden">
-        <Image
-          src={`${cloudinaryUrl}/DEX/zz9s7qxq8g3ykbqtzgxv.png`}
-          alt="Mobile Screen Image"
-          width={400}
-          height={200}
-          className="w-full h-auto object-cover"
-        />
-      </div> */}
-
-        <PoolSearch poolType={poolType || "allPools"} />
+        {/* Pool Search Section */}
+        <div className="relative z-10 w-full max-w-7xl px-4 pt-20 md:pt-0">
+          <PoolSearch poolType={poolType || "allPools"} />
+        </div>
       </div>
     </SWRFallback>
   );