diff --git a/src/app/(routes)/_components/hero-section.tsx b/src/app/(routes)/_components/hero-section.tsx
new file mode 100644
index 0000000..16f49b6
--- /dev/null
+++ b/src/app/(routes)/_components/hero-section.tsx
@@ -0,0 +1,43 @@
+import Image from "next/image";
+
+import { Hero } from "../../_components/hero";
+import { Text } from "../../_components/text";
+import { ArrowRightIcon } from "../../_components/icons/arrow-right";
+import landingHeroSrc from "../../_assets/landing-1.png";
+import { INFORMATION_LINKS } from "../../_constants";
+
+export function HeroSection() {
+  return (
+    <Hero>
+      <div className="container mx-auto flex flex-col items-center gap-16 px-4 pb-16 pt-8 md:flex-row-reverse">
+        <div className="flex max-w-80 flex-1 sm:max-w-100 md:max-w-full">
+          <Image src={landingHeroSrc} alt="Picture of the author" />
+        </div>
+        <div className="flex flex-1 flex-col gap-6">
+          <Text variant="heading-1" className="text-center md:text-left">
+            <span className="text-aqua-100">Interoperability</span>
+            <br />
+            <span className="text-light-100">Powered By</span>{" "}
+            <br className="hidden md:block" />
+            <span className="text-aqua-100">Intents</span>
+          </Text>
+          <Text variant="body-nums" className="max-w-[433px] text-center md:text-left">
+            A new paradigm in cross-chain experiences, seamlessly connecting users with
+            applications.
+          </Text>
+          <a
+            className="flex cursor-pointer flex-row items-center justify-center gap-2 text-aqua-100 md:justify-start"
+            href={INFORMATION_LINKS.docs.href}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Text variant="cap-case">start building</Text>
+            <div className="flex h-5 w-5 items-center justify-center rounded-full bg-aqua-100">
+              <ArrowRightIcon />
+            </div>
+          </a>
+        </div>
+      </div>
+    </Hero>
+  );
+}
diff --git a/src/app/(routes)/layout.tsx b/src/app/(routes)/layout.tsx
index d7b0c50..349ecd1 100644
--- a/src/app/(routes)/layout.tsx
+++ b/src/app/(routes)/layout.tsx
@@ -7,7 +7,11 @@ import { Footer } from "@/app/_components/footer";
 
 import "./globals.css";
 
-const inter = Barlow({ subsets: ["latin"], weight: ["200", "300", "400", "500"] });
+const inter = Barlow({
+  subsets: ["latin"],
+  weight: ["200", "300", "400", "500"],
+  display: "swap",
+});
 
 export const metadata: Metadata = {
   title: {
diff --git a/src/app/(routes)/page.tsx b/src/app/(routes)/page.tsx
index 818060d..75f0186 100644
--- a/src/app/(routes)/page.tsx
+++ b/src/app/(routes)/page.tsx
@@ -1,6 +1,6 @@
 import { Metadata } from "next";
 
-import { Hero } from "@/app/_components/hero";
+import { HeroSection } from "./_components/hero-section";
 
 export const metadata: Metadata = {
   title: "Home | Across Protocol",
@@ -10,9 +10,7 @@ export const metadata: Metadata = {
 export default function Home() {
   return (
     <main className="z-0 min-h-screen overflow-hidden">
-      <Hero>
-        <div className="py-10 text-center">Home</div>
-      </Hero>
+      <HeroSection />
     </main>
   );
 }
diff --git a/src/app/_assets/landing-1.png b/src/app/_assets/landing-1.png
new file mode 100644
index 0000000..dcda261
Binary files /dev/null and b/src/app/_assets/landing-1.png differ
diff --git a/src/app/_components/header-nav/index.tsx b/src/app/_components/header-nav/index.tsx
index 026a000..60a16ec 100644
--- a/src/app/_components/header-nav/index.tsx
+++ b/src/app/_components/header-nav/index.tsx
@@ -96,7 +96,7 @@ export function HeaderNav() {
                 )}
               />
             </Link>
-            <div className="hidden flex-row items-center gap-6 sm:flex">
+            <div className="hidden flex-row items-center gap-6 md:flex">
               <Link href="/">Home</Link>
               <FlyoutMenu buttonLabel="Products" menuItems={productsNavigationItems} />
               <FlyoutMenu
@@ -109,7 +109,7 @@ export function HeaderNav() {
           <div className="flex flex-row gap-3">
             <Button
               className={twMerge(
-                "hidden transition sm:block",
+                "hidden transition md:block",
                 pathname === "/across-plus"
                   ? "border-teal-100/[.05] bg-teal-100/[.05] text-teal-100"
                   : pathname === "/across-settlement"
@@ -121,7 +121,7 @@ export function HeaderNav() {
             </Button>
             {/* Only show menu button on mobile */}
             <button
-              className="flex h-10 w-10 items-center justify-center rounded-full border border-grey-600 sm:hidden"
+              className="flex h-10 w-10 items-center justify-center rounded-full border border-grey-600 md:hidden"
               onClick={() => setIsMenuOpen((isMenuOpen) => !isMenuOpen)}
             >
               {isMenuOpen ? <MinusIcon /> : <MenuIcon />}
diff --git a/src/app/_components/header-nav/mobile-menu.tsx b/src/app/_components/header-nav/mobile-menu.tsx
index 4811602..450b6e6 100644
--- a/src/app/_components/header-nav/mobile-menu.tsx
+++ b/src/app/_components/header-nav/mobile-menu.tsx
@@ -27,10 +27,10 @@ export function MobileMenu(props: {
       leaveTo="opacity-0 translate-y-1"
       show={props.isMenuOpen}
     >
-      <div className="absolute flex min-h-screen w-full flex-col gap-6 bg-grey-dark p-4 sm:hidden">
+      <div className="absolute flex min-h-screen w-full flex-col gap-6 bg-grey-dark p-4 md:hidden">
         <Button
           className={twMerge(
-            "sm:hidden",
+            "md:hidden",
             props.pathname === "/across-plus"
               ? "border-teal-100/[.05] bg-teal-100/[.05] text-teal-100"
               : props.pathname === "/across-settlement"
diff --git a/src/app/_components/icons/arrow-right.tsx b/src/app/_components/icons/arrow-right.tsx
new file mode 100644
index 0000000..55b8f65
--- /dev/null
+++ b/src/app/_components/icons/arrow-right.tsx
@@ -0,0 +1,29 @@
+import { SVGProps } from "react";
+
+export function ArrowRightIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M3.33203 8H12.6654"
+        stroke="#2D2E33"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8 3.33334L12.6667 8.00001L8 12.6667"
+        stroke="#2D2E33"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/src/app/_components/icons/document.tsx b/src/app/_components/icons/document.tsx
index f5e7923..0ea932e 100644
--- a/src/app/_components/icons/document.tsx
+++ b/src/app/_components/icons/document.tsx
@@ -13,13 +13,13 @@ export function DocumentIcon(props: SVGProps<SVGSVGElement>) {
       <path
         d="M12.5007 1.66675H5.00065C4.55862 1.66675 4.1347 1.84234 3.82214 2.1549C3.50958 2.46746 3.33398 2.89139 3.33398 3.33341V16.6667C3.33398 17.1088 3.50958 17.5327 3.82214 17.8453C4.1347 18.1578 4.55862 18.3334 5.00065 18.3334H15.0007C15.4427 18.3334 15.8666 18.1578 16.1792 17.8453C16.4917 17.5327 16.6673 17.1088 16.6673 16.6667V5.83341L12.5007 1.66675Z"
         stroke="white"
-        stroke-linecap="round"
+        strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M12 2V4.66667C12 5.02029 12.1756 5.35943 12.4882 5.60948C12.8007 5.85952 13.2246 6 13.6667 6H16"
         stroke="white"
-        stroke-linecap="round"
+        strokeLinecap="round"
         strokeLinejoin="round"
       />
     </svg>
diff --git a/src/app/_components/icons/index.tsx b/src/app/_components/icons/index.tsx
index 009d6f7..450c4c6 100644
--- a/src/app/_components/icons/index.tsx
+++ b/src/app/_components/icons/index.tsx
@@ -10,6 +10,7 @@ export { ChevronDownIcon } from "./chevron-down";
 export { QuestionMarkIcon } from "./question-mark";
 export { DocumentIcon } from "./document";
 export { Partner1Icon } from "./partner-1";
+export { ArrowRightIcon } from "./arrow-right";
 
 // Gradient icons
 export { ArrowUpIcon } from "./gradient/arrow-up";
diff --git a/src/app/_components/text.tsx b/src/app/_components/text.tsx
new file mode 100644
index 0000000..6768fe2
--- /dev/null
+++ b/src/app/_components/text.tsx
@@ -0,0 +1,36 @@
+import { ComponentProps } from "react";
+import { twMerge } from "tailwind-merge";
+
+type TextVariant =
+  | "cap-case"
+  | "heading-1"
+  | "heading-2"
+  | "heading-3"
+  | "heading-4"
+  | "body-nums";
+
+type Props = ComponentProps<"div"> & {
+  variant: TextVariant;
+};
+
+const textBaseClasses = {
+  "cap-case":
+    "text-medium text-xs uppercase lining-nums tabular-nums tracking-wide-4 sm:text-md",
+  "heading-1":
+    "text-heading-3 font-lighter lining-nums tabular-nums tracking-tight-5 sm:text-heading-2 md:text-heading-1",
+  "heading-2":
+    "text-heading-3 font-lighter lining-nums tabular-nums tracking-tight-5 sm:text-heading-2",
+  "heading-3":
+    "text-heading-3 font-lighter lining-nums tabular-nums tracking-tight-5 sm:text-heading-3",
+  "heading-4":
+    "text-heading-4 font-lighter lining-nums tabular-nums tracking-tight-5 sm:text-heading-4",
+  "body-nums": "text-md lining-nums tabular-nums sm:text-lg",
+};
+
+export function Text({ variant, className, children, ...props }: Props) {
+  return (
+    <div className={twMerge(textBaseClasses[variant], className)} {...props}>
+      {children}
+    </div>
+  );
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index c8cde18..3613005 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -53,6 +53,22 @@ const config: Config = {
       "wide-4": "0.12rem", // 1.92px
     },
     extend: {
+      container: {
+        screens: {
+          xl: "1024px",
+          "2xl": "1024px",
+        },
+      },
+      screens: {
+        sm: "760px",
+        md: "900px",
+      },
+      fontWeight: {
+        lighter: "275",
+      },
+      maxWidth: {
+        "100": "400px",
+      },
       animation: {
         scroll: "scroll var(--iteration-time) linear infinite",
       },