diff --git a/app/package-lock.json b/app/package-lock.json
index 45b9825..9d86f91 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -23,6 +23,9 @@
         "react-native": "0.81.5",
         "react-native-safe-area-context": "^5.8.0",
         "react-native-web": "^0.21.2"
+      },
+      "devDependencies": {
+        "typescript": "^5.9.3"
       }
     },
     "node_modules/@0no-co/graphql.web": {
@@ -7871,6 +7874,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/ua-parser-js": {
       "version": "1.0.41",
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.41.tgz",
diff --git a/app/package.json b/app/package.json
index ee27c52..5c7522c 100644
--- a/app/package.json
+++ b/app/package.json
@@ -6,7 +6,8 @@
     "start": "expo start",
     "android": "expo run:android",
     "ios": "expo run:ios",
-    "web": "expo start --web"
+    "web": "expo start --web",
+    "lint": "node scripts/check-jsx.mjs"
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "2.2.0",
@@ -25,5 +26,8 @@
     "react-native-safe-area-context": "^5.8.0",
     "react-native-web": "^0.21.2"
   },
-  "private": true
+  "private": true,
+  "devDependencies": {
+    "typescript": "^5.9.3"
+  }
 }
diff --git a/app/scripts/check-jsx.mjs b/app/scripts/check-jsx.mjs
new file mode 100644
index 0000000..9d2de5f
--- /dev/null
+++ b/app/scripts/check-jsx.mjs
@@ -0,0 +1,35 @@
+import { parse } from '@babel/parser';
+import { readdirSync, readFileSync, statSync } from 'node:fs';
+import { join } from 'node:path';
+
+const roots = ['App.jsx', 'index.js', 'src'];
+const extensions = new Set(['.js', '.jsx']);
+const files = [];
+
+function collect(path) {
+  const stat = statSync(path);
+  if (stat.isDirectory()) {
+    for (const entry of readdirSync(path)) {
+      collect(join(path, entry));
+    }
+    return;
+  }
+
+  const extension = path.slice(path.lastIndexOf('.'));
+  if (extensions.has(extension)) {
+    files.push(path);
+  }
+}
+
+for (const root of roots) {
+  collect(root);
+}
+
+for (const file of files) {
+  parse(readFileSync(file, 'utf8'), {
+    sourceType: 'module',
+    plugins: ['jsx'],
+  });
+}
+
+console.log(`Checked ${files.length} JavaScript files.`);
diff --git a/app/src/screens/CalorieScreen.jsx b/app/src/screens/CalorieScreen.jsx
index 439e76a..66bde58 100644
--- a/app/src/screens/CalorieScreen.jsx
+++ b/app/src/screens/CalorieScreen.jsx
@@ -266,7 +266,8 @@ export default function CalorieScreen({ onOpenDrawer, avatarLabel }) {
               <Text style={styles.sectionTitleDark}>Macro targets</Text>
               <View style={styles.headerActions}>
                 <Pressable style={styles.secondaryButton} onPress={() => {
-                setMeals(baseMeals);
+                    setMeals(baseMeals);
+                }}>
                   <Text style={styles.secondaryButtonText}>Reset day</Text>
                 </Pressable>
                 <Pressable style={styles.secondaryButton} onPress={() => {
diff --git a/app/src/screens/HangoutScreen.jsx b/app/src/screens/HangoutScreen.jsx
index a47f6c3..e10bb9d 100644
--- a/app/src/screens/HangoutScreen.jsx
+++ b/app/src/screens/HangoutScreen.jsx
@@ -35,6 +35,8 @@ export default function HangoutScreen({ onOpenDrawer, avatarLabel, sessionToken,
     const [roomNameError, setRoomNameError] = useState('');
     const [searchQuery, setSearchQuery] = useState('');
     const [activeFilter, setActiveFilter] = useState('All');
+    const [statusMessage, setStatusMessage] = useState('');
+    const [statusTone, setStatusTone] = useState('info');
     const [toast, setToast] = useState({ visible: false, message: '', type: 'info' });
     const [roomFetchError, setRoomFetchError] = useState(null);
     const [loadingAction, setLoadingAction] = useState('idle');
@@ -111,6 +113,11 @@ export default function HangoutScreen({ onOpenDrawer, avatarLabel, sessionToken,
         return activeRoom.ownerDisplayName.trim().toLowerCase() === userName.trim().toLowerCase();
     }, [activeRoom, userName]);
     const canShareScreen = isHost || meetingSettings.allowGuestScreenShare;
+
+    function showStatus(message, tone = 'info') {
+        setStatusTone(tone);
+        setStatusMessage(message);
+    }
     
     const filteredRooms = useMemo(() => {
       let result = rooms || [];
@@ -200,6 +207,7 @@ export default function HangoutScreen({ onOpenDrawer, avatarLabel, sessionToken,
         setActiveRoom(result.room);
         setJoinInput(result.room.joinLink);
         seedMeetingRoom(result.room);
+        showStatus(`${result.room.roomName} is ready to join.`, 'success');
         setToast({ visible: true, message: `Room ${result.room.roomCode} is live.`, type: 'success' });
         await refreshRooms();
     }
@@ -226,6 +234,7 @@ export default function HangoutScreen({ onOpenDrawer, avatarLabel, sessionToken,
         setActiveRoom(result.room);
         setJoinInput(result.room.roomCode);
         seedMeetingRoom(result.room);
+        showStatus(`${result.room.roomName} is ready to join.`, 'success');
         setToast({ visible: true, message: `Joined ${result.room.roomName}.`, type: 'success' });
         await refreshRooms();
         if (fromIncomingLink) {
@@ -237,20 +246,17 @@ export default function HangoutScreen({ onOpenDrawer, avatarLabel, sessionToken,
         const result = await getRoom(roomCode);
         setLoadingAction('idle');
         if (!result.ok) {
-            setStatusTone('error');
-            setStatusMessage(result.message);
+            showStatus(result.message, 'error');
             return;
         }
         setActiveRoom(result.room);
         setJoinInput(result.room.roomCode);
         seedMeetingRoom(result.room);
-        setStatusTone('info');
-        setStatusMessage(`${result.room.roomName} is ready.`);
+        showStatus(`${result.room.roomName} is ready.`, 'info');
     }
     async function handleShareRoom(friendName) {
         if (!activeRoom) {
-            setStatusTone('error');
-            setStatusMessage('Create or join a room before sharing it.');
+            showStatus('Create or join a room before sharing it.', 'error');
             return;
         }
         const message = friendName
@@ -262,21 +268,18 @@ export default function HangoutScreen({ onOpenDrawer, avatarLabel, sessionToken,
             message,
         });
         setLoadingAction('idle');
-        setStatusTone('success');
-        setStatusMessage(friendName ? `Share sheet opened for ${friendName}.` : 'Share sheet opened.');
+        showStatus(friendName ? `Share sheet opened for ${friendName}.` : 'Share sheet opened.', 'success');
     }
     function handleEnterMeeting() {
         if (!activeRoom) {
-            setStatusTone('error');
-            setStatusMessage('Open a room first.');
+            showStatus('Open a room first.', 'error');
             return;
         }
         if (!meetingParticipants.length) {
             seedMeetingRoom(activeRoom);
         }
         setMeetingOpen(true);
-        setStatusTone('info');
-        setStatusMessage(`Inside ${activeRoom.roomName}.`);
+        showStatus(`Inside ${activeRoom.roomName}.`, 'info');
     }
     function handleLeaveMeeting() {
         setMeetingOpen(false);
@@ -284,8 +287,7 @@ export default function HangoutScreen({ onOpenDrawer, avatarLabel, sessionToken,
         setShareScreenOn(false);
         setRecordingOn(false);
         setFocusedParticipantId(meetingParticipants[1]?.id ?? meetingParticipants[0]?.id ?? null);
-        setStatusTone('info');
-        setStatusMessage(activeRoom ? `Left ${activeRoom.roomName}. Room is still active.` : 'Left the meeting.');
+        showStatus(activeRoom ? `Left ${activeRoom.roomName}. Room is still active.` : 'Left the meeting.', 'info');
     }
     function updateSelfParticipant(updater) {
         setMeetingParticipants((current) => current.map((participant, index) => (index === 0 ? updater(participant) : participant)));
@@ -446,6 +448,15 @@ export default function HangoutScreen({ onOpenDrawer, avatarLabel, sessionToken,
               {activeRoom.roomType} • {activeRoom.ownerDisplayName} • {activeRoom.participantCount} in room
             </Text>
             <Text style={styles.joinLinkText}>{activeRoom.joinLink}</Text>
+            {statusMessage ? (<View style={[
+                styles.statusBanner,
+                statusTone === 'success' && styles.statusBannerSuccess,
+                statusTone === 'error' && styles.statusBannerError,
+                statusTone === 'info' && styles.statusBannerInfo,
+            ]}>
+              <Ionicons name={statusTone === 'error' ? 'warning' : statusTone === 'success' ? 'checkmark-circle' : 'information-circle'} size={18} color={statusTone === 'error' ? '#B3261E' : theme.colors.accentStrong}/>
+              <Text style={styles.statusBannerText}>{statusMessage}</Text>
+            </View>) : null}
             <View style={styles.previewCard}>
               <View style={styles.previewVisual}>
                 <Text style={styles.previewInitials}>{getInitials(userName)}</Text>
@@ -629,8 +640,8 @@ export default function HangoutScreen({ onOpenDrawer, avatarLabel, sessionToken,
                 <Text style={styles.captionText}>Prof. Deshmukh: Let&apos;s revise normalization before we solve the next DBMS problem.</Text>
               </View>) : null}
 
-            {reactionBurst ? (<View style={styles.reactionBubble}>
-                <Text style={styles.reactionEmoji}>{reactionBurst.icon}</Text>
+          {reactionBurst ? (<View style={styles.reactionBubble}>
+                <Ionicons name={reactionBurst.icon} size={24} color="#FFFFFF"/>
                 <Text style={styles.reactionLabel}>{reactionBurst.label}</Text>
               </View>) : null}
           </View>
@@ -661,12 +672,12 @@ export default function HangoutScreen({ onOpenDrawer, avatarLabel, sessionToken,
 
         <View style={styles.reactionRow}>
           {[
-                { icon: '👏', label: 'Clap' },
-                { icon: '🔥', label: 'Fire' },
-                { icon: '👍', label: 'Thumbs up' },
-                { icon: '🙌', label: 'Celebrate' },
+                { icon: 'hand-left', label: 'Raise hand' },
+                { icon: 'checkmark-circle', label: 'Agree' },
+                { icon: 'help-circle', label: 'Question' },
+                { icon: 'bulb', label: 'Idea' },
             ].map((reaction) => (<Pressable key={reaction.label} style={styles.reactionChip} onPress={() => sendReaction(reaction.icon, reaction.label)}>
-              <Text style={styles.reactionChipEmoji}>{reaction.icon}</Text>
+              <Ionicons name={reaction.icon} size={16} color={theme.colors.darkText}/>
               <Text style={styles.reactionChipText}>{reaction.label}</Text>
             </Pressable>))}
         </View>
@@ -838,12 +849,15 @@ function MeetingPanelSheet({ visible, panel, participants, messages, activityFee
             </ScrollView>) : null}
 
           {panel === 'settings' ? (<ScrollView style={styles.panelScroll} showsVerticalScrollIndicator={false}>
+              {!isHost ? (<View style={styles.guestNotice}>
+                  <Text style={styles.guestNoticeText}>Only the host can change room-wide settings.</Text>
+                </View>) : null}
               <SettingsRow label="Noise cancellation" value={settings.noiseCancellation} onValueChange={(value) => onUpdateSettings({ ...settings, noiseCancellation: value })}/>
               <SettingsRow label="Low light mode" value={settings.lowLightMode} onValueChange={(value) => onUpdateSettings({ ...settings, lowLightMode: value })}/>
               <SettingsRow label="Mirror self view" value={settings.mirrorSelfView} onValueChange={(value) => onUpdateSettings({ ...settings, mirrorSelfView: value })}/>
-              <SettingsRow label="Allow in-call chat" value={settings.allowChat} onValueChange={(value) => onUpdateSettings({ ...settings, allowChat: value })}/>
-              <SettingsRow label="Allow guest screen share" value={settings.allowGuestScreenShare} onValueChange={(value) => onUpdateSettings({ ...settings, allowGuestScreenShare: value })}/>
-              <SettingsRow label="Waiting room" value={settings.waitingRoomEnabled} onValueChange={(value) => onUpdateSettings({ ...settings, waitingRoomEnabled: value })}/>
+              <SettingsRow label="Allow in-call chat" value={settings.allowChat} disabled={!isHost} onValueChange={(value) => onUpdateSettings({ ...settings, allowChat: value })}/>
+              <SettingsRow label="Allow guest screen share" value={settings.allowGuestScreenShare} disabled={!isHost} onValueChange={(value) => onUpdateSettings({ ...settings, allowGuestScreenShare: value })}/>
+              <SettingsRow label="Waiting room" value={settings.waitingRoomEnabled} disabled={!isHost} onValueChange={(value) => onUpdateSettings({ ...settings, waitingRoomEnabled: value })}/>
 
               <Text style={styles.settingsLabel}>Layout</Text>
               <View style={styles.settingsChipRow}>
@@ -881,10 +895,10 @@ function MeetingPanelSheet({ visible, panel, participants, messages, activityFee
       </View>
     </Modal>);
 }
-function SettingsRow({ label, value, onValueChange, }) {
-    return (<View style={styles.settingsRow}>
+function SettingsRow({ label, value, disabled = false, onValueChange, }) {
+    return (<View style={[styles.settingsRow, disabled && styles.settingsRowDisabled]}>
       <Text style={styles.settingsText}>{label}</Text>
-      <Switch value={value} onValueChange={onValueChange} trackColor={{ false: '#DADCE0', true: theme.colors.accentSoft }} thumbColor={value ? theme.colors.accentStrong : '#FFFFFF'}/>
+      <Switch value={value} disabled={disabled} onValueChange={onValueChange} trackColor={{ false: '#DADCE0', true: theme.colors.accentSoft }} thumbColor={value ? theme.colors.accentStrong : '#FFFFFF'}/>
     </View>);
 }
 const panelTitleMap = {
@@ -1923,6 +1937,9 @@ const styles = StyleSheet.create({
         borderBottomWidth: 1,
         borderBottomColor: theme.colors.line,
     },
+    settingsRowDisabled: {
+        opacity: 0.55,
+    },
     settingsText: {
         color: theme.colors.text,
         fontSize: 15,
diff --git a/app/tsconfig.json b/app/tsconfig.json
new file mode 100644
index 0000000..05207c6
--- /dev/null
+++ b/app/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "allowJs": false,
+    "checkJs": false,
+    "jsx": "react-native",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "strict": false
+  },
+  "files": ["types/empty.d.ts"]
+}
diff --git a/app/types/empty.d.ts b/app/types/empty.d.ts
new file mode 100644
index 0000000..cb0ff5c
--- /dev/null
+++ b/app/types/empty.d.ts
@@ -0,0 +1 @@
+export {};