notareum · zaghadon · May 29, 2026 · Apr 27, 2026 · Apr 27, 2026 · Apr 27, 2026
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@notareum/sdk": "file:../notareum-ts-sdk",
+    "@notareum/sdk": "^1.0.0",
     "@tanstack/react-query": "^5.62.0",
     "connectkit": "^1.8.2",
     "ethers": "^6.13.4",

diff --git a/src/app/(app)/dashboard/page.tsx b/src/app/(app)/dashboard/page.tsx
@@ -1,11 +1,13 @@
 'use client';
 
-import Link from 'next/link';
-import { useEffect, useState } from 'react';
 import { useAccount, useBalance } from 'wagmi';
+import { useEffect, useState } from 'react';
+
+import Link from 'next/link';
+import TierBadge from '@/components/TierBadge';
 import { ValidatorTier } from '@notareum/sdk';
-import { useNotareum } from '@/hooks/useNotareum';
 import { formatTokenAmount } from '@/lib/format';
+import { useNotareum } from '@/hooks/useNotareum';
 
 function formatEthBal(value: bigint): string {
   try {
@@ -15,7 +17,6 @@ function formatEthBal(value: bigint): string {
     return num.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 4 });
   } catch { return '0'; }
 }
-import TierBadge from '@/components/TierBadge';
 
 function truncateAddr(addr?: string) {
   if (!addr) return '';
@@ -89,7 +90,7 @@ export default function DashboardPage() {
   return (
     <div className="space-y-8">
       {/* Decorative background blobs (absolute-positioned, contained inside <main>) */}
-      <div className="relative -mt-6 sm:-mt-8 lg:-mt-10">
+      <div className="relative -mt-6 sm:-mt-8 lg:-mt-10 overflow-hidden pointer-events-none hidden sm:block" aria-hidden>
         <div className="decor-blur w-[420px] h-[420px] -top-20 -left-20" style={{ background: 'color-mix(in srgb, var(--brand) 35%, transparent)' }} />
         <div className="decor-blur w-[360px] h-[360px] top-40 right-0" style={{ background: 'color-mix(in srgb, var(--brand-soft) 30%, transparent)' }} />
       </div>
@@ -168,7 +169,7 @@ export default function DashboardPage() {
           </div>
 
           {/* Quick actions */}
-          <div className="grid grid-cols-3 gap-2.5">
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-2.5">
             <QuickAction
               href="/registry"
               label="Register"

diff --git a/src/app/(app)/explorer/page.tsx b/src/app/(app)/explorer/page.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import { useState } from 'react';
 import PageHeader from '@/components/PageHeader';
 import ResourceCard from '@/components/ResourceCard';
 import { useNotareumFactory } from '@/hooks/useNotareum';
+import { useState } from 'react';
 
 interface FoundResource {
   resourceId: string;
@@ -63,8 +63,8 @@ export default function ExplorerPage() {
       />
 
       {/* Search */}
-      <form onSubmit={handleSearch} className="glass-panel p-5 flex gap-3 mb-6">
-        <div className="flex items-center flex-1 gap-2 px-3 rounded-lg" style={{ background: 'var(--bg)', border: '1px solid var(--border)' }}>
+      <form onSubmit={handleSearch} className="glass-panel p-4 sm:p-5 flex flex-col sm:flex-row gap-3 mb-6">
+        <div className="flex items-center flex-1 min-w-0 gap-2 px-3 rounded-lg" style={{ background: 'var(--bg)', border: '1px solid var(--border)' }}>
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ color: 'var(--text-muted)' }}>
             <circle cx="11" cy="11" r="8" />
             <line x1="21" y1="21" x2="16.65" y2="16.65" />
@@ -77,7 +77,7 @@ export default function ExplorerPage() {
             onChange={(e) => setQuery(e.target.value)}
           />
         </div>
-        <button type="submit" className="btn-primary text-sm" disabled={busy}>
+        <button type="submit" className="btn-primary text-sm w-full sm:w-auto" disabled={busy}>
           {busy ? '…' : 'Search'}
         </button>
       </form>
@@ -101,7 +101,7 @@ export default function ExplorerPage() {
       {/* Stats */}
       <section className="mb-8">
         <h2 className="text-lg font-semibold mb-4" style={{ color: 'var(--text)' }}>Protocol Stats</h2>
-        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4">
           <StatCard label="Registrations" value="—" hint="Indexer pending" />
           <StatCard label="Verified" value="—" hint="Indexer pending" />
           <StatCard label="Pending" value="—" hint="Indexer pending" />

diff --git a/src/app/(app)/governance/page.tsx b/src/app/(app)/governance/page.tsx
@@ -1,10 +1,11 @@
 'use client';
 
+import { formatPercent, formatTokenAmount } from '@/lib/format';
 import { useEffect, useState } from 'react';
-import { useAccount } from 'wagmi';
-import { parseEther } from 'viem';
-import { formatTokenAmount, formatPercent } from '@/lib/format';
+
 import PageHeader from '@/components/PageHeader';
+import { parseEther } from 'viem';
+import { useAccount } from 'wagmi';
 import { useNotareumFactory } from '@/hooks/useNotareum';
 
 const DAY = 86400;
@@ -123,7 +124,7 @@ export default function GovernancePage() {
       />
 
       {/* Voting power summary */}
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
         <div className="glass-panel p-5">
           <div className="stat-label mb-2">My Voting Power</div>
           <div className="stat-value">{formatTokenAmount(votingPower)}</div>
@@ -161,7 +162,7 @@ export default function GovernancePage() {
 
           <div>
             <label className="label-field">Duration</label>
-            <div className="grid grid-cols-5 gap-2">
+            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-2">
               {DURATIONS.map((d, i) => (
                 <button
                   key={d.label}

diff --git a/src/app/(app)/layout.tsx b/src/app/(app)/layout.tsx
@@ -1,9 +1,9 @@
 'use client';
 
+import Sidebar from '@/components/Sidebar';
+import { useAccount } from 'wagmi';
 import { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { useAccount } from 'wagmi';
-import Sidebar from '@/components/Sidebar';
 
 export default function AppLayout({ children }: { children: React.ReactNode }) {
   const router = useRouter();
@@ -19,8 +19,8 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="flex min-h-screen" style={{ background: 'var(--bg)' }}>
       <Sidebar />
-      <main className="flex-1 min-w-0">
-        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8 lg:py-10">
+      <main className="flex-1 min-w-0 overflow-x-hidden pt-14 lg:pt-0">
+        <div className="max-w-6xl mx-auto px-3 sm:px-6 lg:px-8 py-6 sm:py-8 lg:py-10">
           {children}
         </div>
       </main>

diff --git a/src/app/(app)/staking/page.tsx b/src/app/(app)/staking/page.tsx
@@ -96,7 +96,7 @@ export default function StakingPage() {
       />
 
       {/* Tier thresholds */}
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-6">
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-3 mb-6">
         {TIER_THRESHOLDS.map((t) => (
           <div
             key={t.tier}

diff --git a/src/app/(app)/verification/page.tsx b/src/app/(app)/verification/page.tsx
@@ -1,10 +1,10 @@
 'use client';
 
-import { useState } from 'react';
-import { useAccount } from 'wagmi';
-import { formatEther } from 'viem';
 import PageHeader from '@/components/PageHeader';
+import { formatEther } from 'viem';
+import { useAccount } from 'wagmi';
 import { useNotareumFactory } from '@/hooks/useNotareum';
+import { useState } from 'react';
 
 const LEVELS = [
   { value: 0, label: 'Basic', fee: 100n * 10n ** 18n, description: 'Quick community check via 3 attestations.' },
@@ -83,7 +83,7 @@ export default function VerificationPage() {
       />
 
       {/* Level selector cards */}
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
         {LEVELS.map((l) => (
           <button
             key={l.value}

diff --git a/src/app/(entry)/page.tsx b/src/app/(entry)/page.tsx
@@ -1,11 +1,12 @@
 'use client';
 
-import Image from 'next/image';
 import { useEffect, useState } from 'react';
-import { useRouter } from 'next/navigation';
+
+import ConnectButton from '@/components/ConnectButton';
+import Image from 'next/image';
 import { useAccount } from 'wagmi';
+import { useRouter } from 'next/navigation';
 import { useTheme } from 'next-themes';
-import ConnectButton from '@/components/ConnectButton';
 
 export default function EntryPage() {
   const router = useRouter();
@@ -77,14 +78,14 @@ export default function EntryPage() {
         <div className="w-full max-w-6xl mx-auto px-6 sm:px-10 py-10 lg:py-16">
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16 items-center">
             {/* Left: brand messaging */}
-            <div className="animate-fade-up">
+            <div className="animate-fade-up order-2 lg:order-1">
               <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-mono mb-6" style={{ background: 'var(--brand-fog)', color: 'var(--brand)', border: '1px solid color-mix(in srgb, var(--brand) 25%, transparent)' }}>
                 <span className="w-1.5 h-1.5 rounded-full animate-pulse" style={{ background: 'var(--brand)' }} />
                 Sepolia Testnet
               </div>
 
               <h1
-                className="text-5xl sm:text-6xl font-bold tracking-tight mb-5"
+                className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight mb-5"
                 style={{ color: 'var(--text)', letterSpacing: '-0.035em', lineHeight: 1.02 }}
               >
                 The Trust Layer
@@ -158,7 +159,7 @@ export default function EntryPage() {
             </div>
 
             {/* Right: connect card */}
-            <div className="animate-fade-up delay-200 flex justify-center lg:justify-end">
+            <div className="animate-fade-up delay-200 flex justify-center lg:justify-end order-1 lg:order-2">
               <div className="glass-panel p-8 sm:p-10 w-full max-w-md relative overflow-hidden">
                 {/* Subtle corner glow */}
                 <div
@@ -216,7 +217,7 @@ export default function EntryPage() {
 
       {/* Footer */}
       <footer
-        className="relative z-10 px-6 sm:px-10 py-5 flex flex-col sm:flex-row items-center justify-between gap-3"
+        className="relative z-10 px-6 sm:px-10 py-5 flex flex-col-reverse sm:flex-row items-center justify-between gap-3"
         style={{ borderTop: '1px solid var(--border)' }}
       >
         <div className="flex items-center gap-4 text-xs font-mono" style={{ color: 'var(--text-muted)' }}>

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -325,8 +325,11 @@ pre {
   background: var(--border);
   border: 1px solid var(--border);
   border-radius: 6px;
-  overflow: hidden;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
 }
+.segmented-nav::-webkit-scrollbar { display: none; }
 .segmented-nav button {
   background: var(--bg-alt);
   color: var(--text-muted);
@@ -417,14 +420,15 @@ pre {
 
 /* ─── Dashboard stat number ─── */
 .stat-value {
-  font-size: clamp(1.25rem, 3vw, 1.75rem);
+  font-size: clamp(1.125rem, 3vw, 1.75rem);
   font-weight: 700;
   letter-spacing: -0.02em;
   line-height: 1.2;
   color: var(--text);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  max-width: 100%;
 }
 .stat-label {
   font-size: 0.75rem;

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -187,7 +187,7 @@ export default function Sidebar() {
     <>
       {/* Mobile top bar */}
       <div
-        className="lg:hidden sticky top-0 z-40 flex items-center justify-between px-4 h-14 border-b backdrop-blur-sm"
+        className="lg:hidden fixed top-0 left-0 right-0 z-40 flex items-center justify-between px-4 h-14 border-b backdrop-blur-sm"
         style={{ borderColor: 'var(--border)', backgroundColor: 'color-mix(in srgb, var(--bg) 92%, transparent)' }}
       >
         <Link href="/dashboard" className="flex items-center gap-2">