diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 64bfdab..eae5a44 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -39,12 +39,16 @@ function Toast({ msg, type }) {
 function Modal({ title, onClose, children }) {
   return (
     <div style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.8)', zIndex:5000,
-      display:'flex', alignItems:'flex-end', justifyContent:'center' }}
+      display:'flex',
+      alignItems: window.innerWidth>=768 ? 'center' : 'flex-end',
+      justifyContent:'center', padding: window.innerWidth>=768 ? 24 : 0 }}
       onClick={e=>e.target===e.currentTarget&&onClose()}>
-      <div style={{ background:'#1a1a1e', border:'1px solid rgba(255,255,255,0.1)',
-        borderRadius:'16px 16px 0 0', padding:'20px 20px 40px', width:'100%',
-        maxWidth:600, maxHeight:'85vh', overflowY:'auto' }}>
-        <div style={{ width:36, height:4, background:'rgba(255,255,255,0.2)', borderRadius:2, margin:'0 auto 20px' }}/>
+      <div style={{ background:'#1a1a1e', border:'1px solid rgba(255,255,255,0.15)',
+        borderRadius: window.innerWidth>=768 ? 16 : '16px 16px 0 0',
+        padding:'20px 20px 40px', width:'100%',
+        maxWidth:600, maxHeight:'85vh', overflowY:'auto',
+        boxShadow: window.innerWidth>=768 ? '0 24px 80px rgba(0,0,0,0.6)' : 'none' }}>
+      {window.innerWidth < 768 && <div style={{ width:36, height:4, background:'rgba(255,255,255,0.2)', borderRadius:2, margin:'0 auto 20px' }}/>}
         <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:18 }}>
           <span style={{ color:'#fff', fontFamily:"'Space Mono',monospace", fontSize:14, fontWeight:700 }}>{title}</span>
           <button onClick={onClose} style={{ background:'transparent', border:'none', color:'rgba(255,255,255,0.4)', fontSize:20, cursor:'pointer', padding:'0 4px' }}>✕</button>
@@ -291,20 +295,36 @@ function BottomNav({ active, setActive, user, onLogout, updateInfo, onUpdateClic
     );
   };
 
-  const Sheet = ({open, onClose, children}) => !open ? null : (
-    <div style={{ position:'fixed', inset:0, zIndex:4000, background:'rgba(0,0,0,0.6)' }}
-      onClick={onClose}>
-      <div style={{ position:'absolute', bottom:`calc(${NAV_H}px + env(safe-area-inset-bottom, 0px))`,
-        left:0, right:0, background:'#1a1a1e',
-        borderTop:'1px solid rgba(255,255,255,0.1)',
-        borderRadius:'16px 16px 0 0', paddingTop:8 }}
-        onClick={e=>e.stopPropagation()}>
-        <div style={{ width:36, height:4, background:'rgba(255,255,255,0.15)', borderRadius:2, margin:'0 auto 10px' }}/>
-        {children}
-        <div style={{height:'env(safe-area-inset-bottom, 0px)'}}/>
+  const Sheet = ({open, onClose, children}) => {
+    if (!open) return null;
+    const isDesktop = window.innerWidth >= 768;
+    if (isDesktop) return (
+      <div style={{ position:'fixed', inset:0, zIndex:4000, background:'rgba(0,0,0,0.6)',
+        display:'flex', alignItems:'center', justifyContent:'center', padding:24 }}
+        onClick={onClose}>
+        <div style={{ background:'#1a1a1e', border:'1px solid rgba(255,255,255,0.15)',
+          borderRadius:16, padding:'20px 0', width:'100%', maxWidth:380,
+          boxShadow:'0 24px 80px rgba(0,0,0,0.6)' }}
+          onClick={e=>e.stopPropagation()}>
+          {children}
+        </div>
       </div>
-    </div>
-  );
+    );
+    return (
+      <div style={{ position:'fixed', inset:0, zIndex:4000, background:'rgba(0,0,0,0.6)' }}
+        onClick={onClose}>
+        <div style={{ position:'absolute', bottom:`calc(${NAV_H}px + env(safe-area-inset-bottom, 0px))`,
+          left:0, right:0, background:'#1a1a1e',
+          borderTop:'1px solid rgba(255,255,255,0.1)',
+          borderRadius:'16px 16px 0 0', paddingTop:8 }}
+          onClick={e=>e.stopPropagation()}>
+          <div style={{ width:36, height:4, background:'rgba(255,255,255,0.15)', borderRadius:2, margin:'0 auto 10px' }}/>
+          {children}
+          <div style={{height:'env(safe-area-inset-bottom, 0px)'}}/>
+        </div>
+      </div>
+    );
+  };
 
   const mainNav = [
     { id:'dashboard', Icon:HomeIcon,  label:'Home' },
diff --git a/frontend/src/confirm.jsx b/frontend/src/confirm.jsx
index 6722f1e..9414824 100644
--- a/frontend/src/confirm.jsx
+++ b/frontend/src/confirm.jsx
@@ -19,14 +19,18 @@ export function useConfirm() {
 
   const ConfirmDialog = () => !state.open ? null : (
     <div style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.75)',
-      zIndex:9000, display:'flex', alignItems:'flex-end', justifyContent:'center' }}
+      zIndex:9000, display:'flex',
+      alignItems: window.innerWidth>=768 ? 'center' : 'flex-end',
+      justifyContent:'center', padding: window.innerWidth>=768 ? 24 : 0 }}
       onClick={() => handle(false)}>
-      <div style={{ background:'#1a1a1e', borderRadius:'16px 16px 0 0', width:'100%',
-        maxWidth:500, padding:'20px 20px 32px',
-        border:'1px solid rgba(255,255,255,0.1)' }}
+      <div style={{ background:'#1a1a1e',
+        borderRadius: window.innerWidth>=768 ? 16 : '16px 16px 0 0',
+        width:'100%', maxWidth:500, padding:'20px 20px 32px',
+        border:'1px solid rgba(255,255,255,0.15)',
+        boxShadow: window.innerWidth>=768 ? '0 24px 80px rgba(0,0,0,0.6)' : 'none' }}
         onClick={e => e.stopPropagation()}>
-        <div style={{ width:36, height:4, background:'rgba(255,255,255,0.15)',
-          borderRadius:2, margin:'0 auto 18px' }}/>
+      {window.innerWidth < 768 && <div style={{ width:36, height:4, background:'rgba(255,255,255,0.15)',
+          borderRadius:2, margin:'0 auto 18px' }}/>}
         <p style={{ color:'#fff', fontFamily:'monospace', fontSize:14,
           textAlign:'center', marginBottom:20, lineHeight:1.6 }}>{state.msg}</p>
         <div style={{ display:'flex', gap:10 }}>