diff --git a/.env.example b/.env.example
index d684082..a3a61fe 100644
--- a/.env.example
+++ b/.env.example
@@ -10,7 +10,7 @@
 PROJECT_NAME=jama
 
 # Image version to run (set by build.sh, or use 'latest')
-JAMA_VERSION=0.9.76
+JAMA_VERSION=0.9.77
 
 # App port — the host port Docker maps to the container
 PORT=3000
diff --git a/backend/package.json b/backend/package.json
index 139d8cb..a03f3a7 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jama-backend",
-  "version": "0.9.76",
+  "version": "0.9.77",
   "description": "TeamChat backend server",
   "main": "src/index.js",
   "scripts": {
diff --git a/build.sh b/build.sh
index b2a47e6..aebf93f 100644
--- a/build.sh
+++ b/build.sh
@@ -13,7 +13,7 @@
 # ─────────────────────────────────────────────────────────────
 set -euo pipefail
 
-VERSION="${1:-0.9.76}"
+VERSION="${1:-0.9.77}"
 ACTION="${2:-}"
 REGISTRY="${REGISTRY:-}"
 IMAGE_NAME="jama"
diff --git a/frontend/package.json b/frontend/package.json
index cc774f6..8626620 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jama-frontend",
-  "version": "0.9.76",
+  "version": "0.9.77",
   "private": true,
   "scripts": {
     "dev": "vite",
diff --git a/frontend/src/components/MobileEventForm.jsx b/frontend/src/components/MobileEventForm.jsx
index cb85797..726d2dd 100644
--- a/frontend/src/components/MobileEventForm.jsx
+++ b/frontend/src/components/MobileEventForm.jsx
@@ -280,26 +280,14 @@ export default function MobileEventForm({ event, eventTypes, userGroups, selecte
 
         {/* Event Type */}
         <MobileRow icon={<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 2H2l8 9.46V19l4 2v-8.54L22 2z"/></svg>} label="Event Type">
-          <div>
-            <div style={{ display:'flex', alignItems:'center', gap:8 }}>
-              <select value={typeId} onChange={e=>setTypeId(e.target.value)} style={{ background:'transparent',border:'none',fontSize:15,color:'var(--text-primary)',flex:1,outline:'none' }}>
-                {localTypes.map(t=><option key={t.id} value={t.id}>{t.name}</option>)}
-              </select>
-              {isToolManager && (
-                <button onClick={()=>setShowAddType(v=>!v)} style={{ background:'none',border:'none',cursor:'pointer',color:'var(--primary)',fontSize:13,fontWeight:600,flexShrink:0,padding:'2px 4px' }}>
-                  {showAddType ? 'Cancel' : '+ Type'}
-                </button>
-              )}
-            </div>
-            {showAddType && (
-              <div style={{ marginTop:10, padding:'12px', background:'var(--background)', borderRadius:'var(--radius)', border:'1px solid var(--border)' }}>
-                <input value={newTypeName} onChange={e=>setNewTypeName(e.target.value)} placeholder="Type name…" style={{ width:'100%', padding:'8px 10px', border:'1px solid var(--border)', borderRadius:'var(--radius)', fontSize:14, marginBottom:8, boxSizing:'border-box', background:'var(--surface)', color:'var(--text-primary)' }}/>
-                <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:8 }}>
-                  <label style={{ fontSize:13, color:'var(--text-tertiary)', flexShrink:0 }}>Colour</label>
-                  <input type="color" value={newTypeColour} onChange={e=>setNewTypeColour(e.target.value)} style={{ flex:1, height:32, border:'1px solid var(--border)', borderRadius:4, padding:2 }}/>
-                </div>
-                <button onClick={createEventType} disabled={savingType||!newTypeName.trim()} style={{ width:'100%', padding:'9px', background:'var(--primary)', color:'white', border:'none', borderRadius:'var(--radius)', fontSize:14, fontWeight:600, cursor:'pointer', opacity:savingType?0.6:1 }}>{savingType?'Creating…':'Create Type'}</button>
-              </div>
+          <div style={{ display:'flex', alignItems:'center', gap:8 }}>
+            <select value={typeId} onChange={e=>setTypeId(e.target.value)} style={{ background:'transparent',border:'none',fontSize:15,color:'var(--text-primary)',flex:1,outline:'none' }}>
+              {localTypes.map(t=><option key={t.id} value={t.id}>{t.name}</option>)}
+            </select>
+            {isToolManager && (
+              <button onClick={()=>setShowAddType(true)} style={{ background:'none',border:'none',cursor:'pointer',color:'var(--primary)',fontSize:13,fontWeight:600,flexShrink:0,padding:'2px 4px' }}>
+                + Type
+              </button>
             )}
           </div>
         </MobileRow>
@@ -389,6 +377,33 @@ export default function MobileEventForm({ event, eventTypes, userGroups, selecte
       {showStartDate && <CalendarPicker value={sd} onChange={v=>{setSd(v);setShowStartDate(false);}} onClose={()=>setShowStartDate(false)}/>}
       {showEndDate   && <CalendarPicker value={ed} onChange={v=>{setEd(v);setShowEndDate(false);}} onClose={()=>setShowEndDate(false)}/>}
       {showRecurrence && <RecurrenceSheet value={recRule} onChange={v=>{setRecRule(v);}} onClose={()=>setShowRecurrence(false)}/>}
+      {showAddType && (
+        <div style={{ position:'fixed',inset:0,zIndex:200,display:'flex',alignItems:'flex-end' }} onClick={e=>e.target===e.currentTarget&&setShowAddType(false)}>
+          <div style={{ width:'100%',background:'var(--surface)',borderRadius:'16px 16px 0 0',padding:20,boxShadow:'0 -4px 20px rgba(0,0,0,0.2)' }}>
+            <div style={{ display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:16 }}>
+              <span style={{ fontWeight:700,fontSize:16 }}>New Event Type</span>
+              <button onClick={()=>{setShowAddType(false);setNewTypeName('');setNewTypeColour('#6366f1');}} style={{ background:'none',border:'none',cursor:'pointer',color:'var(--text-secondary)',fontSize:20,lineHeight:1 }}>✕</button>
+            </div>
+            <input
+              autoFocus
+              value={newTypeName}
+              onChange={e=>setNewTypeName(e.target.value)}
+              onKeyDown={e=>e.key==='Enter'&&createEventType()}
+              placeholder="Type name…"
+              style={{ width:'100%',padding:'12px 14px',border:'1px solid var(--border)',borderRadius:'var(--radius)',fontSize:16,marginBottom:12,boxSizing:'border-box',background:'var(--background)',color:'var(--text-primary)' }}
+            />
+            <div style={{ display:'flex',alignItems:'center',gap:12,marginBottom:16 }}>
+              <label style={{ fontSize:14,color:'var(--text-tertiary)',flexShrink:0 }}>Colour</label>
+              <input type="color" value={newTypeColour} onChange={e=>setNewTypeColour(e.target.value)} style={{ flex:1,height:40,border:'1px solid var(--border)',borderRadius:'var(--radius)',padding:3,cursor:'pointer' }}/>
+            </div>
+            <button
+              onClick={createEventType}
+              disabled={savingType||!newTypeName.trim()}
+              style={{ width:'100%',padding:'14px',background:'var(--primary)',color:'white',border:'none',borderRadius:'var(--radius)',fontSize:16,fontWeight:700,cursor:'pointer',opacity:savingType?0.6:1 }}
+            >{savingType?'Creating…':'Create Type'}</button>
+          </div>
+        </div>
+      )}
     </div>
   );
 }