DevSolex · DevSolex · Feb 17, 2026 · Feb 17, 2026 · Feb 17, 2026 · Feb 17, 2026
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import "./globals.css";
 import { StacksProvider } from "@/context/StacksContext";
+import Navbar from "@/components/Navbar/Navbar";
 
 export const metadata: Metadata = {
   title: "S-pay | Premium Stacks Payments",
@@ -21,6 +22,7 @@ export default function RootLayout({
       </head>
       <body>
         <StacksProvider>
+          <Navbar />
           {children}
         </StacksProvider>
       </body>

diff --git a/frontend/app/merchant/register/page.tsx b/frontend/app/merchant/register/page.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { RegisterMerchantForm } from "@/components/RegisterMerchantForm/RegisterMerchantForm";
+import styles from "./register.module.css";
+
+export default function MerchantRegisterPage() {
+  return (
+    <div className={styles.page}>
+      <h1 className={styles.title}>Register as Merchant</h1>
+      <p className={styles.subtitle}>
+        Requires 50 STX verification stake (register-merchant)
+      </p>
+      <RegisterMerchantForm />
+    </div>
+  );
+}
diff --git a/frontend/app/merchant/register/register.module.css b/frontend/app/merchant/register/register.module.css
@@ -0,0 +1,18 @@
+.page {
+  min-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.title {
+  font-size: 2rem;
+  margin-bottom: 0.5rem;
+}
+
+.subtitle {
+  color: #a0a0aa;
+  margin-bottom: 2rem;
+}
diff --git a/frontend/app/page.module.css b/frontend/app/page.module.css
@@ -48,39 +48,6 @@
   line-height: 1.6;
 }
 
-.actions {
-  display: flex;
-  gap: 1.5rem;
-  justify-content: center;
-}
-
-.primaryBtn {
-  background: var(--primary);
-  color: white;
-  padding: 1rem 2.5rem;
-  border-radius: 12px;
-  font-weight: 600;
-  transition: var(--transition-smooth);
-}
-
-.primaryBtn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 0 20px var(--primary-glow);
-}
-
-.secondaryBtn {
-  border: 1px solid var(--glass-border);
-  color: var(--foreground);
-  padding: 1rem 2.5rem;
-  border-radius: 12px;
-  font-weight: 600;
-  transition: var(--transition-smooth);
-}
-
-.secondaryBtn:hover {
-  background: rgba(255, 255, 255, 0.05);
-}
-
 @media (max-width: 768px) {
   .title {
     font-size: 3rem;

diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
@@ -1,4 +1,5 @@
 import styles from "./page.module.css";
+import { ConnectWallet } from "@/components/ConnectWallet/ConnectWallet";
 
 export default function Home() {
   return (
@@ -10,23 +11,11 @@ export default function Home() {
           <span>Powered by Stacks.</span>
         </h1>
         <p className={styles.description}>
-          Experience the most premium payment gateway for the Bitcoin ecosystem. 
+          Experience the most premium payment gateway for the Bitcoin ecosystem.
           Fast, decentralized, and built for modern commerce.
         </p>
-        <div className={styles.actions}>
-          <button className={styles.primaryBtn}>Connect Wallet</button>
-          <button className={styles.secondaryBtn}>Learn More</button>
-        </div>
+        <ConnectWallet />
       </header>
     </div>
   );
 }
-// Final polish 62
-// Final polish 63
-// Final polish 64
-// Final polish 65
-// Final polish 66
-// Final polish 67
-// Final polish 68
-// Final polish 69
-// Final polish 70
diff --git a/frontend/app/pay/page.tsx b/frontend/app/pay/page.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { PaymentForm } from "@/components/PaymentForm/PaymentForm";
+import styles from "./pay.module.css";
+
+export default function PayPage() {
+  return (
+    <div className={styles.page}>
+      <h1 className={styles.title}>Process Payment</h1>
+      <p className={styles.subtitle}>
+        Send STX via S-pay protocol (process-payment)
+      </p>
+      <PaymentForm />
+    </div>
+  );
+}
diff --git a/frontend/app/pay/pay.module.css b/frontend/app/pay/pay.module.css
@@ -0,0 +1,18 @@
+.page {
+  min-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.title {
+  font-size: 2rem;
+  margin-bottom: 0.5rem;
+}
+
+.subtitle {
+  color: #a0a0aa;
+  margin-bottom: 2rem;
+}
diff --git a/frontend/app/register/page.tsx b/frontend/app/register/page.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { RegisterUserForm } from "@/components/RegisterUserForm/RegisterUserForm";
+import styles from "./register.module.css";
+
+export default function RegisterPage() {
+  return (
+    <div className={styles.page}>
+      <h1 className={styles.title}>Register as User</h1>
+      <p className={styles.subtitle}>
+        Pick a unique username to join S-pay (string-ascii 24 max)
+      </p>
+      <RegisterUserForm />
+    </div>
+  );
+}
diff --git a/frontend/app/register/register.module.css b/frontend/app/register/register.module.css
@@ -0,0 +1,18 @@
+.page {
+  min-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.title {
+  font-size: 2rem;
+  margin-bottom: 0.5rem;
+}
+
+.subtitle {
+  color: #a0a0aa;
+  margin-bottom: 2rem;
+}
diff --git a/frontend/app/vault/page.tsx b/frontend/app/vault/page.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { VaultDepositForm } from "@/components/VaultDepositForm/VaultDepositForm";
+import styles from "./vault.module.css";
+
+export default function VaultPage() {
+  return (
+    <div className={styles.page}>
+      <h1 className={styles.title}>Vault Deposit</h1>
+      <p className={styles.subtitle}>
+        Deposit STX to your S-pay vault (vault-deposit)
+      </p>
+      <VaultDepositForm />
+    </div>
+  );
+}
diff --git a/frontend/app/vault/vault.module.css b/frontend/app/vault/vault.module.css
@@ -0,0 +1,18 @@
+.page {
+  min-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.title {
+  font-size: 2rem;
+  margin-bottom: 0.5rem;
+}
+
+.subtitle {
+  color: #a0a0aa;
+  margin-bottom: 2rem;
+}
diff --git a/frontend/components/ConnectWallet/ConnectWallet.module.css b/frontend/components/ConnectWallet/ConnectWallet.module.css
@@ -0,0 +1,42 @@
+.actions {
+  display: flex;
+  gap: 1.5rem;
+  justify-content: center;
+  align-items: center;
+}
+
+.address {
+  font-family: monospace;
+  font-size: 0.95rem;
+  color: var(--foreground);
+  background: rgba(255, 255, 255, 0.05);
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+}
+
+.primaryBtn {
+  background: var(--primary);
+  color: white;
+  padding: 1rem 2.5rem;
+  border-radius: 12px;
+  font-weight: 600;
+  transition: var(--transition-smooth);
+}
+
+.primaryBtn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 0 20px var(--primary-glow);
+}
+
+.secondaryBtn {
+  border: 1px solid var(--glass-border);
+  color: var(--foreground);
+  padding: 1rem 2.5rem;
+  border-radius: 12px;
+  font-weight: 600;
+  transition: var(--transition-smooth);
+}
+
+.secondaryBtn:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
diff --git a/frontend/components/ConnectWallet/ConnectWallet.tsx b/frontend/components/ConnectWallet/ConnectWallet.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import { useStacks } from "@/context/StacksContext";
+import styles from "./ConnectWallet.module.css";
+
+export function ConnectWallet() {
+  const { userData, handleConnect, handleDisconnect } = useStacks();
+  const address = userData?.profile?.stxAddress?.mainnet ?? userData?.profile?.stxAddress?.testnet;
+
+  return (
+    <div className={styles.actions}>
+      {address ? (
+        <>
+          <span className={styles.address}>{address.slice(0, 6)}…{address.slice(-4)}</span>
+          <button className={styles.secondaryBtn} onClick={handleDisconnect}>
+            Disconnect
+          </button>
+        </>
+      ) : (
+        <>
+          <button className={styles.primaryBtn} onClick={handleConnect}>
+            Connect Wallet
+          </button>
+          <button className={styles.secondaryBtn}>Learn More</button>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/components/Navbar/Navbar.module.css b/frontend/components/Navbar/Navbar.module.css
@@ -49,6 +49,21 @@
   color: var(--foreground);
 }
 
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.address {
+  font-family: monospace;
+  font-size: 0.85rem;
+  color: var(--foreground);
+  background: rgba(255, 255, 255, 0.05);
+  padding: 0.4rem 0.8rem;
+  border-radius: 8px;
+}
+
 .connectBtn {
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid var(--glass-border);

diff --git a/frontend/components/Navbar/Navbar.tsx b/frontend/components/Navbar/Navbar.tsx
@@ -1,22 +1,37 @@
 "use client";
 
 import Link from "next/link";
+import { useStacks } from "@/context/StacksContext";
 import styles from "./Navbar.module.css";
 
 export default function Navbar() {
+  const { userData, handleConnect, handleDisconnect } = useStacks();
+  const addr = userData?.profile?.stxAddress?.mainnet ?? userData?.profile?.stxAddress?.testnet;
+
   return (
     <nav className={styles.navbar}>
       <div className={styles.container}>
         <Link href="/" className={styles.logo}>
           S-pay<span className={styles.dot}>.</span>
         </Link>
         <div className={styles.links}>
+          <Link href="/register" className={styles.link}>Register</Link>
+          <Link href="/pay" className={styles.link}>Pay</Link>
+          <Link href="/vault" className={styles.link}>Vault</Link>
+          <Link href="/merchant/register" className={styles.link}>Merchant</Link>
           <Link href="/payments" className={styles.link}>Payments</Link>
           <Link href="/tokens" className={styles.link}>Tokens</Link>
           <Link href="/docs" className={styles.link}>Developers</Link>
         </div>
         <div className={styles.actions}>
-          <button className={styles.connectBtn}>Connect</button>
+          {addr ? (
+            <>
+              <span className={styles.address}>{addr.slice(0, 6)}…{addr.slice(-4)}</span>
+              <button className={styles.connectBtn} onClick={handleDisconnect}>Disconnect</button>
+            </>
+          ) : (
+            <button className={styles.connectBtn} onClick={handleConnect}>Connect</button>
+          )}
         </div>
       </div>
     </nav>

diff --git a/frontend/components/PaymentForm/PaymentForm.module.css b/frontend/components/PaymentForm/PaymentForm.module.css
@@ -0,0 +1,22 @@
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  max-width: 400px;
+}
+
+.input {
+  padding: 0.6rem 1rem;
+  border-radius: 8px;
+  border: 1px solid var(--glass-border);
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--foreground);
+}
+
+.btn {
+  background: var(--primary);
+  color: white;
+  padding: 0.75rem;
+  border-radius: 8px;
+  font-weight: 600;
+}