diff --git a/package-lock.json b/package-lock.json
index bd0db4bd..d9f1f0c0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,8 @@
       "version": "0.3.9",
       "dependencies": {
         "@babylonlabs-io/babylon-proto-ts": "0.0.3-canary.4",
-        "@babylonlabs-io/bbn-core-ui": "^0.3.2",
-        "@babylonlabs-io/bbn-wallet-connect": "^0.1.7",
+        "@babylonlabs-io/bbn-core-ui": "^0.4.1",
+        "@babylonlabs-io/bbn-wallet-connect": "^0.1.9",
         "@babylonlabs-io/btc-staking-ts": "0.4.0-canary.3",
         "@bitcoin-js/tiny-secp256k1-asmjs": "2.2.3",
         "@bitcoinerlab/secp256k1": "^1.1.1",
@@ -2075,9 +2075,13 @@
       "license": "(Apache-2.0 AND BSD-3-Clause)"
     },
     "node_modules/@babylonlabs-io/bbn-core-ui": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/@babylonlabs-io/bbn-core-ui/-/bbn-core-ui-0.3.2.tgz",
-      "integrity": "sha512-IpGJZ7FJcS3sbqio3rMXO1lG77T/4fY40QkKl6JrNjl/YqzK1dUfr/aeNmVZP7tl5I9h+hSlZMr3WdTQ8XrNWA==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@babylonlabs-io/bbn-core-ui/-/bbn-core-ui-0.4.1.tgz",
+      "integrity": "sha512-M1knyet7lkIpY9t0ngsnwhprQaqkes7OvZqDm2wi983wPucOyHeWrd2DTxHdcE0qiBZqiJHFc7K3pw1YlClYnw==",
+      "dependencies": {
+        "@popperjs/core": "^2.11.8",
+        "react-popper": "^2.3.0"
+      },
       "peerDependencies": {
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -2085,9 +2089,9 @@
       }
     },
     "node_modules/@babylonlabs-io/bbn-wallet-connect": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/@babylonlabs-io/bbn-wallet-connect/-/bbn-wallet-connect-0.1.7.tgz",
-      "integrity": "sha512-W9VaShT4nkY2cYM3WR31iEGX7tCwagz5ExwSPBvHfLSFJMGodWd/IyT/aCxx7vEW2hpvEIUcwkNZ7Ukyq4HdNA==",
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/@babylonlabs-io/bbn-wallet-connect/-/bbn-wallet-connect-0.1.9.tgz",
+      "integrity": "sha512-fcET4J2dZFe703YoPvTScU0ktvRgfKXsIt6OtoCX8GcQe7e0uWwznfhU0vdSgnZj5OD/CGoBzNb4Ky3lBkscTg==",
       "dependencies": {
         "@cosmjs/stargate": "^0.32.4",
         "@keplr-wallet/types": "^0.12.156",
@@ -2095,7 +2099,7 @@
         "nanoevents": "^9.1.0"
       },
       "peerDependencies": {
-        "@babylonlabs-io/bbn-core-ui": "^0.3.2",
+        "@babylonlabs-io/bbn-core-ui": "^0.4.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "tailwind-merge": "^2.5.4"
@@ -5373,6 +5377,16 @@
         "node": ">=18"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@prisma/instrumentation": {
       "version": "5.19.1",
       "resolved": "https://registry.npmjs.org/@prisma/instrumentation/-/instrumentation-5.19.1.tgz",
@@ -16651,6 +16665,12 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
+      "license": "MIT"
+    },
     "node_modules/react-icons": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
@@ -16714,6 +16734,21 @@
         "react-dom": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-popper": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
+      "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.0.0",
+        "react": "^16.8.0 || ^17 || ^18",
+        "react-dom": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-responsive-modal": {
       "version": "6.4.2",
       "resolved": "https://registry.npmjs.org/react-responsive-modal/-/react-responsive-modal-6.4.2.tgz",
diff --git a/package.json b/package.json
index 3fb3c1fb..8e17bd04 100644
--- a/package.json
+++ b/package.json
@@ -26,8 +26,8 @@
   },
   "dependencies": {
     "@babylonlabs-io/babylon-proto-ts": "0.0.3-canary.4",
-    "@babylonlabs-io/bbn-core-ui": "^0.3.2",
-    "@babylonlabs-io/bbn-wallet-connect": "^0.1.7",
+    "@babylonlabs-io/bbn-core-ui": "^0.4.1",
+    "@babylonlabs-io/bbn-wallet-connect": "^0.1.9",
     "@babylonlabs-io/btc-staking-ts": "0.4.0-canary.3",
     "@bitcoin-js/tiny-secp256k1-asmjs": "2.2.3",
     "@bitcoinerlab/secp256k1": "^1.1.1",
diff --git a/src/app/components/Modals/EOIModal/EOIModal.tsx b/src/app/components/Modals/EOIModal/EOIModal.tsx
new file mode 100644
index 00000000..6c9ecd40
--- /dev/null
+++ b/src/app/components/Modals/EOIModal/EOIModal.tsx
@@ -0,0 +1,108 @@
+import {
+  Button,
+  DialogBody,
+  DialogFooter,
+  DialogHeader,
+  Loader,
+  Text,
+} from "@babylonlabs-io/bbn-core-ui";
+
+import { ResponsiveDialog } from "@/app/components/Modals/ResponsiveDialog";
+
+import { Step } from "./Step";
+
+export enum EOIStepStatus {
+  UNSIGNED = "UNSIGNED",
+  SIGNED = "SIGNED",
+  PROCESSING = "PROCESSING",
+}
+
+interface EOIModalProps {
+  processing?: boolean;
+  open: boolean;
+  title: string;
+  statuses: {
+    slashing: EOIStepStatus;
+    unbonding: EOIStepStatus;
+    reward: EOIStepStatus;
+    eoi: EOIStepStatus;
+  };
+  onClose?: () => void;
+  onSubmit?: () => void;
+}
+
+const STEP_STATES = {
+  [EOIStepStatus.UNSIGNED]: "upcoming",
+  [EOIStepStatus.SIGNED]: "completed",
+  [EOIStepStatus.PROCESSING]: "processing",
+} as const;
+
+export function EOIModal({
+  processing = false,
+  open,
+  title,
+  statuses,
+  onClose,
+  onSubmit,
+}: EOIModalProps) {
+  return (
+    <ResponsiveDialog
+      className="z-[150]"
+      backdropClassName="z-[100]"
+      open={open}
+      onClose={onClose}
+      hasBackdrop
+    >
+      <DialogHeader
+        title={title}
+        onClose={onClose}
+        className="text-primary-dark"
+      />
+
+      <DialogBody className="flex flex-col pb-8 pt-4 text-primary-dark gap-4">
+        <Text variant="body1" className="text-primary-main">
+          Please sign the following messages
+        </Text>
+
+        <div className="py-4 flex flex-col items-start gap-6">
+          <Step index={1} state={STEP_STATES[statuses.slashing]}>
+            Consent to slashing
+          </Step>
+          <Step index={2} state={STEP_STATES[statuses.unbonding]}>
+            Consent to slashing during unbonding
+          </Step>
+          <Step index={3} state={STEP_STATES[statuses.reward]}>
+            BTC-BBN address binding for receiving staking rewards
+          </Step>
+          <Step index={4} state={STEP_STATES[statuses.eoi]}>
+            Staking transaction registration
+          </Step>
+        </div>
+      </DialogBody>
+
+      <DialogFooter className="flex gap-4">
+        {onClose && (
+          <Button
+            variant="outlined"
+            color="primary"
+            onClick={onClose}
+            className="flex-1 text-xs sm:text-base"
+          >
+            Cancel
+          </Button>
+        )}
+
+        {onSubmit && (
+          <Button
+            disabled={processing}
+            variant="contained"
+            className="flex-1 text-xs sm:text-base"
+            onClick={onSubmit}
+          >
+            {processing ? <Loader size={16} className="text-white" /> : "Sign"}
+          </Button>
+        )}
+      </DialogFooter>
+    </ResponsiveDialog>
+  );
+}
diff --git a/src/app/components/Modals/EOIModal/Step.tsx b/src/app/components/Modals/EOIModal/Step.tsx
new file mode 100644
index 00000000..60006527
--- /dev/null
+++ b/src/app/components/Modals/EOIModal/Step.tsx
@@ -0,0 +1,39 @@
+import { Text } from "@babylonlabs-io/bbn-core-ui";
+import type { PropsWithChildren, ReactNode } from "react";
+import { IoCheckmarkSharp } from "react-icons/io5";
+import { twMerge } from "tailwind-merge";
+
+interface StepProps {
+  index: number;
+  state: "completed" | "processing" | "upcoming";
+  children: ReactNode;
+}
+
+export const Step = ({
+  index,
+  state,
+  children,
+}: PropsWithChildren<StepProps>) => (
+  <div
+    className={twMerge(
+      "p-4 flex flex-row items-center justify-start gap-3 rounded border border-primary-dark/20 bg-secondary-contrast self-stretch",
+      state !== "processing" && "opacity-25",
+    )}
+  >
+    {state === "completed" ? (
+      <div className="rounded-full bg-primary-light flex h-10 w-10 items-center justify-center">
+        <IoCheckmarkSharp size={24} className="text-secondary-contrast" />
+      </div>
+    ) : (
+      <div className="rounded-full bg-secondary-main flex h-10 w-10 items-center justify-center">
+        <Text variant="body1" className="text-secondary-contrast">
+          {index}
+        </Text>
+      </div>
+    )}
+
+    <Text variant="body1" className="text-primary-dark">
+      Step {index}: {children}
+    </Text>
+  </div>
+);
diff --git a/src/app/components/Staking/Staking.tsx b/src/app/components/Staking/Staking.tsx
index c3ac8182..cdd7754e 100644
--- a/src/app/components/Staking/Staking.tsx
+++ b/src/app/components/Staking/Staking.tsx
@@ -7,7 +7,10 @@ import { useLocalStorage } from "usehooks-ts";
 
 import { UTXO_KEY } from "@/app/common/constants";
 import { LoadingView } from "@/app/components/Loading/Loading";
-import { EOIModal, EOIStepStatus } from "@/app/components/Modals/EOIModal";
+import {
+  EOIModal,
+  EOIStepStatus,
+} from "@/app/components/Modals/EOIModal/EOIModal";
 import { useError } from "@/app/context/Error/ErrorContext";
 import { useBTCWallet } from "@/app/context/wallet/BTCWalletProvider";
 import {
@@ -581,11 +584,7 @@ export const Staking = () => {
           awaitingWalletResponse={awaitingWalletResponse}
         />
       )}
-      <EOIModal
-        statuses={eoiStatuses}
-        open={eoiModalOpen}
-        onClose={() => setEoiModalOpen(false)}
-      />
+      <EOIModal title="Staking" statuses={eoiStatuses} open={eoiModalOpen} />
       <InfoModal open={infoModalOpen} onClose={() => setInfoModalOpen(false)} />
     </div>
   );