diff --git a/src/utils/labels.ts b/src/utils/labels.ts
index b446f846..33143b34 100644
--- a/src/utils/labels.ts
+++ b/src/utils/labels.ts
@@ -1,15 +1,23 @@
 import { Bridge, Chain, Currency, EthereumChainId } from "src/domain";
 
-export function getBridgeStatus(status: Bridge["status"]): string {
+export function getBridgeStatus(status: Bridge["status"], from: Bridge["from"]): string {
   switch (status) {
     case "pending": {
       return "Processing";
     }
     case "initiated": {
-      return "Initiated";
+      if (from.key === "ethereum") {
+        return "Processing";
+      } else {
+        return "Initiated";
+      }
     }
     case "on-hold": {
-      return "On Hold";
+      if (from.key === "ethereum") {
+        return "Processing";
+      } else {
+        return "On Hold";
+      }
     }
     case "completed": {
       return "Completed";
diff --git a/src/views/activity/components/bridge-card/bridge-card.view.tsx b/src/views/activity/components/bridge-card/bridge-card.view.tsx
index bed6501e..09078558 100644
--- a/src/views/activity/components/bridge-card/bridge-card.view.tsx
+++ b/src/views/activity/components/bridge-card/bridge-card.view.tsx
@@ -6,7 +6,7 @@ import { getBatchNumberOfL2Block } from "src/adapters/ethereum";
 import { getCurrency } from "src/adapters/storage";
 import { ReactComponent as BridgeL1Icon } from "src/assets/icons/l1-bridge.svg";
 import { ReactComponent as BridgeL2Icon } from "src/assets/icons/l2-bridge.svg";
-import { AsyncTask, Bridge, Env } from "src/domain";
+import { AsyncTask, Bridge, Env, PendingBridge } from "src/domain";
 import { routes } from "src/routes";
 import { formatFiatAmount, formatTokenAmount } from "src/utils/amounts";
 import { getBridgeStatus, getCurrencySymbol } from "src/utils/labels";
@@ -69,13 +69,17 @@ export const BridgeCard: FC<BridgeCardProps> = ({
     }
   }, [blockNumber, env, fromKey, status]);
 
-  const onClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+  const onClaimButtonClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     e.stopPropagation();
     if (onClaim) {
       onClaim();
     }
   };
 
+  const onCardClick = (bridge: Exclude<Bridge, PendingBridge>) => {
+    navigate(`${routes.bridgeDetails.path.split(":")[0]}${bridge.id}`);
+  };
+
   const preferredCurrencySymbol = getCurrencySymbol(getCurrency());
 
   const tokenAmountString = `${formatTokenAmount(amount, token)} ${token.symbol}`;
@@ -84,13 +88,6 @@ export const BridgeCard: FC<BridgeCardProps> = ({
     ? `${preferredCurrencySymbol}${fiatAmount ? formatFiatAmount(fiatAmount) : "--"}`
     : undefined;
 
-  const bridgeAmount = (
-    <div className={classes.token}>
-      <Icon className={classes.tokenIcon} isRounded size={20} url={token.logoURI} />
-      <Typography type="body1">{tokenAmountString}</Typography>
-    </div>
-  );
-
   const remainingBatchesMsg: string = (() => {
     if (
       isAsyncTaskDataAvailable(lastVerifiedBatch) &&
@@ -107,77 +104,197 @@ export const BridgeCard: FC<BridgeCardProps> = ({
     }
   })();
 
-  return (
-    <Card
-      className={classes.card}
-      onClick={() => {
-        if (status !== "pending") {
-          navigate(`${routes.bridgeDetails.path.split(":")[0]}${bridge.id}`);
-        }
-      }}
+  const BridgeAmount = (
+    <div className={classes.token}>
+      <Icon className={classes.tokenIcon} isRounded size={20} url={token.logoURI} />
+      <Typography type="body1">{tokenAmountString}</Typography>
+    </div>
+  );
+
+  const BridgeIcon = to.key === "ethereum" ? <BridgeL1Icon /> : <BridgeL2Icon />;
+
+  const BridgeLabel = (
+    <Typography className={classes.label} type="body1">
+      {to.key === "ethereum" ? "Bridge to L1" : "Bridge to L2"}
+    </Typography>
+  );
+
+  const BridgeStatus = (
+    <span
+      className={`${classes.statusBox} ${
+        status === "completed" ? classes.greenStatus : classes.pendingStatus
+      }`}
     >
-      <div className={classes.top}>
-        <div className={classes.row}>
-          {status === "initiated" && <p className={classes.steps}>STEP 1/2</p>}
-          {status === "on-hold" && <p className={classes.steps}>STEP 2/2</p>}
-        </div>
-        <div className={classes.infoContainer}>
-          <div className={classes.circle}>
-            {to.key === "ethereum" ? <BridgeL1Icon /> : <BridgeL2Icon />}
+      {getBridgeStatus(status, from)}
+    </span>
+  );
+
+  const FiatAmount = (
+    <Typography className={classes.fiat} type="body1">
+      {fiatAmountString}
+    </Typography>
+  );
+
+  switch (bridge.status) {
+    case "pending": {
+      return (
+        <Card className={classes.card}>
+          <div className={classes.top}>
+            <div className={classes.infoContainer}>
+              <div className={classes.circle}>{BridgeIcon}</div>
+              <div className={classes.info}>
+                <div className={classes.row}>
+                  {BridgeLabel}
+                  {fiatAmountString && BridgeAmount}
+                </div>
+                <div className={classes.row}>
+                  {BridgeStatus}
+                  {fiatAmountString && FiatAmount}
+                </div>
+              </div>
+              {!fiatAmountString && <div className={classes.amount}>{BridgeAmount}</div>}
+            </div>
           </div>
-          <div className={classes.info}>
-            <div className={classes.row}>
-              <Typography className={classes.label} type="body1">
-                {to.key === "ethereum" ? "Bridge to L1" : "Bridge to L2"}
-              </Typography>
-              {fiatAmountString && bridgeAmount}
+        </Card>
+      );
+    }
+    case "initiated": {
+      if (bridge.from.key === "ethereum") {
+        return (
+          <Card className={classes.card} onClick={() => onCardClick(bridge)}>
+            <div className={classes.top}>
+              <div className={classes.infoContainer}>
+                <div className={classes.circle}>{BridgeIcon}</div>
+                <div className={classes.info}>
+                  <div className={classes.row}>
+                    {BridgeLabel}
+                    {fiatAmountString && BridgeAmount}
+                  </div>
+                  <div className={classes.row}>
+                    {BridgeStatus}
+                    {fiatAmountString && FiatAmount}
+                  </div>
+                </div>
+                {!fiatAmountString && <div className={classes.amount}>{BridgeAmount}</div>}
+              </div>
             </div>
-            <div className={classes.row}>
-              <span
-                className={`${classes.statusBox} ${
-                  status === "completed" ? classes.greenStatus : classes.pendingStatus
-                }`}
-              >
-                {getBridgeStatus(status)}
-              </span>
-              {fiatAmountString && (
-                <Typography className={classes.fiat} type="body1">
-                  {fiatAmountString}
-                </Typography>
+          </Card>
+        );
+      } else {
+        return (
+          <Card className={classes.card} onClick={() => onCardClick(bridge)}>
+            <div className={classes.top}>
+              <div className={classes.row}>
+                <p className={classes.steps}>STEP 1/2</p>
+              </div>
+              <div className={classes.infoContainer}>
+                <div className={classes.circle}>{BridgeIcon}</div>
+                <div className={classes.info}>
+                  <div className={classes.row}>
+                    {BridgeLabel}
+                    {fiatAmountString && BridgeAmount}
+                  </div>
+                  <div className={classes.row}>
+                    {BridgeStatus}
+                    {fiatAmountString && FiatAmount}
+                  </div>
+                </div>
+                {!fiatAmountString && <div className={classes.amount}>{BridgeAmount}</div>}
+              </div>
+            </div>
+            <div className={classes.bottom}>
+              <Typography type="body2">{remainingBatchesMsg}</Typography>
+              <button className={classes.finaliseButton} disabled>
+                Finalise
+              </button>
+            </div>
+          </Card>
+        );
+      }
+    }
+    case "on-hold": {
+      if (bridge.from.key === "ethereum") {
+        return (
+          <Card className={classes.card} onClick={() => onCardClick(bridge)}>
+            <div className={classes.top}>
+              <div className={classes.infoContainer}>
+                <div className={classes.circle}>{BridgeIcon}</div>
+                <div className={classes.info}>
+                  <div className={classes.row}>
+                    {BridgeLabel}
+                    {fiatAmountString && BridgeAmount}
+                  </div>
+                  <div className={classes.row}>
+                    {BridgeStatus}
+                    {fiatAmountString && FiatAmount}
+                  </div>
+                </div>
+                {!fiatAmountString && <div className={classes.amount}>{BridgeAmount}</div>}
+              </div>
+            </div>
+          </Card>
+        );
+      } else {
+        return (
+          <Card className={classes.card} onClick={() => onCardClick(bridge)}>
+            <div className={classes.top}>
+              <div className={classes.row}>
+                <p className={classes.steps}>STEP 2/2</p>
+              </div>
+              <div className={classes.infoContainer}>
+                <div className={classes.circle}>{BridgeIcon}</div>
+                <div className={classes.info}>
+                  <div className={classes.row}>
+                    {BridgeLabel}
+                    {fiatAmountString && BridgeAmount}
+                  </div>
+                  <div className={classes.row}>
+                    {BridgeStatus}
+                    {fiatAmountString && FiatAmount}
+                  </div>
+                </div>
+                {!fiatAmountString && <div className={classes.amount}>{BridgeAmount}</div>}
+              </div>
+            </div>
+            <div className={classes.bottom}>
+              {networkError ? (
+                <ErrorMessage error={`Switch to ${to.name} to continue`} type="body2" />
+              ) : (
+                <Typography type="body2">Signature required to finalise the bridge</Typography>
               )}
+              <button
+                className={classes.finaliseButton}
+                disabled={isFinaliseDisabled}
+                onClick={onClaimButtonClick}
+              >
+                Finalise
+              </button>
+            </div>
+          </Card>
+        );
+      }
+    }
+    case "completed": {
+      return (
+        <Card className={classes.card} onClick={() => onCardClick(bridge)}>
+          <div className={classes.top}>
+            <div className={classes.infoContainer}>
+              <div className={classes.circle}>{BridgeIcon}</div>
+              <div className={classes.info}>
+                <div className={classes.row}>
+                  {BridgeLabel}
+                  {fiatAmountString && BridgeAmount}
+                </div>
+                <div className={classes.row}>
+                  {BridgeStatus}
+                  {fiatAmountString && FiatAmount}
+                </div>
+              </div>
+              {!fiatAmountString && <div className={classes.amount}>{BridgeAmount}</div>}
             </div>
           </div>
-          {!fiatAmountString && <div className={classes.amount}>{bridgeAmount}</div>}
-        </div>
-      </div>
-      {status === "initiated" && (
-        <div className={classes.bottom}>
-          {from.key === "ethereum" ? (
-            <Typography type="body2">Step 2 will require signature</Typography>
-          ) : (
-            <Typography type="body2">{remainingBatchesMsg}</Typography>
-          )}
-          <button className={classes.finaliseButton} disabled>
-            Finalise
-          </button>
-        </div>
-      )}
-      {status === "on-hold" && (
-        <div className={classes.bottom}>
-          {networkError ? (
-            <ErrorMessage error={`Switch to ${to.name} to continue`} type="body2" />
-          ) : (
-            <Typography type="body2">Signature required to finalise the bridge</Typography>
-          )}
-          <button
-            className={classes.finaliseButton}
-            disabled={isFinaliseDisabled}
-            onClick={onClick}
-          >
-            Finalise
-          </button>
-        </div>
-      )}
-    </Card>
-  );
+        </Card>
+      );
+    }
+  }
 };
diff --git a/src/views/bridge-details/bridge-details.view.tsx b/src/views/bridge-details/bridge-details.view.tsx
index 67d09673..a88b9577 100644
--- a/src/views/bridge-details/bridge-details.view.tsx
+++ b/src/views/bridge-details/bridge-details.view.tsx
@@ -324,7 +324,7 @@ export const BridgeDetails: FC = () => {
               </Typography>
               <Typography className={classes.alignRow} type="body1">
                 <span className={dotClass} />
-                {getBridgeStatus(status)}
+                {getBridgeStatus(status, from)}
               </Typography>
             </div>
             <div className={classes.row}>
@@ -388,7 +388,7 @@ export const BridgeDetails: FC = () => {
               </div>
             )}
           </Card>
-          {(status === "initiated" || status === "on-hold") && (
+          {(status === "initiated" || (status === "on-hold" && from.key === "polygon-zkevm")) && (
             <div className={classes.finaliseRow}>
               <Button
                 disabled={status === "initiated" || isFinaliseButtonDisabled}
diff --git a/src/views/home/components/deposit-warning-modal/deposit-warning-modal.styles.ts b/src/views/home/components/deposit-warning-modal/deposit-warning-modal.styles.ts
index ae303fdb..ce161bda 100644
--- a/src/views/home/components/deposit-warning-modal/deposit-warning-modal.styles.ts
+++ b/src/views/home/components/deposit-warning-modal/deposit-warning-modal.styles.ts
@@ -4,12 +4,15 @@ import { Theme } from "src/styles/theme";
 
 export const useDepositWarningModalStyles = createUseStyles((theme: Theme) => ({
   background: {
-    alignItems: "flex-start",
+    alignItems: "center",
     background: theme.palette.transparency,
     display: "flex",
     height: "100vh",
     justifyContent: "center",
     width: "100%",
+    [theme.breakpoints.upSm]: {
+      alignItems: "flex-start",
+    },
   },
   cancelButton: {
     "&:hover": {
@@ -26,10 +29,15 @@ export const useDepositWarningModalStyles = createUseStyles((theme: Theme) => ({
   card: {
     display: "flex",
     flexDirection: "column",
-    marginTop: theme.spacing(30),
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
     maxWidth: 510,
-    padding: theme.spacing(4),
+    padding: theme.spacing(3),
     width: "100%",
+    [theme.breakpoints.upSm]: {
+      marginTop: theme.spacing(30),
+      padding: theme.spacing(4),
+    },
   },
   exampleText: {
     userSelect: "none",
diff --git a/src/views/shared/confirmation-modal/confirmation-modal.styles.ts b/src/views/shared/confirmation-modal/confirmation-modal.styles.ts
index 46e09dca..f1b04030 100644
--- a/src/views/shared/confirmation-modal/confirmation-modal.styles.ts
+++ b/src/views/shared/confirmation-modal/confirmation-modal.styles.ts
@@ -4,12 +4,15 @@ import { Theme } from "src/styles/theme";
 
 export const useConfirmationModalStyles = createUseStyles((theme: Theme) => ({
   background: {
-    alignItems: "flex-start",
+    alignItems: "center",
     background: theme.palette.transparency,
     display: "flex",
     height: "100vh",
     justifyContent: "center",
     width: "100%",
+    [theme.breakpoints.upSm]: {
+      alignItems: "flex-start",
+    },
   },
   cancelButton: {
     "&:hover": {
@@ -26,10 +29,15 @@ export const useConfirmationModalStyles = createUseStyles((theme: Theme) => ({
   card: {
     display: "flex",
     flexDirection: "column",
-    marginTop: theme.spacing(30),
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
     maxWidth: 510,
-    padding: theme.spacing(4),
+    padding: theme.spacing(3),
     width: "100%",
+    [theme.breakpoints.upSm]: {
+      marginTop: theme.spacing(30),
+      padding: theme.spacing(4),
+    },
   },
   textContainer: {
     "& p": {
diff --git a/src/views/shared/network-box/network-box.styles.ts b/src/views/shared/network-box/network-box.styles.ts
index 204b9071..f4265ebe 100644
--- a/src/views/shared/network-box/network-box.styles.ts
+++ b/src/views/shared/network-box/network-box.styles.ts
@@ -29,10 +29,16 @@ export const useNetworkBoxStyles = createUseStyles((theme: Theme) => ({
     alignItems: "center",
     display: "flex",
     gap: theme.spacing(4),
+    textAlign: "center",
   },
   link: {
     color: theme.palette.primary.dark,
   },
+  list: {
+    paddingLeft: theme.spacing(2),
+    width: "100%",
+    wordBreak: "break-word",
+  },
   listItem: {
     padding: [theme.spacing(0.25), 0],
   },
diff --git a/src/views/shared/network-box/network-box.view.tsx b/src/views/shared/network-box/network-box.view.tsx
index a0fe2c61..76fcb48f 100644
--- a/src/views/shared/network-box/network-box.view.tsx
+++ b/src/views/shared/network-box/network-box.view.tsx
@@ -67,7 +67,7 @@ export const NetworkBox: FC = () => {
     <Card>
       <div className={classes.networkBox}>
         <Typography type="body1">{env.chains[1].name}</Typography>
-        <ul>
+        <ul className={classes.list}>
           <li className={classes.listItem}>
             <Typography type="body2">
               RPC URL: {polygonZkEVMChain.provider.connection.url}