diff --git a/src/app/(routes)/_components/hero-section.tsx b/src/app/(routes)/_components/hero-section.tsx
index 967bb97..9b056ea 100644
--- a/src/app/(routes)/_components/hero-section.tsx
+++ b/src/app/(routes)/_components/hero-section.tsx
@@ -8,7 +8,7 @@ import { INFORMATION_LINKS } from "../../_constants";
 
 export function HeroSection() {
   return (
-    <Hero>
+    <Hero title="trusted by top applications">
       <div className="container mx-auto flex flex-col items-center gap-16 px-4 pb-16 pt-8 md:flex-row-reverse md:gap-0 md:pr-2 md:pt-16">
         <div className="flex max-w-80 flex-1 sm:max-w-100 md:max-w-full">
           <Image src={landingHeroSrc} alt="Across protocol diagram" priority={true} />
diff --git a/src/app/(routes)/across-bridge/page.tsx b/src/app/(routes)/across-bridge/page.tsx
index a9b88dd..3513f94 100644
--- a/src/app/(routes)/across-bridge/page.tsx
+++ b/src/app/(routes)/across-bridge/page.tsx
@@ -1,7 +1,5 @@
 import { Metadata } from "next";
 
-import { Hero } from "@/app/_components/hero";
-
 export const metadata: Metadata = {
   title: "Across Bridge",
   description: "Interoperability powered by Intents.",
@@ -10,9 +8,7 @@ export const metadata: Metadata = {
 export default function BridgeLanding() {
   return (
     <main className="z-0 min-h-screen overflow-hidden">
-      <Hero>
-        <div className="py-10 text-center">Across Bridge</div>
-      </Hero>
+      <div className="py-10 text-center">Across Bridge</div>
     </main>
   );
 }
diff --git a/src/app/(routes)/across-plus/_components/features-section.tsx b/src/app/(routes)/across-plus/_components/features-section.tsx
new file mode 100644
index 0000000..2a1944e
--- /dev/null
+++ b/src/app/(routes)/across-plus/_components/features-section.tsx
@@ -0,0 +1,78 @@
+import {
+  ArrowUpIcon,
+  ShieldIcon,
+  ChatIcon,
+  ArrowUpRightThickIcon,
+} from "@/app/_components/icons";
+import { Text } from "@/app/_components/text";
+import { INFORMATION_LINKS } from "@/app/_constants";
+
+const features = [
+  {
+    Icon: <ArrowUpIcon className="h-14 w-14" />,
+    title: "Web2-Grade UX",
+    body: "Users want to use apps, not bridges. Across+ upgrades dapp UX by abstracting bridging to the background for a Web2-like experience.",
+  },
+  {
+    Icon: <ShieldIcon className="h-14 w-14" />,
+    title: "Secure by Design",
+    body: "Most cross-chain messaging solutions increase trust assumptions vs. the chains they connect. Across+ actions are not cross-chain messages -- they are actions to execute when assets are delivered on the destination.",
+  },
+  {
+    Icon: <ChatIcon variant="teal" className="h-14 w-14" />,
+    title: "intents-based Architecture",
+    body: "Cross-chain intents are cross-chain limit orders plus a protocol action to execute on destination. Simply attach the intent order standard to protocol actions to create seamless cross-chain experiences.",
+  },
+];
+
+export function FeaturesSection() {
+  return (
+    <section className="container mx-auto flex flex-col gap-16 px-4 sm:gap-24              ">
+      <div className="flex flex-col gap-4">
+        <Text variant="cap-case" className="text-center text-teal-100">
+          +users +TVL +chains
+        </Text>
+        <Text variant="heading-2" className="text-center capitalize text-light-200">
+          Seamless Cross-chain Onboarding
+        </Text>
+      </div>
+      <div className="grid grid-cols-1 gap-12 sm:gap-y-16 md:grid-cols-2">
+        {features.map((feature) => (
+          <div key={feature.title}>
+            {feature.Icon}
+            <Text variant="heading-4" className="mb-4 mt-8 capitalize text-light-200">
+              {feature.title}
+            </Text>
+            <Text className="text-light-300">{feature.body}</Text>
+          </div>
+        ))}
+        <div className="flex flex-col items-center gap-8 rounded-2xl bg-teal-100/[.02] p-6 shadow-md sm:items-start">
+          <div className="flex flex-col items-center justify-center self-center rounded-lg bg-teal-100/[.05] p-2">
+            <Text variant="cap-case" className="text-teal-100">
+              across.to/docs
+            </Text>
+          </div>
+          <div>
+            <Text className="max-w-100 text-light-300">
+              Visit the Across+ documentation page to learn the ins and outs of how
+              we&apos;ve built the system.
+            </Text>
+            <a
+              className="mt-4 flex cursor-pointer flex-row items-center gap-1"
+              href={INFORMATION_LINKS.docs.href}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Text variant="cap-case" className="text-teal-100 sm:text-xs md:text-xs">
+                visit docs
+              </Text>
+              <div className="flex h-4 w-4 items-center justify-center rounded-full bg-teal-100">
+                <ArrowUpRightThickIcon className="stroke-grey-dark" />
+              </div>
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/(routes)/across-plus/_components/hero-section.tsx b/src/app/(routes)/across-plus/_components/hero-section.tsx
new file mode 100644
index 0000000..233eb40
--- /dev/null
+++ b/src/app/(routes)/across-plus/_components/hero-section.tsx
@@ -0,0 +1,53 @@
+import Image from "next/image";
+
+import { Hero } from "@/app/_components/hero";
+import { Text } from "@/app/_components/text";
+import { ArrowRightIcon } from "@/app/_components/icons/arrow-right";
+import plusHeroSrc from "@/app/_assets/plus-hero.png";
+import { INFORMATION_LINKS } from "@/app/_constants";
+
+export function HeroSection() {
+  return (
+    <Hero title="trusted by top tier protocols">
+      <div className="container mx-auto flex flex-col items-center gap-16 px-4 pb-16 pt-8 md:flex-row-reverse md:gap-8 md:pt-16">
+        <div className="flex max-w-80 flex-1 sm:max-w-100 md:max-w-full">
+          <Image src={plusHeroSrc} alt="Across plus graphic" priority={true} />
+        </div>
+        <div className="flex flex-1 flex-col gap-6">
+          <Text
+            variant="heading-1"
+            className="text-center sm:tracking-tight-1 md:text-left"
+          >
+            <span className="text-light-100">Cross-Chain</span>{" "}
+            <br className="hidden md:block" />
+            <span className="text-teal-100">Bridge Hooks</span>{" "}
+            <br className="hidden sm:block md:hidden" />
+            <span className="text-light-100">
+              To
+              <br className="hidden md:block" /> Fulfill
+            </span>{" "}
+            {/* <br className="hidden md:block" /> */}
+            <span className="text-teal-100">User Intents</span>
+          </Text>
+          <div className="flex w-full flex-row justify-center md:justify-start">
+            <Text variant="body-nums" className="max-w-[430px] text-center md:text-left">
+              Bridge abstraction promotes user onboarding and bootstraps cross-chain
+              capital by bundling bridge + protocol actions within dapps.
+            </Text>
+          </div>
+          <a
+            className="flex cursor-pointer flex-row items-center justify-center gap-2 text-teal-100 md:justify-start"
+            href={INFORMATION_LINKS.docs.href}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Text variant="cap-case">go to docs</Text>
+            <div className="flex h-5 w-5 items-center justify-center rounded-full bg-teal-100">
+              <ArrowRightIcon />
+            </div>
+          </a>
+        </div>
+      </div>
+    </Hero>
+  );
+}
diff --git a/src/app/(routes)/across-plus/page.tsx b/src/app/(routes)/across-plus/page.tsx
index d98b62d..804901e 100644
--- a/src/app/(routes)/across-plus/page.tsx
+++ b/src/app/(routes)/across-plus/page.tsx
@@ -1,6 +1,7 @@
 import { Metadata } from "next";
 
-import { Hero } from "@/app/_components/hero";
+import { HeroSection } from "./_components/hero-section";
+import { FeaturesSection } from "./_components/features-section";
 
 export const metadata: Metadata = {
   title: "Across Plus",
@@ -9,10 +10,9 @@ export const metadata: Metadata = {
 
 export default function PlusLanding() {
   return (
-    <main className="z-0 min-h-screen overflow-hidden">
-      <Hero>
-        <div className="py-10 text-center">Across Plus</div>
-      </Hero>
+    <main className="z-0 flex min-h-screen flex-col gap-24 overflow-hidden px-4 sm:gap-32 md:gap-48">
+      <HeroSection />
+      <FeaturesSection />
     </main>
   );
 }
diff --git a/src/app/(routes)/across-settlement/page.tsx b/src/app/(routes)/across-settlement/page.tsx
index 00e761c..efe1b7c 100644
--- a/src/app/(routes)/across-settlement/page.tsx
+++ b/src/app/(routes)/across-settlement/page.tsx
@@ -1,7 +1,5 @@
 import { Metadata } from "next";
 
-import { Hero } from "@/app/_components/hero";
-
 export const metadata: Metadata = {
   title: "Across Settlement",
   description: "Interoperability powered by Intents.",
@@ -10,9 +8,7 @@ export const metadata: Metadata = {
 export default function SettlementLanding() {
   return (
     <main className="z-0 min-h-screen overflow-hidden">
-      <Hero>
-        <div className="py-10 text-center">Across Settlement</div>
-      </Hero>
+      <div className="py-10 text-center">Across Settlement</div>
     </main>
   );
 }
diff --git a/src/app/_assets/plus-hero.png b/src/app/_assets/plus-hero.png
new file mode 100644
index 0000000..274b6df
Binary files /dev/null and b/src/app/_assets/plus-hero.png differ
diff --git a/src/app/_components/header-nav/products-sub-nav.tsx b/src/app/_components/header-nav/products-sub-nav.tsx
index b32dc8b..d51219b 100644
--- a/src/app/_components/header-nav/products-sub-nav.tsx
+++ b/src/app/_components/header-nav/products-sub-nav.tsx
@@ -32,8 +32,8 @@ export function ProductsSubNav(props: { navItems: NavItem[] }) {
   const isCurrentPath = (href: string) => pathname.startsWith(href);
 
   return (
-    <div className="min-w-3xl overflow-x-scroll p-4 sm:overflow-x-hidden">
-      <div className="flex flex-row items-center justify-start gap-4 bg-grey-dark sm:justify-center">
+    <div className="overflow-x-scroll p-4 min-[500px]:overflow-x-hidden">
+      <div className="flex flex-row items-center justify-start gap-4 bg-grey-dark min-[500px]:justify-center">
         {props.navItems.map((item) => (
           <span key={item.href} className="group">
             <Link
diff --git a/src/app/_components/hero.tsx b/src/app/_components/hero.tsx
index 6713f17..041da70 100644
--- a/src/app/_components/hero.tsx
+++ b/src/app/_components/hero.tsx
@@ -3,13 +3,15 @@ import { twMerge } from "tailwind-merge";
 
 import { PartnersTicker } from "./partners-ticker";
 
-type HeroProps = ComponentProps<"section">;
+type HeroProps = ComponentProps<"section"> & {
+  title: string;
+};
 
-export function Hero({ className, children, ...props }: HeroProps) {
+export function Hero({ className, children, title, ...props }: HeroProps) {
   return (
     <section className={twMerge("min-h-screen", className)} {...props}>
       {children}
-      <PartnersTicker />
+      <PartnersTicker title={title} />
     </section>
   );
 }
diff --git a/src/app/_components/icons/arrow-up-right-thick.tsx b/src/app/_components/icons/arrow-up-right-thick.tsx
new file mode 100644
index 0000000..ad1473f
--- /dev/null
+++ b/src/app/_components/icons/arrow-up-right-thick.tsx
@@ -0,0 +1,29 @@
+import { SVGProps } from "react";
+
+export function ArrowUpRightThickIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M7.35938 12.6406L12.6391 7.36089"
+        stroke="#2D2E33"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.35938 7.35938H12.6391V12.6391"
+        stroke="#2D2E33"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/src/app/_components/icons/gradient/shield-small.tsx b/src/app/_components/icons/gradient/shield-small.tsx
index c757dd0..e554310 100644
--- a/src/app/_components/icons/gradient/shield-small.tsx
+++ b/src/app/_components/icons/gradient/shield-small.tsx
@@ -8,6 +8,7 @@ export function ShieldIcon(props: SVGProps<SVGSVGElement>) {
       viewBox="0 0 96 96"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      {...props}
     >
       <rect
         x="4.28571"
diff --git a/src/app/_components/icons/index.tsx b/src/app/_components/icons/index.tsx
index e5e3be7..a6b6cb7 100644
--- a/src/app/_components/icons/index.tsx
+++ b/src/app/_components/icons/index.tsx
@@ -12,6 +12,7 @@ export { DocumentIcon } from "./document";
 export { Partner1Icon } from "./partner-1";
 export { ArrowRightIcon } from "./arrow-right";
 export { ArrowUpRightIcon } from "./arrow-up-right";
+export { ArrowUpRightThickIcon } from "./arrow-up-right-thick";
 
 // Gradient icons
 export { ArrowUpIcon } from "./gradient/arrow-up";
diff --git a/src/app/_components/partners-ticker.tsx b/src/app/_components/partners-ticker.tsx
index a28c62c..0b757ff 100644
--- a/src/app/_components/partners-ticker.tsx
+++ b/src/app/_components/partners-ticker.tsx
@@ -31,11 +31,11 @@ const partners = [
 // Duplicate partners to simulate infinite scrolling
 const partnersToRender = [...partners, ...partners];
 
-export function PartnersTicker() {
+export function PartnersTicker(props: { title: string }) {
   return (
     <>
       <div className="mb-8 text-center text-xs uppercase lining-nums tabular-nums tracking-wide-4 text-grey-400">
-        Integrated Partners
+        {props.title}
       </div>
       <div className="w-[calc(2 * var(--no-of-slides))] group relative overflow-hidden">
         <div className="container mx-auto">