diff --git a/lib/components/Header/Wallet.scss b/lib/components/Header/Wallet.scss
new file mode 100644
index 0000000..a8776da
--- /dev/null
+++ b/lib/components/Header/Wallet.scss
@@ -0,0 +1,78 @@
+.mytonswap-app {
+    .wallet-card {
+        border-radius: 0.5rem;
+        padding: 0.5rem;
+        .title {
+            font-size: 0.7rem;
+            opacity: 0.75;
+        }
+        .wallet-content {
+            display: flex;
+            flex-direction: column;
+            .balance-title {
+                font-size: 0.8rem;
+                margin-top: 0.5rem;
+            }
+            .balance-amount {
+                font-size: 1.25rem;
+                font-weight: bolder;
+                margin-bottom: 0.5rem;
+            }
+            .address {
+                font-size: 0.8rem;
+                width: fit-content;
+                padding: 0.25rem 0.5rem;
+                border-radius: 0.25rem;
+                opacity: 0.75;
+                display: flex;
+            }
+            .address-section {
+                display: flex;
+                align-items: center;
+                gap: 0.25rem;
+
+                .address {
+                    font-size: 0.8rem;
+                    width: fit-content;
+                    height: 1.75rem;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border-radius: 0.5rem;
+                    opacity: 0.75;
+                    display: flex;
+                }
+                .wallet-icon {
+                    font-size: 0.5rem;
+                    width: 1.75rem;
+                    height: 1.75rem;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border-radius: 0.5rem;
+                    opacity: 0.75;
+                    cursor: pointer;
+                    &:disabled {
+                        cursor: not-allowed;
+                        opacity: 0.5;
+                    }
+                }
+            }
+            .disconnect-wallet {
+                font-size: 0.8rem;
+                margin-top: 0.5rem;
+                height: 2.5rem;
+                border-radius: 0.5rem;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transition: all 0.3s ease-in-out;
+                cursor: pointer;
+                opacity: 0.75;
+                &:hover {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+}
diff --git a/lib/components/Header/Wallet.tsx b/lib/components/Header/Wallet.tsx
new file mode 100644
index 0000000..e00bb23
--- /dev/null
+++ b/lib/components/Header/Wallet.tsx
@@ -0,0 +1,110 @@
+import { fromNano } from "@mytonswap/sdk";
+import { TON_ADDR } from "../../constants";
+import { useThemeStore } from "../../store/theme.store";
+import { useWalletStore } from "../../store/wallet.store";
+import "./Wallet.scss";
+import formatNumber from "../../utils/formatNum";
+import shortAddress from "../../utils/shortAddress";
+import { FaCheck, FaCopy } from "react-icons/fa6";
+import { useState } from "react";
+import { MdArrowOutward } from "react-icons/md";
+import { useTonConnectUI } from "@tonconnect/ui-react";
+
+const Wallet = () => {
+    // make function and state for copy to clipboard address button
+    const [copied, setCopied] = useState(false);
+    const copyToClipboard = async (text: string) => {
+        try {
+            await navigator.clipboard.writeText(text);
+            setCopied(true);
+            setTimeout(() => {
+                setCopied(false);
+            }, 2000);
+            return true;
+        } catch (error) {
+            console.error(error);
+            return false;
+        }
+    };
+
+    const { wallet, balance, disconnect } = useWalletStore();
+    const [tc] = useTonConnectUI();
+    const handleDisconnect = async () => {
+        await tc.disconnect();
+        disconnect();
+    };
+    const { colors } = useThemeStore();
+    const TON_BALANCE = formatNumber(
+        +fromNano(balance.get(TON_ADDR)?.balance || 0n)
+    );
+
+    return (
+        <>
+            {wallet && (
+                <div
+                    className="wallet-card"
+                    style={{ background: colors.light_shade }}
+                >
+                    <p className="title">Account</p>
+                    <div className="wallet-content">
+                        <p className="balance-title">Balance</p>
+                        <div
+                            className="balance-amount"
+                            style={{ color: colors.primary }}
+                        >
+                            {TON_BALANCE}TON
+                        </div>
+                        <div className="address-section">
+                            <div
+                                className="address"
+                                style={{ background: colors.background }}
+                            >
+                                {shortAddress(
+                                    wallet.account.address,
+                                    "mainnet",
+                                    4
+                                )}
+                            </div>
+                            <button
+                                className="wallet-icon"
+                                disabled={copied}
+                                onClick={() =>
+                                    copyToClipboard(wallet.account.address)
+                                }
+                                style={{
+                                    background: colors.background,
+                                    color: colors.text_black,
+                                }}
+                            >
+                                {copied ? <FaCheck /> : <FaCopy />}
+                            </button>
+                            <a
+                                className="wallet-icon"
+                                target="_blank"
+                                href={`https://tonviewer.com/${wallet.account.address}`}
+                                style={{
+                                    background: colors.background,
+                                    color: colors.text_black,
+                                }}
+                            >
+                                <MdArrowOutward />
+                            </a>
+                        </div>
+                        <button
+                            className="disconnect-wallet"
+                            onClick={handleDisconnect}
+                            style={{
+                                background: colors.primary,
+                                color: colors.text_black,
+                            }}
+                        >
+                            Disconnect Wallet
+                        </button>
+                    </div>
+                </div>
+            )}
+        </>
+    );
+};
+
+export default Wallet;