diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
index 91be840..d4f077f 100644
--- a/packages/nextjs/pages/index.tsx
+++ b/packages/nextjs/pages/index.tsx
@@ -322,46 +322,34 @@ const Home: NextPage<{
         </div>
       </div>
 
-      {/* Nodes section */}
-      <div className="bg-[#EBEBEB] relative px-[13px]">
-        <div className="w-full border-t border-black absolute lg:top-16 top-14 left-0"></div>
-        <div className="h-full border-l border-black absolute top-0 lg:left-[76px] left-[58px]"></div>
-        <div className="w-full border-t border-black absolute lg:bottom-16 bottom-14 left-0"></div>
-        <div className="h-full border-l border-black absolute top-0 lg:right-[76px] right-[58px]"></div>
-        <div className="flex flex-col flex-grow lg:flex-row px-10 py-14 lg:py-16 lg:px-14 text-black">
-          {/* First column */}
-          <div className="flex flex-col flex-wrap">
-            <div className="flex items-start p-7 w-full lg:border-t lg:border-l lg:border-r-0 lg:border-b-0 border border-black">
-              <Image
-                src="/assets/client-logo.svg"
-                alt="client logo"
-                className="lg:w-[250px]"
-                width={200}
-                height={200}
-              />
+      {/* BG Client */}
+      <div className="bg-base-300">
+        <div className="mx-auto lg:max-w-7xl">
+          <div className="container max-w-[90%] lg:max-w-7xl m-auto py-12 lg:py-12 xl:pl-24 lg:pl-16 flex flex-col-reverse lg:flex-row items-center gap-5 lg:gap-0">
+            <div className="space-y-8 md:max-w-[70%] lg:max-w-[35%] flex flex-col items-center lg:items-start text-center lg:text-left">
+              <Image src="/assets/bg-client-logo.svg" alt="BG Client logo" width={200} height={200} />
+              <p className="m-0 lg:pr-8 mb-3 lg:text-xl font-space-mono">
+                Run a full Ethereum node with a single command! Opt in to our distributed RPC to power BG apps too!
+              </p>
+              <TrackedLink
+                id="BG-Nodes"
+                href="https://client.buidlguidl.com"
+                className="btn btn-primary btn-md px-8 mt-8 bg-[#FF66F9] border-[#FF66F9] hover:opacity-100"
+              >
+                Go to site
+              </TrackedLink>
             </div>
-            <div className="md:flex flex-row flex-grow lg:border-y lg:border-l lg:border-r-0 border-x border-black">
-              <div className="flex flex-col justify-between items-start bg-[#FF66F9] p-7 pt-4">
-                <p className="lg:text-base text-sm font-mono pb-4">
-                  Run a full Ethereum node with a single command! Opt in to our distributed RPC to power BG apps too!
-                </p>
-                <TrackedLink
-                  id="BG-Nodes"
-                  href="https://client.buidlguidl.com"
-                  className="btn btn-md text-xs lg:text-base px-8 hover:opacity-100 font-mono bg-white text-black border-black rounded-none hover:bg-[#4AF361] hover:border-black"
-                >
-                  Run a BG client
-                </TrackedLink>
-              </div>
-              <div className="hidden sm:flex flex-col items-center bg-[#4AF361] p-3 min-w-[200px] md:border-l border-t md:border-t-0 border-black">
-                <Image src="/assets/satellite.png" alt="satellite" width={200} height={200} />
+            <div className="flex flex-col items-center lg:pl-16 xl:pl-12 2xl:pl-24 lg:-mr-12 xl:-mr-16 2xl:-mr-24">
+              <div className="max-w-md lg:max-w-md xl:max-w-2xl 2xl:max-w-2xl">
+                <Image
+                  src="/assets/bg-client-monitor.png"
+                  alt="BG Client running on a computer"
+                  width={800}
+                  height={800}
+                />
               </div>
             </div>
           </div>
-          {/* Second column */}
-          <div className="flex flex-col items-center p-6 md:min-w-[400px] border border-black bg-[#4AF361] sm:bg-transparent">
-            <Image src="/assets/screenshot.png" alt="screenshot" width={700} height={700} />
-          </div>
         </div>
       </div>
 
diff --git a/packages/nextjs/public/assets/client-logo.svg b/packages/nextjs/public/assets/bg-client-logo.svg
similarity index 100%
rename from packages/nextjs/public/assets/client-logo.svg
rename to packages/nextjs/public/assets/bg-client-logo.svg
diff --git a/packages/nextjs/public/assets/bg-client-monitor.png b/packages/nextjs/public/assets/bg-client-monitor.png
new file mode 100644
index 0000000..1a09323
Binary files /dev/null and b/packages/nextjs/public/assets/bg-client-monitor.png differ
diff --git a/packages/nextjs/public/assets/screenshot.png b/packages/nextjs/public/assets/screenshot.png
deleted file mode 100644
index 31650b2..0000000
Binary files a/packages/nextjs/public/assets/screenshot.png and /dev/null differ
diff --git a/packages/nextjs/styles/globals.css b/packages/nextjs/styles/globals.css
index 96e0dad..f194125 100644
--- a/packages/nextjs/styles/globals.css
+++ b/packages/nextjs/styles/globals.css
@@ -1,4 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap");
 
 @import "tailwindcss/base";
 @import "tailwindcss/components";
diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
index 7f88465..07db352 100644
--- a/packages/nextjs/tailwind.config.js
+++ b/packages/nextjs/tailwind.config.js
@@ -68,6 +68,7 @@ module.exports = {
         "space-grotesk": ["Space Grotesk", "sans-serif"],
         "neue-machina": ["PPNeueMachina", "sans-serif"],
         "editorial": ["PPEditorial", "serif"],
+        "space-mono": ["Space Mono", "monospace"],
       },
       backgroundColor: {
         skin: "#EBECFD",