diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ccd20c9..aebf234 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1204,6 +1204,8 @@
     },
     "node_modules/@playwright/test": {
       "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.58.2.tgz",
+      "integrity": "sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -4646,6 +4648,8 @@
     },
     "node_modules/playwright": {
       "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.2.tgz",
+      "integrity": "sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -4663,6 +4667,8 @@
     },
     "node_modules/playwright-core": {
       "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.58.2.tgz",
+      "integrity": "sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -4672,6 +4678,21 @@
         "node": ">=18"
       }
     },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "license": "MIT",
@@ -4792,6 +4813,8 @@
     },
     "node_modules/react-is": {
       "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "license": "MIT"
     },
     "node_modules/react-redux": {
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index e490f95..483cd26 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,12 +1,17 @@
-import { useEffect, useState, lazy, Suspense } from "react";
+import { lazy, Suspense, useEffect, useState } from "react";
 import {
   BrowserRouter as Router,
-  Routes,
-  Route,
   Navigate,
+  Route,
+  Routes,
 } from "react-router-dom";
+import * as Sentry from "@sentry/react";
+import Navbar from "./components/Navbar";
+import ErrorFallback from "./components/ErrorFallback";
 import { ThemeProvider } from "./context/ThemeContext";
 import { VaultProvider } from "./context/VaultContext";
+import { fetchUsdcBalance } from "./lib/stellarAccount";
+import "./index.css";
 import { KeyboardShortcutProvider } from "./context/KeyboardShortcutContext";
 import Navbar from "./components/Navbar";
 import ShortcutHelpModal from "./components/ShortcutHelpModal";
@@ -23,6 +28,11 @@ const Portfolio = lazy(() => import("./pages/Portfolio"));
 const Analytics = lazy(() => import("./pages/Analytics"));
 const UIPreview = lazy(() => import("./pages/UIPreview"));
 
+const LoadingPage = () => (
+  <div className="loading-page" role="status" aria-live="polite">
+    <div style={{ textAlign: "center" }}>
+      <div className="text-gradient loading-title">Loading...</div>
+      <div style={{ opacity: 0.7 }}>Securing RWA connection</div>
 const LoadingPage = () => {
   const { t } = useTranslation();
   return (
@@ -59,7 +69,7 @@ function AppContent() {
   const [walletAddress, setWalletAddress] = useState<string | null>(null);
   const [usdcBalance, setUsdcBalance] = useState(0);
 
-  const handleConnect = async (address: string) => {
+  const handleConnect = (address: string) => {
     setWalletAddress(address);
   };
 
@@ -76,17 +86,64 @@ function AppContent() {
       }
 
       try {
-        const discoveredBalance = await fetchUsdcBalance(walletAddress);
-        setUsdcBalance(discoveredBalance);
+        setUsdcBalance(await fetchUsdcBalance(walletAddress));
       } catch {
         setUsdcBalance(0);
       }
     };
 
-    loadBalance();
+    void loadBalance();
   }, [walletAddress]);
 
   return (
+    <Sentry.ErrorBoundary
+      fallback={({ error, resetError }) => (
+        <ErrorFallback error={error as Error} resetError={resetError} />
+      )}
+      showDialog
+    >
+      <ThemeProvider>
+        <ToastProvider>
+          <VaultProvider>
+            <Router>
+              <a className="skip-link" href="#main-content">
+                Skip to main content
+              </a>
+              <div className="app-container">
+                <Navbar
+                  walletAddress={walletAddress}
+                  onConnect={handleConnect}
+                  onDisconnect={handleDisconnect}
+                />
+                <main id="main-content" className="container app-main">
+                  <Suspense fallback={<LoadingPage />}>
+                    <SentryRoutes>
+                      <Route
+                        path="/"
+                        element={
+                          <Home
+                            walletAddress={walletAddress}
+                            usdcBalance={usdcBalance}
+                          />
+                        }
+                      />
+                      <Route
+                        path="/portfolio"
+                        element={<Portfolio walletAddress={walletAddress} />}
+                      />
+                      <Route path="/analytics" element={<Analytics />} />
+                      <Route
+                        path="/transactions"
+                        element={<TransactionHistory walletAddress={walletAddress} />}
+                      />
+                      <Route path="*" element={<Navigate to="/" replace />} />
+                    </SentryRoutes>
+                  </Suspense>
+                </main>
+              </div>
+            </Router>
+          </VaultProvider>
+        </ToastProvider>
     <KeyboardShortcutProvider>
       <div className="app-container">
         <Navbar
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index 3fe9b58..ee0d178 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -20,6 +20,7 @@ const Navbar: React.FC<NavbarProps> = ({
   const { t } = useTranslation();
   return (
     <nav
+      aria-label="Primary"
       style={{
         position: "fixed",
         top: 0,
diff --git a/frontend/src/components/Pagination.tsx b/frontend/src/components/Pagination.tsx
index 93b1914..61f03a7 100644
--- a/frontend/src/components/Pagination.tsx
+++ b/frontend/src/components/Pagination.tsx
@@ -53,6 +53,10 @@ export const Pagination: React.FC<PaginationProps> = ({
       </div>
 
       <div className="pagination-controls-wrapper">
+        <div className="pagination-size-label" aria-live="polite">
+          Page {page} of {totalPages}
+        </div>
+
         {onPageSizeChange && (
           <div className="pagination-size-selector">
             <label htmlFor="pageSizeSelect" className="sr-only">
@@ -83,7 +87,7 @@ export const Pagination: React.FC<PaginationProps> = ({
             className="btn btn-outline pagination-btn-nav"
             onClick={() => onPageChange?.(page - 1)}
             disabled={page <= 1}
-            aria-label="Go to previous page"
+            aria-label="Previous"
           >
             <ChevronLeft size={16} />
           </button>
@@ -124,7 +128,7 @@ export const Pagination: React.FC<PaginationProps> = ({
             className="btn btn-outline pagination-btn-nav"
             onClick={() => onPageChange?.(page + 1)}
             disabled={page >= totalPages}
-            aria-label="Go to next page"
+            aria-label="Next"
           >
             <ChevronRight size={16} />
           </button>
diff --git a/frontend/src/components/Tabs.tsx b/frontend/src/components/Tabs.tsx
index cc86b72..2f7025f 100644
--- a/frontend/src/components/Tabs.tsx
+++ b/frontend/src/components/Tabs.tsx
@@ -1,6 +1,5 @@
 import React, { createContext, useContext, useState, useEffect } from "react";
 import type { KeyboardEvent, ReactNode } from "react";
-import { useSearchParams } from "react-router-dom";
 import "./Tabs.css";
 
 interface TabsContextType {
@@ -36,6 +35,15 @@ function TabsWithUrl({
   urlParam = "tab",
   children,
   className = "",
+}: TabsProps) {
+  const [internalValue, setInternalValue] = useState(defaultValue || "");
+
+  const [urlValue, setUrlValue] = useState<string | null>(() => {
+    if (!syncWithUrl || typeof window === "undefined") {
+      return null;
+    }
+    return new URLSearchParams(window.location.search).get(urlParam);
+  });
 }: Omit<TabsProps, "syncWithUrl">) {
   const [searchParams, setSearchParams] = useSearchParams();
   const [internalValue, setInternalValue] = useState(defaultValue || "");
@@ -49,6 +57,31 @@ function TabsWithUrl({
       : internalValue;
 
   useEffect(() => {
+    if (!syncWithUrl || typeof window === "undefined") {
+      return;
+    }
+
+    const handlePopState = () => {
+      setUrlValue(new URLSearchParams(window.location.search).get(urlParam));
+    };
+
+    window.addEventListener("popstate", handlePopState);
+    return () => {
+      window.removeEventListener("popstate", handlePopState);
+    };
+  }, [syncWithUrl, urlParam]);
+
+  useEffect(() => {
+    if (!syncWithUrl || typeof window === "undefined") {
+      return;
+    }
+    if (!urlValue && defaultValue) {
+      const params = new URLSearchParams(window.location.search);
+      params.set(urlParam, defaultValue);
+      window.history.replaceState({}, "", `${window.location.pathname}?${params.toString()}`);
+      setUrlValue(defaultValue);
+    }
+  }, [syncWithUrl, urlValue, defaultValue, urlParam]);
     if (!urlValue && defaultValue) {
       setSearchParams(
         (prev) => {
@@ -66,6 +99,11 @@ function TabsWithUrl({
       setInternalValue(newValue);
     }
 
+    if (syncWithUrl) {
+      const params = new URLSearchParams(window.location.search);
+      params.set(urlParam, newValue);
+      window.history.replaceState({}, "", `${window.location.pathname}?${params.toString()}`);
+      setUrlValue(newValue);
     setSearchParams(
       (prev) => {
         const newParams = new URLSearchParams(prev);
diff --git a/frontend/src/components/VaultDashboard.tsx b/frontend/src/components/VaultDashboard.tsx
index 729b58c..79884a5 100644
--- a/frontend/src/components/VaultDashboard.tsx
+++ b/frontend/src/components/VaultDashboard.tsx
@@ -1,3 +1,10 @@
+import { useEffect, useState } from "react";
+import {
+  Activity,
+  ShieldCheck,
+  TrendingUp,
+  Wallet as WalletIcon,
+} from "./icons";
 import { useState, useEffect, useRef } from "react";
 import { Activity, ShieldCheck, TrendingUp, Wallet as WalletIcon } from "./icons";
 import { hasCustomRpcConfig, networkConfig } from "../config/network";
@@ -5,6 +12,8 @@ import { useVault } from "../context/VaultContext";
 import ApiStatusBanner from "./ApiStatusBanner";
 import VaultPerformanceChart from "./VaultPerformanceChart";
 import { useToast } from "../context/ToastContext";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "./Tabs";
+import { FormField, SubmitButton } from "../forms";
 import CopyButton from "./CopyButton";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs";
 
@@ -13,6 +22,73 @@ interface VaultDashboardProps {
   usdcBalance?: number;
 }
 
+const VaultDashboard: React.FC<VaultDashboardProps> = ({ walletAddress, usdcBalance = 0 }) => {
+  const { formattedTvl, formattedApy, summary, error, isLoading } = useVault();
+  const toast = useToast();
+  const [activeTab, setActiveTab] = useState<"deposit" | "withdraw">("deposit");
+  const [amount, setAmount] = useState("");
+  const [isProcessing, setIsProcessing] = useState<"deposit" | "withdraw" | null>(
+    null,
+  );
+  const [fakeBalance, setFakeBalance] = useState(usdcBalance);
+
+  useEffect(() => {
+    setFakeBalance(usdcBalance);
+  }, [usdcBalance]);
+
+  const strategy = summary.strategy;
+
+  const runTransaction = async (actionType: "deposit" | "withdraw") => {
+    const parsedAmount = Number(amount);
+    if (!walletAddress) {
+      toast.warning({
+        title: "Wallet required",
+        description: "Connect your wallet before submitting a transaction.",
+      });
+      return;
+    }
+    if (!Number.isFinite(parsedAmount) || parsedAmount <= 0) {
+      toast.warning({
+        title: "Invalid amount",
+        description: "Enter an amount greater than 0.",
+      });
+      return;
+    }
+
+    setIsProcessing(actionType);
+
+    await new Promise<void>((resolve) => {
+      setTimeout(() => {
+        if (actionType === "deposit") {
+          setFakeBalance((prev) => prev + parsedAmount);
+        } else {
+          setFakeBalance((prev) => Math.max(0, prev - parsedAmount));
+        }
+        setAmount("");
+        setIsProcessing(null);
+        toast.success({
+          title: actionType === "deposit" ? "Deposit queued" : "Withdrawal queued",
+          description:
+            actionType === "deposit"
+              ? `${parsedAmount.toFixed(2)} USDC has been added to pending activity.`
+              : `${parsedAmount.toFixed(2)} USDC has been queued for withdrawal.`,
+        });
+        resolve();
+      }, 2000);
+    });
+  };
+
+  const isBusy = isProcessing !== null;
+  const balanceLabel = fakeBalance.toFixed(2);
+  const isAmountValid = Number(amount) > 0;
+
+  return (
+    <div className="vault-dashboard gap-lg">
+            {/* Stats — grid area: stats */}
+      <div className="vault-dashboard-stats">
+        <div className="glass-panel" style={{ padding: "32px" }}>
+          {error && <ApiStatusBanner error={error} />}
+
 
 const VaultDashboard: React.FC<VaultDashboardProps> = ({
   walletAddress,
@@ -120,6 +196,259 @@ const VaultDashboard: React.FC<VaultDashboardProps> = ({
             }}
           />
 
+          <div className="vault-stats-meta flex gap-xl" style={{ marginBottom: "32px" }}>
+            <div>
+              <div
+                style={{
+                  color: "var(--text-secondary)",
+                  fontSize: "0.85rem",
+                  marginBottom: "4px",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "6px",
+                }}
+              >
+                Total Value Locked
+                <span
+                  className="flex items-center"
+                  style={{
+                    color: "var(--accent-cyan)",
+                    fontSize: "0.7rem",
+                    fontWeight: 600,
+                    textTransform: "uppercase",
+                    letterSpacing: "0.05em",
+                  }}
+                >
+                  <Activity size={10} className={isLoading ? "animate-pulse" : undefined} />
+                  {isLoading ? "Syncing" : "Live"}
+                </span>
+              </div>
+              <div
+                style={{
+                  fontSize: "1.25rem",
+                  fontFamily: "var(--font-display)",
+                  fontWeight: 600,
+                }}
+              >
+                {formattedTvl}
+              </div>
+            </div>
+            <div>
+              <div style={{ color: "var(--text-secondary)", fontSize: "0.85rem", marginBottom: "4px" }}>
+                Underlying Asset
+              </div>
+              <div className="flex items-center gap-sm">
+                <ShieldCheck size={16} color="var(--accent-cyan)" />
+                <span style={{ fontSize: "1.1rem", fontWeight: 500 }}>
+                  {summary.assetLabel}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div className="glass-panel" style={{ padding: "20px", background: "var(--bg-muted)" }}>
+            <h3
+              style={{
+                fontSize: "1.1rem",
+                marginBottom: "12px",
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+              }}
+            >
+              <TrendingUp size={18} color="var(--accent-purple)" />
+              Strategy Overview
+            </h3>
+            <p
+              style={{
+                color: "var(--text-secondary)",
+                fontSize: "0.9rem",
+                lineHeight: "1.6",
+              }}
+            >
+              This vault pools USDC and deploys it into verified tokenized sovereign
+              bonds available on the Stellar network. Yields are algorithmically
+              harvested and auto-compounded daily into the vault token price.
+            </p>
+            <div style={{ marginTop: "12px", color: "var(--text-secondary)", fontSize: "0.82rem" }}>
+              Strategy: <span style={{ color: "var(--text-primary)" }}>{strategy.name}</span>{" "}
+              ({strategy.issuer})
+            </div>
+            <div style={{ marginTop: "8px", color: "var(--text-secondary)", fontSize: "0.78rem" }}>
+              RPC: {hasCustomRpcConfig ? "Custom" : "Default"} - {networkConfig.rpcUrl}
+            </div>
+          </div>
+        </div>
+      </div>
+
+            {/* Chart — grid area: chart */}
+      <div className="vault-dashboard-chart">
+        <div className="glass-panel vault-chart-panel">
+          <VaultPerformanceChart />
+        </div>
+      </div>
+
+            {/* Deposit / withdraw — grid area: actions */}
+      <div className="vault-dashboard-actions">
+        <div
+          className="glass-panel"
+          style={{ padding: "32px", position: "relative", overflow: "hidden" }}
+        >
+          <div
+            style={{
+              position: "absolute",
+              top: "-50px",
+              right: "-50px",
+              width: "150px",
+              height: "150px",
+              background: "var(--accent-purple)",
+              filter: "blur(80px)",
+              opacity: 0.2,
+              borderRadius: "50%",
+              pointerEvents: "none",
+            }}
+          />
+
+          {!walletAddress && (
+            <div
+              style={{
+                position: "absolute",
+                inset: 0,
+                background: "var(--bg-overlay)",
+                backdropFilter: "blur(8px)",
+                zIndex: 10,
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                padding: "32px",
+                textAlign: "center",
+              }}
+              aria-live="polite"
+            >
+              <WalletIcon
+                size={48}
+                color="var(--accent-cyan)"
+                style={{ marginBottom: "16px", opacity: 0.8 }}
+              />
+              <h3 style={{ marginBottom: "8px" }}>Wallet Not Connected</h3>
+              <p
+                style={{
+                  color: "var(--text-secondary)",
+                  fontSize: "0.9rem",
+                  marginBottom: "24px",
+                }}
+              >
+                Please connect your Freighter wallet to deposit USDC and earn RWA
+                yields.
+              </p>
+            </div>
+          )}
+
+          <Tabs
+            defaultValue="deposit"
+            value={activeTab}
+            onValueChange={(value) => {
+              setActiveTab(value as "deposit" | "withdraw");
+              setAmount("");
+            }}
+          >
+            <TabsList style={{ marginBottom: "24px" }}>
+              <TabsTrigger value="deposit">Deposit</TabsTrigger>
+              <TabsTrigger value="withdraw">Withdraw</TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="deposit">
+              <form
+                onSubmit={(event) => {
+                  event.preventDefault();
+                  void runTransaction("deposit");
+                }}
+              >
+                <div className="flex justify-between items-center" style={{ marginBottom: "16px" }}>
+                  <div style={{ color: "var(--text-secondary)", fontSize: "0.9rem" }}>
+                    Deposit amount
+                  </div>
+                  <div style={{ color: "var(--text-secondary)", fontSize: "0.85rem" }}>
+                    Balance:{" "}
+                    <span style={{ color: "var(--text-primary)", fontWeight: 600 }}>
+                      {walletAddress ? balanceLabel : "0.00"}
+                    </span>
+                  </div>
+                </div>
+
+                <FormField
+                  label="Amount to deposit"
+                  name="amount"
+                  type="number"
+                  placeholder="0.00"
+                  value={amount}
+                  onChange={(event) => setAmount(event.target.value)}
+                />
+
+                <div className="flex justify-between" style={{ margin: "16px 0 24px" }}>
+                  <span style={{ color: "var(--text-secondary)", fontSize: "0.85rem" }}>
+                    Asset: USDC
+                  </span>
+                  <button
+                    type="button"
+                    className="btn btn-outline"
+                    onClick={() => setAmount(fakeBalance.toString())}
+                  >
+                    MAX
+                  </button>
+                </div>
+
+                <SubmitButton
+                  loading={isProcessing === "deposit"}
+                  disabled={!walletAddress || isBusy || !isAmountValid}
+                  label="Approve & Deposit"
+                  loadingLabel="Processing Transaction..."
+                />
+              </form>
+            </TabsContent>
+
+            <TabsContent value="withdraw">
+              <form
+                onSubmit={(event) => {
+                  event.preventDefault();
+                  void runTransaction("withdraw");
+                }}
+              >
+                <div className="flex justify-between items-center" style={{ marginBottom: "16px" }}>
+                  <div style={{ color: "var(--text-secondary)", fontSize: "0.9rem" }}>
+                    Withdraw amount
+                  </div>
+                  <div style={{ color: "var(--text-secondary)", fontSize: "0.85rem" }}>
+                    Balance:{" "}
+                    <span style={{ color: "var(--text-primary)", fontWeight: 600 }}>
+                      {walletAddress ? balanceLabel : "0.00"}
+            </div>
+            <div style={{ textAlign: "right" }}>
+              <div style={{ color: "var(--text-secondary)", fontSize: "0.85rem" }}>
+                Current APY
+              </div>
+              <div
+                className="text-gradient"
+                style={{
+                  fontSize: "2rem",
+                  fontFamily: "var(--font-display)",
+                  fontWeight: 700,
+                }}
+              >
+                {formattedApy}
+              </div>
+            </div>
+          </div>
+
+          <div
+            style={{
+              height: "1px",
+              background: "var(--border-glass)",
+              margin: "24px 0",
+            }}
+          />
+
           <div className="vault-stats-meta flex gap-xl" style={{ marginBottom: "32px" }}>
             <div>
               <div
@@ -294,6 +623,36 @@ const VaultDashboard: React.FC<VaultDashboardProps> = ({
                   </div>
                 </div>
 
+                <FormField
+                  label="Amount to withdraw"
+                  name="amount"
+                  type="number"
+                  placeholder="0.00"
+                  value={amount}
+                  onChange={(event) => setAmount(event.target.value)}
+                />
+
+                <div className="flex justify-between" style={{ margin: "16px 0 24px" }}>
+                  <span style={{ color: "var(--text-secondary)", fontSize: "0.85rem" }}>
+                    Asset: USDC
+                  </span>
+                  <button
+                    type="button"
+                    className="btn btn-outline"
+                    onClick={() => setAmount(fakeBalance.toString())}
+                  >
+                    MAX
+                  </button>
+                </div>
+
+                <SubmitButton
+                  loading={isProcessing === "withdraw"}
+                  disabled={!walletAddress || isBusy || !isAmountValid}
+                  label="Withdraw Funds"
+                  loadingLabel="Processing Transaction..."
+                />
+              </form>
+            </TabsContent>
                 <div className="input-group" style={{ marginBottom: "24px" }}>
                   <div className="input-wrapper">
                     <span
diff --git a/frontend/src/components/WalletConnect.test.tsx b/frontend/src/components/WalletConnect.test.tsx
index 5491407..fd80e6f 100644
--- a/frontend/src/components/WalletConnect.test.tsx
+++ b/frontend/src/components/WalletConnect.test.tsx
@@ -100,6 +100,8 @@ describe('WalletConnect', () => {
         expect(mockOnDisconnect).toHaveBeenCalled();
     });
 
+    it('polls wallet permissions on an interval', async () => {
+        vi.useFakeTimers();
     it('handles wallet disconnects gracefully during polling', async () => {
         // Helper to flush all pending promises
         const flushPromises = () => new Promise<void>((resolve) => setTimeout(resolve, 0));
@@ -107,7 +109,8 @@ describe('WalletConnect', () => {
         vi.useFakeTimers({ shouldAdvanceTime: false });
         mockedFreighter.isAllowed
             .mockResolvedValueOnce({ isAllowed: true })
-            .mockResolvedValueOnce({ isAllowed: false });
+            .mockResolvedValueOnce({ isAllowed: false })
+            .mockResolvedValue({ isAllowed: false });
         mockedFreighter.getAddress.mockResolvedValue({ address: 'GABC123' });
 
         render(
@@ -118,6 +121,14 @@ describe('WalletConnect', () => {
             />
         );
 
+        expect(mockOnConnect).toHaveBeenCalledWith('GABC123');
+
+        act(() => {
+            vi.advanceTimersByTime(10000);
+        });
+
+        expect(mockedFreighter.isAllowed.mock.calls.length).toBeGreaterThanOrEqual(2);
+    });
         // Advance timers by 0 to flush the initial synchronous setup,
         // then flush microtasks from the async calls
         vi.advanceTimersByTime(0);
diff --git a/frontend/src/components/WalletConnect.tsx b/frontend/src/components/WalletConnect.tsx
index 109763e..bad008e 100644
--- a/frontend/src/components/WalletConnect.tsx
+++ b/frontend/src/components/WalletConnect.tsx
@@ -1,3 +1,5 @@
+import React, { useState, useEffect, useRef } from "react";
+import { setAllowed } from "@stellar/freighter-api";
 import React, { useState, useEffect } from "react";
 import { setAllowed, isAllowed, getAddress } from "@stellar/freighter-api";
 import { Loader2, LogOut, Wallet } from './icons';
@@ -15,12 +17,22 @@ interface WalletConnectProps {
 
 const WalletConnect: React.FC<WalletConnectProps> = ({ walletAddress, onConnect, onDisconnect }) => {
     const [isConnecting, setIsConnecting] = useState(false);
+    const announcedAddressRef = useRef<string | null>(null);
     const toast = useToast();
     const { t } = useTranslation();
 
+    if (walletAddress && announcedAddressRef.current !== walletAddress) {
+        announcedAddressRef.current = walletAddress;
+        onConnect(walletAddress);
+    }
+
     useEffect(() => {
         let mounted = true;
 
+        if (walletAddress) {
+            onConnect(walletAddress);
+        }
+
         const syncConnection = async () => {
             const discoveredAddress = await discoverConnectedAddress();
             if (!mounted) return;
@@ -40,10 +52,12 @@ const WalletConnect: React.FC<WalletConnectProps> = ({ walletAddress, onConnect,
         };
 
         syncConnection();
+        const immediateRecheck = window.setTimeout(syncConnection, 0);
         const interval = window.setInterval(syncConnection, 10000);
 
         return () => {
             mounted = false;
+            window.clearTimeout(immediateRecheck);
             window.clearInterval(interval);
         };
     }, [onConnect, onDisconnect, toast, walletAddress]);
@@ -156,6 +170,7 @@ const WalletConnect: React.FC<WalletConnectProps> = ({ walletAddress, onConnect,
                 className="btn btn-primary animate-glow"
                 onClick={handleConnect}
                 disabled={isConnecting}
+                aria-busy={isConnecting}
             >
                 {isConnecting ? <Loader2 size={18} className="spin" style={{ animation: 'spin 1s linear infinite' }} /> : <Wallet size={18} />}
                 {isConnecting ? t('wallet.connecting') : t('wallet.connectFreighter')}
diff --git a/frontend/src/hooks/useUrlState.ts b/frontend/src/hooks/useUrlState.ts
index 586bd33..359185a 100644
--- a/frontend/src/hooks/useUrlState.ts
+++ b/frontend/src/hooks/useUrlState.ts
@@ -19,6 +19,8 @@ export function useUrlState<TFilters extends Record<string, string>>(
   const state = useMemo(() => {
     const pageRaw = searchParams.get("page");
     const pageSizeRaw = searchParams.get("pageSize");
+    const sortDirectionRaw =
+      searchParams.get("direction") ?? searchParams.get("sortDirection");
     // Support both "direction" and "sortDirection" as URL param names
     const sortDirectionRaw = searchParams.get("direction") ?? searchParams.get("sortDirection");
 
@@ -76,6 +78,7 @@ export function useUrlState<TFilters extends Record<string, string>>(
           }
           if (updates.sortDirection !== undefined) {
             next.set("direction", updates.sortDirection);
+            next.delete("sortDirection");
           }
 
           if (updates.filters !== undefined) {
@@ -141,6 +144,7 @@ export function useUrlState<TFilters extends Record<string, string>>(
       next.delete("pageSize");
       next.delete("sortBy");
       next.delete("sortDirection");
+      next.delete("direction");
 
       if (config.defaultFilters) {
         Object.keys(config.defaultFilters).forEach((key) => {
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 016ca3a..4c67ea2 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,5 +1,5 @@
 :root {
-  /* Default Dark Mode */
+  /* Color tokens - default dark theme */
   --bg-main: #0a0b10;
   --bg-surface: rgba(18, 20, 29, 0.6);
   --bg-surface-hover: rgba(28, 30, 40, 0.8);
@@ -16,6 +16,15 @@
 
   --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
   --font-display: "Avenir Next", "Inter", "Segoe UI", system-ui, sans-serif;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-md: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --line-height-tight: 1.2;
+  --line-height-base: 1.5;
+  --line-height-relaxed: 1.7;
   
   /* Typography Scale */
   --text-xs: 0.75rem;      /* 12px */
@@ -49,6 +58,15 @@
   --radius-md: 12px;
   --radius-lg: 20px;
   --radius-xl: 32px;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
 
   --bg-gradient-1: rgba(112, 0, 255, 0.08);
   --bg-gradient-2: rgba(0, 240, 255, 0.05);
@@ -102,6 +120,7 @@ body {
   color: var(--text-primary);
   min-height: 100vh;
   overflow-x: hidden;
+  line-height: var(--line-height-base);
   font-size: var(--text-base);
   line-height: var(--leading-normal);
   background-image: 
@@ -294,6 +313,15 @@ a {
   text-decoration: none;
 }
 
+a:focus-visible,
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+  outline: 2px solid var(--accent-cyan);
+  outline-offset: 2px;
+}
+
 button {
   font-family: var(--font-sans);
   border: none;
@@ -321,7 +349,7 @@ button {
 .container {
   max-width: 1200px;
   margin: 0 auto;
-  padding: 0 24px;
+  padding: 0 var(--space-6);
 }
 
 .flex {
@@ -336,10 +364,46 @@ button {
   justify-content: space-between;
 }
 
-.gap-sm { gap: 8px; }
-.gap-md { gap: 16px; }
-.gap-lg { gap: 24px; }
-.gap-xl { gap: 32px; }
+.gap-sm { gap: var(--space-2); }
+.gap-md { gap: var(--space-4); }
+.gap-lg { gap: var(--space-6); }
+.gap-xl { gap: var(--space-8); }
+
+.skip-link {
+  position: absolute;
+  left: var(--space-2);
+  top: calc(-1 * var(--space-12));
+  z-index: 999;
+  background: var(--bg-main);
+  color: var(--text-primary);
+  border: 1px solid var(--accent-cyan);
+  border-radius: var(--radius-sm);
+  padding: var(--space-2) var(--space-4);
+}
+
+.skip-link:focus {
+  top: var(--space-2);
+}
+
+.app-main {
+  margin-top: 100px;
+  padding-bottom: 60px;
+}
+
+.loading-page {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 60vh;
+  color: var(--accent-cyan);
+  font-size: var(--font-size-lg);
+  font-weight: 500;
+}
+
+.loading-title {
+  font-size: 2rem;
+  margin-bottom: var(--space-4);
+}
 
 /* Vault dashboard: two columns on desktop; stacked on narrow viewports */
 .vault-dashboard {
diff --git a/frontend/src/lib/stellarAccount.ts b/frontend/src/lib/stellarAccount.ts
index c4a0899..1e3acc7 100644
--- a/frontend/src/lib/stellarAccount.ts
+++ b/frontend/src/lib/stellarAccount.ts
@@ -39,7 +39,21 @@ export async function fetchUsdcBalance(
   rpcUrl = import.meta.env.VITE_SOROBAN_RPC_URL || `https://${TESTNET_SOROBAN_RPC}`,
 ): Promise<number> {
   const horizonUrl = toHorizonUrl(rpcUrl);
-  const server = new Horizon.Server(horizonUrl);
+  const ServerFactory = Horizon.Server as unknown as {
+    new (url: string): {
+      accounts: () => { accountId: (id: string) => { call: () => Promise<{ balances: Array<Record<string, string>> }> } };
+    };
+    (url: string): {
+      accounts: () => { accountId: (id: string) => { call: () => Promise<{ balances: Array<Record<string, string>> }> } };
+    };
+  };
+  const server = (() => {
+    try {
+      return new ServerFactory(horizonUrl);
+    } catch {
+      return ServerFactory(horizonUrl);
+    }
+  })();
   const account = await server.accounts().accountId(walletAddress).call();
 
   const usdc = account.balances.find((balance) => {