diff --git a/apps/staking/src/components/AccountSummary/index.tsx b/apps/staking/src/components/AccountSummary/index.tsx
index 737970e1bd..b37391e608 100644
--- a/apps/staking/src/components/AccountSummary/index.tsx
+++ b/apps/staking/src/components/AccountSummary/index.tsx
@@ -49,13 +49,13 @@ export const AccountSummary = ({
   availableRewards,
   expiringRewards,
 }: Props) => (
-  <section className="relative w-full overflow-hidden border border-neutral-600/50 bg-pythpurple-800">
+  <section className="relative w-full overflow-hidden sm:border sm:border-neutral-600/50 sm:bg-pythpurple-800">
     <Image
       src={background}
       alt=""
       className="absolute -right-40 hidden h-full object-cover object-right [mask-image:linear-gradient(to_right,_transparent,_black_50%)] md:block"
     />
-    <div className="relative flex flex-col items-start justify-between gap-8 px-6 py-10 sm:gap-16 sm:px-12 sm:py-20 lg:flex-row lg:items-center">
+    <div className="relative flex flex-col items-start justify-between gap-8 sm:px-6 sm:py-10 md:gap-16 md:px-12 md:py-20 xl:flex-row xl:items-center">
       <div>
         <div className="mb-2 inline-block border border-neutral-600/50 bg-neutral-900 px-4 py-1 text-xs text-neutral-400 sm:mb-4">
           Total Balance
@@ -121,7 +121,7 @@ export const AccountSummary = ({
           />
         </div>
       </div>
-      <div className="flex w-full flex-col items-stretch gap-4 lg:w-auto xl:flex-row">
+      <div className="flex w-full flex-row items-stretch gap-4 xl:w-auto">
         <BalanceCategory
           name="Unlocked & Unstaked"
           amount={availableToWithdraw}
@@ -182,7 +182,7 @@ const BalanceCategory = ({
   action,
   warning,
 }: BalanceCategoryProps) => (
-  <div className="flex w-full flex-col justify-between border border-neutral-600/50 bg-pythpurple-800/60 p-6 backdrop-blur lg:w-96">
+  <div className="flex w-full flex-col justify-between border border-neutral-600/50 bg-pythpurple-800/60 p-6 backdrop-blur xl:w-96">
     <div>
       <div className="mb-4 inline-block border border-neutral-600/50 bg-neutral-900 px-4 py-1 text-xs text-neutral-400">
         {name}
diff --git a/apps/staking/src/components/Button/index.tsx b/apps/staking/src/components/Button/index.tsx
index a687b03ed2..c25c3d92c3 100644
--- a/apps/staking/src/components/Button/index.tsx
+++ b/apps/staking/src/components/Button/index.tsx
@@ -53,7 +53,7 @@ export const LinkButton = ({
 
 const baseClassName = (props: VariantProps) =>
   clsx(
-    "border border-pythpurple-600 hover:bg-pythpurple-600/60 focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400",
+    "border border-pythpurple-600 transition duration-100 hover:bg-pythpurple-600/60 focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400",
     variantClassName(props.variant),
     sizeClassName(props.size),
   );
@@ -75,7 +75,7 @@ const sizeClassName = (size: VariantProps["size"]) => {
       return "text-sm px-2 sm:px-3 py-1";
     }
     case "nopad": {
-      return "px-0 py-0";
+      return "";
     }
     case "noshrink": {
       return "px-8 py-2";
diff --git a/apps/staking/src/components/Footer/index.tsx b/apps/staking/src/components/Footer/index.tsx
index 0c173f2c29..784abc6ce2 100644
--- a/apps/staking/src/components/Footer/index.tsx
+++ b/apps/staking/src/components/Footer/index.tsx
@@ -7,6 +7,7 @@ import LinkedIn from "./linkedin.svg";
 import Telegram from "./telegram.svg";
 import X from "./x.svg";
 import Youtube from "./youtube.svg";
+import Logo from "../Header/logo.svg";
 import { Link } from "../Link";
 import { MaxWidth } from "../MaxWidth";
 
@@ -37,21 +38,26 @@ export const Footer = ({
 }: Omit<HTMLAttributes<HTMLElement>, "children">) => (
   <footer
     className={clsx(
-      "sticky bottom-0 mt-4 text-xs font-light text-neutral-400 sm:px-4",
+      "mt-4 text-xs font-light sm:sticky sm:bottom-0 sm:px-4",
       className,
     )}
     {...props}
   >
     <div className="border-t border-neutral-600/50 bg-pythpurple-800 sm:border-x">
-      <MaxWidth className="flex h-16 items-center justify-between sm:-mx-4">
-        <div>© 2024 Pyth Data Association</div>
-        <div className="relative -right-3 flex h-full items-center">
+      <MaxWidth className="flex flex-col items-center gap-10 py-8 sm:-mx-4 sm:h-16 sm:flex-row sm:justify-between">
+        <div className="flex flex-col items-center gap-2 sm:flex-row sm:gap-4 md:gap-8">
+          <Link href="https://www.pyth.network" target="_blank">
+            <Logo className="h-10 sm:h-8" />
+          </Link>
+          <div>© 2024 Pyth Data Association</div>
+        </div>
+        <div className="relative flex h-full items-center sm:-right-3">
           {SOCIAL_LINKS.map(({ name, icon: Icon, href }) => (
             <Link
               target="_blank"
               href={href}
               key={name}
-              className="grid h-full place-content-center px-2 hover:text-pythpurple-400 sm:px-3"
+              className="grid h-full place-content-center px-3 hover:text-pythpurple-400"
               rel="noreferrer"
             >
               <Icon className="size-4" />
diff --git a/apps/staking/src/components/Home/index.tsx b/apps/staking/src/components/Home/index.tsx
index 018a743a86..b2f1c640fe 100644
--- a/apps/staking/src/components/Home/index.tsx
+++ b/apps/staking/src/components/Home/index.tsx
@@ -1,7 +1,5 @@
 "use client";
 
-import { useWalletModal } from "@solana/wallet-adapter-react-ui";
-import { useCallback } from "react";
 import { useIsSSR } from "react-aria";
 
 import {
@@ -13,10 +11,10 @@ import {
   StateType as DashboardDataStateType,
   useData,
 } from "../../hooks/use-data";
-import { Button } from "../Button";
 import { Dashboard } from "../Dashboard";
 import { Error as ErrorPage } from "../Error";
 import { Loading } from "../Loading";
+import { NoWalletHome } from "../NoWalletHome";
 
 export const Home = () => {
   const isSSR = useIsSSR();
@@ -45,29 +43,6 @@ const MountedHome = () => {
   }
 };
 
-const NoWalletHome = () => {
-  const modal = useWalletModal();
-  const showModal = useCallback(() => {
-    modal.setVisible(true);
-  }, [modal]);
-
-  return (
-    <main className="my-20">
-      <h1 className="mb-8 mt-16 text-center text-4xl font-semibold text-pythpurple-400">
-        Staking & Delegating
-      </h1>
-      <p className="mx-auto mb-8 max-w-prose text-center">
-        The Pyth staking program allows you to stake tokens to participate in
-        governance, or to earn yield and protect DeFi by delegating to
-        publishers.
-      </p>
-      <div className="grid w-full place-content-center">
-        <Button onPress={showModal}>Connect your wallet to participate</Button>
-      </div>
-    </main>
-  );
-};
-
 type StakeAccountLoadedHomeProps = {
   api: States[ApiStateType.Loaded] | States[ApiStateType.LoadedNoStakeAccount];
 };
diff --git a/apps/staking/src/components/NoWalletHome/governance.png b/apps/staking/src/components/NoWalletHome/governance.png
new file mode 100644
index 0000000000..7ff695c1ba
Binary files /dev/null and b/apps/staking/src/components/NoWalletHome/governance.png differ
diff --git a/apps/staking/src/components/NoWalletHome/index.tsx b/apps/staking/src/components/NoWalletHome/index.tsx
new file mode 100644
index 0000000000..ab0802e917
--- /dev/null
+++ b/apps/staking/src/components/NoWalletHome/index.tsx
@@ -0,0 +1,280 @@
+import { WalletIcon } from "@heroicons/react/24/outline";
+import { useWalletModal } from "@solana/wallet-adapter-react-ui";
+import clsx from "clsx";
+import Image, { type StaticImageData } from "next/image";
+import {
+  type ReactNode,
+  type ComponentType,
+  type SVGProps,
+  type ComponentProps,
+  useCallback,
+  useState,
+} from "react";
+import { Tabs, TabList, Tab, TabPanel } from "react-aria-components";
+
+import governance from "./governance.png";
+import Info from "./info.svg";
+import ois from "./ois.png";
+import Safebox from "./safebox.svg";
+import SecurePyth from "./secure-pyth.svg";
+import SelectPublishers from "./select-publishers.svg";
+import TokenWarmup from "./token-warmup.svg";
+import { Button } from "../Button";
+
+export const NoWalletHome = () => {
+  const modal = useWalletModal();
+  const showModal = useCallback(() => {
+    modal.setVisible(true);
+  }, [modal]);
+  const [tab, setTab] = useState<
+    Exclude<ComponentProps<typeof Tabs>["selectedKey"], undefined>
+  >(TabId.IntegrityStaking);
+
+  return (
+    <main className="flex flex-col items-center">
+      <div className="my-20 flex flex-col gap-12 text-center">
+        <div className="text-sm/normal tracking-[0.5rem]">
+          WELCOME
+          <br />
+          TO THE PYTH STAKING
+          <br />
+          DASHBOARD
+        </div>
+        <h1 className="text-5xl/tight font-light md:text-7xl">
+          Choose Your Journey
+        </h1>
+        <p className="text-lg">You can participate in both programs.</p>
+        <Button
+          onPress={showModal}
+          className="flex flex-row items-center justify-center gap-2 px-10 py-4"
+          size="nopad"
+        >
+          <WalletIcon className="size-4" />
+          <div>Connect wallet</div>
+        </Button>
+      </div>
+
+      <Tabs selectedKey={tab} onSelectionChange={setTab}>
+        <div className="relative mx-auto max-h-96 overflow-hidden md:hidden">
+          <div className="absolute inset-0 bg-[#E6DAFE] mix-blend-color" />
+          <Image
+            src={tab === TabId.IntegrityStaking ? ois : governance}
+            alt=""
+            className="size-full sm:-mt-28"
+          />
+          <div className="absolute inset-0 top-12 text-center text-2xl text-pythpurple-800">
+            {tab === TabId.IntegrityStaking ? (
+              <>
+                <span>Secure the Oracle</span>
+                <br />
+                <span className="font-semibold">to Earn Rewards</span>
+              </>
+            ) : (
+              <>
+                <span>Gain Voting Power</span>
+                <br />
+                <span className="font-semibold">for Governance</span>
+              </>
+            )}
+          </div>
+        </div>
+        <TabList className="-mx-4 mb-8 flex max-w-7xl flex-row items-stretch justify-center gap-2 border border-neutral-600/50 bg-pythpurple-800 px-4 py-2 md:border-none md:bg-transparent md:p-0">
+          <ProgramTab
+            id={TabId.IntegrityStaking}
+            image={ois}
+            description={
+              <>
+                <span>Secure the Oracle</span>
+                <br />
+                <span className="font-semibold">to Earn Rewards</span>
+              </>
+            }
+          >
+            Oracle Integrity Staking
+          </ProgramTab>
+          <ProgramTab
+            id={TabId.Governance}
+            image={governance}
+            description={
+              <>
+                <span>Gain Voting Power</span>
+                <br />
+                <span className="font-semibold">for Governance</span>
+              </>
+            }
+          >
+            Pyth Governance
+          </ProgramTab>
+        </TabList>
+
+        <ProgramPanel
+          id={TabId.IntegrityStaking}
+          header="Oracle Integrity Staking"
+          eyebrow="SECURE THE ORACLE TO EARN REWARDS"
+          steps={[
+            {
+              title: "Add Tokens",
+              body: "Add your PYTH tokens into the Staking Dashboard smart contract. Staking these tokens in Oracle Integrity Staking lets you secure Pyth’s price oracle and protect DeFi.",
+              icon: Safebox,
+            },
+            {
+              title: "Select Publishers",
+              body: "Choose which data publishers to support by staking your tokens towards them to help secure the oracle. You can sort publishers by their stake pool details, quality ranking, and more.",
+              icon: SelectPublishers,
+            },
+            {
+              title: "Token Warmup",
+              body: "Once you confirm your choice to stake to a publisher, your tokens will first enter a brief warmup period before they become staked. Staked tokens are subject to programmatic rewards and slashing penalties based on publisher performance.",
+              icon: TokenWarmup,
+            },
+            {
+              title: "Secure Pyth to Obtain Rewards",
+              body: "The protocol programmatically distributes rewards to publishers who contributed high quality data, and then distributes remaining rewards to the stakers who supported these publishers. Rewards are generated every epoch—one week period.",
+              icon: SecurePyth,
+            },
+          ]}
+        />
+
+        <ProgramPanel
+          id={TabId.Governance}
+          header="Pyth Governance"
+          eyebrow="GAIN VOTING POWER FOR GOVERNANCE"
+          steps={[
+            {
+              title: "Add Tokens",
+              body: "Add your PYTH tokens into the Staking Dashboard smart contract. Staking these tokens in Pyth Governance gives you voting power for key decisions in helping shape the oracle network.",
+              icon: Safebox,
+            },
+            {
+              title: "Token Warmup",
+              body: "Once you confirm your choice to stake, your tokens will first enter a brief warmup period before they become staked. Once your tokens become staked, they will confer voting power.",
+              icon: TokenWarmup,
+            },
+            {
+              title: "Vote & Govern",
+              body: "You can cast your vote on Pyth Improvement Proposals (PIPs) in the Pyth Network Realm. By participating in governance, you help shape the direction of the Pyth Network and ensure its continued growth and stability.",
+              icon: SelectPublishers,
+            },
+          ]}
+        />
+      </Tabs>
+
+      <div className="my-20 flex flex-col items-center gap-12 text-center md:my-32">
+        <div className="flex flex-col items-center gap-6 px-6">
+          <h2 className="text-6xl font-light md:text-7xl">Get Started</h2>
+          <p className="mx-auto max-w-[30rem] text-lg opacity-50">
+            Connect your wallet to get started with either Oracle Integrity
+            Staking or Pyth Governance.
+          </p>
+        </div>
+        <Button
+          onPress={showModal}
+          className="inline-flex flex-row items-center gap-2 px-10 py-4"
+          size="nopad"
+        >
+          <WalletIcon className="size-4" />
+          <span>Connect wallet</span>
+        </Button>
+      </div>
+
+      <div className="mb-12 flex max-w-[50rem] flex-row gap-2 border border-neutral-600/50 bg-pythpurple-800 px-4 py-8 sm:items-center sm:gap-4 md:gap-8 md:px-12 md:py-8">
+        <Info className="size-16 flex-none" />
+        <div className="text-lg/tight font-light">
+          You can stake your PYTH tokens in either or both the Oracle Integrity
+          Staking and Pyth Governance programs.
+        </div>
+      </div>
+    </main>
+  );
+};
+
+type ProgramTabProps = ComponentProps<typeof Tab> & {
+  description: ReactNode;
+  children: ReactNode;
+  image: StaticImageData;
+};
+
+const ProgramTab = ({
+  description,
+  className,
+  children,
+  image,
+  ...props
+}: ProgramTabProps) => (
+  <Tab
+    className={clsx(
+      "group flex flex-1 cursor-pointer flex-col items-center focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400 selected:cursor-default",
+      className,
+    )}
+    {...props}
+  >
+    <div className="relative hidden w-4/5 opacity-30 transition group-hover:opacity-60 group-selected:opacity-100 md:block">
+      <div className="absolute inset-0 bg-[#E6DAFE] mix-blend-color" />
+      <Image src={image} alt="" className="size-full" />
+      <div className="absolute inset-0 top-16 text-center text-2xl text-pythpurple-800 lg:text-3xl">
+        {description}
+      </div>
+    </div>
+    <div className="grid size-full place-content-center border border-transparent p-2 text-center font-semibold transition group-hover:bg-pythpurple-600/60 group-selected:border-pythpurple-400 group-selected:bg-pythpurple-600 md:border-neutral-600/50 md:bg-pythpurple-800 md:p-4 md:text-lg md:group-selected:border-pythpurple-400">
+      {children}
+    </div>
+  </Tab>
+);
+
+type ProgramPanelProps = ComponentProps<typeof TabPanel> & {
+  header: ReactNode;
+  eyebrow: ReactNode;
+  steps: {
+    icon: ComponentType<SVGProps<SVGSVGElement>>;
+    title: ReactNode;
+    body: ReactNode;
+  }[];
+};
+
+const ProgramPanel = ({
+  header,
+  eyebrow,
+  steps,
+  className,
+  ...props
+}: ProgramPanelProps) => (
+  <TabPanel
+    className={clsx(
+      "mx-auto max-w-[70rem] divide-y divide-neutral-600/50 border border-neutral-600/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400",
+      className,
+    )}
+    {...props}
+  >
+    <div className="flex flex-col gap-8 bg-[#1C1B2C] px-8 pb-16 pt-12 md:px-12">
+      <span className="text-sm/normal tracking-[0.5rem]">{eyebrow}</span>
+      <h3 className="text-4xl font-light md:text-5xl">{header}</h3>
+    </div>
+    <ol className="divide-y divide-neutral-600/50 bg-pythpurple-800">
+      {steps.map(({ icon: Icon, title, body }, i) => (
+        <li
+          key={i}
+          className="px-8 py-10 md:flex md:flex-row md:items-center md:gap-8 md:px-12"
+        >
+          <Icon className="hidden size-20 flex-none md:block" />
+          <div className="flex flex-col gap-8 md:gap-6">
+            <div className="flex flex-row items-center gap-4">
+              <Icon className="size-16 flex-none md:hidden" />
+              <div>
+                <div className="text-sm/normal tracking-[0.5rem]">
+                  STEP {i + 1}
+                </div>
+                <h4 className="text-3xl font-light">{title}</h4>
+              </div>
+            </div>
+            <p>{body}</p>
+          </div>
+        </li>
+      ))}
+    </ol>
+  </TabPanel>
+);
+
+enum TabId {
+  IntegrityStaking = "integrity-staking",
+  Governance = "governance",
+}
diff --git a/apps/staking/src/components/NoWalletHome/info.svg b/apps/staking/src/components/NoWalletHome/info.svg
new file mode 100644
index 0000000000..f522d7e326
--- /dev/null
+++ b/apps/staking/src/components/NoWalletHome/info.svg
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M25.024 1C11.828.981 1.018 11.768 1 24.976.983 38.173 11.763 48.975 24.977 49c13.19.026 24.004-10.767 24.023-23.977C49.02 11.823 38.235 1.018 25.024 1Z" stroke="currentColor" stroke-width=".5" stroke-miterlimit="10"/>
+  <path d="M28.296 39.63c-.033.424-.047.837-.11 1.241-.017.105-.172.243-.286.27-1.547.36-3.092.727-4.65 1.036-.427.084-.898.022-1.336-.05-1.407-.228-2.277-1.21-2.415-2.64-.124-1.282.2-2.508.451-3.741.963-4.73 1.94-9.456 2.907-14.183.215-1.054.003-1.38-1.061-1.5-.804-.09-1.616-.094-2.477-.137.034-.437.05-.848.109-1.252.014-.093.156-.205.263-.24 1.593-.521 3.189-1.048 4.875-1.16a5.96 5.96 0 0 1 1.486.079c1.422.268 2.235 1.314 2.075 2.815-.135 1.266-.407 2.519-.662 3.768-.929 4.55-1.877 9.096-2.816 13.644-.25 1.213.1 1.721 1.326 1.867.754.09 1.515.122 2.32.184ZM30.708 10.789c.007 1.918-1.284 3.266-3.125 3.266-1.778 0-3.023-1.26-3.02-3.06.004-1.892 1.272-3.182 3.136-3.194 1.796-.012 3.003 1.185 3.009 2.988Z" stroke="currentColor" stroke-width=".5" stroke-miterlimit="10"/>
+  <path d="M25.024 1C11.828.981 1.018 11.768 1 24.976.983 38.173 11.763 48.975 24.977 49c13.19.026 24.004-10.767 24.023-23.977C49.02 11.823 38.235 1.018 25.024 1Z" stroke="currentColor" stroke-width=".5" stroke-miterlimit="10"/>
+  <path d="M28.296 39.63c-.033.424-.047.837-.11 1.241-.017.105-.172.243-.286.27-1.547.36-3.092.727-4.65 1.036-.427.084-.898.022-1.336-.05-1.407-.228-2.277-1.21-2.415-2.64-.124-1.282.2-2.508.451-3.741.963-4.73 1.94-9.456 2.907-14.183.215-1.054.003-1.38-1.061-1.5-.804-.09-1.616-.094-2.477-.137.034-.437.05-.848.109-1.252.014-.093.156-.205.263-.24 1.593-.521 3.189-1.048 4.875-1.16a5.96 5.96 0 0 1 1.486.079c1.422.268 2.235 1.314 2.075 2.815-.135 1.266-.407 2.519-.662 3.768-.929 4.55-1.877 9.096-2.816 13.644-.25 1.213.1 1.721 1.326 1.867.754.09 1.515.122 2.32.184ZM30.708 10.789c.007 1.918-1.284 3.266-3.125 3.266-1.778 0-3.023-1.26-3.02-3.06.004-1.892 1.272-3.182 3.136-3.194 1.796-.012 3.003 1.185 3.009 2.988Z" stroke="currentColor" stroke-width=".5" stroke-miterlimit="10"/>
+</svg>
diff --git a/apps/staking/src/components/NoWalletHome/ois.png b/apps/staking/src/components/NoWalletHome/ois.png
new file mode 100644
index 0000000000..f788e29b5c
Binary files /dev/null and b/apps/staking/src/components/NoWalletHome/ois.png differ
diff --git a/apps/staking/src/components/NoWalletHome/safebox.svg b/apps/staking/src/components/NoWalletHome/safebox.svg
new file mode 100644
index 0000000000..41eda08266
--- /dev/null
+++ b/apps/staking/src/components/NoWalletHome/safebox.svg
@@ -0,0 +1,34 @@
+<svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="63" height="63" rx="31.5" fill="#E6DAFE" fill-opacity="0.15"/>
+<rect x="0.5" y="0.5" width="63" height="63" rx="31.5" stroke="#E6DAFE"/>
+<g clip-path="url(#clip0_8100_8364)">
+<mask id="mask0_8100_8364" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="1" y="1" width="62" height="62">
+<path d="M1.92896 1.92907H62.0709V62.071H1.92896V1.92907Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_8100_8364)">
+<path d="M45.7652 16.6661H49.7858C50.6456 16.6661 51.3425 17.363 51.3425 18.2228V43.442C51.3425 44.3018 50.6456 44.9988 49.7858 44.9988H14.2142C13.3544 44.9988 12.6575 44.3018 12.6575 43.442V23.0966" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.6575 20.3784V18.223C12.6575 17.3632 13.3544 16.6662 14.2142 16.6662H43.0349" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.9927 42.4558V19.2094C14.9927 19.0944 15.0858 19.0013 15.2007 19.0013H48.7994C48.9143 19.0013 49.0075 19.0944 49.0075 19.2094V42.4558C49.0075 42.5707 48.9143 42.6638 48.7994 42.6638H15.2007C15.0858 42.6638 14.9927 42.5707 14.9927 42.4558Z" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M28.5364 38.0032C27.7228 38.2991 26.8447 38.4604 25.9288 38.4604C21.7159 38.4604 18.3008 35.0453 18.3008 30.8324C18.3008 26.6196 21.7159 23.2044 25.9288 23.2044C30.1417 23.2044 33.5569 26.6196 33.5569 30.8324C33.5569 33.1544 32.5194 35.234 30.8828 36.6331" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M30.2422 30.8324C30.2422 33.2145 28.311 35.1458 25.9288 35.1458C23.5466 35.1458 21.6155 33.2145 21.6155 30.8324C21.6155 28.4503 23.5466 26.5191 25.9288 26.5191C28.311 26.5191 30.2422 28.4503 30.2422 30.8324Z" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M44.5437 36.2031H39.7178C39.4599 36.2031 39.2507 35.994 39.2507 35.7361V25.9286C39.2507 25.6707 39.4599 25.4616 39.7178 25.4616H44.5437C44.8016 25.4616 45.0107 25.6707 45.0107 25.9286V35.7361C45.0107 35.994 44.8016 36.2031 44.5437 36.2031Z" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.1957 47.334H16.4057C16.1626 47.334 15.9656 47.137 15.9656 46.8939V44.9989H20.6358V46.8939C20.6358 47.137 20.4388 47.334 20.1957 47.334Z" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M47.1274 47.334H43.3373C43.0942 47.334 42.8972 47.137 42.8972 46.8939V44.9989H47.5674V46.8939C47.5674 47.137 47.3704 47.334 47.1274 47.334Z" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M29.8914 26.8696L29.231 27.53" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.6265 34.1347L21.9661 34.7952" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M25.9287 25.2283V26.1624" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M25.9287 35.5027V36.4368" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M29.8914 26.8696L29.231 27.53" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.6265 34.1347L21.9661 34.7952" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M31.5329 30.8325H30.5989" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.2585 30.8325H20.3245" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M29.8914 34.7952L29.231 34.1347" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.6265 27.53L21.9661 26.8696" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_8100_8364">
+<rect width="44" height="44" fill="white" transform="translate(10 10)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/staking/src/components/NoWalletHome/secure-pyth.svg b/apps/staking/src/components/NoWalletHome/secure-pyth.svg
new file mode 100644
index 0000000000..1c613fa21c
--- /dev/null
+++ b/apps/staking/src/components/NoWalletHome/secure-pyth.svg
@@ -0,0 +1,18 @@
+<svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="63" height="63" rx="31.5" fill="#E6DAFE" fill-opacity="0.15"/>
+<rect x="0.5" y="0.5" width="63" height="63" rx="31.5" stroke="#E6DAFE"/>
+<mask id="mask0_8100_8476" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="12" y="12" width="40" height="40">
+<path d="M51.65 51.65V12.35H12.35V51.65H51.65Z" fill="white" stroke="white" stroke-width="0.7"/>
+</mask>
+<g mask="url(#mask0_8100_8476)">
+<path d="M36.7656 41.4531C36.7656 42.7476 37.815 43.7969 39.1094 43.7969C40.4038 43.7969 41.4531 42.7476 41.4531 41.4531C41.4531 40.1587 40.4038 39.1094 39.1094 39.1094C37.815 39.1094 36.7656 38.0601 36.7656 36.7656C36.7656 35.4712 37.815 34.4219 39.1094 34.4219C40.4038 34.4219 41.4531 35.4555 41.4531 36.75" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10"/>
+<path d="M39.1094 30.9062V34.4219" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10"/>
+<path d="M39.1094 43.7968V47.2968" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10"/>
+<path d="M50.8281 39.1094C50.8281 45.5815 45.5815 50.8281 39.1094 50.8281C32.6373 50.8281 27.3906 45.5815 27.3906 39.1094C27.3906 32.6373 32.6373 27.3906 39.1094 27.3906C45.5815 27.3906 50.8281 32.6373 50.8281 39.1094Z" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10"/>
+<path d="M36.7656 19.0312C36.7656 22.2673 31.519 24.8906 25.0469 24.8906C18.5748 24.8906 13.1719 22.2673 13.1719 19.0312C13.1719 15.7952 18.5748 13.1719 25.0469 13.1719C31.519 13.1719 36.7656 15.7952 36.7656 19.0312Z" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10"/>
+<path d="M30.2148 31.4791C28.6559 31.8627 26.9017 32.0781 25.0469 32.0781C18.5748 32.0781 13.1719 29.4548 13.1719 26.2187" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10"/>
+<path d="M13.1719 19.0312V40.2812C13.1719 43.5173 18.5748 46.1406 25.0469 46.1406C26.5965 46.1406 28.0759 45.9902 29.4298 45.717" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10"/>
+<path d="M36.7656 19.0312V27.625" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10"/>
+<path d="M27.3912 38.9921C26.6337 39.069 25.8498 39.1094 25.0469 39.1094C18.5748 39.1094 13.1719 36.486 13.1719 33.25" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10"/>
+</g>
+</svg>
diff --git a/apps/staking/src/components/NoWalletHome/select-publishers.svg b/apps/staking/src/components/NoWalletHome/select-publishers.svg
new file mode 100644
index 0000000000..88b52111f7
--- /dev/null
+++ b/apps/staking/src/components/NoWalletHome/select-publishers.svg
@@ -0,0 +1,20 @@
+<svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="63" height="63" rx="31.5" fill="#E6DAFE" fill-opacity="0.15"/>
+<rect x="0.5" y="0.5" width="63" height="63" rx="31.5" stroke="#E6DAFE"/>
+<mask id="mask0_8100_8418" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="11" y="11" width="42" height="42">
+<path d="M11 11H53V53H11V11Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_8100_8418)">
+<path d="M26.2531 32.6104C26.2531 30.6486 24.6656 29.0611 22.7039 29.0611" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M47.2625 32.6104C47.2625 30.6486 48.8499 29.0611 50.8117 29.0611" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M47.2625 17.618C47.2625 19.5798 48.8499 21.1672 50.8117 21.1672" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M36.7578 17.5624H49.5362C50.2713 17.5624 50.8672 18.1583 50.8672 18.8934V31.3348C50.8672 32.0699 50.2713 32.6658 49.5362 32.6658H40.4492" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M33.0664 32.6658H23.9794C23.2444 32.6658 22.6484 32.0699 22.6484 31.3348V24.2117" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M33.2263 23.2539C33.8961 21.9883 35.2263 21.126 36.7579 21.126C38.963 21.126 40.7507 22.9137 40.7507 25.1189C40.7507 27.3241 38.963 29.1118 36.7579 29.1118C35.0666 29.1118 33.6208 28.0603 33.0388 26.5752" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.0391 13.1329H30.9341C32.1022 13.1329 33.2375 13.5197 34.1626 14.2331L38.4805 17.5626H29.5603C28.6198 17.5626 27.8574 18.325 27.8574 19.2655C27.8574 19.885 28.194 20.4557 28.7362 20.7556L32.9565 23.0897C33.8315 23.5736 34.2205 24.6252 33.8711 25.5621C33.5314 26.4728 32.591 27.0122 31.6335 26.8457L28.6703 26.3305C25.9106 25.8506 23.2928 24.7609 21.0078 23.1407H19.0391" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.0391 24.9453H11.8203V11.8203H19.0391V24.9453Z" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M44.9548 51.1953H28.8841C26.0419 51.1953 23.316 50.0662 21.3063 48.0565L16.8498 43.5999C16.052 42.8022 16.055 41.5077 16.8566 40.7137C17.6528 39.9248 18.937 39.9279 19.7295 40.7206L23.7173 44.7094C25.0537 46.0462 26.8664 46.7973 28.7567 46.7973H33.1881" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M38.0308 46.7974H29.0982C27.9768 46.7974 27.0676 45.8882 27.0676 44.7667C27.0676 43.6452 27.9768 42.7361 29.0982 42.7361H34.2775L35.3489 41.4643C36.6819 39.8819 38.6456 38.9685 40.7148 38.9685C42.195 38.9685 43.6374 39.4367 44.8354 40.3061L44.9547 40.3927" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M52.1797 52.1797H44.9609V39.0547H52.1797V52.1797Z" stroke="#E6DAFE" stroke-width="0.7" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/apps/staking/src/components/NoWalletHome/token-warmup.svg b/apps/staking/src/components/NoWalletHome/token-warmup.svg
new file mode 100644
index 0000000000..9c1c680d09
--- /dev/null
+++ b/apps/staking/src/components/NoWalletHome/token-warmup.svg
@@ -0,0 +1,14 @@
+<svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="63" height="63" rx="31.5" fill="#E6DAFE" fill-opacity="0.15"/>
+<rect x="0.5" y="0.5" width="63" height="63" rx="31.5" stroke="#E6DAFE"/>
+<path d="M31.9309 10.9307C43.5671 10.9307 53.0001 20.3637 53.0001 31.9999C53.0001 43.6361 43.5671 53.0691 31.9309 53.0691" stroke="#E6DAFE" stroke-width="0.826047" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M31.9309 18.8318V32L42.4655 42.5347" stroke="#E6DAFE" stroke-width="0.826047" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M24.311 12.3518C24.311 12.3518 24.8193 12.1483 25.3808 11.9729C25.9424 11.7975 26.5936 11.6135 26.5936 11.6135" stroke="#E6DAFE" stroke-width="0.826047" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2.58 4.9"/>
+<path d="M17.9128 16.2646C17.9128 16.2646 18.3176 15.896 18.7822 15.535C19.2467 15.174 19.7923 14.7737 19.7923 14.7737" stroke="#E6DAFE" stroke-width="0.826047" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2.58 4.9"/>
+<path d="M13.2898 22.1704C13.2898 22.1704 13.5399 21.6834 13.8486 21.1826C14.1573 20.6818 14.5281 20.1157 14.5281 20.1157" stroke="#E6DAFE" stroke-width="0.826047" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2.58 4.9"/>
+<path d="M11.0278 29.3212C11.0278 29.3212 11.0916 28.7774 11.2053 28.2002C11.3191 27.623 11.4681 26.9629 11.4681 26.9629" stroke="#E6DAFE" stroke-width="0.826047" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2.58 4.9"/>
+<path d="M11.4135 36.8111C11.4135 36.8111 11.2828 36.2795 11.1871 35.699C11.0915 35.1185 11 34.448 11 34.448" stroke="#E6DAFE" stroke-width="0.826047" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2.58 4.9"/>
+<path d="M14.3977 43.6919C14.3977 43.6919 14.0891 43.2398 13.7962 42.7296C13.5034 42.2192 13.1829 41.6233 13.1829 41.6233" stroke="#E6DAFE" stroke-width="0.826047" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2.58 4.9"/>
+<path d="M19.6027 49.0915C19.6027 49.0915 19.1552 48.7761 18.7022 48.4007C18.2492 48.0253 17.7402 47.5793 17.7402 47.5793" stroke="#E6DAFE" stroke-width="0.826047" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2.58 4.9"/>
+<path d="M26.369 52.3268C26.369 52.3268 25.8394 52.188 25.2836 51.995C24.7278 51.802 24.095 51.5625 24.095 51.5625" stroke="#E6DAFE" stroke-width="0.826047" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2.58 4.9"/>
+</svg>
diff --git a/apps/staking/src/hooks/use-api.tsx b/apps/staking/src/hooks/use-api.tsx
index cc4834b5e7..b3f362b856 100644
--- a/apps/staking/src/hooks/use-api.tsx
+++ b/apps/staking/src/hooks/use-api.tsx
@@ -249,7 +249,7 @@ const useApiContext = (hermesUrl: string) => {
     reset();
   }, [reset]);
 
-  return (wallet.connected && !wallet.disconnecting) || wallet.connecting
+  return wallet.connected && !wallet.disconnecting
     ? state
     : State[StateType.NoWallet]();
 };
diff --git a/apps/staking/tailwind.config.ts b/apps/staking/tailwind.config.ts
index 7a01199089..446c75838a 100644
--- a/apps/staking/tailwind.config.ts
+++ b/apps/staking/tailwind.config.ts
@@ -31,7 +31,7 @@ const tailwindConfig = {
           400: "#BB86FC",
           600: "#6200EE",
           800: "#100E21",
-          900: "#121212",
+          900: "#131223",
           950: "#0C0B1A",
         },
       },