diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..41583e3
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+@jsr:registry=https://npm.jsr.io
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 906d7c4..cd5c31f 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,6 +5,7 @@ import { Navbar } from "@/components/layout/Navbar";
 import { Footer } from "@/components/layout/Footer";
 import { ReAuthModal } from "@/components/ReAuthModal";
 import "./globals.css";
+import { WalletProvider } from "../contexts/WalletContext";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -58,4 +59,4 @@ export default function RootLayout({
       </body>
     </html>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 95e4fa8..2523f61 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,6 +5,31 @@ import TrustAndHowItWorksSection from '@/components/landing/TrustAndHowItWorksSe
 import Link from 'next/link';
 
 export default function Home() {
+  const {
+    status,
+    address,
+    selectedWallet,
+    wallets,
+    error,
+    isConnecting,
+    isConnected,
+    hasError,
+    isRejected,
+    connect,
+  } = useWalletConnection();
+
+  const [showError, setShowError] = useState(false);
+
+  useEffect(() => {
+    if (isRejected) {
+      setShowError(true);
+    }
+  }, [isRejected]);
+
+  const handleConnect = async (walletId: string) => {
+    await connect(walletId);
+  };
+
   return (
     <div className="bg-white">
       <HeroSection />
diff --git a/src/components/WalletModal.tsx b/src/components/WalletModal.tsx
new file mode 100644
index 0000000..76ee645
--- /dev/null
+++ b/src/components/WalletModal.tsx
@@ -0,0 +1,148 @@
+import { useWalletConnection } from "../contexts/WalletContext";
+import { useState, useEffect } from "react";
+
+type WalletWallet = {
+  id: string;
+  name: string;
+  icon: string;
+  installed: boolean;
+};
+
+interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  onConnect: (walletId: string) => void;
+}
+
+export const WalletModal = ({ open, onClose, onConnect }: ModalProps) => {
+  const {
+    status,
+    address,
+    selectedWallet,
+    wallets,
+    error,
+    isConnecting,
+    isConnected,
+    hasError,
+    isRejected,
+  } = useWalletConnection();
+
+  const [showError, setShowError] = useState(false);
+
+  useEffect(() => {
+    if (isRejected) {
+      setShowError(true);
+    }
+    if (isConnected) {
+      onClose();
+    }
+  }, [isRejected, isConnected, onClose]);
+
+  if (!open) return null;
+
+  if (isConnecting) {
+    return (
+      <div
+        className="fixed inset-0 flex items-center justify-center bg-black/50 backdrop-blur-zsm opacity-0 transition-opacity duration-500"
+        aria-busy="true"
+        aria-label="Connecting to wallet..."
+      />
+    );
+  }
+
+  if (hasError && error) {
+    return (
+      <div
+        className="fixed inset-0 flex items-center justify-center bg-black/50 backdrop-blur-zsm"
+        aria-alert="true"
+        aria-label="Connection error"
+      >
+        <div className="bg-white/90 rounded-lg p-8 max-w-sm w-full text-center shadow-lg">
+          <p className="text-red-600 mb-4">{error}</p>
+          <button
+            onClick={onClose}
+            className="mt-4 px-4 py-2 bg-gray-200 rounded hover:bg-gray-300"
+          >
+            OK
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  if (wallets.length === 0) {
+    return (
+      <div className="fixed inset-0 flex items-center justify-center bg-black/50 backdrop-blur-zsm">
+        <div className="bg-white/90 rounded-lg p-8 max-w-sm w-full text-center shadow-lg">
+          <p>No wallets detected. Please install a Stellar wallet.</p>
+          <button
+            onClick={onClose}
+            className="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+          >
+            Install Wallet
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="fixed inset-0 flex items-center justify-center bg-black/50 backdrop-blur-zsm z-50"
+      aria-modal="true"
+      aria-label="Stellar wallets connection modal"
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="wallet-modal-title"
+        className="bg-white/90 rounded-lg p-8 max-w-sm w-full sm:max-w-md shadow-xl transform scale-100 transition-all duration-300"
+      >
+        <h2 id="wallet-modal-title" className="text-xl font-semibold mb-6 text-center">
+          Connect Your Wallet
+        </h2>
+
+        {error && showError ? (
+          <p className="text-red-600 mb-4 text-center">{error}</p>
+        ) : null}
+
+        {isConnecting ? (
+          <p className="text-center mb-4">Connecting...</p>
+        ) : wallets.map((wallet) => (
+          <div
+            key={wallet.id}
+            className="flex items-center gap-3 mb-3 px-2 py-2 rounded hover:bg-gray-100 transition-colors cursor-pointer"
+            onClick={() => onConnect(wallet.id)}
+            tabindex={0}
+            onKeyPress={(e) => e.key === "Enter" && onConnect(wallet.id)}
+          >
+            <img
+              src={wallet.icon}
+              alt={wallet.name}
+              className="w-6 h-6"
+            />
+            <span className="font-medium">{wallet.name}</span>
+            {wallet.installed ? null : (
+              <span className="text-sm text-gray-500 install-link cursor-pointer">
+                Install
+              </span>
+            )}
+          </div>
+        ))}
+
+        {!isConnected && !isConnecting ? (
+          <button
+            onClick={onClose}
+            className="mt-6 w-full py-2 px-4 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 text-sm"
+          >
+            Close
+          </button>
+        ) : isConnected && address ? (
+          <p className="mt-4 text-sm text-gray-500 text-center">
+            Connected: {address.slice(0, 6)}...{address.slice(-4)}
+          </p>
+        ) : null}
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/contexts/WalletContext.tsx b/src/contexts/WalletContext.tsx
new file mode 100644
index 0000000..f8e7cac
--- /dev/null
+++ b/src/contexts/WalletContext.tsx
@@ -0,0 +1,237 @@
+import { createContext, useContext, useReducer, useEffect, ReactNode, Dispatch } from "react";
+
+type WalletStatus = "idle" | "connecting" | "connected" | "error" | "rejected";
+
+interface WalletWallet {
+  id: string;
+  name: string;
+  icon: string;
+  installed: boolean;
+}
+
+interface WalletState {
+  status: WalletStatus;
+  address: string | null;
+  selectedWallet: WalletWallet | null;
+  wallets: WalletWallet[];
+  error: string | null;
+}
+
+interface WalletAction {
+  type:
+    | "set_status"
+    | "set_address"
+    | "set_selected_wallet"
+    | "set_wallets"
+    | "set_error";
+  payload: any;
+}
+
+const initialState: WalletState = {
+  status: "idle",
+  address: null,
+  selectedWallet: null,
+  wallets: [],
+  error: null,
+};
+
+const WalletContext = createContext<{
+  state: WalletState;
+  dispatch: Dispatch<WalletAction>;
+  connect: (walletId: string) => Promise<void>;
+} | null>(null);
+
+export const useWallet = (): {
+  state: WalletState;
+  dispatch: Dispatch<WalletAction>;
+  connect: (walletId: string) => Promise<void>;
+} => {
+  const ctx = useContext(WalletContext);
+  if (!ctx) {
+    throw new Error("useWallet must be used within a WalletProvider");
+  }
+  return ctx;
+};
+
+type ReducerAction =
+  | { type: "set_status"; payload: WalletStatus }
+  | { type: "set_address"; payload: string | null }
+  | { type: "set_selected_wallet"; payload: WalletWallet | null }
+  | { type: "set_wallets"; payload: WalletWallet[] }
+  | { type: "set_error"; payload: string | null };
+
+const walletReducer = (state: WalletState, action: ReducerAction): WalletState => {
+  switch (action.type) {
+    case "set_status":
+      return { ...state, status: action.payload };
+    case "set_address":
+      return { ...state, address: action.payload };
+    case "set_selected_wallet":
+      return { ...state, selectedWallet: action.payload };
+    case "set_wallets":
+      return { ...state, wallets: action.payload };
+    case "set_error":
+      return { ...state, error: action.payload };
+    default:
+      return state;
+  }
+};
+
+interface WalletModule {
+  freighter?: boolean;
+  lobstr?: boolean;
+  xbull?: boolean;
+  albedo?: boolean;
+}
+
+export const WalletProvider = ({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  const [state, dispatch] = useReducer(walletReducer, initialState);
+
+  useEffect(() => {
+    import("@creit-tech/stellar-wallets-kit/sdk").then((module) => {
+      import("@creit-tech/stellar-wallets-kit/modules/utils").then(
+        ({ defaultModules }) => {
+          const StellarWalletsKit = module.StellarWalletsKit;
+          StellarWalletsKit.init({ modules: defaultModules() });
+
+          const detectWallets = async () => {
+            try {
+              dispatch({ type: "set_status", payload: "connecting" });
+
+              const modules: WalletModule = await StellarWalletsKit.getModules();
+              const wallets: WalletWallet[] = [];
+
+              if (modules.freighter) {
+                wallets.push({
+                  id: "freighter",
+                  name: "Freighter",
+                  icon: "/freighter.svg",
+                  installed: true,
+                });
+              } else {
+                wallets.push({
+                  id: "freighter",
+                  name: "Freighter",
+                  icon: "/freighter.svg",
+                  installed: false,
+                });
+              }
+
+              if (modules.lobstr) {
+                wallets.push({
+                  id: "lobstr",
+                  name: "LOBSTR",
+                  icon: "/lobstr.svg",
+                  installed: true,
+                });
+              } else {
+                wallets.push({
+                  id: "lobstr",
+                  name: "LOBSTR",
+                  icon: "/lobstr.svg",
+                  installed: false,
+                });
+              }
+
+              if (modules.xbull) {
+                wallets.push({
+                  id: "xbull",
+                  name: "xBull",
+                  icon: "/xbull.svg",
+                  installed: true,
+                });
+              } else {
+                wallets.push({
+                  id: "xbull",
+                  name: "xBull",
+                  icon: "/xbull.svg",
+                  installed: false,
+                });
+              }
+
+              if (modules.albedo) {
+                wallets.push({
+                  id: "albedo",
+                  name: "Albedo",
+                  icon: "/albedo.svg",
+                  installed: true,
+                });
+              } else {
+                wallets.push({
+                  id: "albedo",
+                  name: "Albedo",
+                  icon: "/albedo.svg",
+                  installed: false,
+                });
+              }
+
+              dispatch({ type: "set_wallets", payload: wallets });
+              dispatch({ type: "set_status", payload: "idle" });
+            } catch (err) {
+              const message =
+                err instanceof Error ? err.message : "Failed to detect wallets";
+              dispatch({ type: "set_error", payload: message });
+              dispatch({ type: "set_status", payload: "idle" });
+            }
+          };
+
+          detectWallets();
+        }
+      );
+    });
+  }, []);
+
+  const connect = async (walletId: string) => {
+    dispatch({ type: "set_status", payload: "connecting" });
+    dispatch({ type: "set_error", payload: null });
+
+    try {
+      const StellarWalletsKit = (await import(
+        "@creit-tech/stellar-wallets-kit/sdk
+      ")).StellarWalletsKit;
+
+      const { address } = await StellarWalletsKit.getAddress();
+
+      const wallet = state.wallets.find((w) => w.id === walletId) || null;
+
+      dispatch({ type: "set_address", payload: address });
+      dispatch({ type: "set_selected_wallet", payload: wallet });
+      dispatch({ type: "set_status", payload: "connected" });
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Connection failed";
+      dispatch({ type: "set_error", payload: message });
+
+      if (message.includes("user rejected") || message.includes("cancel")) {
+        dispatch({ type: "set_status", payload: "rejected" });
+      } else {
+        dispatch({ type: "set_status", payload: "error" });
+      }
+    }
+  };
+
+  return (
+    <WalletContext.Provider value={{ state, dispatch, connect }}>
+      {children}
+    </WalletContext.Provider>
+  );
+};
+
+export const useWalletConnection = () => {
+  const { state } = useWallet();
+
+  return {
+    status: state.status,
+    address: state.address,
+    selectedWallet: state.selectedWallet,
+    wallets: state.wallets,
+    error: state.error,
+    isConnecting: state.status === "connecting",
+    isConnected: state.status === "connected",
+    hasError: state.status === "error",
+    isRejected: state.status === "rejected",
+  };
+};
\ No newline at end of file