diff --git a/frontend/src/components/ConfirmMintDialog.jsx b/frontend/src/components/ConfirmMintDialog.jsx
index c360c5f..e6f2c98 100644
--- a/frontend/src/components/ConfirmMintDialog.jsx
+++ b/frontend/src/components/ConfirmMintDialog.jsx
@@ -10,8 +10,8 @@ const box = {
 };
 const row = { display: 'flex', justifyContent: 'space-between', margin: '0.4rem 0', fontSize: '0.9rem' };
 const btnRow = { display: 'flex', gap: '0.75rem', marginTop: '1.5rem' };
-const btnConfirm = { flex: 1, padding: '0.7rem', background: '#0ea5e9', color: '#fff', border: 'none', borderRadius: 8, fontSize: '1rem', cursor: 'pointer' };
-const btnCancel = { flex: 1, padding: '0.7rem', background: 'transparent', color: '#94a3b8', border: '1px solid #334155', borderRadius: 8, fontSize: '1rem', cursor: 'pointer' };
+const btnConfirm = { flex: 1, padding: '0.7rem', background: '#0ea5e9', color: '#fff', border: 'none', borderRadius: 8, fontSize: '1rem', cursor: 'pointer', minHeight: '44px' };
+const btnCancel = { flex: 1, padding: '0.7rem', background: 'transparent', color: '#94a3b8', border: '1px solid #334155', borderRadius: 8, fontSize: '1rem', cursor: 'pointer', minHeight: '44px' };
 
 function getFocusableElements(root) {
   if (!root) return [];
diff --git a/frontend/src/components/ConfirmationModal.jsx b/frontend/src/components/ConfirmationModal.jsx
new file mode 100644
index 0000000..8b81d56
--- /dev/null
+++ b/frontend/src/components/ConfirmationModal.jsx
@@ -0,0 +1,129 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Confirmation modal for destructive actions.
+ * Keyboard accessible with focus trap and Escape to close.
+ */
+export default function ConfirmationModal({ isOpen, title, message, onConfirm, onCancel, loading = false, isDangerous = true }) {
+  const modalRef = useRef(null);
+  const confirmBtnRef = useRef(null);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (e) => {
+      if (e.key === 'Escape') onCancel();
+      if (e.key === 'Tab') {
+        const focusableElements = modalRef.current?.querySelectorAll('button');
+        if (!focusableElements?.length) return;
+
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+
+        if (e.shiftKey) {
+          if (document.activeElement === firstElement) {
+            e.preventDefault();
+            lastElement.focus();
+          }
+        } else {
+          if (document.activeElement === lastElement) {
+            e.preventDefault();
+            firstElement.focus();
+          }
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    confirmBtnRef.current?.focus();
+
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, onCancel]);
+
+  if (!isOpen) return null;
+
+  return (
+    <>
+      <div
+        style={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          background: 'rgba(0,0,0,0.5)',
+          zIndex: 9998,
+        }}
+        onClick={onCancel}
+        aria-hidden="true"
+      />
+      <div
+        ref={modalRef}
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby="modal-title"
+        aria-describedby="modal-message"
+        style={{
+          position: 'fixed',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          background: '#0f172a',
+          border: `2px solid ${isDangerous ? '#ef4444' : '#334155'}`,
+          borderRadius: 12,
+          padding: '1.5rem',
+          maxWidth: 400,
+          width: '90%',
+          zIndex: 9999,
+          boxShadow: '0 20px 25px rgba(0,0,0,0.3)',
+        }}
+      >
+        <h2 id="modal-title" style={{ color: isDangerous ? '#fca5a5' : '#e2e8f0', marginTop: 0, marginBottom: '0.75rem', fontSize: '1.1rem' }}>
+          {title}
+        </h2>
+        <p id="modal-message" style={{ color: '#cbd5e1', marginBottom: '1.5rem', fontSize: '0.95rem', lineHeight: 1.5 }}>
+          {message}
+        </p>
+        <div style={{ display: 'flex', gap: '0.75rem', justifyContent: 'flex-end' }}>
+          <button
+            onClick={onCancel}
+            disabled={loading}
+            style={{
+              padding: '0.6rem 1.2rem',
+              background: '#334155',
+              color: '#e2e8f0',
+              border: 'none',
+              borderRadius: 6,
+              cursor: loading ? 'not-allowed' : 'pointer',
+              fontSize: '0.95rem',
+              minHeight: '44px',
+              minWidth: '44px',
+              opacity: loading ? 0.6 : 1,
+            }}
+          >
+            Cancel
+          </button>
+          <button
+            ref={confirmBtnRef}
+            onClick={onConfirm}
+            disabled={loading}
+            style={{
+              padding: '0.6rem 1.2rem',
+              background: isDangerous ? '#ef4444' : '#0ea5e9',
+              color: '#fff',
+              border: 'none',
+              borderRadius: 6,
+              cursor: loading ? 'not-allowed' : 'pointer',
+              fontSize: '0.95rem',
+              minHeight: '44px',
+              minWidth: '44px',
+              opacity: loading ? 0.6 : 1,
+            }}
+          >
+            {loading ? 'Processing…' : 'Confirm'}
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/frontend/src/components/CopyButton.jsx b/frontend/src/components/CopyButton.jsx
index 864f974..ff94490 100644
--- a/frontend/src/components/CopyButton.jsx
+++ b/frontend/src/components/CopyButton.jsx
@@ -1,8 +1,10 @@
 import { useState, useCallback } from 'react';
+import Tooltip from './Tooltip';
 
 /**
- * A small copy-to-clipboard button with a brief 'Copied!' tooltip.
+ * A small copy-to-clipboard button with a tooltip.
  * Accessible via keyboard (focusable, responds to Enter/Space).
+ * Touch target: 44×44px minimum for mobile accessibility.
  */
 export default function CopyButton({ text, label }) {
   const [copied, setCopied] = useState(false);
@@ -36,53 +38,34 @@ export default function CopyButton({ text, label }) {
   }, [handleCopy]);
 
   return (
-    <span style={{ position: 'relative', display: 'inline-flex', alignItems: 'center', marginLeft: '0.4rem' }}>
+    <Tooltip text={copied ? 'Copied!' : (label ? `Copy ${label}` : 'Copy to clipboard')} position="top">
       <button
         type="button"
         onClick={handleCopy}
         onKeyDown={handleKeyDown}
         aria-label={copied ? 'Copied!' : (label ? `Copy ${label}` : 'Copy to clipboard')}
-        title={copied ? 'Copied!' : 'Copy to clipboard'}
         style={{
           background: 'none',
           border: 'none',
           cursor: 'pointer',
-          padding: '0.15rem 0.25rem',
+          padding: '0.5rem',
           borderRadius: 4,
           color: copied ? '#4ade80' : '#64748b',
           fontSize: '0.85rem',
           lineHeight: 1,
           transition: 'color 0.15s',
           verticalAlign: 'middle',
+          minHeight: '44px',
+          minWidth: '44px',
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
         }}
         onMouseEnter={(e) => { if (!copied) e.currentTarget.style.color = '#38bdf8'; }}
         onMouseLeave={(e) => { if (!copied) e.currentTarget.style.color = '#64748b'; }}
       >
         {copied ? '✓' : '⎘'}
       </button>
-      {copied && (
-        <span
-          role="status"
-          aria-live="polite"
-          style={{
-            position: 'absolute',
-            bottom: '120%',
-            left: '50%',
-            transform: 'translateX(-50%)',
-            background: '#1e293b',
-            border: '1px solid #334155',
-            color: '#4ade80',
-            fontSize: '0.72rem',
-            padding: '0.2rem 0.5rem',
-            borderRadius: 4,
-            whiteSpace: 'nowrap',
-            pointerEvents: 'none',
-            zIndex: 10,
-          }}
-        >
-          Copied!
-        </span>
-      )}
-    </span>
+    </Tooltip>
   );
 }
diff --git a/frontend/src/components/DarkModeToggle.jsx b/frontend/src/components/DarkModeToggle.jsx
index e6e098c..5c795cd 100644
--- a/frontend/src/components/DarkModeToggle.jsx
+++ b/frontend/src/components/DarkModeToggle.jsx
@@ -1,19 +1,26 @@
+import Tooltip from './Tooltip';
+
 export default function DarkModeToggle({ dark, onToggle }) {
   return (
-    <button
-      onClick={onToggle}
-      aria-label={dark ? 'Switch to light mode' : 'Switch to dark mode'}
-      style={{
-        marginLeft: 'auto',
-        padding: '0.4rem 0.75rem',
-        background: 'transparent',
-        border: '1px solid var(--border)',
-        borderRadius: 8,
-        color: 'var(--text-muted)',
-        fontSize: '1rem',
-      }}
-    >
-      {dark ? '☀️' : '🌙'}
-    </button>
+    <Tooltip text={dark ? 'Switch to light mode' : 'Switch to dark mode'} position="bottom">
+      <button
+        onClick={onToggle}
+        aria-label={dark ? 'Switch to light mode' : 'Switch to dark mode'}
+        style={{
+          marginLeft: 'auto',
+          padding: '0.6rem 0.75rem',
+          background: 'transparent',
+          border: '1px solid var(--border)',
+          borderRadius: 8,
+          color: 'var(--text-muted)',
+          fontSize: '1rem',
+          minHeight: '44px',
+          minWidth: '44px',
+          cursor: 'pointer',
+        }}
+      >
+        {dark ? '☀️' : '🌙'}
+      </button>
+    </Tooltip>
   );
 }
diff --git a/frontend/src/components/NFTCard.jsx b/frontend/src/components/NFTCard.jsx
index b899040..90cacc8 100644
--- a/frontend/src/components/NFTCard.jsx
+++ b/frontend/src/components/NFTCard.jsx
@@ -1,5 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import CopyButton from './CopyButton';
+import Tooltip from './Tooltip';
 import NFTCardSkeleton from './NFTCardSkeleton';
 
 async function exportCertificate(record) {
@@ -94,20 +95,26 @@ export default function NFTCard({ record, onClick, loading = false }) {
         Date: {record.date_administered}
       </p>
       <p style={{ color: '#94a3b8', fontSize: '0.8rem', marginTop: '0.25rem' }}>
-        Issuer: {record.issuer?.slice(0, 8)}…{record.issuer?.slice(-4)}
+        Issuer: <Tooltip text={record.issuer} position="top">
+          <span style={{ cursor: 'help', borderBottom: '1px dotted #94a3b8' }}>
+            {record.issuer?.slice(0, 8)}…{record.issuer?.slice(-4)}
+          </span>
+        </Tooltip>
       </p>
       <button
         aria-label={`Export certificate for ${record.vaccine_name}`}
         onClick={(e) => { e.stopPropagation(); exportCertificate(record); }}
         style={{
           marginTop: '0.75rem',
-          padding: '0.35rem 0.85rem',
+          padding: '0.5rem 0.85rem',
           fontSize: '0.8rem',
           background: 'transparent',
           border: '1px solid #38bdf8',
           borderRadius: 6,
           color: '#38bdf8',
           cursor: 'pointer',
+          minHeight: '32px',
+          minWidth: '32px',
         }}
       >
         📄 {t('exportCertificate', 'Export Certificate')}
diff --git a/frontend/src/components/NavBar.jsx b/frontend/src/components/NavBar.jsx
index 283f578..5ecb1b8 100644
--- a/frontend/src/components/NavBar.jsx
+++ b/frontend/src/components/NavBar.jsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import DarkModeToggle from './DarkModeToggle';
+import Tooltip from './Tooltip';
 import { useAuth } from '../hooks/useFreighter';
 
 const NAV_LINKS = [
@@ -36,13 +37,15 @@ function WalletIndicator() {
       <button
         onClick={connect}
         style={{
-          padding: '0.4rem 1rem',
+          padding: '0.6rem 1rem',
           background: 'var(--btn-primary)',
           color: '#fff',
           border: 'none',
           borderRadius: 6,
           fontSize: '0.85rem',
           cursor: 'pointer',
+          minHeight: '44px',
+          minWidth: '44px',
         }}
       >
         Connect Wallet
@@ -58,29 +61,33 @@ function WalletIndicator() {
 
   return (
     <div ref={ref} style={{ position: 'relative' }}>
-      <button
-        onClick={() => setOpen((v) => !v)}
-        aria-expanded={open}
-        aria-haspopup="true"
-        style={{
-          display: 'inline-flex',
-          alignItems: 'center',
-          gap: '0.4rem',
-          padding: '0.4rem 0.75rem',
-          background: '#1e293b',
-          border: '1px solid #334155',
-          borderRadius: 6,
-          color: '#e2e8f0',
-          fontSize: '0.85rem',
-          cursor: 'pointer',
-        }}
-      >
-        <span
-          aria-hidden="true"
-          style={{ width: 8, height: 8, borderRadius: '50%', background: '#4ade80', display: 'inline-block' }}
-        />
-        {truncate(publicKey)}
-      </button>
+      <Tooltip text={`Wallet: ${truncate(publicKey)}`} position="bottom">
+        <button
+          onClick={() => setOpen((v) => !v)}
+          aria-expanded={open}
+          aria-haspopup="true"
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '0.4rem',
+            padding: '0.6rem 0.75rem',
+            background: '#1e293b',
+            border: '1px solid #334155',
+            borderRadius: 6,
+            color: '#e2e8f0',
+            fontSize: '0.85rem',
+            cursor: 'pointer',
+            minHeight: '44px',
+            minWidth: '44px',
+          }}
+        >
+          <span
+            aria-hidden="true"
+            style={{ width: 8, height: 8, borderRadius: '50%', background: '#4ade80', display: 'inline-block' }}
+          />
+          {truncate(publicKey)}
+        </button>
+      </Tooltip>
 
       {open && (
         <div
@@ -107,7 +114,7 @@ function WalletIndicator() {
             <button
               onClick={handleCopy}
               style={{
-                padding: '0.25rem 0.6rem',
+                padding: '0.4rem 0.6rem',
                 fontSize: '0.75rem',
                 background: 'transparent',
                 border: '1px solid #334155',
@@ -115,6 +122,8 @@ function WalletIndicator() {
                 color: '#e2e8f0',
                 cursor: 'pointer',
                 whiteSpace: 'nowrap',
+                minHeight: '32px',
+                minWidth: '32px',
               }}
             >
               {copied ? 'Copied!' : 'Copy'}
@@ -123,7 +132,7 @@ function WalletIndicator() {
           <button
             onClick={() => { disconnect(); setOpen(false); }}
             style={{
-              padding: '0.35rem 0.75rem',
+              padding: '0.5rem 0.75rem',
               background: 'transparent',
               border: '1px solid #f87171',
               borderRadius: 4,
@@ -131,6 +140,7 @@ function WalletIndicator() {
               fontSize: '0.8rem',
               cursor: 'pointer',
               textAlign: 'left',
+              minHeight: '44px',
             }}
           >
             Disconnect
@@ -191,7 +201,10 @@ export default function NavBar({ dark, onToggleDark }) {
           color: '#e2e8f0',
           fontSize: '1.5rem',
           lineHeight: 1,
-          padding: '0.25rem',
+          padding: '0.5rem',
+          minHeight: '44px',
+          minWidth: '44px',
+          cursor: 'pointer',
         }}
         className="nav-hamburger"
       >
diff --git a/frontend/src/components/Tooltip.jsx b/frontend/src/components/Tooltip.jsx
new file mode 100644
index 0000000..249fbb7
--- /dev/null
+++ b/frontend/src/components/Tooltip.jsx
@@ -0,0 +1,96 @@
+import { useState, useRef, useEffect } from 'react';
+
+/**
+ * Tooltip component that appears on hover and keyboard focus.
+ * Accessible via role="tooltip" and aria-describedby.
+ */
+export default function Tooltip({ children, text, position = 'top' }) {
+  const [visible, setVisible] = useState(false);
+  const [coords, setCoords] = useState({ top: 0, left: 0 });
+  const triggerRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const tooltipId = useRef(`tooltip-${Math.random().toString(36).substr(2, 9)}`);
+
+  useEffect(() => {
+    if (!visible || !triggerRef.current || !tooltipRef.current) return;
+
+    const trigger = triggerRef.current;
+    const tooltip = tooltipRef.current;
+    const rect = trigger.getBoundingClientRect();
+    const tooltipRect = tooltip.getBoundingClientRect();
+
+    let top, left;
+    const gap = 8;
+
+    if (position === 'top') {
+      top = rect.top - tooltipRect.height - gap;
+      left = rect.left + rect.width / 2 - tooltipRect.width / 2;
+    } else if (position === 'bottom') {
+      top = rect.bottom + gap;
+      left = rect.left + rect.width / 2 - tooltipRect.width / 2;
+    } else if (position === 'left') {
+      top = rect.top + rect.height / 2 - tooltipRect.height / 2;
+      left = rect.left - tooltipRect.width - gap;
+    } else if (position === 'right') {
+      top = rect.top + rect.height / 2 - tooltipRect.height / 2;
+      left = rect.right + gap;
+    }
+
+    // Keep tooltip within viewport
+    if (left < 0) left = 8;
+    if (left + tooltipRect.width > window.innerWidth) left = window.innerWidth - tooltipRect.width - 8;
+    if (top < 0) top = rect.bottom + gap;
+
+    setCoords({ top: Math.round(top), left: Math.round(left) });
+  }, [visible, position]);
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Escape') setVisible(false);
+  };
+
+  return (
+    <span
+      ref={triggerRef}
+      onMouseEnter={() => setVisible(true)}
+      onMouseLeave={() => setVisible(false)}
+      onFocus={() => setVisible(true)}
+      onBlur={() => setVisible(false)}
+      onKeyDown={handleKeyDown}
+      style={{ position: 'relative', display: 'inline-block' }}
+      aria-describedby={visible ? tooltipId.current : undefined}
+    >
+      {children}
+      {visible && (
+        <div
+          ref={tooltipRef}
+          id={tooltipId.current}
+          role="tooltip"
+          style={{
+            position: 'fixed',
+            top: `${coords.top}px`,
+            left: `${coords.left}px`,
+            background: '#1e293b',
+            color: '#e2e8f0',
+            padding: '0.5rem 0.75rem',
+            borderRadius: 6,
+            fontSize: '0.8rem',
+            whiteSpace: 'nowrap',
+            zIndex: 10000,
+            border: '1px solid #334155',
+            boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
+            pointerEvents: 'none',
+            animation: 'fadeIn 0.15s ease-out',
+          }}
+        >
+          {text}
+        </div>
+      )}
+      <style>{`
+        @keyframes fadeIn {
+          from { opacity: 0; transform: translateY(-4px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+      `}</style>
+    </span>
+  );
+}
diff --git a/frontend/src/pages/AdminDashboard.jsx b/frontend/src/pages/AdminDashboard.jsx
index 8a9d71a..da4dbc7 100644
--- a/frontend/src/pages/AdminDashboard.jsx
+++ b/frontend/src/pages/AdminDashboard.jsx
@@ -1,22 +1,25 @@
 import { useState, useEffect, useCallback } from 'react';
 import { useAuth } from '../hooks/useFreighter';
+import { useToast } from '../hooks/useToast';
+import ConfirmationModal from '../components/ConfirmationModal';
+import Tooltip from '../components/Tooltip';
 
 const s = {
   page:    { maxWidth: 700, width: '100%', margin: '2rem auto', padding: '0 1rem', boxSizing: 'border-box' },
   table:   { width: '100%', borderCollapse: 'collapse', fontSize: '0.9rem' },
-  th:      { textAlign: 'left', padding: '0.5rem 0.75rem', borderBottom: '1px solid #334155', color: '#94a3b8' },
-  td:      { padding: '0.5rem 0.75rem', borderBottom: '1px solid #1e293b', color: '#e2e8f0', wordBreak: 'break-all' },
-  btn:     { padding: '0.45rem 1rem', background: '#0ea5e9', color: '#fff', border: 'none', borderRadius: 6, cursor: 'pointer', fontSize: '0.9rem' },
-  btnDanger: { padding: '0.45rem 0.75rem', background: '#ef4444', color: '#fff', border: 'none', borderRadius: 6, cursor: 'pointer', fontSize: '0.85rem' },
-  btnSuccess: { padding: '0.45rem 0.75rem', background: '#16a34a', color: '#fff', border: 'none', borderRadius: 6, cursor: 'pointer', fontSize: '0.85rem', marginRight: '0.4rem' },
-  input:   { padding: '0.5rem 0.75rem', background: '#1e293b', border: '1px solid #334155', borderRadius: 6, color: '#e2e8f0', fontSize: '0.9rem', flex: 1 },
-  row:     { display: 'flex', gap: '0.75rem', marginBottom: '1.5rem', alignItems: 'center' },
+  th:      { textAlign: 'left', padding: '0.75rem', borderBottom: '1px solid #334155', color: '#94a3b8' },
+  td:      { padding: '0.75rem', borderBottom: '1px solid #1e293b', color: '#e2e8f0', wordBreak: 'break-all' },
+  btn:     { padding: '0.6rem 1rem', background: '#0ea5e9', color: '#fff', border: 'none', borderRadius: 6, cursor: 'pointer', fontSize: '0.9rem', minHeight: '44px', minWidth: '44px' },
+  btnDanger: { padding: '0.6rem 1rem', background: '#ef4444', color: '#fff', border: 'none', borderRadius: 6, cursor: 'pointer', fontSize: '0.85rem', minHeight: '44px', minWidth: '44px' },
+  btnSuccess: { padding: '0.6rem 1rem', background: '#16a34a', color: '#fff', border: 'none', borderRadius: 6, cursor: 'pointer', fontSize: '0.85rem', marginRight: '0.4rem', minHeight: '44px', minWidth: '44px' },
+  input:   { padding: '0.6rem 0.75rem', background: '#1e293b', border: '1px solid #334155', borderRadius: 6, color: '#e2e8f0', fontSize: '0.9rem', flex: 1, minHeight: '44px' },
+  row:     { display: 'flex', gap: '0.75rem', marginBottom: '1.5rem', alignItems: 'center', flexWrap: 'wrap' },
   keyBox:  { marginTop: '1rem', padding: '0.75rem 1rem', background: '#0f172a', borderRadius: 8, color: '#4ade80', fontSize: '0.85rem', wordBreak: 'break-all' },
-  badge:   (revoked) => ({ display: 'inline-block', padding: '0.15rem 0.5rem', borderRadius: 4, fontSize: '0.75rem', background: revoked ? '#7f1d1d' : '#14532d', color: revoked ? '#fca5a5' : '#86efac' }),
+  badge:   (revoked) => ({ display: 'inline-block', padding: '0.25rem 0.75rem', borderRadius: 4, fontSize: '0.75rem', background: revoked ? '#7f1d1d' : '#14532d', color: revoked ? '#fca5a5' : '#86efac' }),
   statusBadge: (status) => {
     const map = { pending: ['#78350f', '#fde68a'], approved: ['#14532d', '#86efac'], rejected: ['#7f1d1d', '#fca5a5'] };
     const [bg, color] = map[status] || ['#1e293b', '#94a3b8'];
-    return { display: 'inline-block', padding: '0.15rem 0.5rem', borderRadius: 4, fontSize: '0.75rem', background: bg, color };
+    return { display: 'inline-block', padding: '0.25rem 0.75rem', borderRadius: 4, fontSize: '0.75rem', background: bg, color };
   },
   section: { marginTop: '2.5rem' },
   h3:      { color: 'var(--text)', marginBottom: '1rem', fontSize: '1.1rem' },
@@ -24,6 +27,7 @@ const s = {
 
 export default function AdminDashboard() {
   const { publicKey, role, connect, apiFetch } = useAuth();
+  const toast = useToast();
   const [keys, setKeys]             = useState([]);
   const [label, setLabel]           = useState('');
   const [newKey, setNewKey]         = useState(null);
@@ -31,6 +35,7 @@ export default function AdminDashboard() {
   const [loading, setLoading]       = useState(false);
   const [applications, setApps]     = useState([]);
   const [reviewError, setReviewErr] = useState(null);
+  const [confirmModal, setConfirmModal] = useState({ isOpen: false, action: null, id: null });
 
   const fetchKeys = useCallback(async () => {
     const res = await apiFetch('/v1/admin/api-keys');
@@ -79,17 +84,32 @@ export default function AdminDashboard() {
       setNewKey(data.key);
       setLabel('');
       await fetchKeys();
+      toast('API key created successfully', 'success');
     } catch (err) {
       setError(err.message);
+      toast(`Error creating API key: ${err.message}`, 'error');
     } finally {
       setLoading(false);
     }
   };
 
-  const handleRevoke = async (id) => {
-    if (!window.confirm('Revoke this API key? This cannot be undone.')) return;
-    await apiFetch(`/v1/admin/api-keys/${id}`, { method: 'DELETE' });
-    await fetchKeys();
+  const handleRevokeClick = (id, label) => {
+    setConfirmModal({ isOpen: true, action: 'revoke', id, label });
+  };
+
+  const handleRevokeConfirm = async () => {
+    const { id } = confirmModal;
+    setLoading(true);
+    try {
+      await apiFetch(`/v1/admin/api-keys/${id}`, { method: 'DELETE' });
+      await fetchKeys();
+      toast('API key revoked successfully', 'success');
+      setConfirmModal({ isOpen: false, action: null, id: null });
+    } catch (err) {
+      toast(`Error revoking API key: ${err.message}`, 'error');
+    } finally {
+      setLoading(false);
+    }
   };
 
   const handleReview = async (id, decision) => {
@@ -104,8 +124,10 @@ export default function AdminDashboard() {
       const data = await res.json();
       if (!res.ok) throw new Error(data.error);
       await fetchApplications();
+      toast(`Application ${decision} successfully`, 'success');
     } catch (err) {
       setReviewErr(err.message);
+      toast(`Error reviewing application: ${err.message}`, 'error');
     }
   };
 
@@ -157,9 +179,15 @@ export default function AdminDashboard() {
                 <td style={s.td}><span style={s.badge(k.revoked)}>{k.revoked ? 'Revoked' : 'Active'}</span></td>
                 <td style={s.td}>
                   {!k.revoked && (
-                    <button style={s.btnDanger} onClick={() => handleRevoke(k.id)} aria-label={`Revoke ${k.label}`}>
-                      Revoke
-                    </button>
+                    <Tooltip text="Revoke this API key" position="left">
+                      <button
+                        style={s.btnDanger}
+                        onClick={() => handleRevokeClick(k.id, k.label)}
+                        aria-label={`Revoke ${k.label}`}
+                      >
+                        Revoke
+                      </button>
+                    </Tooltip>
                   )}
                 </td>
               </tr>
@@ -195,8 +223,12 @@ export default function AdminDashboard() {
                   <td style={s.td}>
                     {app.status === 'pending' && (
                       <>
-                        <button style={s.btnSuccess} onClick={() => handleReview(app.id, 'approved')} aria-label={`Approve ${app.name}`}>Approve</button>
-                        <button style={s.btnDanger}  onClick={() => handleReview(app.id, 'rejected')} aria-label={`Reject ${app.name}`}>Reject</button>
+                        <Tooltip text="Approve this application" position="left">
+                          <button style={s.btnSuccess} onClick={() => handleReview(app.id, 'approved')} aria-label={`Approve ${app.name}`}>Approve</button>
+                        </Tooltip>
+                        <Tooltip text="Reject this application" position="left">
+                          <button style={s.btnDanger}  onClick={() => handleReview(app.id, 'rejected')} aria-label={`Reject ${app.name}`}>Reject</button>
+                        </Tooltip>
                       </>
                     )}
                   </td>
@@ -206,6 +238,16 @@ export default function AdminDashboard() {
           </table>
         )}
       </div>
+
+      <ConfirmationModal
+        isOpen={confirmModal.isOpen}
+        title="Revoke API Key?"
+        message={`Are you sure you want to revoke the API key "${confirmModal.label}"? This action cannot be undone and any applications using this key will stop working.`}
+        onConfirm={handleRevokeConfirm}
+        onCancel={() => setConfirmModal({ isOpen: false, action: null, id: null })}
+        loading={loading}
+        isDangerous={true}
+      />
     </div>
   );
 }
diff --git a/frontend/src/pages/AnalyticsDashboard.jsx b/frontend/src/pages/AnalyticsDashboard.jsx
index 844a916..7b23f14 100644
--- a/frontend/src/pages/AnalyticsDashboard.jsx
+++ b/frontend/src/pages/AnalyticsDashboard.jsx
@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { useAuth } from '../hooks/useFreighter';
+import Tooltip from '../components/Tooltip';
 
 const ANALYTICS_BASE = import.meta.env.VITE_ANALYTICS_URL || 'http://localhost:8001';
 const REFRESH_INTERVAL = 60_000;
@@ -14,11 +15,11 @@ const s = {
   error: { color: '#f87171', padding: '0.75rem', background: '#1e293b', borderRadius: 8, marginBottom: '1rem' },
   loading: { color: '#64748b', textAlign: 'center', padding: '2rem 0' },
   table: { width: '100%', borderCollapse: 'collapse', fontSize: '0.9rem' },
-  th: { textAlign: 'left', color: '#64748b', fontWeight: 500, padding: '0.5rem 0.75rem', borderBottom: '1px solid #1e293b' },
-  td: { padding: '0.6rem 0.75rem', color: '#e2e8f0', borderBottom: '1px solid #1e293b' },
+  th: { textAlign: 'left', color: '#64748b', fontWeight: 500, padding: '0.75rem', borderBottom: '1px solid #1e293b' },
+  td: { padding: '0.75rem', color: '#e2e8f0', borderBottom: '1px solid #1e293b' },
   badge: (severity) => ({
     display: 'inline-block',
-    padding: '0.2rem 0.6rem',
+    padding: '0.25rem 0.75rem',
     borderRadius: 4,
     fontSize: '0.75rem',
     fontWeight: 600,
@@ -41,9 +42,11 @@ function BarChart({ data }) {
     <div style={s.barWrap} role="list" aria-label="Vaccination rates by vaccine type">
       {data.map((d) => (
         <div key={d.vaccine_name} style={s.barRow} role="listitem">
-          <span style={s.barLabel} title={d.vaccine_name}>
-            {d.vaccine_name.length > 18 ? d.vaccine_name.slice(0, 17) + '…' : d.vaccine_name}
-          </span>
+          <Tooltip text={d.vaccine_name} position="right">
+            <span style={s.barLabel} title={d.vaccine_name}>
+              {d.vaccine_name.length > 18 ? d.vaccine_name.slice(0, 17) + '…' : d.vaccine_name}
+            </span>
+          </Tooltip>
           <div style={s.barTrack} aria-label={`${d.vaccine_name}: ${d.count} doses`}>
             <div style={s.barFill(Math.round((d.count / max) * 100))} />
           </div>
diff --git a/frontend/src/pages/IssuerDashboard.jsx b/frontend/src/pages/IssuerDashboard.jsx
index ab52e2f..41f4a79 100644
--- a/frontend/src/pages/IssuerDashboard.jsx
+++ b/frontend/src/pages/IssuerDashboard.jsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAuth } from '../hooks/useFreighter';
 import { useVaccination } from '../hooks/useVaccination';
+import { useToast } from '../hooks/useToast';
 import ConfirmMintDialog from '../components/ConfirmMintDialog';
 import CopyButton from '../components/CopyButton';
 import RoleBadge from '../components/RoleBadge';
@@ -9,10 +10,10 @@ import RoleBadge from '../components/RoleBadge';
 const styles = {
   page: { maxWidth: 500, width: '100%', margin: '2rem auto', padding: '0 1rem', boxSizing: 'border-box' },
   form: { display: 'flex', flexDirection: 'column', gap: '1rem' },
-  input: { padding: '0.6rem 0.75rem', background: '#1e293b', border: '1px solid #334155', borderRadius: 8, color: '#e2e8f0', fontSize: '1rem', width: '100%', boxSizing: 'border-box' },
-  inputError: { padding: '0.6rem 0.75rem', background: '#1e293b', border: '1px solid #f87171', borderRadius: 8, color: '#e2e8f0', fontSize: '1rem', width: '100%', boxSizing: 'border-box' },
-  btn: { padding: '0.7rem', background: '#0ea5e9', color: '#fff', border: 'none', borderRadius: 8, fontSize: '1rem', width: '100%', touchAction: 'manipulation' },
-  btnDisabled: { padding: '0.7rem', background: '#334155', color: '#64748b', border: 'none', borderRadius: 8, fontSize: '1rem', cursor: 'not-allowed', width: '100%' },
+  input: { padding: '0.6rem 0.75rem', background: '#1e293b', border: '1px solid #334155', borderRadius: 8, color: '#e2e8f0', fontSize: '1rem', width: '100%', boxSizing: 'border-box', minHeight: '44px' },
+  inputError: { padding: '0.6rem 0.75rem', background: '#1e293b', border: '1px solid #f87171', borderRadius: 8, color: '#e2e8f0', fontSize: '1rem', width: '100%', boxSizing: 'border-box', minHeight: '44px' },
+  btn: { padding: '0.7rem', background: '#0ea5e9', color: '#fff', border: 'none', borderRadius: 8, fontSize: '1rem', width: '100%', touchAction: 'manipulation', minHeight: '44px', cursor: 'pointer' },
+  btnDisabled: { padding: '0.7rem', background: '#334155', color: '#64748b', border: 'none', borderRadius: 8, fontSize: '1rem', cursor: 'not-allowed', width: '100%', minHeight: '44px' },
   label: { color: '#94a3b8', fontSize: '0.85rem', marginBottom: '0.25rem' },
   fieldError: { color: '#f87171', fontSize: '0.78rem', marginTop: '0.25rem' },
   statusBadge: { display: 'inline-flex', alignItems: 'center', gap: '0.5rem', padding: '0.5rem 0.75rem', borderRadius: 6, fontSize: '0.85rem', marginBottom: '1rem' },
@@ -30,6 +31,7 @@ export default function IssuerDashboard() {
   const { t } = useTranslation();
   const { publicKey, role, connect } = useAuth();
   const { issueVaccination, checkIssuerStatus, loading } = useVaccination();
+  const toast = useToast();
 
   const [form, setForm] = useState(() => {
     try {
@@ -100,6 +102,9 @@ export default function IssuerDashboard() {
       setMintResult(result);
       setForm(EMPTY_FORM);
       sessionStorage.removeItem(FORM_KEY);
+      toast('Vaccination NFT issued successfully!', 'success');
+    } else {
+      toast('Failed to issue vaccination NFT. Please try again.', 'error');
     }
   };
 
diff --git a/frontend/src/pages/IssuerOnboarding.jsx b/frontend/src/pages/IssuerOnboarding.jsx
index a7721ed..26aef9b 100644
--- a/frontend/src/pages/IssuerOnboarding.jsx
+++ b/frontend/src/pages/IssuerOnboarding.jsx
@@ -1,18 +1,20 @@
 import { useState } from 'react';
 import { useAuth } from '../hooks/useFreighter';
+import { useToast } from '../hooks/useToast';
 
 const s = {
   page:   { maxWidth: 520, width: '100%', margin: '2rem auto', padding: '0 1rem', boxSizing: 'border-box' },
   field:  { display: 'flex', flexDirection: 'column', gap: '0.35rem', marginBottom: '1rem' },
   label:  { color: '#94a3b8', fontSize: '0.85rem' },
-  input:  { padding: '0.5rem 0.75rem', background: '#1e293b', border: '1px solid #334155', borderRadius: 6, color: '#e2e8f0', fontSize: '0.9rem' },
-  btn:    { padding: '0.55rem 1.25rem', background: '#0ea5e9', color: '#fff', border: 'none', borderRadius: 6, cursor: 'pointer', fontSize: '0.9rem', marginTop: '0.5rem' },
+  input:  { padding: '0.6rem 0.75rem', background: '#1e293b', border: '1px solid #334155', borderRadius: 6, color: '#e2e8f0', fontSize: '0.9rem', minHeight: '44px' },
+  btn:    { padding: '0.7rem 1.25rem', background: '#0ea5e9', color: '#fff', border: 'none', borderRadius: 6, cursor: 'pointer', fontSize: '0.9rem', marginTop: '0.5rem', minHeight: '44px' },
   success:{ marginTop: '1rem', padding: '0.75rem 1rem', background: '#14532d', borderRadius: 8, color: '#86efac', fontSize: '0.9rem' },
   error:  { marginTop: '0.5rem', color: '#f87171', fontSize: '0.9rem' },
 };
 
 export default function IssuerOnboarding() {
   const { publicKey, connect, apiFetch } = useAuth();
+  const toast = useToast();
   const [form, setForm] = useState({ name: '', license_number: '', country: '' });
   const [loading, setLoading] = useState(false);
   const [success, setSuccess] = useState(null);
@@ -47,8 +49,10 @@ export default function IssuerOnboarding() {
       if (!res.ok) throw new Error(data.error || 'Submission failed');
       setSuccess(data.message);
       setForm({ name: '', license_number: '', country: '' });
+      toast('Application submitted successfully!', 'success');
     } catch (err) {
       setError(err.message);
+      toast(`Error: ${err.message}`, 'error');
     } finally {
       setLoading(false);
     }
diff --git a/frontend/src/pages/PatientDashboard.jsx b/frontend/src/pages/PatientDashboard.jsx
index 0c774e9..060ec5c 100644
--- a/frontend/src/pages/PatientDashboard.jsx
+++ b/frontend/src/pages/PatientDashboard.jsx
@@ -15,7 +15,7 @@ import ConsentScreen from '../components/ConsentScreen';
 const styles = {
   page: { maxWidth: 700, width: '100%', margin: '2rem auto', padding: '0 1rem', boxSizing: 'border-box' },
   header: { borderLeft: '4px solid #0ea5e9', paddingLeft: '0.75rem', marginBottom: '1.5rem' },
-  btn: { padding: '0.6rem 1.5rem', background: '#0ea5e9', color: '#fff', border: 'none', borderRadius: 8, cursor: 'pointer' },
+  btn: { padding: '0.7rem 1.5rem', background: '#0ea5e9', color: '#fff', border: 'none', borderRadius: 8, cursor: 'pointer', minHeight: '44px', minWidth: '44px' },
 };
 
 export default function PatientDashboard() {
diff --git a/frontend/src/pages/VerifyPage.jsx b/frontend/src/pages/VerifyPage.jsx
index 5c2b771..bf088c1 100644
--- a/frontend/src/pages/VerifyPage.jsx
+++ b/frontend/src/pages/VerifyPage.jsx
@@ -7,8 +7,8 @@ import { useToast } from '../hooks/useToast';
 
 const styles = {
   page: { maxWidth: 600, margin: '2rem auto', padding: '0 1rem' },
-  input: { padding: '0.6rem 0.75rem', background: 'var(--input-bg)', border: '1px solid var(--border)', borderRadius: 8, color: 'var(--text)', fontSize: '1rem', width: '100%' },
-  btn: { padding: '0.6rem 1.5rem', background: 'var(--btn-primary)', color: '#fff', border: 'none', borderRadius: 8, fontSize: '1rem', marginTop: '0.75rem' },
+  input: { padding: '0.6rem 0.75rem', background: 'var(--input-bg)', border: '1px solid var(--border)', borderRadius: 8, color: 'var(--text)', fontSize: '1rem', width: '100%', boxSizing: 'border-box', minHeight: '44px' },
+  btn: { padding: '0.7rem 1.5rem', background: 'var(--btn-primary)', color: '#fff', border: 'none', borderRadius: 8, fontSize: '1rem', marginTop: '0.75rem', minHeight: '44px', cursor: 'pointer' },
 };
 
 export default function VerifyPage() {
@@ -28,6 +28,7 @@ export default function VerifyPage() {
       const data = await res.json();
       if (!res.ok) throw new Error(data.error);
       setResult(data);
+      toast('Verification successful', 'success');
     } catch (e) {
       setError(e.message || 'Verification failed.');
       toast(e.message || 'Verification failed.', 'error');