diff --git a/contracts/src/bridge/frontend/src/components/modules/bridge/index.tsx b/contracts/src/bridge/frontend/src/components/modules/bridge/index.tsx
index 77504b3848..31e29cfdaa 100644
--- a/contracts/src/bridge/frontend/src/components/modules/bridge/index.tsx
+++ b/contracts/src/bridge/frontend/src/components/modules/bridge/index.tsx
@@ -37,8 +37,9 @@ import { z } from "zod";
 import { useFormHook } from "@/src/hooks/useForm";
 import Web3Service from "@/src/services/web3service";
 import { useWalletStore } from "../../providers/wallet-provider";
-import { Token } from "@/src/types";
+import { ToastType, Token } from "@/src/types";
 import { Alert, AlertDescription } from "../../ui/alert";
+import ConnectWalletButton from "../common/connect-wallet";
 
 export default function Dashboard() {
   const {
@@ -105,7 +106,7 @@ export default function Dashboard() {
       toast({
         title: "Bridge Transaction",
         description: "Bridge transaction initiated",
-        variant: "success",
+        variant: ToastType.SUCCESS,
       });
       const token = data.token;
       const t = tokens.find((t) => t.value === token);
@@ -117,7 +118,7 @@ export default function Dashboard() {
       toast({
         title: "Bridge Transaction",
         description: "Bridge transaction completed",
-        variant: "success",
+        variant: ToastType.SUCCESS,
       });
       form.reset();
     } catch (error) {
@@ -125,7 +126,7 @@ export default function Dashboard() {
       toast({
         title: "Bridge Transaction",
         description: "Error initiating bridge transaction",
-        variant: "destructive",
+        variant: ToastType.DESTRUCTIVE,
       });
     }
   }
@@ -226,9 +227,9 @@ export default function Dashboard() {
                       )}
                     />
 
-                    <div>
+                    <div className="pl-2">
                       <p className="text-sm text-muted-foreground">Balance:</p>
-                      <strong className="text-lg float-right">
+                      <strong className="text-lg float-right word-wrap">
                         {loading ? <Skeleton /> : fromTokenBalance || 0}
                       </strong>
                     </div>
@@ -255,7 +256,7 @@ export default function Dashboard() {
                       )}
                     />
 
-                    <div className="flex items-center p-3">
+                    <div className="flex items-center p-2">
                       {/* Percentage Buttons */}
                       <div className="flex items-center space-x-2">
                         {PERCENTAGES.map((percentage) => (
@@ -372,15 +373,20 @@ export default function Dashboard() {
                 </div>
               </div>
               <div className="flex items-center justify-center mt-4">
-                <Button
-                  type="submit"
-                  className="text-sm font-bold leading-none w-full"
-                  size={"lg"}
-                >
-                  {walletConnected
-                    ? "Initiate Bridge Transaction"
-                    : "Connect Wallet"}
-                </Button>
+                {walletConnected ? (
+                  <Button
+                    type="submit"
+                    className="text-sm font-bold leading-none w-full"
+                    size={"lg"}
+                  >
+                    Initiate Bridge Transaction
+                  </Button>
+                ) : (
+                  <ConnectWalletButton
+                    className="text-sm font-bold leading-none w-full"
+                    variant="default"
+                  />
+                )}
               </div>
             </form>
           </Form>
diff --git a/contracts/src/bridge/frontend/src/components/modules/common/connect-wallet.tsx b/contracts/src/bridge/frontend/src/components/modules/common/connect-wallet.tsx
index 5026c303c7..dd63862852 100644
--- a/contracts/src/bridge/frontend/src/components/modules/common/connect-wallet.tsx
+++ b/contracts/src/bridge/frontend/src/components/modules/common/connect-wallet.tsx
@@ -2,15 +2,15 @@ import { useWalletStore } from "../../providers/wallet-provider";
 import { Button } from "../../ui/button";
 import { Link2Icon, LinkBreak2Icon } from "@radix-ui/react-icons";
 import React from "react";
-import { downloadMetaMask, ethereum } from "@/src/lib/utils";
+import { cn, downloadMetaMask, ethereum } from "@/src/lib/utils";
 
-const ConnectWalletButton = () => {
+const ConnectWalletButton = ({ className, text, variant }: any) => {
   const { walletConnected, connectWallet, disconnectWallet } = useWalletStore();
 
   return (
     <Button
-      className="text-sm font-medium leading-none"
-      variant={"outline"}
+      className={cn("text-sm font-medium leading-none", className)}
+      variant={variant ? variant : "outline"}
       onClick={
         ethereum
           ? walletConnected
@@ -28,7 +28,7 @@ const ConnectWalletButton = () => {
       ) : (
         <>
           <Link2Icon className="h-4 w-4 mr-1" />
-          {ethereum ? "Connect" : "Install"}
+          {ethereum ? text ?? "Connect Wallet" : "Download MetaMask"}
         </>
       )}
     </Button>
diff --git a/contracts/src/bridge/frontend/src/components/providers/wallet-provider.tsx b/contracts/src/bridge/frontend/src/components/providers/wallet-provider.tsx
index b2ed8dd140..b6a31a83d7 100644
--- a/contracts/src/bridge/frontend/src/components/providers/wallet-provider.tsx
+++ b/contracts/src/bridge/frontend/src/components/providers/wallet-provider.tsx
@@ -4,16 +4,19 @@ import detectEthereumProvider from "@metamask/detect-provider";
 import Web3Service from "@/src/services/web3service";
 import { toast } from "../ui/use-toast";
 import {
+  ToastType,
   WalletConnectionContextType,
   WalletConnectionProviderProps,
   WalletNetwork,
 } from "@/src/types";
 import { L1CHAINS, L2CHAINS } from "@/src/lib/constants";
+import { requestMethods } from "@/src/routes";
 
 const WalletContext = createContext<WalletConnectionContextType | null>(null);
 
 const WalletProvider = ({ children }: WalletConnectionProviderProps) => {
   const [provider, setProvider] = useState<any>(null);
+  const [isWalletConnected, setIsWalletConnected] = useState<boolean>(false);
   const [signer, setSigner] = useState<any>(null);
   const [address, setAddress] = useState<string>("");
   const [isL1ToL2, setIsL1ToL2] = React.useState(true);
@@ -27,7 +30,7 @@ const WalletProvider = ({ children }: WalletConnectionProviderProps) => {
       setProvider(detectedProvider);
       //@ts-ignore
       const chainId = await detectedProvider!.request({
-        method: "eth_chainId",
+        method: requestMethods.getChainId,
       });
 
       if (isL1ToL2 && chainId !== WalletNetwork.L1_SEPOLIA) {
@@ -40,20 +43,21 @@ const WalletProvider = ({ children }: WalletConnectionProviderProps) => {
 
       //@ts-ignore
       const accounts = await detectedProvider!.request({
-        method: "eth_requestAccounts",
+        method: requestMethods.connectAccounts,
       });
+      setIsWalletConnected(true);
       setAddress(accounts[0]);
       toast({
         title: "Connected",
         description: "Connected to wallet! Account: " + accounts[0],
-        variant: "success",
+        variant: ToastType.SUCCESS,
       });
     } catch (error) {
       console.error("Error connecting to wallet:", error);
       toast({
         title: "Error",
         description: "Error connecting to wallet",
-        variant: "destructive",
+        variant: ToastType.DESTRUCTIVE,
       });
     }
   };
@@ -69,7 +73,7 @@ const WalletProvider = ({ children }: WalletConnectionProviderProps) => {
         toast({
           title: "Disconnected",
           description: "Disconnected from wallet",
-          variant: "info",
+          variant: ToastType.INFO,
         });
       }
     } catch (error) {
@@ -77,7 +81,7 @@ const WalletProvider = ({ children }: WalletConnectionProviderProps) => {
       toast({
         title: "Error",
         description: "Error disconnecting from wallet",
-        variant: "destructive",
+        variant: ToastType.DESTRUCTIVE,
       });
     }
   };
@@ -87,12 +91,12 @@ const WalletProvider = ({ children }: WalletConnectionProviderProps) => {
     try {
       if (isL1ToL2) {
         await provider.request({
-          method: "wallet_switchEthereumChain",
+          method: requestMethods.switchNetwork,
           params: [{ chainId: WalletNetwork.L2_TEN_TESTNET }],
         });
       } else {
         await provider.request({
-          method: "wallet_switchEthereumChain",
+          method: requestMethods.switchNetwork,
           params: [{ chainId: WalletNetwork.L1_SEPOLIA }],
         });
       }
@@ -118,13 +122,13 @@ const WalletProvider = ({ children }: WalletConnectionProviderProps) => {
                 </pre>
               </>
             ),
-            variant: "info",
+            variant: ToastType.INFO,
           });
         } else {
           toast({
             title: "Wrong Network",
             description: "Please install the network to continue.",
-            variant: "info",
+            variant: ToastType.INFO,
           });
         }
       } else {
@@ -132,7 +136,7 @@ const WalletProvider = ({ children }: WalletConnectionProviderProps) => {
         toast({
           title: "Error",
           description: "Error switching network",
-          variant: "destructive",
+          variant: ToastType.DESTRUCTIVE,
         });
       }
     }
@@ -163,7 +167,6 @@ const WalletProvider = ({ children }: WalletConnectionProviderProps) => {
   }, [provider]);
 
   useEffect(() => {
-    //connect wallet
     connectWallet();
   }, []);
 
@@ -172,7 +175,7 @@ const WalletProvider = ({ children }: WalletConnectionProviderProps) => {
     provider,
     signer,
     address,
-    walletConnected: !!provider,
+    walletConnected: isWalletConnected,
     isL1ToL2,
     fromChains,
     toChains,
@@ -181,13 +184,11 @@ const WalletProvider = ({ children }: WalletConnectionProviderProps) => {
     switchNetwork,
   };
 
-  // Render the provider with the context value
   return (
     <WalletContext.Provider value={value}>{children}</WalletContext.Provider>
   );
 };
 
-// Custom hook to use the wallet context
 const useWalletStore = () => {
   const context = useContext(WalletContext);
   if (!context) {
@@ -196,5 +197,4 @@ const useWalletStore = () => {
   return context;
 };
 
-// Export provider and custom hook
 export { WalletProvider, useWalletStore };