diff --git a/package-lock.json b/package-lock.json
index 2399e3a4..c8299e1c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,6 +32,7 @@
         "react-responsive-modal": "^6.4.2",
         "react-tooltip": "^5.26.4",
         "sharp": "^0.33.4",
+        "tailwind-merge": "^2.5.2",
         "url-safe-base64": "^1.3.0",
         "usehooks-ts": "^3.0.2"
       },
@@ -62,6 +63,7 @@
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "postcss": "^8",
+        "postcss-import": "^16.1.0",
         "prettier": "^3.2.5",
         "prettier-plugin-organize-imports": "^3.2.4",
         "prettier-plugin-tailwindcss": "^0.5.14",
@@ -14074,9 +14076,9 @@
       }
     },
     "node_modules/postcss-import": {
-      "version": "15.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
-      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "version": "16.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-16.1.0.tgz",
+      "integrity": "sha512-7hsAZ4xGXl4MW+OKEWCnF6T5jqBw80/EE9aXg1r2yyn1RsVEU8EtKXbijEODa+rg7iih4bKf7vlvTGYR4CnPNg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -14085,7 +14087,7 @@
         "resolve": "^1.1.7"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=18.0.0"
       },
       "peerDependencies": {
         "postcss": "^8.0.0"
@@ -15793,6 +15795,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/tailwind-merge": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.2.tgz",
+      "integrity": "sha512-kjEBm+pvD+6eAwzJL2Bi+02/9LFLal1Gs61+QB7HvTfQQ0aXwC5LGT8PEt1gS0CWKktKe6ysPTAy3cBC5MeiIg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz",
@@ -15831,6 +15843,24 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tailwindcss/node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
diff --git a/package.json b/package.json
index 959633df..2284c218 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "node": ">=22.0.0"
   },
   "dependencies": {
+    "@bitcoin-js/tiny-secp256k1-asmjs": "2.2.3",
     "@bitcoinerlab/secp256k1": "^1.1.1",
     "@keystonehq/animated-qr": "^0.8.6",
     "@keystonehq/keystone-sdk": "^0.4.1",
@@ -32,10 +33,9 @@
     "@scure/bip32": "^1.4.0",
     "@tanstack/react-query": "^5.28.14",
     "@tanstack/react-query-next-experimental": "^5.28.14",
-    "axios": "^1.7.4",
     "@uidotdev/usehooks": "^2.4.1",
+    "axios": "^1.7.4",
     "bitcoinjs-lib": "6.1.5",
-    "@bitcoin-js/tiny-secp256k1-asmjs": "2.2.3",
     "btc-staking-ts": "^0.2.10",
     "date-fns": "^3.6.0",
     "decimal.js-light": "^2.5.1",
@@ -49,10 +49,12 @@
     "react-responsive-modal": "^6.4.2",
     "react-tooltip": "^5.26.4",
     "sharp": "^0.33.4",
+    "tailwind-merge": "^2.5.2",
     "url-safe-base64": "^1.3.0",
     "usehooks-ts": "^3.0.2"
   },
   "devDependencies": {
+    "postcss-import": "^16.1.0",
     "@babel/core": "^7.24.7",
     "@babel/preset-env": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
diff --git a/postcss.config.js b/postcss.config.js
index 12a703d9..a5a6ff85 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,5 +1,6 @@
 module.exports = {
   plugins: {
+    "postcss-import": {},
     tailwindcss: {},
     autoprefixer: {},
   },
diff --git a/src/app/components/Modals/ConnectModal.tsx b/src/app/components/Modals/ConnectModal.tsx
index ac1eac4e..b37ac034 100644
--- a/src/app/components/Modals/ConnectModal.tsx
+++ b/src/app/components/Modals/ConnectModal.tsx
@@ -5,6 +5,7 @@ import { FaWallet } from "react-icons/fa";
 import { IoMdClose } from "react-icons/io";
 import { PiWalletBold } from "react-icons/pi";
 import { Tooltip } from "react-tooltip";
+import { twJoin } from "tailwind-merge";
 
 import { getNetworkConfig } from "@/config/network.config";
 import { BROWSER_INJECTED_WALLET_NAME, walletList } from "@/utils/wallet/list";
@@ -110,7 +111,10 @@ export const ConnectModal: React.FC<ConnectModalProps> = ({
     return (
       <button
         key={name}
-        className={`flex cursor-pointer items-center gap-2 rounded-xl border-2 bg-base-100 p-2 transition-all hover:text-primary ${selectedWallet === BROWSER ? "border-primary" : "border-base-100"}`}
+        className={twJoin(
+          "flex cursor-pointer items-center gap-2 rounded-xl border-2 bg-base-100 p-2 transition-all hover:text-primary",
+          selectedWallet === BROWSER ? "border-primary" : "border-base-100",
+        )}
         onClick={() => setSelectedWallet(BROWSER)}
       >
         <div className="flex h-10 w-10 items-center justify-center rounded-full border bg-white p-2 text-black">
@@ -131,140 +135,160 @@ export const ConnectModal: React.FC<ConnectModalProps> = ({
   };
 
   return (
-    <GeneralModal open={open} onClose={onClose}>
-      <div className="mb-4 flex items-center justify-between">
-        <h3 className="font-bold">Connect wallet</h3>
-        <button
-          className="btn btn-circle btn-ghost btn-sm"
-          onClick={() => onClose(false)}
-        >
-          <IoMdClose size={24} />
-        </button>
-      </div>
-      <div className="flex flex-col justify-center gap-2">
-        <div className="form-control">
-          <label className="label cursor-pointer justify-start gap-2 rounded-xl bg-base-100 p-4">
-            <input
-              type="checkbox"
-              className="checkbox-primary checkbox"
-              onChange={(e) => setTermsAccepted(e.target.checked)}
-              checked={termsAccepted}
-            />
-            <span className="label-text">
-              I certify that I have read and accept the updated{" "}
-              <a
-                href="https://babylonlabs.io/terms-of-use"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="link link-primary"
-              >
-                Terms of Use
-              </a>
-              {" and "}
-              <a
-                href="https://babylonlabs.io/privacy-policy"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="link link-primary"
-              >
-                Privacy Policy
-              </a>
-              .
-            </span>
-          </label>
+    <GeneralModal className="flex" open={open} onClose={onClose}>
+      <div className="flex flex-col flex-1 min-h-0">
+        <div className="mb-4 flex items-center justify-between">
+          <h3 className="font-bold">Connect wallet</h3>
+          <button
+            className="btn btn-circle btn-ghost btn-sm"
+            onClick={() => onClose(false)}
+          >
+            <IoMdClose size={24} />
+          </button>
         </div>
-        <div className="form-control">
-          <label className="label cursor-pointer justify-start gap-2 rounded-xl bg-base-100 p-4">
-            <input
-              type="checkbox"
-              className="checkbox-primary checkbox"
-              onChange={(e) => setNoInscription(e.target.checked)}
-              checked={noInscription}
-            />
-            <span className="label-text">
-              I certify that there are no Bitcoin inscriptions tokens in my
-              wallet.
-            </span>
-          </label>
-        </div>
-        <div className="form-control">
-          <label className="label cursor-pointer justify-start gap-2 rounded-xl bg-base-100 p-4">
-            <input
-              type="checkbox"
-              className="checkbox-primary checkbox"
-              onChange={(e) => setNoHWWallet(e.target.checked)}
-              checked={noHWWallet}
-            />
-            <span className="label-text md:max-w-[34rem]">
-              I acknowledge that Keystone via QR code is the only hardware
-              wallet supporting Bitcoin Staking. Using any other hardware
-              wallets through any means (such as connection to software /
-              extension / mobile wallet) can lead to permanent inability to
-              withdraw the stake.
-            </span>
-          </label>
-        </div>
-        <div className="my-4 flex flex-col gap-4">
-          <h3 className="text-center font-semibold">Choose wallet</h3>
-          <div className="grid max-h-[15rem] md:max-h-[20rem] grid-cols-1 gap-4 overflow-y-auto">
-            {walletList.map(
-              ({
-                provider,
-                name,
-                linkToDocs,
-                icon,
-                isQRWallet,
-                supportedNetworks,
-              }) => {
-                if (name === BROWSER_INJECTED_WALLET_NAME) {
-                  return buildInjectableWallet(isInjectable, name);
-                }
-                const walletAvailable = isQRWallet || !!window[provider as any];
-
-                // If the wallet is integrated but does not support the current network, do not display it
-                if (
-                  !supportedNetworks ||
-                  !supportedNetworks.includes(getNetworkConfig().network)
-                ) {
-                  return null;
-                }
 
-                return (
+        <div className="overflow-y-auto">
+          <div className="flex flex-col justify-center gap-2">
+            <div className="form-control">
+              <label className="label cursor-pointer justify-start gap-2 rounded-xl bg-base-100 p-3 md:p-4">
+                <input
+                  type="checkbox"
+                  className="checkbox-primary checkbox"
+                  onChange={(e) => setTermsAccepted(e.target.checked)}
+                  checked={termsAccepted}
+                />
+                <span className="label-text text-xs leading-snug md:text-sm">
+                  I certify that I have read and accept the updated{" "}
                   <a
-                    key={name}
-                    className={`relative flex cursor-pointer items-center gap-2 rounded-xl border-2 bg-base-100 p-2 transition-all hover:text-primary ${selectedWallet === name ? "border-primary" : "border-base-100"} ${!walletAvailable ? "opacity-50" : ""}`}
-                    onClick={() => walletAvailable && setSelectedWallet(name)}
-                    href={!walletAvailable ? linkToDocs : undefined}
+                    href="https://babylonlabs.io/terms-of-use"
                     target="_blank"
                     rel="noopener noreferrer"
+                    className="link link-primary"
                   >
-                    <div className="flex flex-1 items-center gap-2">
-                      <div className="flex h-10 w-10 items-center justify-center rounded-full border bg-white p-2">
-                        <Image src={icon} alt={name} width={26} height={26} />
-                      </div>
-                      <p>{name}</p>
-                      {isQRWallet && (
-                        <div>
-                          <span
-                            className="cursor-pointer text-xs"
-                            data-tooltip-id={name}
-                            data-tooltip-content="QR codes used for connection/signing"
-                            data-tooltip-place="top"
-                          >
-                            <AiOutlineInfoCircle />
-                          </span>
-                          <Tooltip id={name} className="tooltip-wrap" />
-                        </div>
-                      )}
-                    </div>
+                    Terms of Use
+                  </a>
+                  {" and "}
+                  <a
+                    href="https://babylonlabs.io/privacy-policy"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="link link-primary"
+                  >
+                    Privacy Policy
                   </a>
-                );
-              },
-            )}
+                  .
+                </span>
+              </label>
+            </div>
+            <div className="form-control">
+              <label className="label cursor-pointer justify-start gap-2 rounded-xl bg-base-100 p-3 md:p-4">
+                <input
+                  type="checkbox"
+                  className="checkbox-primary checkbox"
+                  onChange={(e) => setNoInscription(e.target.checked)}
+                  checked={noInscription}
+                />
+                <span className="label-text text-xs leading-snug md:text-sm">
+                  I certify that there are no Bitcoin inscriptions tokens in my
+                  wallet.
+                </span>
+              </label>
+            </div>
+            <div className="form-control">
+              <label className="label cursor-pointer justify-start gap-2 rounded-xl bg-base-100 p-3 md:p-4">
+                <input
+                  type="checkbox"
+                  className="checkbox-primary checkbox"
+                  onChange={(e) => setNoHWWallet(e.target.checked)}
+                  checked={noHWWallet}
+                />
+                <span className="label-text text-xs leading-snug md:text-sm md:max-w-[34rem]">
+                  I acknowledge that Keystone via QR code is the only hardware
+                  wallet supporting Bitcoin Staking. Using any other hardware
+                  wallets through any means (such as connection to software /
+                  extension / mobile wallet) can lead to permanent inability to
+                  withdraw the stake.
+                </span>
+              </label>
+            </div>
+            <div className="mt-4 flex flex-col gap-4">
+              <h3 className="text-center font-semibold">Choose wallet</h3>
+              <div className="grid md:max-h-[20rem] grid-cols-1 gap-4 md:overflow-y-auto">
+                {walletList.map(
+                  ({
+                    provider,
+                    name,
+                    linkToDocs,
+                    icon,
+                    isQRWallet,
+                    supportedNetworks,
+                  }) => {
+                    if (name === BROWSER_INJECTED_WALLET_NAME) {
+                      return buildInjectableWallet(isInjectable, name);
+                    }
+                    const walletAvailable =
+                      isQRWallet || !!window[provider as any];
+
+                    // If the wallet is integrated but does not support the current network, do not display it
+                    if (
+                      !supportedNetworks ||
+                      !supportedNetworks.includes(getNetworkConfig().network)
+                    ) {
+                      return null;
+                    }
+
+                    return (
+                      <a
+                        key={name}
+                        className={twJoin(
+                          "relative flex cursor-pointer items-center gap-2 rounded-xl border-2 bg-base-100 p-2 transition-all hover:text-primary",
+                          selectedWallet === name
+                            ? "border-primary"
+                            : "border-base-100",
+                          !walletAvailable ? "opacity-50" : "",
+                        )}
+                        onClick={() =>
+                          walletAvailable && setSelectedWallet(name)
+                        }
+                        href={!walletAvailable ? linkToDocs : undefined}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        <div className="flex flex-1 items-center gap-2">
+                          <div className="flex h-10 w-10 items-center justify-center rounded-full border bg-white p-2">
+                            <Image
+                              src={icon}
+                              alt={name}
+                              width={26}
+                              height={26}
+                            />
+                          </div>
+                          <p>{name}</p>
+                          {isQRWallet && (
+                            <div>
+                              <span
+                                className="cursor-pointer text-xs"
+                                data-tooltip-id={name}
+                                data-tooltip-content="QR codes used for connection/signing"
+                                data-tooltip-place="top"
+                              >
+                                <AiOutlineInfoCircle />
+                              </span>
+                              <Tooltip id={name} className="tooltip-wrap" />
+                            </div>
+                          )}
+                        </div>
+                      </a>
+                    );
+                  },
+                )}
+              </div>
+            </div>
           </div>
         </div>
+
         <button
-          className="btn-primary btn h-[2.5rem] min-h-[2.5rem] rounded-lg px-2 text-white"
+          className="btn-primary mt-4 btn h-[2.5rem] min-h-[2.5rem] rounded-lg px-2 text-white"
           onClick={handleConnect}
           disabled={
             connectDisabled ||
diff --git a/src/app/components/Modals/GeneralModal.tsx b/src/app/components/Modals/GeneralModal.tsx
index 529dbb9e..0159b139 100644
--- a/src/app/components/Modals/GeneralModal.tsx
+++ b/src/app/components/Modals/GeneralModal.tsx
@@ -1,11 +1,13 @@
 import { ReactNode, useEffect, useRef } from "react";
 import { Modal } from "react-responsive-modal";
+import { twMerge } from "tailwind-merge";
 
 interface GeneralModalProps {
   open: boolean;
   onClose: (value: boolean) => void;
   small?: boolean;
   children: ReactNode;
+  className?: string;
 }
 
 export const GeneralModal: React.FC<GeneralModalProps> = ({
@@ -13,6 +15,7 @@ export const GeneralModal: React.FC<GeneralModalProps> = ({
   onClose,
   children,
   small,
+  className = "",
 }) => {
   const modalRef = useRef(null);
 
@@ -28,14 +31,6 @@ export const GeneralModal: React.FC<GeneralModalProps> = ({
     };
   }, [open]);
 
-  const getSize = () => {
-    if (small) {
-      return "md:max-w-[25rem]";
-    } else {
-      return "md:max-w-[45rem] lg:max-w-[55rem]";
-    }
-  };
-
   return (
     <Modal
       ref={modalRef}
@@ -43,7 +38,11 @@ export const GeneralModal: React.FC<GeneralModalProps> = ({
       onClose={() => onClose(false)}
       classNames={{
         modalContainer: "flex items-end justify-center md:items-center",
-        modal: `m-0 w-full max-w-none rounded-t-2xl bg-base-300 shadow-lg md:w-auto md:rounded-b-2xl max-h-[85svh] min-w-[20rem] md:min-w-[30rem] ${getSize()}`,
+        modal: twMerge(
+          `m-0 w-full max-w-none rounded-t-2xl bg-base-300 shadow-lg md:w-auto md:rounded-b-2xl max-h-[100svh] min-w-[20rem] md:max-h-[85svh] md:min-w-[30rem]`,
+          small ? "md:max-w-[25rem]" : "md:max-w-[45rem] lg:max-w-[55rem]",
+          className,
+        ),
       }}
       showCloseIcon={false}
       blockScroll={false}
diff --git a/src/app/globals.css b/src/app/globals.css
index fe57d35f..2c9dbcc4 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,3 +1,6 @@
+@import "react-responsive-modal/styles.css";
+@import "react-tooltip/dist/react-tooltip.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 1883f113..f26cb516 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,7 +1,5 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import "react-responsive-modal/styles.css";
-import "react-tooltip/dist/react-tooltip.css";
 
 import { getNetworkAppUrl } from "@/config";