From 25b0223a987853c19342807597d6abb5eaa30ce2 Mon Sep 17 00:00:00 2001
From: QSchlegel <quirin.schlegel@icloud.com>
Date: Mon, 15 Dec 2025 18:34:11 +0100
Subject: [PATCH] Refactor wallet info components for improved UI and
 functionality

- Updated card components to enhance layout and styling consistency.
- Refactored InspectMultisigScript and InspectScript to use CardUI for better presentation.
- Improved the handling of wallet state and balance display in ShowInfo and related components.
- Enhanced user experience with collapsible sections for advanced script details and improved messaging for wallet actions.
- Adjusted styles for alerts and buttons to ensure better visibility and interaction.
- Added Discord integration for signer profiles to enhance user engagement.
---
 .../multisig/inspect-multisig-script.tsx      |  59 ++-
 .../pages/wallet/info/archive-wallet.tsx      |  41 ++-
 .../pages/wallet/info/card-info.tsx           | 339 ++++++++++++++++--
 src/components/pages/wallet/info/index.tsx    |  30 +-
 .../pages/wallet/info/inspect-script.tsx      |  94 ++++-
 .../pages/wallet/info/migrate-wallet.tsx      |  18 +-
 .../info/migration/FundTransferStep.tsx       |  14 +-
 .../info/migration/MigrationCompleteStep.tsx  |   2 +-
 .../info/migration/MigrationPreChecks.tsx     |  12 +-
 .../info/migration/NewWalletCreationStep.tsx  |   4 +-
 .../wallet/info/migration/ProxySetupStep.tsx  |   4 +-
 .../info/migration/ProxyTransferStep.tsx      |  10 +-
 .../pages/wallet/info/proxy-control.tsx       |  20 +-
 .../pages/wallet/info/register-wallet.tsx     |   7 +-
 .../wallet/info/signers/card-edit-signers.tsx |  24 +-
 .../wallet/info/signers/card-show-signers.tsx |  97 ++---
 .../wallet/info/upgrade-governance-wallet.tsx |  55 +--
 .../wallet/info/upgrade-staking-wallet.tsx    |  57 +--
 src/components/ui/card-content.tsx            |  12 +-
 src/components/ui/card.tsx                    |   2 +-
 src/components/ui/code.tsx                    |   5 +-
 src/components/ui/row-label-info.tsx          |  18 +-
 22 files changed, 653 insertions(+), 271 deletions(-)

diff --git a/src/components/multisig/inspect-multisig-script.tsx b/src/components/multisig/inspect-multisig-script.tsx
index 86f2e878..ef2ef3f2 100644
--- a/src/components/multisig/inspect-multisig-script.tsx
+++ b/src/components/multisig/inspect-multisig-script.tsx
@@ -1,5 +1,5 @@
-import CardUI from "@/components/common/card-content";
-import Code from "@/components/common/code";
+import CardUI from "@/components/ui/card-content";
+import Code from "@/components/ui/code";
 import RowLabelInfo from "@/components/common/row-label-info";
 import { type MultisigWallet } from "@/utils/multisigSDK";
 import { Carousel } from "@/components/ui/carousel";
@@ -88,37 +88,36 @@ export default function InspectMultisigScript({
   }
 
   return (
-    <div className="col-span-2 w-full rounded-xl border border-zinc-200 bg-white text-zinc-950 shadow dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50">
-      <div className="flex flex-row items-center justify-between space-y-0 pb-2 p-6">
-        <h3 className="text-xl font-medium">Native Script</h3>
-      </div>
-      <div className="p-6 pt-0">
+    <CardUI
+      title="Native Script"
+      description="Advanced script details for SDK-managed wallets"
+      cardClassName="col-span-2"
+    >
+      <div className="mt-1 flex flex-col gap-2">
         <div className="mt-1 flex flex-col gap-2">
-          <div className="mt-1 flex flex-col gap-2">
-            {mWallet.stakingEnabled() && <RowLabelInfo
-              label="Address"
-              value={<Code>{mWallet.getScript().address}</Code>}
-              copyString={mWallet.getScript().address}
-            />}
-            <RowLabelInfo label="Balance" value={<Code>{`${balance} ₳`}</Code>} />
-            {mWallet.stakingEnabled() && (
-              <RowLabelInfo
-                label="Stake Address"
-                value={<Code>{mWallet.getStakeAddress()}</Code>}
-                copyString={mWallet.getStakeAddress()}
-              />
-            )}
-            {/* add pending rewards like balance */}
-            {mWallet.isGovernanceEnabled() && <RowLabelInfo
-              label="dRep ID"
-              value={<Code>{mWallet.getDRepId()}</Code>}
-              copyString={mWallet.getDRepId()}
-            />}
+          {mWallet.stakingEnabled() && <RowLabelInfo
+            label="Address"
+            value={<Code>{mWallet.getScript().address}</Code>}
+            copyString={mWallet.getScript().address}
+          />}
+          <RowLabelInfo label="Balance" value={<Code>{`${balance} ₳`}</Code>} />
+          {mWallet.stakingEnabled() && (
+            <RowLabelInfo
+              label="Stake Address"
+              value={<Code>{mWallet.getStakeAddress()}</Code>}
+              copyString={mWallet.getStakeAddress()}
+            />
+          )}
+          {/* add pending rewards like balance */}
+          {mWallet.isGovernanceEnabled() && <RowLabelInfo
+            label="dRep ID"
+            value={<Code>{mWallet.getDRepId()}</Code>}
+            copyString={mWallet.getDRepId()}
+          />}
 
-            <Carousel slides={slides} />
-          </div>
+          <Carousel slides={slides} />
         </div>
       </div>
-    </div>
+    </CardUI>
   );
 }
diff --git a/src/components/pages/wallet/info/archive-wallet.tsx b/src/components/pages/wallet/info/archive-wallet.tsx
index 11dda93c..9ba33441 100644
--- a/src/components/pages/wallet/info/archive-wallet.tsx
+++ b/src/components/pages/wallet/info/archive-wallet.tsx
@@ -42,23 +42,34 @@ export function ArchiveWallet({ appWallet }: { appWallet: Wallet }) {
   return (
     <CardUI
       title="Archive Wallet"
-      description="Archive this wallet"
+      description="Archive this wallet to remove it from your wallet list"
       cardClassName="col-span-2"
     >
-      <p>
-        Archiving this wallet will remove it from your list of wallets. You can
-        always restore it later.
-      </p>
-      <div>
-        {appWallet.isArchived ? (
-          <Button onClick={() => archiveWallet(false)} variant="default">
-            Restore Wallet
-          </Button>
-        ) : (
-          <Button onClick={() => archiveWallet(true)} variant="destructive">
-            Archive Wallet
-          </Button>
-        )}
+      <div className="space-y-4">
+        <p className="text-sm text-muted-foreground">
+          {appWallet.isArchived 
+            ? "This wallet is currently archived and hidden from your wallet list."
+            : "Archiving this wallet will remove it from your list of wallets. You can always restore it later."}
+        </p>
+        <div className="flex flex-col sm:flex-row gap-3">
+          {appWallet.isArchived ? (
+            <Button 
+              onClick={() => archiveWallet(false)} 
+              variant="default"
+              className="w-full sm:w-auto"
+            >
+              Restore Wallet
+            </Button>
+          ) : (
+            <Button 
+              onClick={() => archiveWallet(true)} 
+              variant="destructive"
+              className="w-full sm:w-auto"
+            >
+              Archive Wallet
+            </Button>
+          )}
+        </div>
       </div>
     </CardUI>
   );
diff --git a/src/components/pages/wallet/info/card-info.tsx b/src/components/pages/wallet/info/card-info.tsx
index 39f1491a..8bbe3ae2 100644
--- a/src/components/pages/wallet/info/card-info.tsx
+++ b/src/components/pages/wallet/info/card-info.tsx
@@ -1,10 +1,14 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Wallet } from "@/types/wallet";
-import { MoreVertical } from "lucide-react";
+import { MoreVertical, Users, Archive, User } from "lucide-react";
 import { api } from "@/utils/api";
 import { useToast } from "@/hooks/use-toast";
 import { useUserStore } from "@/lib/zustand/user";
 import useMultisigWallet from "@/hooks/useMultisigWallet";
+import useAppWallet from "@/hooks/useAppWallet";
+import { deserializeAddress } from "@meshsdk/core";
+import { getBalanceFromUtxos } from "@/utils/getBalance";
+import { useWalletsStore } from "@/lib/zustand/wallets";
 
 import {
   DropdownMenu,
@@ -26,6 +30,15 @@ import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import CardUI from "@/components/ui/card-content";
 import RowLabelInfo from "@/components/ui/row-label-info";
+import RowLabelInfoCommon from "@/components/common/row-label-info";
+import { NativeScriptSection } from "./inspect-script";
+import { Badge } from "@/components/ui/badge";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { ChevronDown, ChevronUp, Code2, Sparkles } from "lucide-react";
+import Code from "@/components/ui/code";
+import { Carousel } from "@/components/ui/carousel";
+import { type MultisigWallet } from "@/utils/multisigSDK";
+import { getFirstAndLast } from "@/utils/strings";
 
 export default function CardInfo({ appWallet }: { appWallet: Wallet }) {
   const [showEdit, setShowEdit] = useState(false);
@@ -107,8 +120,8 @@ function EditInfo({
     });
   }
   return (
-    <fieldset className="grid gap-6">
-      <div className="grid gap-3">
+    <fieldset className="grid gap-4 sm:gap-6">
+      <div className="grid gap-2 sm:gap-3">
         <Label htmlFor="name">Name</Label>
         <Input
           id="name"
@@ -119,19 +132,19 @@ function EditInfo({
           onChange={(e) => setName(e.target.value)}
         />
       </div>
-      <div className="grid gap-3">
+      <div className="grid gap-2 sm:gap-3">
         <Label htmlFor="description">Description</Label>
         <Textarea
           id="description"
-          className="min-h-32"
+          className="min-h-24 sm:min-h-32"
           placeholder="For managing Fund12 Project X catalyst fund / dRep for team X / Company X main spending wallet"
           value={description}
           onChange={(e) => setDescription(e.target.value)}
         />
       </div>
-      <div className="grid gap-3">
-        <Label htmlFor="type">
-          Mark wallet as archived (will not be displayed in the wallet list)
+      <div className="grid gap-2 sm:gap-3">
+        <Label htmlFor="type" className="text-sm">
+          Archive Status
         </Label>
         <Select
           value={isArchived ? "true" : "false"}
@@ -152,18 +165,26 @@ function EditInfo({
             </SelectGroup>
           </SelectContent>
         </Select>
+        <p className="text-xs text-muted-foreground">
+          Archiving will remove it from your wallet list, but you can restore it later.
+        </p>
       </div>
-      <div className="flex gap-4">
+      <div className="flex flex-col sm:flex-row gap-3 pt-2">
         <Button
           onClick={() => editWallet()}
           disabled={
             loading ||
-            (appWallet.name === name && appWallet.description === description)
+            (appWallet.name === name && appWallet.description === description && appWallet.isArchived === isArchived)
           }
+          className="flex-1 sm:flex-initial"
         >
           {loading ? "Updating Wallet..." : "Update"}
         </Button>
-        <Button onClick={() => setShowEdit(false)} variant="destructive">
+        <Button 
+          onClick={() => setShowEdit(false)} 
+          variant="outline"
+          className="flex-1 sm:flex-initial"
+        >
           Cancel
         </Button>
       </div>
@@ -171,38 +192,290 @@ function EditInfo({
   );
 }
 
+function MultisigScriptSection({ mWallet }: { mWallet: MultisigWallet }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const { appWallet } = useAppWallet();
+  const walletsUtxos = useWalletsStore((state) => state.walletsUtxos);
+  const [balance, setBalance] = useState<number>(0);
+  
+  useEffect(() => {
+    if (!appWallet) return;
+    const utxos = walletsUtxos[appWallet.id];
+    if (!utxos) return;
+    const balance = getBalanceFromUtxos(utxos);
+    if (!balance) return;
+    setBalance(balance);
+  }, [appWallet, walletsUtxos]);
+
+  const dSAddr = deserializeAddress(mWallet.getScript().address);
+
+  const slides: React.ReactNode[] = [
+    <div key="meta" className="w-full space-y-4">
+      <div className="flex flex-col sm:flex-row gap-2 sm:gap-4 w-full">
+        <div className="text-xs sm:text-sm font-medium text-muted-foreground min-w-0 sm:min-w-20 flex-shrink-0">1854:</div>
+        <div className="flex-1 min-w-0 overflow-x-auto -mx-4 sm:mx-0 px-4 sm:px-0">
+          <Code className="block text-xs sm:text-sm whitespace-pre">{JSON.stringify(mWallet?.getJsonMetadata(), null, 2)}</Code>
+        </div>
+      </div>
+      
+      {/* Register Wallet Section */}
+      <div className="pt-3 border-t border-border/30">
+        <div className="mb-2">
+          <div className="text-xs sm:text-sm font-medium text-muted-foreground">Register Wallet</div>
+          <div className="text-xs text-muted-foreground/70 mt-0.5">Register your Wallet through a CIP-0146 registration transaction.</div>
+        </div>
+        <div className="p-4 bg-muted/50 rounded-lg border border-border/30">
+          <p className="text-sm text-muted-foreground">Coming soon.</p>
+        </div>
+      </div>
+    </div>,
+    <div key="payment" className="w-full space-y-3">
+      <div className="flex flex-col sm:flex-row gap-2 sm:gap-4 w-full">
+        <div className="text-xs sm:text-sm font-medium text-muted-foreground min-w-0 sm:min-w-20 flex-shrink-0">payment:</div>
+        <div className="flex-1 min-w-0 overflow-x-auto -mx-4 sm:mx-0 px-4 sm:px-0">
+          <Code className="block text-xs sm:text-sm whitespace-pre">{JSON.stringify(mWallet?.buildScript(0), null, 2)}</Code>
+        </div>
+      </div>
+      <div className="flex flex-col sm:flex-row gap-2 sm:gap-4 w-full">
+        <div className="text-xs sm:text-sm font-medium text-muted-foreground min-w-0 sm:min-w-20 flex-shrink-0">Keyhash</div>
+        <div className="flex-1 min-w-0 overflow-x-auto -mx-4 sm:mx-0 px-4 sm:px-0">
+          <Code className="block text-xs sm:text-sm break-all">{dSAddr.scriptHash}</Code>
+        </div>
+      </div>
+      <div className="flex flex-col sm:flex-row gap-2 sm:gap-4 w-full">
+        <div className="text-xs sm:text-sm font-medium text-muted-foreground min-w-0 sm:min-w-20 flex-shrink-0">CBOR</div>
+        <div className="flex-1 min-w-0 overflow-x-auto -mx-4 sm:mx-0 px-4 sm:px-0">
+          <Code className="block text-xs sm:text-sm break-all">{mWallet.getPaymentScript()}</Code>
+        </div>
+      </div>
+      {appWallet?.stakeCredentialHash && (
+        <div className="flex flex-col sm:flex-row gap-2 sm:gap-4 w-full">
+          <div className="text-xs sm:text-sm font-medium text-muted-foreground min-w-0 sm:min-w-20 flex-shrink-0">Stake Credential Hash</div>
+          <div className="flex-1 min-w-0 overflow-x-auto -mx-4 sm:mx-0 px-4 sm:px-0">
+            <Code className="block text-xs sm:text-sm break-all">{appWallet?.stakeCredentialHash}</Code>
+          </div>
+        </div>
+      )}
+    </div>,
+  ];
+
+  if (mWallet?.buildScript(2) !== undefined && mWallet.stakingEnabled()) {
+    slides.push(
+      <div key="stake-2" className="w-full space-y-3">
+        <div className="flex flex-col sm:flex-row gap-2 sm:gap-4 w-full">
+          <div className="text-xs sm:text-sm font-medium text-muted-foreground min-w-0 sm:min-w-20 flex-shrink-0">stake:</div>
+          <div className="flex-1 min-w-0 overflow-x-auto -mx-4 sm:mx-0 px-4 sm:px-0">
+            <Code className="block text-xs sm:text-sm whitespace-pre">{JSON.stringify(mWallet.buildScript(2), null, 2)}</Code>
+          </div>
+        </div>
+        <div className="flex flex-col sm:flex-row gap-2 sm:gap-4 w-full">
+          <div className="text-xs sm:text-sm font-medium text-muted-foreground min-w-0 sm:min-w-20 flex-shrink-0">Keyhash</div>
+          <div className="flex-1 min-w-0 overflow-x-auto -mx-4 sm:mx-0 px-4 sm:px-0">
+            <Code className="block text-xs sm:text-sm break-all">{dSAddr.stakeScriptCredentialHash}</Code>
+          </div>
+        </div>
+        <div className="flex flex-col sm:flex-row gap-2 sm:gap-4 w-full">
+          <div className="text-xs sm:text-sm font-medium text-muted-foreground min-w-0 sm:min-w-20 flex-shrink-0">CBOR</div>
+          <div className="flex-1 min-w-0 overflow-x-auto -mx-4 sm:mx-0 px-4 sm:px-0">
+            <Code className="block text-xs sm:text-sm break-all">{mWallet.getStakingScript()}</Code>
+          </div>
+        </div>
+      </div>,
+    );
+  }
+
+  if (mWallet?.buildScript(3) !== undefined && mWallet.isGovernanceEnabled()) {
+    slides.push(
+      <div key="drep-3" className="w-full space-y-3">
+        <div className="flex flex-col sm:flex-row gap-2 sm:gap-4 w-full">
+          <div className="text-xs sm:text-sm font-medium text-muted-foreground min-w-0 sm:min-w-20 flex-shrink-0">drep:</div>
+          <div className="flex-1 min-w-0 overflow-x-auto -mx-4 sm:mx-0 px-4 sm:px-0">
+            <Code className="block text-xs sm:text-sm whitespace-pre">{JSON.stringify(mWallet.buildScript(3), null, 2)}</Code>
+          </div>
+        </div>
+        <div className="flex flex-col sm:flex-row gap-2 sm:gap-4 w-full">
+          <div className="text-xs sm:text-sm font-medium text-muted-foreground min-w-0 sm:min-w-20 flex-shrink-0">DRep Script CBOR</div>
+          <div className="flex-1 min-w-0 overflow-x-auto -mx-4 sm:mx-0 px-4 sm:px-0">
+            <Code className="block text-xs sm:text-sm break-all">{mWallet.getDRepScript()}</Code>
+          </div>
+        </div>
+      </div>,
+    );
+  }
+
+  return (
+    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+      <CollapsibleTrigger className="flex items-center justify-between w-full p-3 rounded-lg border border-border/30 bg-muted/30 hover:bg-muted/50 transition-colors">
+        <div className="flex items-center gap-2">
+          <Code2 className="h-4 w-4 text-muted-foreground" />
+          <span className="text-sm font-medium">Advanced Script Details</span>
+        </div>
+        {isOpen ? (
+          <ChevronUp className="h-4 w-4 text-muted-foreground" />
+        ) : (
+          <ChevronDown className="h-4 w-4 text-muted-foreground" />
+        )}
+      </CollapsibleTrigger>
+      <CollapsibleContent className="mt-3">
+        {/* Carousel for script details */}
+        <Carousel slides={slides} />
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
 function ShowInfo({ appWallet }: { appWallet: Wallet }) {
   const { multisigWallet } = useMultisigWallet();
+  const walletsUtxos = useWalletsStore((state) => state.walletsUtxos);
+  const [balance, setBalance] = useState<number>(0);
+  
+  useEffect(() => {
+    if (!appWallet) return;
+    const utxos = walletsUtxos[appWallet.id];
+    if (!utxos) return;
+    const balance = getBalanceFromUtxos(utxos);
+    if (!balance) return;
+    setBalance(balance);
+  }, [appWallet, walletsUtxos]);
 
+  // Check if this is a legacy wallet (doesn't use SDK)
+  const isLegacyWallet = !!appWallet.rawImportBodies?.multisig;
+  
+  // For legacy wallets, multisigWallet will be undefined, so use appWallet.address
+  // For SDK wallets, prefer the address from multisigWallet if staking is enabled
   const address = multisigWallet?.getKeysByRole(2) ? multisigWallet?.getScript().address : appWallet.address;
   
   // Get DRep ID from multisig wallet if available, otherwise fallback to appWallet
   const dRepId = multisigWallet?.getKeysByRole(3) ? multisigWallet?.getDRepId() : appWallet?.dRepId;
   
   // For rawImportBodies wallets, dRepId may not be available
-  const hasRawImportBodies = !!appWallet.rawImportBodies?.multisig;
   const showDRepId = dRepId && dRepId.length > 0;
   
+  // Calculate signers info
+  const signersCount = appWallet.signersAddresses.length;
+  const requiredSigners = appWallet.numRequiredSigners ?? signersCount;
+  const getSignersText = () => {
+    if (appWallet.type === 'all') {
+      return `All ${signersCount} signers required`;
+    } else if (appWallet.type === 'any') {
+      return `Any of ${signersCount} signers`;
+    } else {
+      return `${requiredSigners} of ${signersCount} signers`;
+    }
+  };
+  
+  // Get the number of required signers for visualization
+  const getRequiredCount = () => {
+    if (appWallet.type === 'all') {
+      return signersCount;
+    } else if (appWallet.type === 'any') {
+      return 1;
+    } else {
+      return requiredSigners;
+    }
+  };
+  
+  const requiredCount = getRequiredCount();
+  
   return (
-    <>
-      <RowLabelInfo
-        label="Address"
-        value={address}
-        copyString={address}
-      />
-      {showDRepId ? (
-        <RowLabelInfo
-          label="DRep ID"
-          value={dRepId}
-          copyString={dRepId}
-        />
-      ) : hasRawImportBodies ? (
-        <RowLabelInfo
-          label="DRep ID"
-          value="Not available for imported wallets"
-          copyString=""
-        />
-      ) : null}
-    </>
+    <div className="space-y-4">
+      {/* Wallet Name */}
+      {appWallet.name && (
+        <div className="pb-2 border-b border-border/30">
+          <div className="flex items-center justify-between mb-1">
+            <div className="text-xs font-medium text-muted-foreground">Wallet Name</div>
+            {isLegacyWallet && (
+              <Badge variant="outline" className="text-xs">
+                <Archive className="h-3 w-3 mr-1" />
+                Legacy
+              </Badge>
+            )}
+          </div>
+          <div className="text-base font-semibold">{appWallet.name}</div>
+        </div>
+      )}
+      
+      {/* Desktop: Grid layout for addresses and balance */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {/* Left Column */}
+        <div className="space-y-4">
+          {/* Address */}
+          <RowLabelInfo
+            label="Address"
+            value={getFirstAndLast(address, 20, 15)}
+            copyString={address}
+            allowOverflow={false}
+          />
+          
+          {/* Stake Address - Only show if staking is enabled */}
+          {multisigWallet && multisigWallet.stakingEnabled() && (() => {
+            const stakeAddress = multisigWallet.getStakeAddress();
+            return stakeAddress ? (
+              <RowLabelInfo
+                label="Stake Key"
+                value={getFirstAndLast(stakeAddress, 20, 15)}
+                copyString={stakeAddress}
+                allowOverflow={false}
+              />
+            ) : null;
+          })()}
+          
+          {/* DRep ID */}
+          {showDRepId && dRepId ? (
+            <RowLabelInfo
+              label="DRep ID"
+              value={getFirstAndLast(dRepId ?? "", 20, 15)}
+              copyString={dRepId ?? ""}
+              allowOverflow={false}
+            />
+          ) : isLegacyWallet ? (
+            <RowLabelInfo
+              label="DRep ID"
+              value="Not available for legacy wallets"
+              copyString=""
+            />
+          ) : null}
+        </div>
+        
+        {/* Right Column */}
+        <div className="space-y-4">
+          {/* Balance */}
+          <RowLabelInfo 
+            label="Balance" 
+            value={`${balance} ₳`}
+            allowOverflow={false}
+          />
+          
+          {/* Signing Threshold */}
+          <div className="flex items-center gap-3 p-3 bg-muted/30 rounded-lg border border-border/30">
+            <div className="flex-1 min-w-0">
+              <div className="text-xs font-medium text-muted-foreground mb-0.5">Signing Threshold</div>
+              <div className="text-sm font-medium">{getSignersText()}</div>
+            </div>
+            <div className="flex items-center gap-1.5 flex-shrink-0">
+              {Array.from({ length: signersCount }).map((_, index) => (
+                <User
+                  key={index}
+                  className={`h-5 w-5 sm:h-6 sm:w-6 ${
+                    index < requiredCount
+                      ? "text-foreground opacity-100"
+                      : "text-muted-foreground opacity-30"
+                  }`}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      {/* Native Script - Collapsible Pro Feature */}
+      <div className="pt-2 border-t border-border/30">
+        {multisigWallet && multisigWallet.stakingEnabled() ? (
+          <MultisigScriptSection mWallet={multisigWallet} />
+        ) : (
+          <NativeScriptSection appWallet={appWallet} />
+        )}
+      </div>
+    </div>
   );
 }
diff --git a/src/components/pages/wallet/info/index.tsx b/src/components/pages/wallet/info/index.tsx
index 87624402..01edbfea 100644
--- a/src/components/pages/wallet/info/index.tsx
+++ b/src/components/pages/wallet/info/index.tsx
@@ -2,12 +2,9 @@ import useAppWallet from "@/hooks/useAppWallet";
 import useMultisigWallet from "@/hooks/useMultisigWallet";
 import CardInfo from "./card-info";
 import CardSigners from "./signers/card-signers";
-import InspectScript from "./inspect-script";
 import { MigrateWallet } from "./migrate-wallet";
 import { ArchiveWallet } from "./archive-wallet";
-import InspectMultisigScript from "@/components/multisig/inspect-multisig-script";
 import { UpgradeStakingWallet } from "./upgrade-staking-wallet";
-import { RegisterWallet } from "./register-wallet";
 import ProxyControlCard from "./proxy-control";
 import { UpgradeGovernanceWallet } from "./upgrade-governance-wallet";
 
@@ -18,21 +15,16 @@ export default function WalletInfo() {
   if (appWallet === undefined) return <></>;
   
   return (
-    <>
-      <main className="flex w-full flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
-        <div className="grid grid-cols-1 gap-4">
-          <CardInfo appWallet={appWallet} />
-          <CardSigners appWallet={appWallet} />
-          {(!multisigWallet || !multisigWallet.stakingEnabled()) && <InspectScript appWallet={appWallet} />}
-          {multisigWallet && multisigWallet.stakingEnabled() && <InspectMultisigScript mWallet={multisigWallet} />}
-          <MigrateWallet appWallet={appWallet} />
-          {multisigWallet && <RegisterWallet mWallet={multisigWallet} appWallet={appWallet} />}
-          <ProxyControlCard />
-          {multisigWallet && <UpgradeStakingWallet mWallet={multisigWallet} appWallet={appWallet} />}
-          {multisigWallet && <UpgradeGovernanceWallet mWallet={multisigWallet} />}
-          <ArchiveWallet appWallet={appWallet} />
-        </div>
-      </main>
-    </>
+    <main className="flex w-full flex-1 flex-col gap-4 p-3 sm:p-4 md:gap-6 md:p-6 lg:gap-8 lg:p-8 max-w-7xl mx-auto">
+      <div className="grid grid-cols-1 gap-4 sm:gap-6">
+        <CardInfo appWallet={appWallet} />
+        <CardSigners appWallet={appWallet} />
+        <MigrateWallet appWallet={appWallet} />
+        <ProxyControlCard />
+        {multisigWallet && <UpgradeStakingWallet mWallet={multisigWallet} appWallet={appWallet} />}
+        {multisigWallet && <UpgradeGovernanceWallet mWallet={multisigWallet} />}
+        <ArchiveWallet appWallet={appWallet} />
+      </div>
+    </main>
   );
 }
diff --git a/src/components/pages/wallet/info/inspect-script.tsx b/src/components/pages/wallet/info/inspect-script.tsx
index eaadc035..25772dc0 100644
--- a/src/components/pages/wallet/info/inspect-script.tsx
+++ b/src/components/pages/wallet/info/inspect-script.tsx
@@ -1,19 +1,89 @@
-import CardUI from "@/components/ui/card-content";
 import Code from "@/components/ui/code";
-import RowLabelInfo from "@/components/common/row-label-info";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Badge } from "@/components/ui/badge";
+import { ChevronDown, ChevronUp, Code2, Sparkles } from "lucide-react";
+import { useState } from "react";
 import { Wallet } from "@/types/wallet";
 
+export function NativeScriptSection({ appWallet }: { appWallet: Wallet }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const isLegacyWallet = !!appWallet.rawImportBodies?.multisig;
+  
+  // For legacy wallets, the nativeScript is just a placeholder
+  // The actual script is stored as CBOR in scriptCbor
+  const hasValidNativeScript = !isLegacyWallet || 
+    (appWallet.nativeScript && 
+     'scripts' in appWallet.nativeScript && 
+     Array.isArray(appWallet.nativeScript.scripts) && 
+     appWallet.nativeScript.scripts.length > 0);
+
+  return (
+    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+      <CollapsibleTrigger className="flex items-center justify-between w-full p-3 rounded-lg border border-border/30 bg-muted/30 hover:bg-muted/50 transition-colors">
+        <div className="flex items-center gap-2">
+          <Code2 className="h-4 w-4 text-muted-foreground" />
+          <span className="text-sm font-medium">Native Script</span>
+          {isLegacyWallet && (
+            <Badge variant="outline" className="text-xs">
+              Legacy
+            </Badge>
+          )}
+        </div>
+        {isOpen ? (
+          <ChevronUp className="h-4 w-4 text-muted-foreground" />
+        ) : (
+          <ChevronDown className="h-4 w-4 text-muted-foreground" />
+        )}
+      </CollapsibleTrigger>
+      <CollapsibleContent className="mt-3 space-y-4">
+        {isLegacyWallet && (
+          <div className="p-3 bg-amber-50 dark:bg-amber-950/20 rounded-lg border border-amber-200/50 dark:border-amber-800/50">
+            <p className="text-xs sm:text-sm text-amber-800 dark:text-amber-200">
+              <strong>Legacy Wallet:</strong> This wallet was imported and doesn't use the SDK. 
+              The Native Script JSON below is a placeholder. The actual script is stored as CBOR.
+            </p>
+          </div>
+        )}
+        
+        {hasValidNativeScript && (
+          <div className="flex flex-col gap-2 sm:gap-3">
+            <div className="text-xs sm:text-sm font-medium text-muted-foreground">
+              Native Script JSON
+              {isLegacyWallet && <span className="ml-2 text-xs text-muted-foreground/70">(placeholder)</span>}
+            </div>
+            <div className="overflow-x-auto -mx-4 sm:-mx-6 px-4 sm:px-6">
+              <Code className="block text-xs sm:text-sm">{JSON.stringify(appWallet.nativeScript, null, 2)}</Code>
+            </div>
+          </div>
+        )}
+        
+        <div className="flex flex-col gap-2 sm:gap-3">
+          <div className="text-xs sm:text-sm font-medium text-muted-foreground">
+            Script CBOR
+            {isLegacyWallet && <span className="ml-2 text-xs text-muted-foreground/70">(actual script)</span>}
+          </div>
+          <div className="overflow-x-auto -mx-4 sm:-mx-6 px-4 sm:px-6">
+            <Code className="block text-xs sm:text-sm break-all">{appWallet.scriptCbor}</Code>
+          </div>
+        </div>
+        
+        {isLegacyWallet && appWallet.stakeScriptCbor && (
+          <div className="flex flex-col gap-2 sm:gap-3">
+            <div className="text-xs sm:text-sm font-medium text-muted-foreground">Stake Script CBOR</div>
+            <div className="overflow-x-auto -mx-4 sm:-mx-6 px-4 sm:px-6">
+              <Code className="block text-xs sm:text-sm break-all">{appWallet.stakeScriptCbor}</Code>
+            </div>
+          </div>
+        )}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
 export default function InspectScript({ appWallet }: { appWallet: Wallet }) {
   return (
-    <CardUI title="Native Script" cardClassName="col-span-2">
-      <RowLabelInfo
-        label="Native Script"
-        value={<Code>{JSON.stringify(appWallet.nativeScript, null, 2)}</Code>}
-      />
-      <RowLabelInfo
-        label="Script CBOR"
-        value={<Code>{appWallet.scriptCbor}</Code>}
-      />
-    </CardUI>
+    <div className="col-span-2">
+      <NativeScriptSection appWallet={appWallet} />
+    </div>
   );
 }
diff --git a/src/components/pages/wallet/info/migrate-wallet.tsx b/src/components/pages/wallet/info/migrate-wallet.tsx
index 675723bc..7b3c9e70 100644
--- a/src/components/pages/wallet/info/migrate-wallet.tsx
+++ b/src/components/pages/wallet/info/migrate-wallet.tsx
@@ -36,11 +36,11 @@ const MigrationProgress = ({
   ];
 
   return (
-    <div className="mb-8 p-6 bg-gradient-to-r from-primary/5 to-primary/10 rounded-lg border border-primary/20">
+    <div className="mb-8 p-6 bg-gradient-to-r from-primary/5 to-primary/10 rounded-lg border border-primary/10">
       <div className="flex items-center justify-between mb-6">
         <h3 className="text-lg font-semibold">Migration Progress</h3>
         <div className="flex items-center gap-3">
-          <span className="text-sm text-muted-foreground bg-background px-3 py-1 rounded-full border">
+          <span className="text-sm text-muted-foreground bg-background px-3 py-1 rounded-full border border-border/30">
             Step {currentStep + 1} of {totalSteps}
           </span>
           <Button
@@ -658,7 +658,7 @@ export function MigrateWallet({ appWallet }: { appWallet: Wallet }) {
         cardClassName="col-span-2"
       >
         <div className="space-y-4">
-          <Alert className="border-green-200 bg-green-50">
+          <Alert className="border-green-200/50 bg-green-50">
             <CheckCircle className="h-4 w-4 text-green-600" />
             <AlertDescription className="text-green-800">
               Migration successfully aborted. All wallets, migration records, and references have been removed. You can start a new migration when ready.
@@ -689,7 +689,7 @@ export function MigrateWallet({ appWallet }: { appWallet: Wallet }) {
     >
       <div className="space-y-4">
         {(appWallet as any).migrationTargetWalletId || migrationState.newWalletId ? (
-          <Alert className="border-blue-200 bg-blue-50">
+          <Alert className="border-blue-200/50 bg-blue-50">
             <AlertCircle className="h-4 w-4 text-blue-600" />
             <AlertDescription className="text-blue-800">
               <strong>Migration In Progress:</strong> You have an ongoing migration. Click "Continue Migration" to resume where you left off.
@@ -710,35 +710,35 @@ export function MigrateWallet({ appWallet }: { appWallet: Wallet }) {
         )}
 
         <div className="space-y-3">
-          <div className="flex items-center gap-3 p-3 border rounded-lg">
+          <div className="flex items-center gap-3 p-3 border border-border/30 rounded-lg">
             <div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-sm font-medium">
               1
             </div>
             <span className="text-sm">Pre-checks (DRep, staking, pending transactions)</span>
           </div>
           
-          <div className="flex items-center gap-3 p-3 border rounded-lg">
+          <div className="flex items-center gap-3 p-3 border border-border/30 rounded-lg">
             <div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-sm font-medium">
               2
             </div>
             <span className="text-sm">Create new wallet with updated configuration</span>
           </div>
           
-          <div className="flex items-center gap-3 p-3 border rounded-lg">
+          <div className="flex items-center gap-3 p-3 border border-border/30 rounded-lg">
             <div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-sm font-medium">
               3
             </div>
             <span className="text-sm">Setup proxy for the new wallet (optional)</span>
           </div>
           
-          <div className="flex items-center gap-3 p-3 border rounded-lg">
+          <div className="flex items-center gap-3 p-3 border border-border/30 rounded-lg">
             <div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-sm font-medium">
               4
             </div>
             <span className="text-sm">Transfer all funds to the new wallet</span>
           </div>
           
-          <div className="flex items-center gap-3 p-3 border rounded-lg">
+          <div className="flex items-center gap-3 p-3 border border-border/30 rounded-lg">
             <div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-sm font-medium">
               5
             </div>
diff --git a/src/components/pages/wallet/info/migration/FundTransferStep.tsx b/src/components/pages/wallet/info/migration/FundTransferStep.tsx
index 1fd983d9..33bdb757 100644
--- a/src/components/pages/wallet/info/migration/FundTransferStep.tsx
+++ b/src/components/pages/wallet/info/migration/FundTransferStep.tsx
@@ -302,7 +302,7 @@ export default function FundTransferStep({
         description="Unable to load the new wallet information"
         cardClassName="col-span-2"
       >
-        <Alert className="border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-900/20">
+        <Alert className="border-red-200/50 bg-red-50 dark:border-red-800/50 dark:bg-red-900/20">
           <AlertCircle className="h-4 w-4 text-red-600 dark:text-red-400" />
           <AlertDescription className="text-red-800 dark:text-red-200">
             The new wallet could not be loaded. This might happen if the wallet
@@ -366,7 +366,7 @@ export default function FundTransferStep({
         description="Funds to be transferred"
       >
         <div className="space-y-4">
-          <div className="flex items-center justify-between rounded-lg border p-4">
+          <div className="flex items-center justify-between rounded-lg border border-border/30 p-4">
             <div>
               <h4 className="font-medium">ADA Balance</h4>
               <p className="text-sm text-muted-foreground">Native currency</p>
@@ -386,7 +386,7 @@ export default function FundTransferStep({
               {nonAdaAssets.map((asset, index) => (
                 <div
                   key={index}
-                  className="flex items-center justify-between rounded-lg border p-3"
+                  className="flex items-center justify-between rounded-lg border border-border/30 p-3"
                 >
                   <div>
                     <p className="font-medium">{asset.unit}</p>
@@ -403,7 +403,7 @@ export default function FundTransferStep({
           )}
 
           {currentUtxos.length === 0 && (
-            <div className="flex items-center gap-3 rounded-lg border bg-blue-50 p-4 dark:bg-blue-900/20">
+            <div className="flex items-center gap-3 rounded-lg border border-border/30 bg-blue-50 p-4 dark:bg-blue-900/20">
               <CheckCircle className="h-5 w-5 text-blue-500 dark:text-blue-400" />
               <div>
                 <h4 className="font-medium">No Funds to Transfer</h4>
@@ -419,7 +419,7 @@ export default function FundTransferStep({
       {/* New Wallet Information */}
       <CardUI title="New Wallet" description="Destination for the funds">
         <div className="space-y-4">
-          <div className="rounded-lg border p-4">
+          <div className="rounded-lg border border-border/30 p-4">
             <h4 className="mb-2 font-medium">Wallet Details</h4>
             <div className="space-y-2 text-sm">
               <div className="flex justify-between">
@@ -458,7 +458,7 @@ export default function FundTransferStep({
           title="Transfer Complete"
           description="Fund transfer has been initiated"
         >
-          <div className="flex items-center gap-3 rounded-lg border bg-green-50 p-4 dark:bg-green-900/20">
+          <div className="flex items-center gap-3 rounded-lg border border-border/30 bg-green-50 p-4 dark:bg-green-900/20">
             <CheckCircle className="h-5 w-5 text-green-500 dark:text-green-400" />
             <div>
               <h4 className="font-medium">Transfer Initiated</h4>
@@ -477,7 +477,7 @@ export default function FundTransferStep({
         description="Complete the fund transfer"
         cardClassName="col-span-2"
       >
-        <div className="flex gap-3 border-t pt-4">
+        <div className="flex gap-3 border-t border-border/30 pt-4">
           <Button variant="outline" onClick={onBack} className="flex-1">
             <ArrowLeft className="mr-2 h-4 w-4" />
             Back to Proxy Setup
diff --git a/src/components/pages/wallet/info/migration/MigrationCompleteStep.tsx b/src/components/pages/wallet/info/migration/MigrationCompleteStep.tsx
index fc043358..07b429b0 100644
--- a/src/components/pages/wallet/info/migration/MigrationCompleteStep.tsx
+++ b/src/components/pages/wallet/info/migration/MigrationCompleteStep.tsx
@@ -147,7 +147,7 @@ export default function MigrationCompleteStep({
             </div>
           )}
 
-          <Alert className="border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-900/20">
+          <Alert className="border-blue-200/50 bg-blue-50 dark:border-blue-800/50 dark:bg-blue-900/20">
             <AlertCircle className="h-4 w-4 text-blue-600 dark:text-blue-400" />
             <AlertDescription className="text-blue-800 dark:text-blue-200">
               <strong>Important:</strong> Your old wallet will be archived after migration completion. 
diff --git a/src/components/pages/wallet/info/migration/MigrationPreChecks.tsx b/src/components/pages/wallet/info/migration/MigrationPreChecks.tsx
index d794b6fc..80780490 100644
--- a/src/components/pages/wallet/info/migration/MigrationPreChecks.tsx
+++ b/src/components/pages/wallet/info/migration/MigrationPreChecks.tsx
@@ -176,13 +176,13 @@ export default function MigrationPreChecks({
   const getStatusColor = (status: PreCheckResult["status"]) => {
     switch (status) {
       case "success":
-        return "border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-900/20";
+        return "border-green-200/50 bg-green-50 dark:border-green-800/50 dark:bg-green-900/20";
       case "warning":
-        return "border-yellow-200 bg-yellow-50 dark:border-yellow-800 dark:bg-yellow-900/20";
+        return "border-yellow-200/50 bg-yellow-50 dark:border-yellow-800/50 dark:bg-yellow-900/20";
       case "error":
-        return "border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-900/20";
+        return "border-red-200/50 bg-red-50 dark:border-red-800/50 dark:bg-red-900/20";
       default:
-        return "border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800";
+        return "border-gray-200/50 bg-gray-50 dark:border-gray-700/50 dark:bg-gray-800";
     }
   };
 
@@ -237,7 +237,7 @@ export default function MigrationPreChecks({
 
         {/* Summary Alert */}
         {allChecksComplete && (hasWarnings || hasErrors) && (
-          <Alert className={hasErrors ? "border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-900/20" : "border-yellow-200 bg-yellow-50 dark:border-yellow-800 dark:bg-yellow-900/20"}>
+          <Alert className={hasErrors ? "border-red-200/50 bg-red-50 dark:border-red-800/50 dark:bg-red-900/20" : "border-yellow-200/50 bg-yellow-50 dark:border-yellow-800/50 dark:bg-yellow-900/20"}>
             <AlertCircle className="h-4 w-4" />
             <AlertDescription>
               {hasErrors 
@@ -249,7 +249,7 @@ export default function MigrationPreChecks({
         )}
 
         {/* Action Buttons */}
-        <div className="flex gap-3 pt-6 border-t">
+        <div className="flex gap-3 pt-6 border-t border-border/30">
           <Button
             variant="outline"
             onClick={onCancel}
diff --git a/src/components/pages/wallet/info/migration/NewWalletCreationStep.tsx b/src/components/pages/wallet/info/migration/NewWalletCreationStep.tsx
index 83149bff..35721f0c 100644
--- a/src/components/pages/wallet/info/migration/NewWalletCreationStep.tsx
+++ b/src/components/pages/wallet/info/migration/NewWalletCreationStep.tsx
@@ -114,7 +114,7 @@ export default function NewWalletCreationStep({
         {/* Info Messages */}
         <div className="space-y-3">
           {!walletFlow.newWalletId && (
-            <div className="flex items-start gap-2 p-4 bg-blue-50 border border-blue-200 rounded-lg">
+            <div className="flex items-start gap-2 p-4 bg-blue-50 border border-blue-200/50 rounded-lg">
               <svg className="w-5 h-5 mt-0.5 flex-shrink-0 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
               </svg>
@@ -134,7 +134,7 @@ export default function NewWalletCreationStep({
           </div>
 
           {walletFlow.newWalletId && appWallet.migrationTargetWalletId && (
-            <div className="flex items-start gap-2 p-4 bg-amber-50 border border-amber-200 rounded-lg">
+            <div className="flex items-start gap-2 p-4 bg-amber-50 border border-amber-200/50 rounded-lg">
               <svg className="w-5 h-5 mt-0.5 flex-shrink-0 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
               </svg>
diff --git a/src/components/pages/wallet/info/migration/ProxySetupStep.tsx b/src/components/pages/wallet/info/migration/ProxySetupStep.tsx
index 06bcf0cf..f9928f9e 100644
--- a/src/components/pages/wallet/info/migration/ProxySetupStep.tsx
+++ b/src/components/pages/wallet/info/migration/ProxySetupStep.tsx
@@ -105,7 +105,7 @@ export default function ProxySetupStep({
       >
         <div className="space-y-4">
           {hasExistingProxy ? (
-            <Alert className="border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-900/20">
+            <Alert className="border-blue-200/50 bg-blue-50 dark:border-blue-800/50 dark:bg-blue-900/20">
               <CheckCircle className="h-4 w-4 text-blue-600 dark:text-blue-400" />
               <AlertDescription className="text-blue-800 dark:text-blue-200">
                 Your current wallet has an existing proxy configuration. 
@@ -113,7 +113,7 @@ export default function ProxySetupStep({
               </AlertDescription>
             </Alert>
           ) : (
-            <Alert className="border-yellow-200 bg-yellow-50 dark:border-yellow-800 dark:bg-yellow-900/20">
+            <Alert className="border-yellow-200/50 bg-yellow-50 dark:border-yellow-800/50 dark:bg-yellow-900/20">
               <AlertCircle className="h-4 w-4 text-yellow-600 dark:text-yellow-400" />
               <AlertDescription className="text-yellow-800 dark:text-yellow-200">
                 No existing proxy found. You can optionally create a proxy for your new wallet 
diff --git a/src/components/pages/wallet/info/migration/ProxyTransferStep.tsx b/src/components/pages/wallet/info/migration/ProxyTransferStep.tsx
index 6b04df8d..c3fc1f6c 100644
--- a/src/components/pages/wallet/info/migration/ProxyTransferStep.tsx
+++ b/src/components/pages/wallet/info/migration/ProxyTransferStep.tsx
@@ -110,7 +110,7 @@ export default function ProxyTransferStep({
           {hasProxies ? (
             <div className="space-y-3">
               {(existingProxies ?? []).map((proxy, index) => (
-                <div key={proxy.id} className="flex items-center justify-between p-4 border rounded-lg">
+                <div key={proxy.id} className="flex items-center justify-between p-4 border border-border/30 rounded-lg">
                   <div className="flex items-center gap-3">
                     <Users className="h-5 w-5 text-blue-500" />
                     <div>
@@ -128,7 +128,7 @@ export default function ProxyTransferStep({
               ))}
             </div>
           ) : (
-            <div className="flex items-center gap-3 p-4 border rounded-lg bg-gray-50 dark:bg-gray-800">
+            <div className="flex items-center gap-3 p-4 border border-border/30 rounded-lg bg-gray-50 dark:bg-gray-800">
               <CheckCircle className="h-5 w-5 text-gray-500 dark:text-gray-400" />
               <div>
                 <h4 className="font-medium">No Proxies Found</h4>
@@ -147,7 +147,7 @@ export default function ProxyTransferStep({
         description="Destination for the proxy registrations"
       >
         <div className="space-y-4">
-          <div className="p-4 border rounded-lg">
+          <div className="p-4 border border-border/30 rounded-lg">
             <h4 className="font-medium mb-2">Transfer Details</h4>
             <div className="space-y-2 text-sm">
               <div className="flex justify-between">
@@ -173,7 +173,7 @@ export default function ProxyTransferStep({
           title="Transfer Complete"
           description="Proxy registrations have been transferred"
         >
-          <div className="flex items-center gap-3 p-4 border rounded-lg bg-green-50 dark:bg-green-900/20">
+          <div className="flex items-center gap-3 p-4 border border-border/30 rounded-lg bg-green-50 dark:bg-green-900/20">
             <CheckCircle className="h-5 w-5 text-green-500 dark:text-green-400" />
             <div>
               <h4 className="font-medium">Proxies Transferred</h4>
@@ -192,7 +192,7 @@ export default function ProxyTransferStep({
         description="Complete the proxy transfer"
         cardClassName="col-span-2"
       >
-        <div className="flex gap-3 border-t pt-4">
+        <div className="flex gap-3 border-t border-border/30 pt-4">
           <Button variant="outline" onClick={onBack} className="flex-1">
             <ArrowLeft className="mr-2 h-4 w-4" />
             Back to Fund Transfer
diff --git a/src/components/pages/wallet/info/proxy-control.tsx b/src/components/pages/wallet/info/proxy-control.tsx
index e1c0c240..3a9c2707 100644
--- a/src/components/pages/wallet/info/proxy-control.tsx
+++ b/src/components/pages/wallet/info/proxy-control.tsx
@@ -12,21 +12,23 @@ import { ProxyControl } from "@/components/multisig/proxy";
  */
 function ProxyControlCard() {
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          <Settings className="h-5 w-5" />
-          Proxy Control
-          <Badge variant="secondary" className="ml-auto">
+    <Card className="col-span-2">
+      <CardHeader className="px-4 sm:px-6 pt-4 sm:pt-6 pb-2">
+        <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-2">
+          <CardTitle className="flex items-center gap-2 text-lg sm:text-xl">
+            <Settings className="h-5 w-5" />
+            Proxy Control
+          </CardTitle>
+          <Badge variant="secondary" className="self-start sm:ml-auto">
             <Wallet className="h-3 w-3 mr-1" />
             Advanced
           </Badge>
-        </CardTitle>
-        <CardDescription>
+        </div>
+        <CardDescription className="text-xs sm:text-sm mt-2">
           Manage automated transactions through proxy contracts with auth token control
         </CardDescription>
       </CardHeader>
-      <CardContent>
+      <CardContent className="px-4 sm:px-6 pb-4 sm:pb-6">
         <ProxyControl />
       </CardContent>
     </Card>
diff --git a/src/components/pages/wallet/info/register-wallet.tsx b/src/components/pages/wallet/info/register-wallet.tsx
index b4a526c6..565fbd56 100644
--- a/src/components/pages/wallet/info/register-wallet.tsx
+++ b/src/components/pages/wallet/info/register-wallet.tsx
@@ -14,15 +14,14 @@ export function RegisterWallet({
   //const isRegistered // lookup keys on endpoint 
 
   return (
-
-
     <CardUI
       title="Register Wallet"
       description="Register your Wallet through a CIP-0146 registration transaction."
       cardClassName="col-span-2"
     >
-
-      <>Coming soon.</>
+      <div className="p-4 bg-muted/50 rounded-lg border border-border/30">
+        <p className="text-sm text-muted-foreground">Coming soon.</p>
+      </div>
     </CardUI>
   );
 }
diff --git a/src/components/pages/wallet/info/signers/card-edit-signers.tsx b/src/components/pages/wallet/info/signers/card-edit-signers.tsx
index 5e426a39..fb35f2a3 100644
--- a/src/components/pages/wallet/info/signers/card-edit-signers.tsx
+++ b/src/components/pages/wallet/info/signers/card-edit-signers.tsx
@@ -170,10 +170,10 @@ export default function EditSigners({
             : (appWallet as any).signersDRepKeys?.[index] ?? "";
 
           return (
-            <div key={index} className="border rounded-lg p-3 sm:p-4 bg-card">
+            <div key={index} className="border border-border/30 rounded-lg p-3 sm:p-4 bg-card">
               <div className="space-y-3 sm:space-y-4">
                 {/* Signer's Name at the top with user icon */}
-                <div className="flex items-center gap-2 sm:gap-3 pb-2 sm:pb-3 border-b">
+                <div className="flex items-center gap-2 sm:gap-3 pb-2 sm:pb-3 border-b border-border/30">
                   <div className="flex-shrink-0 w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-primary/10 flex items-center justify-center">
                     <User className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-primary" />
                   </div>
@@ -195,7 +195,7 @@ export default function EditSigners({
                 <div className="space-y-2">
                   <Label className="text-xs sm:text-sm font-medium">Address</Label>
                   <div className="flex items-start gap-2">
-                    <div className="flex-1 p-2 sm:p-3 rounded-md border bg-muted/50 font-mono text-xs sm:text-sm break-all">
+                    <div className="flex-1 p-2 sm:p-3 rounded-md border border-border/30 bg-muted/50 font-mono text-xs sm:text-sm break-all">
                       {signer ? getFirstAndLast(signer) : "No address"}
                     </div>
                     {signer && (
@@ -221,8 +221,8 @@ export default function EditSigners({
                   <div className="flex items-start gap-2">
                     <div className={`flex-1 p-2 sm:p-3 rounded-md border font-mono text-xs sm:text-sm break-all ${
                       newStakekey(index) 
-                        ? "bg-green-50 border-green-500 text-green-700" 
-                        : "bg-muted/50"
+                        ? "bg-green-50 border-green-500/50 text-green-700" 
+                        : "bg-muted/50 border-border/30"
                     }`}>
                       {stakeAddr ? getFirstAndLast(stakeAddr) : "No stake address"}
                     </div>
@@ -255,8 +255,8 @@ export default function EditSigners({
                   <div className="flex items-start gap-2">
                     <div className={`flex-1 p-2 sm:p-3 rounded-md border font-mono text-xs sm:text-sm break-all ${
                       newDRepKey(index) 
-                        ? "bg-green-50 border-green-500 text-green-700" 
-                        : "bg-muted/50"
+                        ? "bg-green-50 border-green-500/50 text-green-700" 
+                        : "bg-muted/50 border-border/30"
                     }`}>
                       {drepKey ? getFirstAndLast(drepKey) : "No DRep key"}
                     </div>
@@ -287,17 +287,17 @@ export default function EditSigners({
           );
         })}
       </div>
-      {drepInfo?.active && (
-        <div className="mt-4 sm:mt-6 p-3 sm:p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
+      {drepInfo?.active && !updatedDRepKeys.every(key => key && key.length > 0) && (
+        <div className="mt-4 sm:mt-6 p-3 sm:p-4 bg-yellow-50 dark:bg-yellow-950/20 border border-yellow-200/50 dark:border-yellow-800/50 rounded-lg">
           <div className="flex items-start gap-2 sm:gap-3">
-            <div className="flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-yellow-600 mt-0.5">
+            <div className="flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-yellow-600 dark:text-yellow-400 mt-0.5">
               ⚠️
             </div>
             <div className="min-w-0">
-              <p className="text-xs sm:text-sm font-medium text-yellow-800 mb-1">
+              <p className="text-xs sm:text-sm font-medium text-yellow-800 dark:text-yellow-200 mb-1">
                 DRep is currently registered
               </p>
-              <p className="text-xs sm:text-sm text-yellow-700 break-words">
+              <p className="text-xs sm:text-sm text-yellow-700 dark:text-yellow-300 break-words">
                 You must deregister the DRep before updating DRep keys. Go to the Governance section to deregister your DRep first.
               </p>
             </div>
diff --git a/src/components/pages/wallet/info/signers/card-show-signers.tsx b/src/components/pages/wallet/info/signers/card-show-signers.tsx
index 2156cd1f..f72dc493 100644
--- a/src/components/pages/wallet/info/signers/card-show-signers.tsx
+++ b/src/components/pages/wallet/info/signers/card-show-signers.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useMemo, useState, useEffect } from "react";
 import { useWallet } from "@meshsdk/react";
 import { checkSignature, generateNonce } from "@meshsdk/core";
 import { getFirstAndLast } from "@/utils/strings";
@@ -12,15 +12,60 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import DiscordIcon from "@/components/common/discordIcon";
-import DiscordImage from "@/components/common/discordImage";
 import { Button } from "@/components/ui/button";
 import { Wallet } from "@/types/wallet";
+import Image from "next/image";
+import getDiscordAvatar from "@/lib/discord/getDiscordAvatar";
 
 interface ShowSignersProps {
   appWallet: Wallet;
 }
 
+interface ProfileIconWithDiscordProps {
+  discordId?: string;
+  size?: "sm" | "md";
+}
+
+function ProfileIconWithDiscord({ discordId, size = "md" }: ProfileIconWithDiscordProps) {
+  const [discordImageUrl, setDiscordImageUrl] = useState<string | null>(null);
+  const [isLoadingDiscord, setIsLoadingDiscord] = useState(false);
+  
+  const iconSize = size === "sm" ? "w-6 h-6" : "w-7 h-7";
+  const imageSize = size === "sm" ? 24 : 28;
+
+  useEffect(() => {
+    if (discordId) {
+      setIsLoadingDiscord(true);
+      getDiscordAvatar(discordId)
+        .then((url) => {
+          setDiscordImageUrl(url);
+          setIsLoadingDiscord(false);
+        })
+        .catch(() => {
+          setIsLoadingDiscord(false);
+        });
+    } else {
+      setDiscordImageUrl(null);
+    }
+  }, [discordId]);
+
+  return (
+    <div className={`${iconSize} rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 relative overflow-hidden`}>
+      {discordImageUrl && !isLoadingDiscord ? (
+        <Image
+          src={discordImageUrl}
+          width={imageSize}
+          height={imageSize}
+          alt="Discord avatar"
+          className="rounded-full"
+        />
+      ) : (
+        <User className={`${size === "sm" ? "w-3 h-3" : "w-3.5 h-3.5"} text-primary`} />
+      )}
+    </div>
+  );
+}
+
 export default function ShowSigners({ appWallet }: ShowSignersProps) {
   const { wallet, connected } = useWallet();
   const userAddress = useUserStore((state) => state.userAddress);
@@ -135,14 +180,12 @@ export default function ShowSigners({ appWallet }: ShowSignersProps) {
       const isCurrentUser = userAddress && address === userAddress;
 
       return (
-        <div key={address} className="p-3 sm:p-4 border rounded-lg bg-card">
+        <div key={address} className="p-3 sm:p-4 border border-border/30 rounded-lg bg-card">
           {/* Mobile Layout */}
           <div className="flex flex-col gap-3 sm:hidden">
             {/* Header */}
             <div className="flex items-center gap-2">
-              <div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
-                <User className="w-3 h-3 text-primary" />
-              </div>
+              <ProfileIconWithDiscord discordId={discordId} size="sm" />
               <div className="flex-1 min-w-0">
                 <h3 className="text-sm font-medium truncate">{signerName}</h3>
               </div>
@@ -198,24 +241,11 @@ export default function ShowSigners({ appWallet }: ShowSignersProps) {
                   Verify
                 </Button>
               )}
-              {discordId ? (
-                <DiscordImage discordId={discordId} />
-              ) : !isLoadingDiscordIds && isCurrentUser ? (
+              {!discordId && !isLoadingDiscordIds && isCurrentUser && (
                 <Button size="sm" onClick={() => handleConnectDiscord()} className="h-8 px-3 text-xs flex-1">
                   Connect Discord
                 </Button>
-              ) : currentUserDiscordId ? (
-                <TooltipProvider>
-                  <Tooltip>
-                    <TooltipTrigger className="text-gray-500">
-                      <DiscordIcon />
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      <p>Discord not connected</p>
-                    </TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
-              ) : null}
+              )}
             </div>
           </div>
 
@@ -223,9 +253,7 @@ export default function ShowSigners({ appWallet }: ShowSignersProps) {
           <div className="hidden sm:flex items-center justify-between">
             <div className="flex items-center gap-3 flex-1 min-w-0">
               {/* User Icon */}
-              <div className="flex-shrink-0 w-7 h-7 rounded-full bg-primary/10 flex items-center justify-center">
-                <User className="w-3.5 h-3.5 text-primary" />
-              </div>
+              <ProfileIconWithDiscord discordId={discordId} size="md" />
               
               {/* Signer Info */}
               <div className="flex-1 min-w-0">
@@ -285,25 +313,12 @@ export default function ShowSigners({ appWallet }: ShowSignersProps) {
                 </Button>
               )}
 
-              {/* Discord Status */}
-              {discordId ? (
-                <DiscordImage discordId={discordId} />
-              ) : !isLoadingDiscordIds && isCurrentUser ? (
+              {/* Connect Discord Button */}
+              {!discordId && !isLoadingDiscordIds && isCurrentUser && (
                 <Button size="sm" onClick={() => handleConnectDiscord()} className="h-8 px-3 text-sm">
                   Connect Discord
                 </Button>
-              ) : currentUserDiscordId ? (
-                <TooltipProvider>
-                  <Tooltip>
-                    <TooltipTrigger className="text-gray-500">
-                      <DiscordIcon />
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      <p>Discord not connected</p>
-                    </TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
-              ) : null}
+              )}
             </div>
           </div>
         </div>
diff --git a/src/components/pages/wallet/info/upgrade-governance-wallet.tsx b/src/components/pages/wallet/info/upgrade-governance-wallet.tsx
index 24ca1057..cd73c029 100644
--- a/src/components/pages/wallet/info/upgrade-governance-wallet.tsx
+++ b/src/components/pages/wallet/info/upgrade-governance-wallet.tsx
@@ -24,29 +24,38 @@ export function UpgradeGovernanceWallet({
       description="Add a drep key script to your multisig Wallet."
       cardClassName="col-span-2"
     >
-      {!mWallet.drepEnabled() && (!drepInfo || !drepInfo.active) && (
-        <div>
-          Not all drep keys have been added. Click Edit Signers to add your
-          drep key!
-        </div>
-      )}
-      {!mWallet.drepEnabled() && drepInfo && drepInfo.active && (
-        <div>
-          ⚠️ DRep is currently registered. You must deregister the DRep before adding new DRep keys.
-          Go to the Governance section to deregister your DRep first.
-        </div>
-      )}
-      {mWallet.drepEnabled() && drepInfo && !drepInfo.active && (
-        <div>
-          DRep keys have been added to the wallet, but the DRep is not yet registered. 
-          Go to the Governance section to register your DRep.
-        </div>
-      )}
-      {mWallet.drepEnabled() && drepInfo && drepInfo.active && (
-        <div>
-          ✅ DRep keys have been added and the DRep is registered. Governance is ready!
-        </div>
-      )}
+      <div className="space-y-4">
+        {!mWallet.drepEnabled() && (!drepInfo || !drepInfo.active) && (
+          <div className="p-4 bg-blue-50 dark:bg-blue-950/20 rounded-lg border border-blue-200/50 dark:border-blue-800/50">
+            <p className="text-sm text-blue-800 dark:text-blue-200">
+              Not all drep keys have been added. Click Edit Signers to add your drep key!
+            </p>
+          </div>
+        )}
+        {!mWallet.drepEnabled() && drepInfo && drepInfo.active && (
+          <div className="p-4 bg-yellow-50 dark:bg-yellow-950/20 rounded-lg border border-yellow-200/50 dark:border-yellow-800/50">
+            <p className="text-sm text-yellow-800 dark:text-yellow-200">
+              <span className="font-semibold">⚠️ DRep is currently registered.</span> You must deregister the DRep before adding new DRep keys.
+              Go to the Governance section to deregister your DRep first.
+            </p>
+          </div>
+        )}
+        {mWallet.drepEnabled() && drepInfo && !drepInfo.active && (
+          <div className="p-4 bg-amber-50 dark:bg-amber-950/20 rounded-lg border border-amber-200/50 dark:border-amber-800/50">
+            <p className="text-sm text-amber-800 dark:text-amber-200">
+              DRep keys have been added to the wallet, but the DRep is not yet registered. 
+              Go to the Governance section to register your DRep.
+            </p>
+          </div>
+        )}
+        {mWallet.drepEnabled() && drepInfo && drepInfo.active && (
+          <div className="p-4 bg-green-50 dark:bg-green-950/20 rounded-lg border border-green-200/50 dark:border-green-800/50">
+            <p className="text-sm text-green-800 dark:text-green-200">
+              <span className="font-semibold">✅ Governance Ready!</span> DRep keys have been added and the DRep is registered.
+            </p>
+          </div>
+        )}
+      </div>
     </CardUI>
   );
 }
diff --git a/src/components/pages/wallet/info/upgrade-staking-wallet.tsx b/src/components/pages/wallet/info/upgrade-staking-wallet.tsx
index 777f6d46..417fe566 100644
--- a/src/components/pages/wallet/info/upgrade-staking-wallet.tsx
+++ b/src/components/pages/wallet/info/upgrade-staking-wallet.tsx
@@ -68,32 +68,43 @@ export function UpgradeStakingWallet({
   return (
     <CardUI
       title="Upgrade Wallet"
-      description="Add a stake key script to your multisig Wallet and tranfer all funds to new Address."
+      description="Add a stake key script to your multisig Wallet and transfer all funds to new Address."
       cardClassName="col-span-2"
     >
-      {!mWallet.stakingEnabled() && (
-        <div>
-          Not all stake keys have been added. Click Edit Signers to add your
-          stake key!
-        </div>
-      )}
+      <div className="space-y-4">
+        {!mWallet.stakingEnabled() && (
+          <div className="p-4 bg-blue-50 dark:bg-blue-950/20 rounded-lg border border-blue-200/50 dark:border-blue-800/50">
+            <p className="text-sm text-blue-800 dark:text-blue-200">
+              Not all stake keys have been added. Click Edit Signers to add your stake key!
+            </p>
+          </div>
+        )}
 
-      {mWallet.stakingEnabled() && (
-        <div>
-          Transfer all funds to new Address.
-          <RowLabelInfo
-            label="Old Address"
-            value={appWallet.address}
-            copyString={appWallet.address}
-          />
-          {balance} Ada remaining on old Address.
-          <RowLabelInfo
-            label="New Stakable Address"
-            value={newAddress}
-            copyString={newAddress}
-          />
-        </div>
-      )}
+        {mWallet.stakingEnabled() && (
+          <div className="space-y-4">
+            <p className="text-sm text-muted-foreground">
+              Transfer all funds to the new stakable address.
+            </p>
+            <div className="space-y-3">
+              <RowLabelInfo
+                label="Old Address"
+                value={appWallet.address}
+                copyString={appWallet.address}
+              />
+              <div className="p-3 bg-muted/50 rounded-lg">
+                <p className="text-sm font-medium mb-1">Balance Remaining</p>
+                <p className="text-lg font-semibold">{balance} ADA</p>
+                <p className="text-xs text-muted-foreground mt-1">on old address</p>
+              </div>
+              <RowLabelInfo
+                label="New Address"
+                value={newAddress || ""}
+                copyString={newAddress || ""}
+              />
+            </div>
+          </div>
+        )}
+      </div>
     </CardUI>
   );
 }
diff --git a/src/components/ui/card-content.tsx b/src/components/ui/card-content.tsx
index 9dcd787e..bdab50f5 100644
--- a/src/components/ui/card-content.tsx
+++ b/src/components/ui/card-content.tsx
@@ -17,9 +17,9 @@ export default function CardUI({
   headerDom?: ReactNode;
 }) {
   return (
-    <Card className={`self-start w-full ${cardClassName}`}>
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 px-4 sm:px-6 pt-4 sm:pt-6">
-        <CardTitle className="text-lg sm:text-xl font-medium pr-2">{title}</CardTitle>
+    <Card className={`self-start w-full ${cardClassName || ""}`}>
+      <CardHeader className="flex flex-row items-start sm:items-center justify-between space-y-0 pb-2 px-4 sm:px-6 pt-4 sm:pt-6 gap-2">
+        <CardTitle className="text-lg sm:text-xl font-medium pr-2 flex-1 min-w-0">{title}</CardTitle>
         {headerDom && <div className="flex-shrink-0">{headerDom}</div>}
         {icon && (
           <>
@@ -34,11 +34,11 @@ export default function CardUI({
         )}
       </CardHeader>
       <CardContent className="px-4 sm:px-6 pb-4 sm:pb-6">
-        <div className="mt-1 flex flex-col gap-2">
+        <div className="mt-1 flex flex-col gap-3 sm:gap-2">
           {description && (
-            <p className="text-xs sm:text-sm text-muted-foreground">{description}</p>
+            <div className="text-xs sm:text-sm text-muted-foreground">{description}</div>
           )}
-          <div className="mt-1 flex flex-col gap-2">{children}</div>
+          <div className="flex flex-col gap-2">{children}</div>
         </div>
       </CardContent>
     </Card>
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 86ef59de..d6785885 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-xl border border-zinc-200 bg-white text-zinc-950 shadow dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50 overflow-hidden",
+      "rounded-xl border border-zinc-200/50 bg-white text-zinc-950 shadow dark:border-zinc-800/50 dark:bg-zinc-950 dark:text-zinc-50 overflow-hidden",
       className
     )}
     {...props}
diff --git a/src/components/ui/code.tsx b/src/components/ui/code.tsx
index 388bc849..f1e778ec 100644
--- a/src/components/ui/code.tsx
+++ b/src/components/ui/code.tsx
@@ -1,7 +1,8 @@
-export default function Code({children}:{
+export default function Code({children, className}:{
   children: React.ReactNode;
+  className?: string;
 }) {
   return (
-    <pre className="break-all whitespace-pre-wrap p-2 text-sm text-muted-foreground">{children}</pre>
+    <pre className={`break-all whitespace-pre-wrap p-3 sm:p-4 bg-muted/50 rounded-md border border-border/30 text-xs sm:text-sm text-muted-foreground font-mono overflow-x-auto ${className || ""}`}>{children}</pre>
   )
 };
diff --git a/src/components/ui/row-label-info.tsx b/src/components/ui/row-label-info.tsx
index c3bb73c2..01d3844d 100644
--- a/src/components/ui/row-label-info.tsx
+++ b/src/components/ui/row-label-info.tsx
@@ -19,13 +19,13 @@ export default function RowLabelInfo({
 }) {
   const { toast } = useToast();
   return (
-    <div className="flex items-center gap-4">
-      <div className="flex max-w-full items-center justify-center gap-2">
-        {label && (
-          <div className="text-nowrap text-sm font-medium leading-none min-w-20">
-            {label}
-          </div>
-        )}
+    <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
+      {label && (
+        <div className="text-sm font-medium leading-none min-w-[80px] sm:min-w-20 text-muted-foreground">
+          {label}
+        </div>
+      )}
+      <div className="flex-1 min-w-0 flex items-center gap-2">
         {copyString ? (
           <Button
             variant="ghost"
@@ -37,7 +37,7 @@ export default function RowLabelInfo({
                 duration: 5000,
               });
             }}
-            className="m-0 h-auto max-w-full justify-start truncate p-0"
+            className="m-0 h-auto max-w-full justify-start truncate p-0 text-left font-mono text-xs sm:text-sm"
           >
             <Value
               value={value}
@@ -69,7 +69,7 @@ function Value({
 }) {
   return (
     <div
-      className={`${className ? className : `max-w-full ${allowOverflow ?? "overflow-hidden truncate whitespace-nowrap"} text-sm text-muted-foreground`}`}
+      className={`${className ? className : `max-w-full ${allowOverflow ? "break-words" : "overflow-hidden truncate whitespace-nowrap"} text-sm text-muted-foreground`}`}
     >
       {value}
     </div>