diff --git a/app/src/main.tsx b/app/src/main.tsx
index 78f382d3..40760479 100644
--- a/app/src/main.tsx
+++ b/app/src/main.tsx
@@ -1,7 +1,7 @@
 import { useContext, useRef, useCallback } from 'react';
 import { StyleSheet, Text, View, Button } from 'react-native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { Chat, Images, Settings } from './screens'
+import { Chat, Images, Settings, DesignLab } from './screens'
 import { Header } from './components'
 import FeatherIcon from '@expo/vector-icons/Feather'
 import {
@@ -57,6 +57,20 @@ function MainComponent() {
             ),
           }}
         />
+        <Tab.Screen
+          name="Lab"
+          component={DesignLab}
+          options={{
+            headerShown: false,
+            tabBarIcon: ({ color, size }) => (
+              <FeatherIcon
+                name="layers"
+                color={color}
+                size={size}
+              />
+            ),
+          }}
+        />
         <Tab.Screen
           name="Settings"
           component={Settings}
diff --git a/app/src/screens/index.ts b/app/src/screens/index.ts
index 73ce53c7..515e7355 100644
--- a/app/src/screens/index.ts
+++ b/app/src/screens/index.ts
@@ -1,3 +1,4 @@
 export { Chat } from './chat'
 export { Images } from './images'
-export { Settings } from './settings'
\ No newline at end of file
+export { Settings } from './settings'
+export { DesignLab } from './prototypes'
\ No newline at end of file
diff --git a/app/src/screens/prototypes/AuroraChat.tsx b/app/src/screens/prototypes/AuroraChat.tsx
new file mode 100644
index 00000000..c4a7923f
--- /dev/null
+++ b/app/src/screens/prototypes/AuroraChat.tsx
@@ -0,0 +1,411 @@
+import {
+  View,
+  Text,
+  KeyboardAvoidingView,
+  StyleSheet,
+  TouchableOpacity,
+  TextInput,
+  ScrollView,
+} from 'react-native'
+import { useState, useRef } from 'react'
+import Ionicons from '@expo/vector-icons/Ionicons'
+
+const AURORA_THEME = {
+  gradientStart: '#0f0c29',
+  gradientMid: '#1a1040',
+  gradientEnd: '#24243e',
+  cardBg: 'rgba(255, 255, 255, 0.06)',
+  cardBorder: 'rgba(255, 255, 255, 0.12)',
+  glowPrimary: '#7c3aed',
+  glowSecondary: '#06b6d4',
+  glowTertiary: '#ec4899',
+  textPrimary: '#f8fafc',
+  textSecondary: 'rgba(248, 250, 252, 0.7)',
+  textMuted: 'rgba(248, 250, 252, 0.4)',
+  inputBg: 'rgba(255, 255, 255, 0.08)',
+  inputBorder: 'rgba(255, 255, 255, 0.15)',
+  accentGradient: ['#7c3aed', '#06b6d4'],
+  userBubbleGradient: ['#7c3aed', '#6366f1'],
+  font: 'Geist-Regular',
+  fontMedium: 'Geist-Medium',
+  fontSemiBold: 'Geist-SemiBold',
+  fontBold: 'Geist-Bold',
+}
+
+const MOCK_MODELS = [
+  { label: 'Claude Sonnet 5', icon: 'sparkles-outline', active: true },
+  { label: 'GPT 5.2', icon: 'flash-outline', active: false },
+  { label: 'Gemini', icon: 'diamond-outline', active: false },
+  { label: 'Kimi K2.7', icon: 'planet-outline', active: false },
+]
+
+const MOCK_MESSAGES = [
+  { user: 'How can I implement a custom hook for managing WebSocket connections in React?', assistant: 'Here\'s a clean approach to a WebSocket custom hook:\n\n```typescript\nfunction useWebSocket(url: string) {\n  const [messages, setMessages] = useState([]);\n  const wsRef = useRef<WebSocket | null>(null);\n\n  useEffect(() => {\n    wsRef.current = new WebSocket(url);\n    wsRef.current.onmessage = (event) => {\n      setMessages(prev => [...prev, JSON.parse(event.data)]);\n    };\n    return () => wsRef.current?.close();\n  }, [url]);\n\n  const send = useCallback((data) => {\n    wsRef.current?.send(JSON.stringify(data));\n  }, []);\n\n  return { messages, send };\n}\n```\n\nThis handles connection lifecycle, automatic cleanup, and provides a stable `send` function.' },
+  { user: 'Can you add reconnection logic with exponential backoff?' },
+]
+
+export function AuroraChat() {
+  const [input, setInput] = useState('')
+  const [selectedModel, setSelectedModel] = useState(0)
+  const scrollViewRef = useRef<ScrollView | null>(null)
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.backgroundGradient}>
+        <View style={styles.gradientLayer1} />
+        <View style={styles.gradientLayer2} />
+        <View style={styles.gradientLayer3} />
+      </View>
+
+      <KeyboardAvoidingView
+        behavior="padding"
+        style={styles.keyboardAvoid}
+        keyboardVerticalOffset={100}
+      >
+        {/* Header with model chips */}
+        <View style={styles.header}>
+          <View style={styles.headerTop}>
+            <Text style={styles.headerTitle}>Aurora</Text>
+            <TouchableOpacity style={styles.headerAction}>
+              <Ionicons name="settings-outline" size={20} color={AURORA_THEME.textSecondary} />
+            </TouchableOpacity>
+          </View>
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={styles.modelChipsContainer}
+          >
+            {MOCK_MODELS.map((model, index) => (
+              <TouchableOpacity
+                key={index}
+                onPress={() => setSelectedModel(index)}
+                style={[
+                  styles.modelChip,
+                  selectedModel === index && styles.modelChipActive
+                ]}
+              >
+                <Ionicons
+                  name={model.icon as any}
+                  size={14}
+                  color={selectedModel === index ? AURORA_THEME.textPrimary : AURORA_THEME.textMuted}
+                />
+                <Text style={[
+                  styles.modelChipText,
+                  selectedModel === index && styles.modelChipTextActive
+                ]}>
+                  {model.label}
+                </Text>
+              </TouchableOpacity>
+            ))}
+          </ScrollView>
+        </View>
+
+        {/* Messages */}
+        <ScrollView
+          ref={scrollViewRef}
+          style={styles.messagesContainer}
+          contentContainerStyle={styles.messagesContent}
+          showsVerticalScrollIndicator={false}
+        >
+          {MOCK_MESSAGES.map((msg, index) => (
+            <View key={index} style={styles.messageGroup}>
+              {/* User message */}
+              <View style={styles.userMessageContainer}>
+                <View style={styles.userBubble}>
+                  <Text style={styles.userMessageText}>{msg.user}</Text>
+                </View>
+              </View>
+
+              {/* Assistant message */}
+              {msg.assistant && (
+                <View style={styles.assistantMessageContainer}>
+                  <View style={styles.assistantGlowIndicator} />
+                  <View style={styles.assistantBubble}>
+                    <Text style={styles.assistantMessageText}>{msg.assistant}</Text>
+                    <View style={styles.assistantActions}>
+                      <TouchableOpacity style={styles.actionButton}>
+                        <Ionicons name="copy-outline" size={14} color={AURORA_THEME.textMuted} />
+                      </TouchableOpacity>
+                      <TouchableOpacity style={styles.actionButton}>
+                        <Ionicons name="refresh-outline" size={14} color={AURORA_THEME.textMuted} />
+                      </TouchableOpacity>
+                    </View>
+                  </View>
+                </View>
+              )}
+
+              {/* Loading indicator for last message without response */}
+              {!msg.assistant && index === MOCK_MESSAGES.length - 1 && (
+                <View style={styles.assistantMessageContainer}>
+                  <View style={styles.assistantGlowIndicator} />
+                  <View style={styles.loadingBubble}>
+                    <View style={styles.typingDots}>
+                      <View style={[styles.dot, styles.dot1]} />
+                      <View style={[styles.dot, styles.dot2]} />
+                      <View style={[styles.dot, styles.dot3]} />
+                    </View>
+                  </View>
+                </View>
+              )}
+            </View>
+          ))}
+        </ScrollView>
+
+        {/* Input area */}
+        <View style={styles.inputArea}>
+          <View style={styles.inputContainer}>
+            <TouchableOpacity style={styles.attachButton}>
+              <Ionicons name="add-circle-outline" size={22} color={AURORA_THEME.textSecondary} />
+            </TouchableOpacity>
+            <TextInput
+              style={styles.textInput}
+              placeholder="Ask anything..."
+              placeholderTextColor={AURORA_THEME.textMuted}
+              value={input}
+              onChangeText={setInput}
+              multiline
+            />
+            <TouchableOpacity style={styles.sendButton}>
+              <View style={styles.sendButtonInner}>
+                <Ionicons name="arrow-up" size={18} color="#fff" />
+              </View>
+            </TouchableOpacity>
+          </View>
+          <Text style={styles.inputHint}>
+            {MOCK_MODELS[selectedModel].label} may produce inaccurate information
+          </Text>
+        </View>
+      </KeyboardAvoidingView>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: AURORA_THEME.gradientStart,
+  },
+  backgroundGradient: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  gradientLayer1: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: AURORA_THEME.gradientStart,
+  },
+  gradientLayer2: {
+    position: 'absolute',
+    top: -100,
+    right: -100,
+    width: 400,
+    height: 400,
+    borderRadius: 200,
+    backgroundColor: AURORA_THEME.glowPrimary,
+    opacity: 0.08,
+  },
+  gradientLayer3: {
+    position: 'absolute',
+    bottom: -50,
+    left: -100,
+    width: 350,
+    height: 350,
+    borderRadius: 175,
+    backgroundColor: AURORA_THEME.glowSecondary,
+    opacity: 0.06,
+  },
+  keyboardAvoid: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 60,
+    paddingBottom: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: 'rgba(255, 255, 255, 0.06)',
+  },
+  headerTop: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 20,
+    marginBottom: 14,
+  },
+  headerTitle: {
+    fontFamily: AURORA_THEME.fontBold,
+    fontSize: 22,
+    color: AURORA_THEME.textPrimary,
+    letterSpacing: -0.5,
+  },
+  headerAction: {
+    padding: 8,
+    borderRadius: 20,
+    backgroundColor: AURORA_THEME.cardBg,
+    borderWidth: 1,
+    borderColor: AURORA_THEME.cardBorder,
+  },
+  modelChipsContainer: {
+    paddingHorizontal: 16,
+    gap: 8,
+  },
+  modelChip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 8,
+    paddingHorizontal: 14,
+    borderRadius: 20,
+    backgroundColor: 'rgba(255, 255, 255, 0.04)',
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.08)',
+    gap: 6,
+  },
+  modelChipActive: {
+    backgroundColor: 'rgba(124, 58, 237, 0.25)',
+    borderColor: 'rgba(124, 58, 237, 0.5)',
+  },
+  modelChipText: {
+    fontFamily: AURORA_THEME.fontMedium,
+    fontSize: 13,
+    color: AURORA_THEME.textMuted,
+  },
+  modelChipTextActive: {
+    color: AURORA_THEME.textPrimary,
+  },
+  messagesContainer: {
+    flex: 1,
+  },
+  messagesContent: {
+    padding: 16,
+    paddingBottom: 20,
+  },
+  messageGroup: {
+    marginBottom: 24,
+  },
+  userMessageContainer: {
+    alignItems: 'flex-end',
+    marginBottom: 16,
+  },
+  userBubble: {
+    maxWidth: '80%',
+    backgroundColor: 'rgba(124, 58, 237, 0.3)',
+    borderWidth: 1,
+    borderColor: 'rgba(124, 58, 237, 0.4)',
+    borderRadius: 20,
+    borderBottomRightRadius: 6,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+  },
+  userMessageText: {
+    fontFamily: AURORA_THEME.font,
+    fontSize: 15,
+    color: AURORA_THEME.textPrimary,
+    lineHeight: 22,
+  },
+  assistantMessageContainer: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    marginBottom: 8,
+  },
+  assistantGlowIndicator: {
+    width: 3,
+    height: 24,
+    borderRadius: 2,
+    backgroundColor: AURORA_THEME.glowSecondary,
+    marginRight: 12,
+    marginTop: 4,
+    opacity: 0.8,
+  },
+  assistantBubble: {
+    flex: 1,
+    backgroundColor: AURORA_THEME.cardBg,
+    borderWidth: 1,
+    borderColor: AURORA_THEME.cardBorder,
+    borderRadius: 16,
+    borderTopLeftRadius: 4,
+    paddingVertical: 14,
+    paddingHorizontal: 16,
+  },
+  assistantMessageText: {
+    fontFamily: AURORA_THEME.font,
+    fontSize: 15,
+    color: AURORA_THEME.textPrimary,
+    lineHeight: 23,
+    opacity: 0.95,
+  },
+  assistantActions: {
+    flexDirection: 'row',
+    marginTop: 12,
+    gap: 8,
+  },
+  actionButton: {
+    padding: 6,
+    borderRadius: 8,
+    backgroundColor: 'rgba(255, 255, 255, 0.05)',
+  },
+  loadingBubble: {
+    flex: 1,
+    backgroundColor: AURORA_THEME.cardBg,
+    borderWidth: 1,
+    borderColor: AURORA_THEME.cardBorder,
+    borderRadius: 16,
+    borderTopLeftRadius: 4,
+    paddingVertical: 18,
+    paddingHorizontal: 20,
+  },
+  typingDots: {
+    flexDirection: 'row',
+    gap: 6,
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: AURORA_THEME.glowSecondary,
+  },
+  dot1: { opacity: 0.4 },
+  dot2: { opacity: 0.6 },
+  dot3: { opacity: 0.9 },
+  inputArea: {
+    paddingHorizontal: 16,
+    paddingBottom: 20,
+    paddingTop: 12,
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    backgroundColor: AURORA_THEME.inputBg,
+    borderWidth: 1,
+    borderColor: AURORA_THEME.inputBorder,
+    borderRadius: 24,
+    paddingHorizontal: 6,
+    paddingVertical: 6,
+  },
+  attachButton: {
+    padding: 8,
+    marginBottom: 2,
+  },
+  textInput: {
+    flex: 1,
+    fontFamily: AURORA_THEME.font,
+    fontSize: 15,
+    color: AURORA_THEME.textPrimary,
+    paddingVertical: 8,
+    paddingHorizontal: 4,
+    maxHeight: 100,
+  },
+  sendButton: {
+    marginBottom: 2,
+  },
+  sendButtonInner: {
+    width: 34,
+    height: 34,
+    borderRadius: 17,
+    backgroundColor: AURORA_THEME.glowPrimary,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  inputHint: {
+    fontFamily: AURORA_THEME.font,
+    fontSize: 11,
+    color: AURORA_THEME.textMuted,
+    textAlign: 'center',
+    marginTop: 8,
+  },
+})
diff --git a/app/src/screens/prototypes/DesignLab.tsx b/app/src/screens/prototypes/DesignLab.tsx
new file mode 100644
index 00000000..47542142
--- /dev/null
+++ b/app/src/screens/prototypes/DesignLab.tsx
@@ -0,0 +1,244 @@
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Dimensions,
+} from 'react-native'
+import { useState, useContext } from 'react'
+import { ThemeContext } from '../../context'
+import { AuroraChat } from './AuroraChat'
+import { MonoChat } from './MonoChat'
+
+const { width } = Dimensions.get('window')
+
+type DesignDirection = 'select' | 'aurora' | 'mono'
+
+export function DesignLab() {
+  const [activeDesign, setActiveDesign] = useState<DesignDirection>('select')
+  const { theme } = useContext(ThemeContext)
+
+  if (activeDesign === 'aurora') {
+    return (
+      <View style={{ flex: 1 }}>
+        <TouchableOpacity
+          style={styles.backButton}
+          onPress={() => setActiveDesign('select')}
+        >
+          <Text style={styles.backButtonText}>{'<'} Back to Lab</Text>
+        </TouchableOpacity>
+        <AuroraChat />
+      </View>
+    )
+  }
+
+  if (activeDesign === 'mono') {
+    return (
+      <View style={{ flex: 1 }}>
+        <TouchableOpacity
+          style={[styles.backButton, styles.backButtonLight]}
+          onPress={() => setActiveDesign('select')}
+        >
+          <Text style={[styles.backButtonText, styles.backButtonTextLight]}>{'<'} Back to Lab</Text>
+        </TouchableOpacity>
+        <MonoChat />
+      </View>
+    )
+  }
+
+  return (
+    <View style={[styles.container, { backgroundColor: theme.backgroundColor }]}>
+      <View style={styles.content}>
+        <Text style={[styles.title, { color: theme.textColor }]}>Design Lab</Text>
+        <Text style={[styles.subtitle, { color: theme.mutedForegroundColor }]}>
+          Explore new design directions for the app
+        </Text>
+
+        {/* Aurora Card */}
+        <TouchableOpacity
+          style={styles.designCard}
+          onPress={() => setActiveDesign('aurora')}
+          activeOpacity={0.85}
+        >
+          <View style={styles.auroraCardBg}>
+            <View style={styles.auroraGlow1} />
+            <View style={styles.auroraGlow2} />
+          </View>
+          <View style={styles.cardContent}>
+            <Text style={styles.cardBadge}>Direction 1</Text>
+            <Text style={styles.cardTitle}>Aurora</Text>
+            <Text style={styles.cardDescription}>
+              Glassmorphic UI with gradient backgrounds, translucent panels, and ambient glow effects. Immersive and spatial.
+            </Text>
+            <View style={styles.cardTags}>
+              <View style={styles.tag}><Text style={styles.tagText}>Glassmorphism</Text></View>
+              <View style={styles.tag}><Text style={styles.tagText}>Gradients</Text></View>
+              <View style={styles.tag}><Text style={styles.tagText}>Dark</Text></View>
+            </View>
+          </View>
+        </TouchableOpacity>
+
+        {/* Mono Card */}
+        <TouchableOpacity
+          style={styles.designCard}
+          onPress={() => setActiveDesign('mono')}
+          activeOpacity={0.85}
+        >
+          <View style={styles.monoCardBg} />
+          <View style={styles.cardContent}>
+            <Text style={[styles.cardBadge, styles.cardBadgeDark]}>Direction 2</Text>
+            <Text style={[styles.cardTitle, styles.cardTitleDark]}>Mono</Text>
+            <Text style={[styles.cardDescription, styles.cardDescriptionDark]}>
+              Ultra-minimal editorial layout with bold typography, generous whitespace, and content-first hierarchy. Clean and focused.
+            </Text>
+            <View style={styles.cardTags}>
+              <View style={[styles.tag, styles.tagDark]}><Text style={[styles.tagText, styles.tagTextDark]}>Minimal</Text></View>
+              <View style={[styles.tag, styles.tagDark]}><Text style={[styles.tagText, styles.tagTextDark]}>Editorial</Text></View>
+              <View style={[styles.tag, styles.tagDark]}><Text style={[styles.tagText, styles.tagTextDark]}>Light</Text></View>
+            </View>
+          </View>
+        </TouchableOpacity>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    flex: 1,
+    paddingHorizontal: 20,
+    paddingTop: 70,
+  },
+  title: {
+    fontFamily: 'Geist-Bold',
+    fontSize: 28,
+    letterSpacing: -0.8,
+    marginBottom: 6,
+  },
+  subtitle: {
+    fontFamily: 'Geist-Regular',
+    fontSize: 15,
+    marginBottom: 32,
+  },
+  designCard: {
+    borderRadius: 20,
+    overflow: 'hidden',
+    marginBottom: 16,
+    height: 200,
+  },
+  auroraCardBg: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: '#0f0c29',
+  },
+  auroraGlow1: {
+    position: 'absolute',
+    top: -40,
+    right: -40,
+    width: 200,
+    height: 200,
+    borderRadius: 100,
+    backgroundColor: '#7c3aed',
+    opacity: 0.3,
+  },
+  auroraGlow2: {
+    position: 'absolute',
+    bottom: -30,
+    left: -30,
+    width: 160,
+    height: 160,
+    borderRadius: 80,
+    backgroundColor: '#06b6d4',
+    opacity: 0.2,
+  },
+  monoCardBg: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: '#fafafa',
+    borderWidth: 1,
+    borderColor: '#e5e5e5',
+    borderRadius: 20,
+  },
+  cardContent: {
+    flex: 1,
+    padding: 24,
+    justifyContent: 'flex-end',
+  },
+  cardBadge: {
+    fontFamily: 'Geist-Medium',
+    fontSize: 11,
+    color: 'rgba(255,255,255,0.6)',
+    textTransform: 'uppercase',
+    letterSpacing: 1,
+    marginBottom: 6,
+  },
+  cardBadgeDark: {
+    color: '#a3a3a3',
+  },
+  cardTitle: {
+    fontFamily: 'Geist-Bold',
+    fontSize: 24,
+    color: '#fff',
+    letterSpacing: -0.5,
+    marginBottom: 8,
+  },
+  cardTitleDark: {
+    color: '#0a0a0a',
+  },
+  cardDescription: {
+    fontFamily: 'Geist-Regular',
+    fontSize: 13,
+    color: 'rgba(255,255,255,0.7)',
+    lineHeight: 19,
+    marginBottom: 12,
+  },
+  cardDescriptionDark: {
+    color: '#525252',
+  },
+  cardTags: {
+    flexDirection: 'row',
+    gap: 6,
+  },
+  tag: {
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 12,
+    backgroundColor: 'rgba(255,255,255,0.12)',
+  },
+  tagDark: {
+    backgroundColor: '#f0f0f0',
+  },
+  tagText: {
+    fontFamily: 'Geist-Medium',
+    fontSize: 11,
+    color: 'rgba(255,255,255,0.8)',
+  },
+  tagTextDark: {
+    color: '#525252',
+  },
+  backButton: {
+    position: 'absolute',
+    top: 14,
+    left: 16,
+    zIndex: 200,
+    paddingVertical: 8,
+    paddingHorizontal: 14,
+    borderRadius: 20,
+    backgroundColor: 'rgba(255,255,255,0.1)',
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.2)',
+  },
+  backButtonLight: {
+    backgroundColor: 'rgba(0,0,0,0.05)',
+    borderColor: 'rgba(0,0,0,0.1)',
+  },
+  backButtonText: {
+    fontFamily: 'Geist-Medium',
+    fontSize: 13,
+    color: '#fff',
+  },
+  backButtonTextLight: {
+    color: '#0a0a0a',
+  },
+})
diff --git a/app/src/screens/prototypes/MonoChat.tsx b/app/src/screens/prototypes/MonoChat.tsx
new file mode 100644
index 00000000..a651f28d
--- /dev/null
+++ b/app/src/screens/prototypes/MonoChat.tsx
@@ -0,0 +1,555 @@
+import {
+  View,
+  Text,
+  KeyboardAvoidingView,
+  StyleSheet,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  TextInput,
+  ScrollView,
+  Dimensions,
+} from 'react-native'
+import { useState, useRef } from 'react'
+import Ionicons from '@expo/vector-icons/Ionicons'
+
+const { width } = Dimensions.get('window')
+
+const MONO_THEME = {
+  bg: '#fafafa',
+  surface: '#ffffff',
+  text: '#0a0a0a',
+  textSecondary: '#525252',
+  textMuted: '#a3a3a3',
+  accent: '#0a0a0a',
+  accentSoft: '#f5f5f5',
+  border: '#e5e5e5',
+  borderSubtle: '#f0f0f0',
+  success: '#22c55e',
+  font: 'Geist-Regular',
+  fontLight: 'Geist-Light',
+  fontMedium: 'Geist-Medium',
+  fontSemiBold: 'Geist-SemiBold',
+  fontBold: 'Geist-Bold',
+  fontBlack: 'Geist-Black',
+}
+
+const MOCK_CONVERSATIONS = [
+  { id: 1, title: 'WebSocket Hook', time: '2m ago', preview: 'Here\'s a clean approach...' },
+  { id: 2, title: 'API Architecture', time: '1h ago', preview: 'For a scalable REST API...' },
+  { id: 3, title: 'State Management', time: '3h ago', preview: 'Consider using Zustand...' },
+]
+
+const MOCK_MESSAGES = [
+  {
+    user: 'How should I structure a monorepo with shared packages between a React Native app and a Next.js web app?',
+    assistant: 'A Turborepo setup with pnpm workspaces works well here. Structure it like this:\n\n```\npackages/\n  ui/          → shared components\n  config/      → shared tsconfig, eslint\n  utils/       → shared utilities\napps/\n  mobile/      → React Native (Expo)\n  web/         → Next.js\n```\n\nKey decisions:\n\n1. Use `packages/ui` for truly cross-platform components (Text, Button, Layout primitives)\n2. Keep platform-specific code in each app\n3. Share business logic via `packages/utils`\n4. Use path aliases so imports read clean:\n   `import { Button } from \'@repo/ui\'`\n\nThe shared UI package should export React Native components that are aliased to web equivalents via `react-native-web` in the Next.js app.',
+  },
+  {
+    user: 'What about shared types and API clients?',
+  },
+]
+
+export function MonoChat() {
+  const [input, setInput] = useState('')
+  const [showSidebar, setShowSidebar] = useState(false)
+  const [selectedModel, setSelectedModel] = useState('Claude Sonnet 5')
+  const [showModelPicker, setShowModelPicker] = useState(false)
+  const scrollViewRef = useRef<ScrollView | null>(null)
+
+  const models = ['Claude Sonnet 5', 'GPT 5.2', 'Gemini', 'Claude Fable 5']
+
+  return (
+    <View style={styles.container}>
+      {/* Sidebar overlay */}
+      {showSidebar && (
+        <TouchableOpacity
+          style={styles.sidebarOverlay}
+          activeOpacity={1}
+          onPress={() => setShowSidebar(false)}
+        >
+          <TouchableWithoutFeedback onPress={() => {}}>
+          <View style={styles.sidebar}>
+            <View style={styles.sidebarHeader}>
+              <Text style={styles.sidebarTitle}>Conversations</Text>
+              <TouchableOpacity onPress={() => setShowSidebar(false)}>
+                <Ionicons name="close" size={20} color={MONO_THEME.text} />
+              </TouchableOpacity>
+            </View>
+            <TouchableOpacity style={styles.newChatButton}>
+              <Ionicons name="add" size={18} color={MONO_THEME.text} />
+              <Text style={styles.newChatText}>New conversation</Text>
+            </TouchableOpacity>
+            {MOCK_CONVERSATIONS.map((conv) => (
+              <TouchableOpacity key={conv.id} style={styles.conversationItem}>
+                <Text style={styles.conversationTitle}>{conv.title}</Text>
+                <Text style={styles.conversationPreview}>{conv.preview}</Text>
+                <Text style={styles.conversationTime}>{conv.time}</Text>
+              </TouchableOpacity>
+            ))}
+          </View>
+          </TouchableWithoutFeedback>
+        </TouchableOpacity>
+      )}
+
+      <KeyboardAvoidingView
+        behavior="padding"
+        style={styles.keyboardAvoid}
+        keyboardVerticalOffset={0}
+      >
+        {/* Minimal header */}
+        <View style={styles.header}>
+          <TouchableOpacity
+            style={styles.menuButton}
+            onPress={() => setShowSidebar(true)}
+          >
+            <Ionicons name="menu-outline" size={22} color={MONO_THEME.text} />
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            style={styles.modelSelector}
+            onPress={() => setShowModelPicker(!showModelPicker)}
+          >
+            <Text style={styles.modelSelectorText}>{selectedModel}</Text>
+            <Ionicons
+              name={showModelPicker ? 'chevron-up' : 'chevron-down'}
+              size={14}
+              color={MONO_THEME.textSecondary}
+            />
+          </TouchableOpacity>
+
+          <TouchableOpacity style={styles.menuButton}>
+            <Ionicons name="create-outline" size={20} color={MONO_THEME.text} />
+          </TouchableOpacity>
+        </View>
+
+        {/* Inline model picker */}
+        {showModelPicker && (
+          <View style={styles.modelPickerContainer}>
+            {models.map((model) => (
+              <TouchableOpacity
+                key={model}
+                style={[
+                  styles.modelPickerItem,
+                  selectedModel === model && styles.modelPickerItemActive
+                ]}
+                onPress={() => {
+                  setSelectedModel(model)
+                  setShowModelPicker(false)
+                }}
+              >
+                <Text style={[
+                  styles.modelPickerText,
+                  selectedModel === model && styles.modelPickerTextActive
+                ]}>
+                  {model}
+                </Text>
+                {selectedModel === model && (
+                  <Ionicons name="checkmark" size={16} color={MONO_THEME.text} />
+                )}
+              </TouchableOpacity>
+            ))}
+          </View>
+        )}
+
+        {/* Messages - editorial style */}
+        <ScrollView
+          ref={scrollViewRef}
+          style={styles.messagesContainer}
+          contentContainerStyle={styles.messagesContent}
+          showsVerticalScrollIndicator={false}
+        >
+          {MOCK_MESSAGES.map((msg, index) => (
+            <View key={index} style={styles.messageBlock}>
+              {/* User query - displayed as bold heading */}
+              <View style={styles.userBlock}>
+                <View style={styles.userAvatar}>
+                  <Text style={styles.userAvatarText}>N</Text>
+                </View>
+                <Text style={styles.userText}>{msg.user}</Text>
+              </View>
+
+              {/* Assistant response - clean typography */}
+              {msg.assistant && (
+                <View style={styles.assistantBlock}>
+                  <View style={styles.assistantHeader}>
+                    <View style={styles.assistantAvatar}>
+                      <Ionicons name="sparkles" size={12} color="#fff" />
+                    </View>
+                    <Text style={styles.assistantLabel}>{selectedModel}</Text>
+                  </View>
+                  <Text style={styles.assistantText}>{msg.assistant}</Text>
+                  <View style={styles.assistantFooter}>
+                    <TouchableOpacity style={styles.footerAction}>
+                      <Ionicons name="copy-outline" size={15} color={MONO_THEME.textMuted} />
+                      <Text style={styles.footerActionText}>Copy</Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity style={styles.footerAction}>
+                      <Ionicons name="refresh-outline" size={15} color={MONO_THEME.textMuted} />
+                      <Text style={styles.footerActionText}>Retry</Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity style={styles.footerAction}>
+                      <Ionicons name="share-outline" size={15} color={MONO_THEME.textMuted} />
+                      <Text style={styles.footerActionText}>Share</Text>
+                    </TouchableOpacity>
+                  </View>
+                </View>
+              )}
+
+              {/* Thinking indicator */}
+              {!msg.assistant && index === MOCK_MESSAGES.length - 1 && (
+                <View style={styles.assistantBlock}>
+                  <View style={styles.assistantHeader}>
+                    <View style={styles.assistantAvatar}>
+                      <Ionicons name="sparkles" size={12} color="#fff" />
+                    </View>
+                    <Text style={styles.thinkingText}>Thinking...</Text>
+                  </View>
+                  <View style={styles.thinkingBar}>
+                    <View style={styles.thinkingProgress} />
+                  </View>
+                </View>
+              )}
+
+              {/* Divider between message groups */}
+              {index < MOCK_MESSAGES.length - 1 && (
+                <View style={styles.divider} />
+              )}
+            </View>
+          ))}
+        </ScrollView>
+
+        {/* Input - clean floating bar */}
+        <View style={styles.inputArea}>
+          <View style={styles.inputContainer}>
+            <TextInput
+              style={styles.textInput}
+              placeholder="Message..."
+              placeholderTextColor={MONO_THEME.textMuted}
+              value={input}
+              onChangeText={setInput}
+              multiline
+            />
+            <View style={styles.inputActions}>
+              <TouchableOpacity style={styles.inputAction}>
+                <Ionicons name="attach-outline" size={20} color={MONO_THEME.textMuted} />
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={[
+                  styles.sendBtn,
+                  input.length > 0 && styles.sendBtnActive
+                ]}
+              >
+                <Ionicons
+                  name="arrow-up"
+                  size={16}
+                  color={input.length > 0 ? '#fff' : MONO_THEME.textMuted}
+                />
+              </TouchableOpacity>
+            </View>
+          </View>
+        </View>
+      </KeyboardAvoidingView>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: MONO_THEME.bg,
+  },
+  keyboardAvoid: {
+    flex: 1,
+  },
+  // Sidebar
+  sidebarOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    zIndex: 100,
+  },
+  sidebar: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    bottom: 0,
+    width: width * 0.78,
+    backgroundColor: MONO_THEME.surface,
+    paddingTop: 60,
+    paddingHorizontal: 20,
+    shadowColor: '#000',
+    shadowOffset: { width: 4, height: 0 },
+    shadowOpacity: 0.08,
+    shadowRadius: 20,
+    elevation: 10,
+  },
+  sidebarHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 24,
+  },
+  sidebarTitle: {
+    fontFamily: MONO_THEME.fontBold,
+    fontSize: 20,
+    color: MONO_THEME.text,
+    letterSpacing: -0.5,
+  },
+  newChatButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 12,
+    paddingHorizontal: 14,
+    borderRadius: 10,
+    backgroundColor: MONO_THEME.accentSoft,
+    marginBottom: 20,
+    gap: 8,
+  },
+  newChatText: {
+    fontFamily: MONO_THEME.fontMedium,
+    fontSize: 14,
+    color: MONO_THEME.text,
+  },
+  conversationItem: {
+    paddingVertical: 14,
+    borderBottomWidth: 1,
+    borderBottomColor: MONO_THEME.borderSubtle,
+  },
+  conversationTitle: {
+    fontFamily: MONO_THEME.fontSemiBold,
+    fontSize: 14,
+    color: MONO_THEME.text,
+    marginBottom: 3,
+  },
+  conversationPreview: {
+    fontFamily: MONO_THEME.font,
+    fontSize: 13,
+    color: MONO_THEME.textSecondary,
+    marginBottom: 4,
+  },
+  conversationTime: {
+    fontFamily: MONO_THEME.font,
+    fontSize: 11,
+    color: MONO_THEME.textMuted,
+  },
+  // Header
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingTop: 60,
+    paddingBottom: 12,
+    backgroundColor: MONO_THEME.surface,
+    borderBottomWidth: 1,
+    borderBottomColor: MONO_THEME.borderSubtle,
+  },
+  menuButton: {
+    padding: 8,
+  },
+  modelSelector: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    borderRadius: 8,
+    backgroundColor: MONO_THEME.accentSoft,
+    gap: 4,
+  },
+  modelSelectorText: {
+    fontFamily: MONO_THEME.fontSemiBold,
+    fontSize: 14,
+    color: MONO_THEME.text,
+  },
+  // Model picker
+  modelPickerContainer: {
+    backgroundColor: MONO_THEME.surface,
+    borderBottomWidth: 1,
+    borderBottomColor: MONO_THEME.border,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  modelPickerItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 12,
+    paddingHorizontal: 14,
+    borderRadius: 8,
+  },
+  modelPickerItemActive: {
+    backgroundColor: MONO_THEME.accentSoft,
+  },
+  modelPickerText: {
+    fontFamily: MONO_THEME.fontMedium,
+    fontSize: 14,
+    color: MONO_THEME.textSecondary,
+  },
+  modelPickerTextActive: {
+    color: MONO_THEME.text,
+    fontFamily: MONO_THEME.fontSemiBold,
+  },
+  // Messages
+  messagesContainer: {
+    flex: 1,
+  },
+  messagesContent: {
+    paddingHorizontal: 20,
+    paddingTop: 24,
+    paddingBottom: 20,
+  },
+  messageBlock: {
+    marginBottom: 8,
+  },
+  userBlock: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    marginBottom: 20,
+    gap: 12,
+  },
+  userAvatar: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: MONO_THEME.text,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 2,
+  },
+  userAvatarText: {
+    fontFamily: MONO_THEME.fontBold,
+    fontSize: 12,
+    color: '#fff',
+  },
+  userText: {
+    flex: 1,
+    fontFamily: MONO_THEME.fontSemiBold,
+    fontSize: 16,
+    color: MONO_THEME.text,
+    lineHeight: 24,
+    letterSpacing: -0.2,
+  },
+  assistantBlock: {
+    marginBottom: 16,
+    paddingLeft: 40,
+  },
+  assistantHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 10,
+    gap: 8,
+  },
+  assistantAvatar: {
+    width: 22,
+    height: 22,
+    borderRadius: 6,
+    backgroundColor: MONO_THEME.text,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  assistantLabel: {
+    fontFamily: MONO_THEME.fontMedium,
+    fontSize: 12,
+    color: MONO_THEME.textMuted,
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+  },
+  assistantText: {
+    fontFamily: MONO_THEME.font,
+    fontSize: 15,
+    color: MONO_THEME.text,
+    lineHeight: 24,
+    letterSpacing: -0.1,
+  },
+  assistantFooter: {
+    flexDirection: 'row',
+    marginTop: 14,
+    gap: 4,
+  },
+  footerAction: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 6,
+    paddingHorizontal: 10,
+    borderRadius: 6,
+    gap: 4,
+  },
+  footerActionText: {
+    fontFamily: MONO_THEME.fontMedium,
+    fontSize: 12,
+    color: MONO_THEME.textMuted,
+  },
+  thinkingText: {
+    fontFamily: MONO_THEME.fontMedium,
+    fontSize: 13,
+    color: MONO_THEME.textMuted,
+  },
+  thinkingBar: {
+    height: 3,
+    backgroundColor: MONO_THEME.borderSubtle,
+    borderRadius: 2,
+    marginTop: 4,
+    overflow: 'hidden',
+  },
+  thinkingProgress: {
+    width: '40%',
+    height: '100%',
+    backgroundColor: MONO_THEME.text,
+    borderRadius: 2,
+  },
+  divider: {
+    height: 1,
+    backgroundColor: MONO_THEME.borderSubtle,
+    marginVertical: 24,
+  },
+  // Input
+  inputArea: {
+    paddingHorizontal: 16,
+    paddingBottom: 24,
+    paddingTop: 8,
+    backgroundColor: MONO_THEME.bg,
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    backgroundColor: MONO_THEME.surface,
+    borderWidth: 1,
+    borderColor: MONO_THEME.border,
+    borderRadius: 16,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.04,
+    shadowRadius: 8,
+    elevation: 2,
+  },
+  textInput: {
+    flex: 1,
+    fontFamily: MONO_THEME.font,
+    fontSize: 15,
+    color: MONO_THEME.text,
+    paddingVertical: 4,
+    maxHeight: 100,
+    lineHeight: 22,
+  },
+  inputActions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    marginLeft: 8,
+  },
+  inputAction: {
+    padding: 4,
+  },
+  sendBtn: {
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    backgroundColor: MONO_THEME.borderSubtle,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  sendBtnActive: {
+    backgroundColor: MONO_THEME.text,
+  },
+})
diff --git a/app/src/screens/prototypes/index.ts b/app/src/screens/prototypes/index.ts
new file mode 100644
index 00000000..19e97108
--- /dev/null
+++ b/app/src/screens/prototypes/index.ts
@@ -0,0 +1,3 @@
+export { AuroraChat } from './AuroraChat'
+export { MonoChat } from './MonoChat'
+export { DesignLab } from './DesignLab'
diff --git a/app/src/theme.ts b/app/src/theme.ts
index 4bf4b103..82930902 100644
--- a/app/src/theme.ts
+++ b/app/src/theme.ts
@@ -127,6 +127,32 @@ const pink = {
   borderColor: 'rgba(233, 30, 140, .2)',
 }
 
+const aurora = {
+  ...darkTheme,
+  name: 'Aurora',
+  label: 'aurora',
+  backgroundColor: '#0f0c29',
+  tintColor: '#7c3aed',
+  tintTextColor: colors.white,
+  tabBarActiveTintColor: '#7c3aed',
+  tabBarInactiveTintColor: 'rgba(124, 58, 237, .4)',
+  borderColor: 'rgba(124, 58, 237, .25)',
+  secondaryBackgroundColor: '#1a1040',
+}
+
+const mono = {
+  ...lightTheme,
+  name: 'Mono',
+  label: 'mono',
+  backgroundColor: '#fafafa',
+  tintColor: '#0a0a0a',
+  tintTextColor: colors.white,
+  tabBarActiveTintColor: '#0a0a0a',
+  tabBarInactiveTintColor: '#a3a3a3',
+  borderColor: '#e5e5e5',
+  secondaryBackgroundColor: '#f5f5f5',
+}
+
 export {
-  lightTheme, darkTheme, hackerNews, miami, vercel, cyberpunk, matrix, pink
+  lightTheme, darkTheme, hackerNews, miami, vercel, cyberpunk, matrix, pink, aurora, mono
 }