diff --git a/frontend/components/WalletConnectModal.tsx b/frontend/components/WalletConnectModal.tsx
index d39728b..0d9cff9 100644
--- a/frontend/components/WalletConnectModal.tsx
+++ b/frontend/components/WalletConnectModal.tsx
@@ -110,9 +110,12 @@ export function WalletConnectModal({
         <Dialog.Overlay className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm animate-overlay-in" />
 
         {/* Content */}
-        <Dialog.Content className="fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-gray-700/80 bg-gray-900/95 backdrop-blur-xl p-0 shadow-2xl animate-modal-in focus:outline-none">
+        <Dialog.Content className="fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-gray-600/50 bg-gray-900/80 backdrop-blur-2xl p-0 shadow-[0_0_50px_-12px_rgba(20,184,166,0.3)] animate-modal-in focus:outline-none">
+          {/* Glowing Aura Background */}
+          <div className="absolute -inset-1 rounded-2xl bg-gradient-to-r from-teal-500/20 to-blue-600/20 blur-xl z-[-1] opacity-70 pointer-events-none"></div>
+
           {/* Header gradient bar */}
-          <div className="h-1 w-full rounded-t-2xl bg-gradient-to-r from-teal-500 via-blue-600 to-indigo-500" />
+          <div className="h-1.5 w-full rounded-t-2xl bg-gradient-to-r from-teal-400 via-blue-500 to-indigo-500 shadow-[0_2px_10px_rgba(45,212,191,0.5)]" />
 
           <div className="p-6 space-y-5">
             {/* Close button */}
@@ -290,10 +293,10 @@ export function WalletConnectModal({
                 <button
                   onClick={handleConnect}
                   disabled={isConnecting}
-                  className="w-full group relative py-3 rounded-xl font-semibold text-white overflow-hidden transition-all duration-300 hover:scale-[1.02] active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="w-full group relative py-3.5 rounded-xl font-bold text-white overflow-hidden transition-all duration-300 hover:scale-[1.03] active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed shadow-[0_0_20px_rgba(20,184,166,0.15)] hover:shadow-[0_0_30px_rgba(20,184,166,0.4)]"
                 >
-                  <div className="absolute inset-0 bg-gradient-to-r from-teal-500 to-blue-700 transition-all duration-300 group-hover:from-teal-600 group-hover:to-blue-800" />
-                  <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-r from-teal-400/20 to-blue-600/20" />
+                  <div className="absolute inset-0 bg-gradient-to-r from-teal-500 via-blue-600 to-indigo-600 transition-all duration-300 group-hover:bg-gradient-to-l group-hover:scale-105" />
+                  <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-[radial-gradient(circle_at_center,rgba(255,255,255,0.2)_0%,transparent_100%)]" />
                   <span className="relative z-10 flex items-center justify-center gap-2">
                     {isConnecting ? (
                       <>
diff --git a/frontend/components/Web3StatusBar.tsx b/frontend/components/Web3StatusBar.tsx
index 7d69520..d547de6 100644
--- a/frontend/components/Web3StatusBar.tsx
+++ b/frontend/components/Web3StatusBar.tsx
@@ -45,28 +45,33 @@ export function Web3StatusBar() {
     `${addr.slice(0, 6)}...${addr.slice(-4)}`;
 
   return (
-    <div className="flex items-center gap-3 px-4 py-2 rounded-xl bg-gray-800/40 border border-gray-700/30 text-sm" role="status" aria-label="Wallet connection status">
-      <span className={`w-2 h-2 rounded-full ${cfg.dot}`} aria-hidden="true" />
-      <span className={`${cfg.color} font-medium`}>{cfg.label}</span>
+    <div className="group relative flex items-center gap-3 px-5 py-2.5 rounded-full bg-gray-900/60 backdrop-blur-md border border-gray-700/50 shadow-lg hover:shadow-xl hover:border-gray-600/50 transition-all duration-300 text-sm cursor-default" role="status" aria-label="Wallet connection status">
+      <div className="absolute inset-0 rounded-full bg-gradient-to-r from-teal-500/10 to-blue-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+      
+      <span className="relative flex h-2.5 w-2.5 items-center justify-center">
+        {status === "connected" && <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75"></span>}
+        <span className={`relative inline-flex h-2.5 w-2.5 rounded-full ${cfg.dot}`} aria-hidden="true" />
+      </span>
+      <span className={`relative ${cfg.color} font-semibold tracking-wide drop-shadow-sm`}>{cfg.label}</span>
       {address && (
         <>
-          <span className="text-gray-600">|</span>
-          <span className="font-mono text-gray-300 text-xs">
+          <span className="relative text-gray-600">|</span>
+          <span className="relative font-mono text-gray-300 text-xs font-medium bg-gray-800/50 px-2 py-0.5 rounded-md border border-gray-700/30 shadow-inner">
             {truncateAddress(address)}
           </span>
         </>
       )}
-      <span className="text-gray-600">|</span>
-      <span className="text-xs text-gray-500 flex items-center gap-1">
-        <span className="w-1.5 h-1.5 rounded-full bg-yellow-500" aria-hidden="true" />
+      <span className="relative text-gray-600">|</span>
+      <span className="relative text-xs text-gray-400 font-medium flex items-center gap-1.5 bg-yellow-500/10 text-yellow-200/90 px-2.5 py-0.5 rounded-md border border-yellow-500/20 transition-all hover:bg-yellow-500/20">
+        <span className="w-1.5 h-1.5 rounded-full bg-yellow-500 shadow-[0_0_8px_rgba(234,179,8,0.8)]" aria-hidden="true" />
         Testnet
       </span>
       {activeCount > 0 && (
         <>
-          <span className="text-gray-600">|</span>
-          <span className="text-xs text-blue-400 flex items-center gap-1">
-            <span className="w-1.5 h-1.5 rounded-full bg-blue-400 animate-pulse" aria-hidden="true" />
-            {activeCount} tx
+          <span className="relative text-gray-600">|</span>
+          <span className="relative text-xs flex items-center gap-1.5 bg-blue-500/10 text-blue-300 px-2.5 py-0.5 rounded-md border border-blue-500/20 shadow-[0_0_10px_rgba(59,130,246,0.15)] transition-all">
+            <span className="w-1.5 h-1.5 rounded-full bg-blue-400 animate-pulse shadow-[0_0_8px_rgba(96,165,250,0.8)]" aria-hidden="true" />
+            {activeCount} tx active
           </span>
         </>
       )}
diff --git a/frontend/context/walletContext.tsx b/frontend/context/walletContext.tsx
index ec19532..aa41f71 100644
--- a/frontend/context/walletContext.tsx
+++ b/frontend/context/walletContext.tsx
@@ -248,19 +248,51 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
 
   const invokeSorobanContract = async (contractId: string, functionName: string, args: any[] = []) => {
     if (!address) throw new Error("No wallet connected");
-    // Best-effort Soroban invocation using `soroban-client` if present. This is a helper that
-    // will build a transaction targeting the Soroban network and request Freighter to sign it.
-    // Actual invocation details (host function, footprints, etc.) depend on the contract ABI.
     try {
-      // dynamic import to avoid build-time hard dependency when not used
-      const sc = await import("soroban-client");
-      const SorobanClient = sc.default;
-      // Modern Soroban SDK usage
-      const rpc = new SorobanClient(SOROBAN_RPC);
-      // TODO: Implement full hostfunction builder for specific contract/ABI
-      // Example: await rpc.getContractData(contractId);
-      // TODO: Implement full hostfunction builder for specific contract/ABI
-      throw new Error("invokeSorobanContract: implement contract-specific invocation (ABI required)");
+      // Dynamic import to avoid build-time issues
+      const { Contract, TimeoutInfinite } = await import("stellar-sdk");
+      
+      // Use the Soroban RPC
+      const rpcServer = new Server(SOROBAN_RPC, { allowHttp: true });
+      const acct = await rpcServer.getAccount(address);
+      const contract = new Contract(contractId);
+
+      // Build the initial transaction
+      let tx = new TransactionBuilder(acct, {
+        fee: "10000",
+        networkPassphrase: NETWORK_PASSPHRASE,
+      })
+        .addOperation(contract.call(functionName, ...args))
+        .setTimeout(TimeoutInfinite)
+        .build();
+
+      // Simulate transaction to get correct footprints & fee
+      const simulatedTx = await rpcServer.simulateTransaction(tx);
+      
+      if ("error" in simulatedTx && simulatedTx.error) {
+        throw new Error(`Simulation failed: ${simulatedTx.error}`);
+      }
+
+      // Assemble transaction with simulation data
+      if (!simulatedTx.transactionData) {
+        throw new Error("Simulation failed: missing transactionData");
+      }
+
+      tx = TransactionBuilder.assembleTransaction(tx, NETWORK_PASSPHRASE, simulatedTx as any).build();
+      
+      // Sign with Freighter
+      const txXDR = tx.toXDR();
+      const signedEnvelopeXDR = await signWithFreighter(txXDR);
+      const signedTx = TransactionBuilder.fromXDR(signedEnvelopeXDR, NETWORK_PASSPHRASE);
+      
+      // Submit the transaction to Soroban
+      const sendResponse = await rpcServer.sendTransaction(signedTx);
+      
+      if (sendResponse.status === "ERROR") {
+        throw new Error(`Transaction failed: ${JSON.stringify(sendResponse.errorResult)}`);
+      }
+      
+      return sendResponse;
     } catch (err) {
       console.error("invokeSorobanContract", err);
       throw err;